diff --git a/_build/resolvers/resolver_01_setup.php b/_build/resolvers/resolver_01_setup.php
index c69cbde92..f628bf9f4 100644
--- a/_build/resolvers/resolver_01_setup.php
+++ b/_build/resolvers/resolver_01_setup.php
@@ -19,7 +19,7 @@
         'service_url' => 'modstore.pro',
     ],
     'VueTools' => [
-        'version' => '1.0.0-beta1',
+        'version' => '1.1.3-pl',
         'service_url' => 'modstore.pro',
     ],
 ];
diff --git a/assets/components/minishop3/css/mgr/main.css b/assets/components/minishop3/css/mgr/main.css
index 1aa2a2c09..501821e6e 100644
--- a/assets/components/minishop3/css/mgr/main.css
+++ b/assets/components/minishop3/css/mgr/main.css
@@ -494,6 +494,8 @@ a.x-menu-item .x-menu-item-text .icon {
     box-sizing: border-box !important;
 }
 
-.p-select-filter {
-    width: 90% !important;
+/* Select filter must fill IconField (was 90% — left a dead strip and misaligned search icon). */
+.p-select-overlay .p-select-filter,
+.p-multiselect-overlay .p-multiselect-filter {
+    width: 100% !important;
 }
diff --git a/assets/components/minishop3/js/mgr/category/update.js b/assets/components/minishop3/js/mgr/category/update.js
index 5506d0ace..ef12921d0 100644
--- a/assets/components/minishop3/js/mgr/category/update.js
+++ b/assets/components/minishop3/js/mgr/category/update.js
@@ -172,12 +172,17 @@ Ext.extend(ms3.panel.UpdateCategory, ms3.panel.Category, {
         return [{
             layout: 'form',
             items: [items, {
-                html: String.format('<h3>{0}</h3>', _('ms3_product_options')),
-                style: 'margin-top: 20px',
+                html: String.format(
+                    '<h3 class="ms3-category-options-heading">{0}</h3>',
+                    _('ms3_product_options')
+                ),
+                // Theme panel step (15px) above the section; heading→toolbar gap via CSS.
+                style: 'margin-top: 15px',
                 border: false,
             }, {
                 xtype: 'container',
-                cls: 'main-wrapper',
+                // Avoid .main-wrapper (15px pad) stacking on h3 margin — doubles title→toolbar gap.
+                style: 'padding: 0',
                 html: '<div id="ms3-vue-category-options" class="vueApp" data-category-id="' + categoryId + '"></div>',
             }]
         }];
diff --git a/core/components/minishop3/controllers/category/update.class.php b/core/components/minishop3/controllers/category/update.class.php
index caa64694e..d3f6126b3 100644
--- a/core/components/minishop3/controllers/category/update.class.php
+++ b/core/components/minishop3/controllers/category/update.class.php
@@ -60,6 +60,7 @@ public function loadCustomCssJs()
 
         // Vue modules with VueTools dependency check
         $this->addCss($assetsUrl . 'css/mgr/vue-dist/primeicons.min.css');
+        $this->addCss($assetsUrl . 'css/mgr/vue-dist/ActionsColumn.min.css');
         $this->addCss($assetsUrl . 'css/mgr/vue-dist/category-products.min.css');
         $this->addCss($assetsUrl . 'css/mgr/vue-dist/category-options.min.css');
         $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/category-products.min.js');
diff --git a/core/components/minishop3/controllers/manager.class.php b/core/components/minishop3/controllers/manager.class.php
index 33e36f1ac..6ab29d221 100644
--- a/core/components/minishop3/controllers/manager.class.php
+++ b/core/components/minishop3/controllers/manager.class.php
@@ -89,8 +89,8 @@ public function addVueModule($src)
             self::$vueCoreCheckRegistered = true;
         }
 
-        // Add version to URL
-        $src = $src . '?v=' . $this->ms3->version;
+        require_once __DIR__ . '/vue_module_cache_bust.inc.php';
+        $src = ms3_vue_module_cache_bust_url($this->modx, $src, (string) $this->ms3->version);
 
         // Register the module (will be blocked by check if VueCore not installed)
         $this->modx->regClientStartupHTMLBlock(
diff --git a/core/components/minishop3/controllers/resource_create.class.php b/core/components/minishop3/controllers/resource_create.class.php
index 85f846302..1c98bdfd4 100644
--- a/core/components/minishop3/controllers/resource_create.class.php
+++ b/core/components/minishop3/controllers/resource_create.class.php
@@ -65,8 +65,8 @@ public function addVueModule($src)
             self::$vueCoreCheckRegistered = true;
         }
 
-        // Add version to URL
-        $src = $src . '?v=' . $this->ms3->version;
+        require_once __DIR__ . '/vue_module_cache_bust.inc.php';
+        $src = ms3_vue_module_cache_bust_url($this->modx, $src, (string) $this->ms3->version);
 
         // Register the module (will be blocked by check if VueCore not installed)
         $this->modx->regClientStartupHTMLBlock(
diff --git a/core/components/minishop3/controllers/resource_update.class.php b/core/components/minishop3/controllers/resource_update.class.php
index 2e81d6782..80b8341b5 100644
--- a/core/components/minishop3/controllers/resource_update.class.php
+++ b/core/components/minishop3/controllers/resource_update.class.php
@@ -69,8 +69,8 @@ public function addVueModule($src)
             self::$vueCoreCheckRegistered = true;
         }
 
-        // Add version to URL
-        $src = $src . '?v=' . $this->ms3->version;
+        require_once __DIR__ . '/vue_module_cache_bust.inc.php';
+        $src = ms3_vue_module_cache_bust_url($this->modx, $src, (string) $this->ms3->version);
 
         // Register the module (will be blocked by check if VueCore not installed)
         $this->modx->regClientStartupHTMLBlock(
diff --git a/core/components/minishop3/controllers/vue_module_cache_bust.inc.php b/core/components/minishop3/controllers/vue_module_cache_bust.inc.php
new file mode 100644
index 000000000..a564c6a1d
--- /dev/null
+++ b/core/components/minishop3/controllers/vue_module_cache_bust.inc.php
@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * Append cache-bust query to a Vue module URL.
+ *
+ * Package version alone does not change when an Extra rebuilds vue-dist, so
+ * HTTP caches keep stale plugin tabs (Aura theme, size=small buttons, etc.).
+ * When the URL maps under assets_path, filemtime is mixed into `v=`.
+ */
+function ms3_vue_module_cache_bust_url($modx, string $src, string $packageVersion): string
+{
+    $version = $packageVersion;
+    $path = parse_url($src, PHP_URL_PATH);
+    if (is_string($path) && $path !== '') {
+        $assetsUrl = rtrim((string) $modx->getOption('assets_url'), '/');
+        $assetsPath = rtrim((string) $modx->getOption('assets_path'), '/');
+        $fsPath = null;
+        if ($assetsUrl !== '' && str_starts_with($path, $assetsUrl)) {
+            $fsPath = $assetsPath . substr($path, strlen($assetsUrl));
+        } elseif (defined('MODX_ASSETS_PATH') && str_starts_with($path, '/assets/')) {
+            $fsPath = rtrim(MODX_ASSETS_PATH, '/') . substr($path, strlen('/assets'));
+        }
+        if (is_string($fsPath) && is_file($fsPath)) {
+            $version .= '.' . filemtime($fsPath);
+        }
+    }
+
+    $separator = str_contains($src, '?') ? '&' : '?';
+
+    return $src . $separator . 'v=' . rawurlencode($version);
+}
diff --git a/core/components/minishop3/lexicon/en/help.inc.php b/core/components/minishop3/lexicon/en/help.inc.php
index a3c07dbaa..45707e442 100644
--- a/core/components/minishop3/lexicon/en/help.inc.php
+++ b/core/components/minishop3/lexicon/en/help.inc.php
@@ -11,7 +11,7 @@
 $_lang['ms3_components_href'] = 'https://modstore.pro/';
 $_lang['ms3_components_text'] = 'Paid and free addons';
 $_lang['ms3_components_title'] = 'Addons';
-$_lang['ms3_demo_href'] = '#';
+$_lang['ms3_demo_href'] = 'https://minishop3.ru/';
 $_lang['ms3_demo_text'] = 'Go to demo site';
 $_lang['ms3_demo_title'] = 'Demo';
 $_lang['ms3_docs_href'] = 'https://docs.modx.pro/components/minishop3/';
@@ -24,9 +24,11 @@
 $_lang['ms3_github_text'] = 'Found an issue? Report it!';
 $_lang['ms3_github_title'] = 'github.com';
 $_lang['ms3_help'] = 'Help and support';
+$_lang['ms3_help_nav_title'] = 'Manager sections';
+$_lang['ms3_help_resources_title'] = 'Resources';
 $_lang['ms3_help_text'] = 'MiniShop3 - the most flexible and fast e-commerce component for MODX3.';
-$_lang['ms3_help_text_support'] = '<strong>You can support MiniShop3 financially:</strong>
-<br>- All details <a href="https://modx.pro/about" target="_blank">here</a>';
+$_lang['ms3_help_text_support'] = '<strong>Support MiniShop3 development</strong>
+<br>Payment details are on the <a href="https://modx.pro/about" target="_blank" rel="noopener noreferrer">about page</a>.';
 $_lang['ms3_lexicons_href'] = '?a=workspaces/lexicon&ns=minishop3';
 $_lang['ms3_lexicons_text'] = 'Lexicon management';
 $_lang['ms3_localization_href'] = 'https://crowdin.com/project/minishop3-ecommerce';
@@ -41,6 +43,6 @@
 $_lang['ms3_settings_href'] = '?a=mgr/settings&namespace=minishop3';
 $_lang['ms3_settings_text'] = 'Settings';
 $_lang['ms3_sys_settings_href'] = '?a=system/settings&ns=minishop3';
-$_lang['ms3_sys_settings_text'] = 'System settings & Events';
+$_lang['ms3_sys_settings_text'] = 'System settings';
 $_lang['ms3_utilities_href'] = '?a=mgr/utilities&namespace=minishop3';
 $_lang['ms3_utilities_text'] = 'Utilities';
diff --git a/core/components/minishop3/lexicon/en/product.inc.php b/core/components/minishop3/lexicon/en/product.inc.php
index 8adb34a43..13f030f8a 100644
--- a/core/components/minishop3/lexicon/en/product.inc.php
+++ b/core/components/minishop3/lexicon/en/product.inc.php
@@ -145,6 +145,7 @@
 $_lang['ms3_gallery_file_source'] = 'File Source';
 
 $_lang['ms3_gallery_button_upload'] = 'Select Files';
+$_lang['ms3_gallery_actions'] = 'Gallery actions';
 
 $_lang['ms3_gallery_file_show'] = 'Open in New Window';
 $_lang['ms3_gallery_file_update'] = 'Edit Properties';
@@ -184,6 +185,7 @@
 $_lang['ms3_gallery_uppy_note_max_size'] = 'Maximum size: %{maxSize}';
 $_lang['ms3_gallery_uppy_back'] = 'Back';
 $_lang['ms3_gallery_uppy_add_more_files'] = 'Add more files';
+$_lang['ms3_gallery_uppy_adding_more_files'] = 'Adding more files';
 $_lang['ms3_gallery_uppy_drop_hint'] = 'Drop your files here';
 $_lang['ms3_gallery_uppy_error'] = 'Error';
 $_lang['ms3_gallery_uppy_failed_to_upload'] = 'Failed to upload %{file}';
@@ -191,6 +193,18 @@
 $_lang['ms3_gallery_uppy_no_files_found'] = 'You have no files or folders here';
 $_lang['ms3_gallery_uppy_pause_upload'] = 'Pause upload';
 $_lang['ms3_gallery_uppy_resume_upload'] = 'Resume upload';
+$_lang['ms3_gallery_uppy_editing'] = 'Editing image';
+$_lang['ms3_gallery_uppy_save'] = 'Save';
+$_lang['ms3_gallery_uppy_finish_editing'] = 'Finish editing';
+$_lang['ms3_gallery_uppy_save_changes'] = 'Save changes';
+$_lang['ms3_gallery_uppy_revert'] = 'Reset';
+$_lang['ms3_gallery_uppy_rotate'] = 'Rotate 90°';
+$_lang['ms3_gallery_uppy_zoom_in'] = 'Zoom in';
+$_lang['ms3_gallery_uppy_zoom_out'] = 'Zoom out';
+$_lang['ms3_gallery_uppy_flip_horizontal'] = 'Flip horizontally';
+$_lang['ms3_gallery_uppy_crop_square'] = 'Crop square';
+$_lang['ms3_gallery_uppy_crop_landscape'] = 'Crop landscape (16:9)';
+$_lang['ms3_gallery_uppy_crop_portrait'] = 'Crop portrait (9:16)';
 
 $_lang['ms3_gallery_search_placeholder'] = 'Search files...';
 $_lang['ms3_gallery_empty_text'] = 'No images yet. Upload files using the area above.';
diff --git a/core/components/minishop3/lexicon/en/vue.inc.php b/core/components/minishop3/lexicon/en/vue.inc.php
index d93550177..e0abac805 100644
--- a/core/components/minishop3/lexicon/en/vue.inc.php
+++ b/core/components/minishop3/lexicon/en/vue.inc.php
@@ -8,6 +8,7 @@
 $_lang['ms3_vue_product_fields_title'] = 'Product Fields (Admin)';
 $_lang['ms3_vue_product_fields_description'] = 'Here you can configure which fields are displayed on the "Product Data" tab when editing a product';
 $_lang['ms3_vue_product_properties'] = 'Product Properties';
+$_lang['ms3_product_links_empty'] = 'No links yet. Create the first one.';
 
 // Grid Fields Config Widget
 $_lang['grid_fields_config_title'] = 'Grid Configuration';
@@ -640,6 +641,19 @@
 $_lang['log_action'] = 'Action';
 $_lang['log_user'] = 'User';
 $_lang['log_entry'] = 'Entry';
+$_lang['log_empty'] = 'No order history yet';
+$_lang['log_action_status'] = 'Status';
+$_lang['log_action_field'] = 'Field';
+$_lang['log_action_address'] = 'Address';
+$_lang['log_action_products'] = 'Products';
+$_lang['log_action_payment'] = 'Payment';
+$_lang['log_entry_status_id'] = 'Status ID: {id}';
+$_lang['log_entry_fields'] = 'Fields: {fields}';
+$_lang['log_entry_address'] = 'Address: {fields}';
+$_lang['log_entry_product_op_add'] = 'Added';
+$_lang['log_entry_product_op_remove'] = 'Removed';
+$_lang['log_entry_product_op_update'] = 'Updated';
+$_lang['log_entry_product_op_unknown'] = 'Change';
 $_lang['address_first_name'] = 'First Name';
 $_lang['address_last_name'] = 'Last Name';
 $_lang['address_phone'] = 'Phone';
@@ -1128,6 +1142,10 @@
 $_lang['ms3_vendor_email'] = 'Email';
 $_lang['ms3_vendor_description'] = 'Description';
 $_lang['ms3_vendor_properties'] = 'Properties';
+$_lang['ms3_vendor_select'] = 'Select vendor';
+$_lang['ms3_vendor_search'] = 'Search vendor…';
+$_lang['ms3_vendor_empty'] = 'No vendors found. Add a vendor in component settings.';
+$_lang['ms3_vendor_not_found'] = 'Vendor not found';
 
 // Vendor sections
 $_lang['ms3_section_vendor_info'] = 'Information';
diff --git a/core/components/minishop3/lexicon/ru/help.inc.php b/core/components/minishop3/lexicon/ru/help.inc.php
index 55143ba58..2d1ac70a2 100644
--- a/core/components/minishop3/lexicon/ru/help.inc.php
+++ b/core/components/minishop3/lexicon/ru/help.inc.php
@@ -11,7 +11,7 @@
 $_lang['ms3_components_href'] = 'https://modstore.pro/';
 $_lang['ms3_components_text'] = 'Платные и бесплатные дополнения';
 $_lang['ms3_components_title'] = 'Дополнения';
-$_lang['ms3_demo_href'] = '#';
+$_lang['ms3_demo_href'] = 'https://minishop3.ru/';
 $_lang['ms3_demo_text'] = 'Перейти на демо-сайт';
 $_lang['ms3_demo_title'] = 'Демо';
 $_lang['ms3_docs_href'] = 'https://docs.modx.pro/components/minishop3/';
@@ -24,9 +24,11 @@
 $_lang['ms3_github_text'] = 'Нашли проблему? Сообщите об этом!';
 $_lang['ms3_github_title'] = 'github.com';
 $_lang['ms3_help'] = 'Помощь и поддержка';
+$_lang['ms3_help_nav_title'] = 'Разделы менеджера';
+$_lang['ms3_help_resources_title'] = 'Ресурсы';
 $_lang['ms3_help_text'] = 'MiniShop3 - самый гибкий и быстрый компонент интернет-магазина для MODX3.';
-$_lang['ms3_help_text_support'] = '<strong>Вы можете поддержать MiniShop3 финансово:</strong>
-<br>- Все реквизиты <a href="https://modx.pro/about" target="_blank">здесь</a>';
+$_lang['ms3_help_text_support'] = '<strong>Поддержите разработку MiniShop3</strong>
+<br>Реквизиты для перевода — на <a href="https://modx.pro/about" target="_blank" rel="noopener noreferrer">странице о проекте</a>.';
 $_lang['ms3_lexicons_href'] = '?a=workspaces/lexicon&ns=minishop3';
 $_lang['ms3_lexicons_text'] = 'Управление словарями';
 $_lang['ms3_localization_href'] = 'https://crowdin.com/project/minishop3-ecommerce';
@@ -41,6 +43,6 @@
 $_lang['ms3_settings_href'] = '?a=mgr/settings&namespace=minishop3';
 $_lang['ms3_settings_text'] = 'Настройки';
 $_lang['ms3_sys_settings_href'] = '?a=system/settings&ns=minishop3';
-$_lang['ms3_sys_settings_text'] = 'Системные настройки & События';
+$_lang['ms3_sys_settings_text'] = 'Системные настройки';
 $_lang['ms3_utilities_href'] = '?a=mgr/utilities&namespace=minishop3';
 $_lang['ms3_utilities_text'] = 'Утилиты';
diff --git a/core/components/minishop3/lexicon/ru/product.inc.php b/core/components/minishop3/lexicon/ru/product.inc.php
index 00303ec0b..f9cbc2a7b 100644
--- a/core/components/minishop3/lexicon/ru/product.inc.php
+++ b/core/components/minishop3/lexicon/ru/product.inc.php
@@ -145,6 +145,7 @@
 $_lang['ms3_gallery_file_source'] = 'Источник файла';
 
 $_lang['ms3_gallery_button_upload'] = 'Выбрать файлы';
+$_lang['ms3_gallery_actions'] = 'Действия галереи';
 
 $_lang['ms3_gallery_file_show'] = 'Открыть в новом окне';
 $_lang['ms3_gallery_file_update'] = 'Изменить свойства';
@@ -184,6 +185,7 @@
 $_lang['ms3_gallery_uppy_note_max_size'] = 'Макс. размер: %{maxSize}';
 $_lang['ms3_gallery_uppy_back'] = 'Назад';
 $_lang['ms3_gallery_uppy_add_more_files'] = 'Добавить ещё файлы';
+$_lang['ms3_gallery_uppy_adding_more_files'] = 'Добавление файлов';
 $_lang['ms3_gallery_uppy_drop_hint'] = 'Перетащите файлы сюда';
 $_lang['ms3_gallery_uppy_error'] = 'Ошибка';
 $_lang['ms3_gallery_uppy_failed_to_upload'] = 'Не удалось загрузить %{file}';
@@ -191,6 +193,18 @@
 $_lang['ms3_gallery_uppy_no_files_found'] = 'У вас нет файлов или папок';
 $_lang['ms3_gallery_uppy_pause_upload'] = 'Приостановить загрузку';
 $_lang['ms3_gallery_uppy_resume_upload'] = 'Возобновить загрузку';
+$_lang['ms3_gallery_uppy_editing'] = 'Редактирование изображения';
+$_lang['ms3_gallery_uppy_save'] = 'Сохранить';
+$_lang['ms3_gallery_uppy_finish_editing'] = 'Завершить редактирование';
+$_lang['ms3_gallery_uppy_save_changes'] = 'Сохранить изменения';
+$_lang['ms3_gallery_uppy_revert'] = 'Сбросить';
+$_lang['ms3_gallery_uppy_rotate'] = 'Повернуть на 90°';
+$_lang['ms3_gallery_uppy_zoom_in'] = 'Увеличить';
+$_lang['ms3_gallery_uppy_zoom_out'] = 'Уменьшить';
+$_lang['ms3_gallery_uppy_flip_horizontal'] = 'Отразить по горизонтали';
+$_lang['ms3_gallery_uppy_crop_square'] = 'Квадратная обрезка';
+$_lang['ms3_gallery_uppy_crop_landscape'] = 'Альбомная обрезка (16:9)';
+$_lang['ms3_gallery_uppy_crop_portrait'] = 'Портретная обрезка (9:16)';
 
 $_lang['ms3_gallery_search_placeholder'] = 'Поиск файлов...';
 $_lang['ms3_gallery_empty_text'] = 'Файлов нет. Загрузите через область выше.';
diff --git a/core/components/minishop3/lexicon/ru/vue.inc.php b/core/components/minishop3/lexicon/ru/vue.inc.php
index 01da74b1b..c9ee83ec4 100644
--- a/core/components/minishop3/lexicon/ru/vue.inc.php
+++ b/core/components/minishop3/lexicon/ru/vue.inc.php
@@ -8,6 +8,7 @@
 $_lang['ms3_vue_product_fields_title'] = 'Поля товара (админка)';
 $_lang['ms3_vue_product_fields_description'] = 'Здесь вы можете настроить, какие поля отображаются на вкладке "Данные товара" при редактировании товара';
 $_lang['ms3_vue_product_properties'] = 'Свойства товара';
+$_lang['ms3_product_links_empty'] = 'Связей пока нет. Создайте первую.';
 
 // Grid Fields Config Widget
 $_lang['grid_fields_config_title'] = 'Конфигурация гридов';
@@ -639,6 +640,19 @@
 $_lang['log_action'] = 'Действие';
 $_lang['log_user'] = 'Пользователь';
 $_lang['log_entry'] = 'Запись';
+$_lang['log_empty'] = 'История заказа пуста';
+$_lang['log_action_status'] = 'Статус';
+$_lang['log_action_field'] = 'Поле';
+$_lang['log_action_address'] = 'Адрес';
+$_lang['log_action_products'] = 'Товары';
+$_lang['log_action_payment'] = 'Оплата';
+$_lang['log_entry_status_id'] = 'Статус ID: {id}';
+$_lang['log_entry_fields'] = 'Поля: {fields}';
+$_lang['log_entry_address'] = 'Адрес: {fields}';
+$_lang['log_entry_product_op_add'] = 'Добавлен';
+$_lang['log_entry_product_op_remove'] = 'Удалён';
+$_lang['log_entry_product_op_update'] = 'Изменён';
+$_lang['log_entry_product_op_unknown'] = 'Изменение';
 $_lang['address_first_name'] = 'Имя';
 $_lang['address_last_name'] = 'Фамилия';
 $_lang['address_phone'] = 'Телефон';
@@ -1130,6 +1144,10 @@
 $_lang['ms3_vendor_email'] = 'Email';
 $_lang['ms3_vendor_description'] = 'Описание';
 $_lang['ms3_vendor_properties'] = 'Свойства';
+$_lang['ms3_vendor_select'] = 'Выберите производителя';
+$_lang['ms3_vendor_search'] = 'Поиск производителя…';
+$_lang['ms3_vendor_empty'] = 'Производители не найдены. Добавьте производителя в настройках компонента.';
+$_lang['ms3_vendor_not_found'] = 'Производитель не найден';
 
 // Vendor sections
 $_lang['ms3_section_vendor_info'] = 'Информация';
diff --git a/core/components/minishop3/src/Controllers/Api/Manager/CategoryProductsController.php b/core/components/minishop3/src/Controllers/Api/Manager/CategoryProductsController.php
index 7a8858bc3..7845d9cf3 100644
--- a/core/components/minishop3/src/Controllers/Api/Manager/CategoryProductsController.php
+++ b/core/components/minishop3/src/Controllers/Api/Manager/CategoryProductsController.php
@@ -773,8 +773,8 @@ protected function getDefaultFilters(): array
                 'label' => 'published',
                 'placeholder' => 'all',
                 'options' => [
-                    ['label' => 'Да', 'value' => 1],
-                    ['label' => 'Нет', 'value' => 0],
+                    ['label' => 'yes', 'value' => 1],
+                    ['label' => 'no', 'value' => 0],
                 ],
                 'width' => '120px',
                 'position' => 20,
diff --git a/core/components/minishop3/templates/default/customers.tpl b/core/components/minishop3/templates/default/customers.tpl
index b1de06d4d..18d54dca9 100644
--- a/core/components/minishop3/templates/default/customers.tpl
+++ b/core/components/minishop3/templates/default/customers.tpl
@@ -1,3 +1,3 @@
 <div class="x-panel-body">
-    <div id="ms3-customers-vue-wrapper" class="vueApp" style="padding: 20px; height: 100%;"></div>
+    <div id="ms3-customers-vue-wrapper" class="vueApp" style="height: 100%;"></div>
 </div>
diff --git a/core/components/minishop3/templates/default/notifications.tpl b/core/components/minishop3/templates/default/notifications.tpl
index d552891fd..5a283354e 100644
--- a/core/components/minishop3/templates/default/notifications.tpl
+++ b/core/components/minishop3/templates/default/notifications.tpl
@@ -1,3 +1,3 @@
 <div class="x-panel-body">
-    <div id="ms3-notifications-vue-wrapper" class="vueApp" style="padding: 20px; height: 100%;"></div>
+    <div id="ms3-notifications-vue-wrapper" class="vueApp" style="height: 100%;"></div>
 </div>
diff --git a/core/components/minishop3/templates/default/order.tpl b/core/components/minishop3/templates/default/order.tpl
index e8729dc17..7574a7f29 100644
--- a/core/components/minishop3/templates/default/order.tpl
+++ b/core/components/minishop3/templates/default/order.tpl
@@ -1,3 +1,3 @@
 <div class="x-panel-body">
-    <div id="ms3-order-vue-wrapper" class="vueApp" style="padding: 20px; height: 100%;"></div>
+    <div id="ms3-order-vue-wrapper" class="vueApp" style="height: 100%;"></div>
 </div>
diff --git a/core/components/minishop3/templates/default/orders.tpl b/core/components/minishop3/templates/default/orders.tpl
index d1cbebc07..38933ec90 100644
--- a/core/components/minishop3/templates/default/orders.tpl
+++ b/core/components/minishop3/templates/default/orders.tpl
@@ -1,3 +1,3 @@
 <div class="x-panel-body">
-    <div id="ms3-orders-vue-wrapper" class="vueApp" style="padding: 20px; height: 100%;"></div>
+    <div id="ms3-orders-vue-wrapper" class="vueApp" style="height: 100%;"></div>
 </div>
diff --git a/vueManager/src/components/ActionsColumn.vue b/vueManager/src/components/ActionsColumn.vue
index 213f0974c..ac35f5af2 100644
--- a/vueManager/src/components/ActionsColumn.vue
+++ b/vueManager/src/components/ActionsColumn.vue
@@ -36,7 +36,7 @@
  * }
  */
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
+import { Button } from 'primevue'
 import { computed } from 'vue'
 
 import { useActions } from '../composables/useActions.js'
@@ -96,7 +96,7 @@ const props = defineProps({
    */
   size: {
     type: String,
-    default: 'small',
+    default: 'normal',
   },
 })
 
@@ -235,7 +235,7 @@ function getButtonClasses() {
 </script>
 
 <template>
-  <div class="actions-column">
+  <div class="actions-column row-actions">
     <Button
       v-for="action in processedActions"
       :key="action.name"
@@ -253,17 +253,16 @@ function getButtonClasses() {
 
 <style scoped>
 .actions-column {
-  display: flex;
+  display: inline-flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
   gap: 0.25rem;
   align-items: center;
-  flex-wrap: nowrap;
+  white-space: nowrap;
 }
 
 .actions-column :deep(.p-button) {
+  flex-shrink: 0;
   padding: 0.25rem 0.5rem;
 }
-
-.actions-column :deep(.p-button-sm) {
-  font-size: 0.875rem;
-}
 </style>
diff --git a/vueManager/src/components/ActionsEditor.vue b/vueManager/src/components/ActionsEditor.vue
index 775f669d3..a741b31a4 100644
--- a/vueManager/src/components/ActionsEditor.vue
+++ b/vueManager/src/components/ActionsEditor.vue
@@ -5,13 +5,7 @@
  * Allows adding, removing and editing actions in grid column
  */
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
+import { Button, Checkbox, Column, DataTable, Dialog, InputText, Select } from 'primevue'
 import { computed, ref, watch } from 'vue'
 
 import actionRegistry from '../actionRegistry.js'
@@ -223,22 +217,19 @@ function closeDialog() {
         <template #body="{ data, index }">
           <Button
             icon="pi pi-arrow-up"
-            size="small"
             text
             :disabled="index === 0"
             @click="moveUp(index)"
           />
           <Button
             icon="pi pi-arrow-down"
-            size="small"
             text
             :disabled="index === localActions.length - 1"
             @click="moveDown(index)"
           />
-          <Button icon="pi pi-pencil" size="small" text @click="openEditDialog(data, index)" />
+          <Button icon="pi pi-pencil" text @click="openEditDialog(data, index)" />
           <Button
             icon="pi pi-trash"
-            size="small"
             text
             severity="danger"
             @click="removeAction(index)"
@@ -248,7 +239,7 @@ function closeDialog() {
     </DataTable>
 
     <!-- Add button -->
-    <Button :label="_('add_action')" icon="pi pi-plus" size="small" @click="openAddDialog" />
+    <Button :label="_('add_action')" icon="pi pi-plus" @click="openAddDialog" />
 
     <!-- Action edit dialog -->
     <Dialog
diff --git a/vueManager/src/components/ApiTest.vue b/vueManager/src/components/ApiTest.vue
index 0ab791bd7..395b5e49b 100644
--- a/vueManager/src/components/ApiTest.vue
+++ b/vueManager/src/components/ApiTest.vue
@@ -2,21 +2,7 @@
 import { useApi } from '@vuetools/useApi'
 import { useModx } from '@vuetools/useModx'
 import { usePermission } from '@vuetools/usePermission'
-import Badge from 'primevue/badge'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Chip from 'primevue/chip'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
-import Divider from 'primevue/divider'
-import Message from 'primevue/message'
-import Panel from 'primevue/panel'
-import ProgressSpinner from 'primevue/progressspinner'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
+import { Badge, Button, Card, Chip, Column, DataTable, Divider, Message, Panel, ProgressSpinner, Tab, TabList, TabPanel, TabPanels, Tabs } from 'primevue'
 import { computed, ref } from 'vue'
 
 const { get, loading, error, clearError } = useApi()
@@ -196,8 +182,7 @@ const testPostRequest = async () => {
                   <Button
                     label="Execute Health Check"
                     icon="pi pi-heart"
-                    :loading="loading"
-                    class="mt-3"
+                    :loading="loading" class="mt-3"
                     @click="testHealthCheck"
                   />
 
@@ -222,8 +207,7 @@ const testPostRequest = async () => {
                   <Button
                     label="Execute Authorized Request"
                     icon="pi pi-lock"
-                    :loading="loading"
-                    class="mt-3"
+                    :loading="loading" class="mt-3"
                     @click="testAuthRequest"
                   />
 
@@ -248,8 +232,7 @@ const testPostRequest = async () => {
                   <Button
                     label="Execute Echo Request"
                     icon="pi pi-send"
-                    :loading="loading"
-                    class="mt-3"
+                    :loading="loading" class="mt-3"
                     @click="testPostRequest"
                   />
 
diff --git a/vueManager/src/components/AutocompleteCombo.vue b/vueManager/src/components/AutocompleteCombo.vue
index 60c90e914..c61eea190 100644
--- a/vueManager/src/components/AutocompleteCombo.vue
+++ b/vueManager/src/components/AutocompleteCombo.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import AutoComplete from 'primevue/autocomplete'
+import { AutoComplete } from 'primevue'
 import { onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
diff --git a/vueManager/src/components/CategoryOptionsTab.vue b/vueManager/src/components/CategoryOptionsTab.vue
index 7395fa3f4..4e3d72100 100644
--- a/vueManager/src/components/CategoryOptionsTab.vue
+++ b/vueManager/src/components/CategoryOptionsTab.vue
@@ -1,17 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
+import { Button, Checkbox, Column, ConfirmDialog, DataTable, Dialog, IconField, InputIcon, InputText, Select, Toast, useConfirm } from 'primevue'
 import { onMounted, ref, watch } from 'vue'
 
 import { useGroupedToast, useUiGroup } from '../composables/uiGroup.js'
@@ -236,7 +225,15 @@ function openCopyDialog() {
 }
 
 async function performCopy() {
-  if (!copyFromCategoryId.value) return
+  if (!copyFromCategoryId.value) {
+    toast.add({
+      severity: 'warn',
+      summary: _('error') || 'Error',
+      detail: _('ms3_copy_from_category') || 'Исходная категория',
+      life: 3000,
+    })
+    return
+  }
   copying.value = true
   try {
     const r = await request.post(`/api/mgr/categories/${props.categoryId}/options/duplicate`, {
@@ -307,7 +304,7 @@ onMounted(() => {
       <Button
         icon="pi pi-plus"
         :label="_('ms3_btn_addoption') || 'Добавить опцию'"
-        severity="primary"
+        severity="success"
         @click="openAddDialog"
       />
       <Button
@@ -331,35 +328,30 @@ onMounted(() => {
           icon="pi pi-check"
           :label="`${_('ms3_ft_selected_activate') || 'Включить'} (${selectedRows.length})`"
           severity="success"
-          size="small"
           @click="performBulkAction('activate')"
         />
         <Button
           icon="pi pi-ban"
           :label="`${_('ms3_ft_selected_deactivate') || 'Выключить'} (${selectedRows.length})`"
           severity="secondary"
-          size="small"
           @click="performBulkAction('deactivate')"
         />
         <Button
           icon="pi pi-asterisk"
           :label="`${_('ms3_ft_selected_require') || 'Обязательная'} (${selectedRows.length})`"
           severity="warn"
-          size="small"
           @click="performBulkAction('require')"
         />
         <Button
           icon="pi pi-times"
           :label="`${_('ms3_ft_selected_unrequire') || 'Необязательная'} (${selectedRows.length})`"
           severity="secondary"
-          size="small"
           @click="performBulkAction('unrequire')"
         />
         <Button
           icon="pi pi-trash"
           :label="`${_('delete') || 'Удалить'} (${selectedRows.length})`"
           severity="danger"
-          size="small"
           @click="confirmBulkRemove"
         />
       </template>
@@ -414,7 +406,7 @@ onMounted(() => {
       </Column>
       <Column :header="_('ms3_ft_active') || 'Активна'" style="width: 5rem">
         <template #body="{ data }">
-          <i v-if="data.active" class="pi pi-check" style="color: #10b981" />
+          <i v-if="data.active" class="pi pi-check" style="color: var(--p-primary-color, #234368)" />
           <i v-else class="pi pi-times" style="color: #9ca3af" />
         </template>
       </Column>
@@ -431,7 +423,6 @@ onMounted(() => {
             severity="danger"
             text
             rounded
-            size="small"
             :title="_('delete') || 'Удалить'"
             @click="confirmSingleRemove(data)"
           />
@@ -444,72 +435,77 @@ onMounted(() => {
       </template>
     </DataTable>
 
-    <!-- Add option dialog -->
+    <!-- Add option dialog — edit-form/field use .p-dialog theme rhythm (15px / 4px) -->
     <Dialog
       v-model:visible="addDialogVisible"
       :header="_('ms3_btn_addoption') || 'Добавить опцию'"
       modal
+      append-to="self"
       :style="{ width: '32rem' }"
       :closable="!addSaving"
     >
-      <div class="form-row">
-        <label for="add-opt">{{ _('ms3_ft_name') || 'Опция' }} <span class="req">*</span></label>
-        <Select
-          id="add-opt"
-          v-model="addOptionId"
-          :options="availableOptions"
-          option-label="caption"
-          option-value="id"
-          :placeholder="_('select') || 'Выберите'"
-          :filter="true"
-          class="w-full"
-        >
-          <template #option="{ option }">
-            <div>
-              <b>{{ option.caption || option.key }}</b>
-              <span style="opacity: 0.6">— {{ option.key }}</span>
-            </div>
-            <small style="opacity: 0.6">{{ typeCaption(option.type) }}</small>
-          </template>
-        </Select>
-      </div>
-      <div class="form-row">
-        <label for="add-value">{{ _('ms3_default_value') || 'Значение по умолчанию' }}</label>
-        <InputText id="add-value" v-model="addValue" class="w-full" />
-      </div>
-      <div class="form-row">
-        <label for="add-caption-override">
-          {{ _('ms3_category_option_caption_override') || 'Название (для категории)' }}
-        </label>
-        <InputText
-          id="add-caption-override"
-          v-model="addCaptionOverride"
-          class="w-full"
-          :placeholder="
-            _('ms3_category_option_caption_override_desc') || 'Пусто — берётся глобальное'
-          "
-        />
-      </div>
-      <div class="form-row">
-        <label for="add-description-override">
-          {{ _('ms3_category_option_description_override') || 'Описание (для категории)' }}
-        </label>
-        <InputText
-          id="add-description-override"
-          v-model="addDescriptionOverride"
-          class="w-full"
-          :placeholder="
-            _('ms3_category_option_description_override_desc') || 'Пусто — берётся глобальное'
-          "
-        />
-      </div>
-      <div class="form-row form-row-inline">
-        <Checkbox v-model="addActive" input-id="add-active" binary />
-        <label for="add-active">{{ _('ms3_ft_active') || 'Активна' }}</label>
-      </div>
-      <div class="form-row form-row-inline">
-        <Checkbox v-model="addRequired" input-id="add-required" binary />
-        <label for="add-required">{{ _('ms3_ft_required') || 'Обязательная' }}</label>
+      <div class="edit-form">
+        <div class="field">
+          <label for="add-opt"
+            >{{ _('ms3_ft_name') || 'Опция' }} <span class="req">*</span></label
+          >
+          <Select
+            id="add-opt"
+            v-model="addOptionId"
+            :options="availableOptions"
+            option-label="caption"
+            option-value="id"
+            :placeholder="_('select') || 'Выберите'"
+            :filter="true"
+            class="w-full"
+          >
+            <template #option="{ option }">
+              <div>
+                <b>{{ option.caption || option.key }}</b>
+                <span style="opacity: 0.6">— {{ option.key }}</span>
+              </div>
+              <small style="opacity: 0.6">{{ typeCaption(option.type) }}</small>
+            </template>
+          </Select>
+        </div>
+        <div class="field">
+          <label for="add-value">{{ _('ms3_default_value') || 'Значение по умолчанию' }}</label>
+          <InputText id="add-value" v-model="addValue" class="w-full" />
+        </div>
+        <div class="field">
+          <label for="add-caption-override">
+            {{ _('ms3_category_option_caption_override') || 'Название (для категории)' }}
+          </label>
+          <InputText
+            id="add-caption-override"
+            v-model="addCaptionOverride"
+            class="w-full"
+            :placeholder="
+              _('ms3_category_option_caption_override_desc') || 'Пусто — берётся глобальное'
+            "
+          />
+        </div>
+        <div class="field">
+          <label for="add-description-override">
+            {{ _('ms3_category_option_description_override') || 'Описание (для категории)' }}
+          </label>
+          <InputText
+            id="add-description-override"
+            v-model="addDescriptionOverride"
+            class="w-full"
+            :placeholder="
+              _('ms3_category_option_description_override_desc') || 'Пусто — берётся глобальное'
+            "
+          />
+        </div>
+        <div class="field field-inline">
+          <Checkbox v-model="addActive" input-id="add-active" binary />
+          <label for="add-active">{{ _('ms3_ft_active') || 'Активна' }}</label>
+        </div>
+        <div class="field field-inline">
+          <Checkbox v-model="addRequired" input-id="add-required" binary />
+          <label for="add-required">{{ _('ms3_ft_required') || 'Обязательная' }}</label>
+        </div>
       </div>
 
       <template #footer>
@@ -521,6 +517,7 @@ onMounted(() => {
         />
         <Button
           :label="_('save') || 'Сохранить'"
+          severity="success"
           :loading="addSaving"
           :disabled="!addOptionId"
           @click="addOption"
@@ -533,31 +530,34 @@ onMounted(() => {
       v-model:visible="copyDialogVisible"
       :header="_('ms3_btn_copy') || 'Копировать опции из категории'"
       modal
+      append-to="self"
       :style="{ width: '32rem' }"
       :closable="!copying"
     >
-      <div class="form-row">
-        <label for="copy-from"
-          >{{ _('ms3_copy_from_category') || 'Исходная категория' }}
-          <span class="req">*</span></label
-        >
-        <Select
-          id="copy-from"
-          v-model="copyFromCategoryId"
-          :options="availableCategories"
-          option-label="label"
-          option-value="id"
-          :placeholder="_('select') || 'Выберите'"
-          :filter="true"
-          class="w-full"
-        />
+      <div class="edit-form">
+        <div class="field">
+          <label for="copy-from"
+            >{{ _('ms3_copy_from_category') || 'Исходная категория' }}
+            <span class="req">*</span></label
+          >
+          <Select
+            id="copy-from"
+            v-model="copyFromCategoryId"
+            :options="availableCategories"
+            option-label="label"
+            option-value="id"
+            :placeholder="_('select') || 'Выберите'"
+            :filter="true"
+            class="w-full"
+          />
+        </div>
+        <small class="hint">
+          {{
+            _('ms3_copy_category_hint') ||
+            'Опции, которые уже есть в текущей категории, будут пропущены. Значения опций у товаров будут обновлены автоматически.'
+          }}
+        </small>
       </div>
-      <small class="hint">
-        {{
-          _('ms3_copy_category_hint') ||
-          'Опции, которые уже есть в текущей категории, будут пропущены. Значения опций у товаров будут обновлены автоматически.'
-        }}
-      </small>
 
       <template #footer>
         <Button
@@ -568,8 +568,8 @@ onMounted(() => {
         />
         <Button
           :label="_('ms3_btn_copy') || 'Копировать'"
+          severity="success"
           :loading="copying"
-          :disabled="!copyFromCategoryId"
           @click="performCopy"
         />
       </template>
@@ -583,11 +583,20 @@ onMounted(() => {
   width: 100%;
 }
 
+/* Ext h3 sits above #ms3-vue-category-options; keep title→toolbar on theme 8px step */
+.ms3-category-options-heading {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--p-text-color, inherit);
+}
+
 .vueApp .category-options-tab .toolbar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--p-modx-space-panel, 0.9375rem);
   flex-wrap: wrap;
 }
 
@@ -601,32 +610,29 @@ onMounted(() => {
   color: var(--p-text-muted-color, #9ca3af);
 }
 
-.vueApp .category-options-tab .form-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-bottom: 0.85rem;
-}
-
-.vueApp .category-options-tab .form-row-inline {
+/* Dialog teleports; keep checkbox rows + required mark on theme form rhythm */
+.p-dialog .edit-form .field.field-inline {
   flex-direction: row;
   align-items: center;
   gap: 0.5rem;
 }
 
-.vueApp .category-options-tab .form-row label {
-  font-size: 0.85rem;
-  font-weight: 600;
+.p-dialog .edit-form .field.field-inline label {
+  margin: 0;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
 }
 
-.vueApp .category-options-tab .form-row .req {
+.p-dialog .edit-form .req {
   color: var(--p-red-500, #ef4444);
 }
 
-.vueApp .category-options-tab .hint {
+.p-dialog .edit-form .hint {
   color: var(--p-text-muted-color, #9ca3af);
   font-size: 0.85rem;
   display: block;
-  margin-top: -0.5rem;
+  margin-top: 0;
+  line-height: 1.35;
 }
 </style>
diff --git a/vueManager/src/components/CategoryProductsGrid.vue b/vueManager/src/components/CategoryProductsGrid.vue
index 92f11a4c6..95b4c3422 100644
--- a/vueManager/src/components/CategoryProductsGrid.vue
+++ b/vueManager/src/components/CategoryProductsGrid.vue
@@ -1,14 +1,17 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import ConfirmDialog from 'primevue/confirmdialog'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Tag from 'primevue/tag'
-import Toast from 'primevue/toast'
+import {
+  Button,
+  Card,
+  Checkbox,
+  ConfirmDialog,
+  InputNumber,
+  InputText,
+  Paginator,
+  Select,
+  Tag,
+  Toast,
+} from 'primevue'
 import { computed, defineProps, onMounted, ref, watch } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -63,7 +66,7 @@ const {
 const columns = ref([])
 const filters = ref({})
 const { runGuarded } = useStaleRequestGuard()
-const loading = ref(false)
+const loading = ref(true)
 const products = ref([])
 const totalRecords = ref(0)
 const ROWS_STORAGE_KEY = 'ms3_category_products_rows'
@@ -117,6 +120,37 @@ const sortedFilters = computed(() => {
     .sort((a, b) => (a.position || 100) - (b.position || 100))
 })
 
+/**
+ * Translate filter option labels (yes/no or legacy Да/Нет).
+ */
+function translateFilterOptionLabel(label) {
+  if (label === 'Да' || label === 'yes') {
+    return _('yes')
+  }
+  if (label === 'Нет' || label === 'no') {
+    return _('no')
+  }
+  const translated = _(label)
+  return translated || label
+}
+
+function selectFilterOptions(filter) {
+  const fromConfig = (filter.options || []).map(option => ({
+    label: translateFilterOptionLabel(option.label),
+    value: option.value,
+  }))
+  if (fromConfig.length > 0) {
+    return fromConfig
+  }
+  if (filter.type === 'boolean' || filter.key === 'published') {
+    return [
+      { label: _('yes'), value: 1 },
+      { label: _('no'), value: 0 },
+    ]
+  }
+  return []
+}
+
 /**
  * Check if drag-drop is available (only when sorted by menuindex and not nested)
  */
@@ -124,6 +158,29 @@ const canDrag = computed(() => {
   return dragEnabled.value && sortField.value === 'menuindex' && !nested.value
 })
 
+const visibleColumns = computed(() => columns.value.filter(c => c.visible))
+
+/** Any list reload (first paint, pagination, filters): same-height skeleton rows. */
+const showSkeleton = computed(() => loading.value)
+
+/** Match expected page size — last page uses remaining rows when total is known. */
+const skeletonRowCount = computed(() => {
+  const pageSize = Math.min(Math.max(rows.value, 1), 25)
+  if (totalRecords.value > 0) {
+    const remaining = Math.max(1, totalRecords.value - first.value)
+    return Math.min(pageSize, remaining)
+  }
+  return Math.min(Math.max(rows.value, 5), 25)
+})
+
+const tableShellMinHeight = computed(() => {
+  if (!showSkeleton.value) {
+    return null
+  }
+  // thead ~2.75rem, body rows ~5rem (thumb + padding), paginator ~3.5rem
+  return `calc(2.75rem + ${skeletonRowCount.value} * 5rem + 3.5rem)`
+})
+
 /** Pass nested grid mode to category product mutations (scope must match list). */
 function nestedMutationParams() {
   return { nested: nested.value ? 1 : 0 }
@@ -189,13 +246,20 @@ async function loadProducts() {
   }
 }
 
+const pageReportTemplate = computed(
+  () => `${_('showing')} {first}-{last} ${_('of')} {totalRecords}`
+)
+
 /**
- * Handle pagination (for DataTable lazy loading)
+ * Handle pagination (PrimeVue Paginator)
  */
-// eslint-disable-next-line no-unused-vars
 function onPage(event) {
+  const rowsChanged = event.rows !== rows.value
   first.value = event.first
   rows.value = event.rows
+  if (rowsChanged) {
+    saveRowsPreference(event.rows)
+  }
   loadProducts()
 }
 
@@ -459,7 +523,7 @@ const hasActiveFilters = computed(() => {
 async function loadGridConfig() {
   try {
     const response = await request.get('/api/mgr/grid-config/category-products')
-    columns.value = response.columns || []
+    columns.value = ensureActionsColumnWidth(response.columns || [])
     if (Array.isArray(response.editor_references)) {
       referencePathsByKey.value = Object.fromEntries(
         response.editor_references.map(r => [r.key, r.path])
@@ -474,6 +538,25 @@ async function loadGridConfig() {
   }
 }
 
+/** Five 36px icon buttons need ≥14rem; saved configs often ship 140px and wrap. */
+const ACTIONS_COLUMN_MIN_WIDTH = '14rem'
+
+function ensureActionsColumnWidth(cols) {
+  if (!Array.isArray(cols)) {
+    return []
+  }
+  return cols.map(col => {
+    if (col?.type !== 'actions' && col?.name !== 'actions') {
+      return col
+    }
+    return {
+      ...col,
+      width: ACTIONS_COLUMN_MIN_WIDTH,
+      minWidth: ACTIONS_COLUMN_MIN_WIDTH,
+    }
+  })
+}
+
 /**
  * Default columns (if API unavailable)
  */
@@ -530,7 +613,7 @@ function getDefaultColumns() {
       visible: true,
       isSystem: true,
       frozen: true,
-      width: '8.75rem',
+      width: '14rem',
       type: 'actions',
       actions: [
         { name: 'view', handler: 'view', icon: 'pi-eye', label: 'view' },
@@ -674,47 +757,6 @@ function onHeaderClick(column) {
   loadProducts()
 }
 
-/**
- * Handle previous page
- */
-function onPagePrev() {
-  if (first.value > 0) {
-    first.value = Math.max(0, first.value - rows.value)
-    loadProducts()
-  }
-}
-
-/**
- * Handle next page
- */
-function onPageNext() {
-  if (first.value + rows.value < totalRecords.value) {
-    first.value = first.value + rows.value
-    loadProducts()
-  }
-}
-
-/**
- * Jump to first page
- */
-function onPageFirst() {
-  if (first.value > 0) {
-    first.value = 0
-    loadProducts()
-  }
-}
-
-/**
- * Jump to last page
- */
-function onPageLast() {
-  const lastStart = Math.max(0, Math.ceil(totalRecords.value / rows.value) - 1) * rows.value
-  if (first.value !== lastStart) {
-    first.value = lastStart
-    loadProducts()
-  }
-}
-
 /**
  * Save rows per page to localStorage
  */
@@ -726,15 +768,6 @@ function saveRowsPreference(value) {
   }
 }
 
-/**
- * Handle rows per page change: reset to first page, save preference, reload
- */
-function onRowsChange() {
-  first.value = 0
-  saveRowsPreference(rows.value)
-  loadProducts()
-}
-
 // Watch for category ID changes
 watch(
   () => props.categoryId,
@@ -745,6 +778,8 @@ watch(
 )
 
 onMounted(async () => {
+  loading.value = true
+
   // Initialize nested from system setting
   // Note: ms3 is a global variable (not window.ms3) because it's declared with 'let' in minishop3.js
 
@@ -767,6 +802,9 @@ onMounted(async () => {
     rows.value = 20
   }
 
+  // Paint header immediately so the shell does not collapse while config loads.
+  columns.value = getDefaultColumns()
+
   await Promise.all([loadGridConfig(), loadFiltersConfig()])
   await loadProducts()
 })
@@ -786,14 +824,12 @@ onMounted(async () => {
               :label="_('product_create')"
               icon="pi pi-plus"
               severity="success"
-              size="small"
               @click="createProduct"
             />
             <Button
               :label="_('category_create')"
               icon="pi pi-folder-plus"
               severity="secondary"
-              size="small"
               @click="createCategory"
             />
           </div>
@@ -836,9 +872,9 @@ onMounted(async () => {
                 />
               </div>
 
-              <!-- Select filter -->
+              <!-- Select / boolean filter -->
               <div
-                v-else-if="filter.type === 'select'"
+                v-else-if="filter.type === 'select' || filter.type === 'boolean'"
                 class="filter-item"
                 :style="{ width: filter.width || '9.375rem' }"
               >
@@ -846,7 +882,7 @@ onMounted(async () => {
                 <Select
                   :id="`filter-${filter.key}`"
                   v-model="filterValues[filter.key]"
-                  :options="filter.options || []"
+                  :options="selectFilterOptions(filter)"
                   option-label="label"
                   option-value="value"
                   :placeholder="_(filter.placeholder || 'all')"
@@ -856,24 +892,22 @@ onMounted(async () => {
                 />
               </div>
             </template>
-          </div>
 
-          <!-- Filter buttons -->
-          <div class="filter-buttons">
-            <Button
-              :label="_('apply_filters')"
-              icon="pi pi-filter"
-              size="small"
-              @click="applyFilters"
-            />
-            <Button
-              v-if="hasActiveFilters"
-              :label="_('clear_filters')"
-              icon="pi pi-filter-slash"
-              severity="secondary"
-              size="small"
-              @click="clearFilters"
-            />
+            <div class="filter-buttons">
+              <Button
+                :label="_('apply_filters')"
+                icon="pi pi-filter"
+                severity="success"
+                @click="applyFilters"
+              />
+              <Button
+                v-if="hasActiveFilters"
+                :label="_('clear_filters')"
+                icon="pi pi-filter-slash"
+                severity="secondary"
+                @click="clearFilters"
+              />
+            </div>
           </div>
         </div>
 
@@ -888,7 +922,6 @@ onMounted(async () => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -896,21 +929,18 @@ onMounted(async () => {
               :label="_('publish')"
               icon="pi pi-check"
               severity="success"
-              size="small"
               @click="bulkPublish"
             />
             <Button
               :label="_('unpublish')"
               icon="pi pi-times-circle"
               severity="secondary"
-              size="small"
               @click="bulkUnpublish"
             />
             <Button
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -923,242 +953,251 @@ onMounted(async () => {
           <span>{{ _('drag_to_reorder') }}</span>
         </div>
 
-        <!-- Table with drag-drop -->
-        <div class="p-datatable p-component p-datatable-striped">
-          <div class="p-datatable-wrapper">
-            <table class="p-datatable-table">
-              <thead class="p-datatable-thead">
-                <tr>
-                  <th v-if="canDrag" style="width: 3rem"></th>
-                  <th style="width: 3rem">
-                    <Checkbox v-model="selectAll" :binary="true" @change="onSelectAllChange" />
-                  </th>
-                  <th
-                    v-for="column in columns.filter(c => c.visible)"
-                    :key="column.name"
-                    :style="{ width: column.width, minWidth: column.minWidth }"
-                    :class="{ 'sortable-header': column.sortable }"
-                    @click="column.sortable && onHeaderClick(column)"
-                  >
-                    {{ column.label }}
-                    <i
-                      v-if="column.sortable && sortField === column.name"
-                      :class="
-                        sortOrder === 1 ? 'pi pi-sort-amount-up-alt' : 'pi pi-sort-amount-down'
-                      "
-                      class="sort-icon"
-                    ></i>
-                  </th>
-                </tr>
-              </thead>
-              <draggable
-                v-model="products"
-                tag="tbody"
-                class="p-datatable-tbody"
-                :handle="canDrag ? '.drag-handle' : null"
-                :disabled="!canDrag"
-                item-key="id"
-                :animation="200"
-                ghost-class="ghost-row"
-                @end="onDragEnd"
-              >
-                <template #item="{ element: product, index }">
-                  <tr :class="{ 'p-row-odd': index % 2 === 1 }">
+        <!-- Table with drag-drop (shell keeps height while loading) -->
+        <div
+          class="products-table-shell"
+          :style="tableShellMinHeight ? { minHeight: tableShellMinHeight } : undefined"
+        >
+          <div class="p-datatable p-component p-datatable-striped">
+            <div class="p-datatable-wrapper">
+              <table class="p-datatable-table">
+                <thead class="p-datatable-thead">
+                  <tr>
+                    <th v-if="canDrag" style="width: 3rem"></th>
+                    <th style="width: 3rem">
+                      <Checkbox v-model="selectAll" :binary="true" @change="onSelectAllChange" />
+                    </th>
+                    <th
+                      v-for="column in visibleColumns"
+                      :key="column.name"
+                      :style="{
+                        width: column.width,
+                        minWidth: column.minWidth || column.width,
+                      }"
+                      :class="{ 'sortable-header': column.sortable }"
+                      @click="column.sortable && onHeaderClick(column)"
+                    >
+                      {{ column.label }}
+                      <i
+                        v-if="column.sortable && sortField === column.name"
+                        :class="sortOrder === 1 ? 'pi pi-sort-amount-up-alt' : 'pi pi-sort-amount-down'
+                          "
+                        class="sort-icon"
+                      ></i>
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody
+                  v-if="showSkeleton"
+                  class="p-datatable-tbody products-skeleton"
+                  aria-busy="true"
+                  aria-live="polite"
+                >
+                  <tr v-for="n in skeletonRowCount" :key="`skeleton-${n}`">
                     <td v-if="canDrag" class="drag-handle-cell">
-                      <i class="pi pi-bars drag-handle"></i>
+                      <span class="skeleton-block skeleton-block--icon" />
                     </td>
                     <td>
-                      <Checkbox v-model="selectedItems" :value="product" :binary="false" />
+                      <span class="skeleton-block skeleton-block--check" />
                     </td>
-                    <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
-                      <!-- Actions column -->
-                      <td v-if="column.type === 'actions'" :style="{ width: column.width }">
-                        <ActionsColumn
-                          :data="product"
-                          :actions="getActionsConfig(column)"
-                          grid-id="category-products"
-                          :ui-group="UI_GROUP"
-                          @view="viewProduct"
-                          @edit="editProduct"
-                          @delete="deleteProduct"
-                          @publish="togglePublish"
-                          @duplicate="duplicateProduct"
-                          @refresh="loadProducts"
-                        />
+                    <td v-for="column in visibleColumns" :key="`skeleton-${n}-${column.name}`">
+                      <span
+                        class="skeleton-block"
+                        :class="{
+                          'skeleton-block--thumb': column.type === 'image',
+                          'skeleton-block--short': column.width && Number.parseFloat(column.width) <= 6,
+                        }"
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+
+                <draggable
+                  v-else
+                  v-model="products"
+                  tag="tbody"
+                  class="p-datatable-tbody"
+                  :handle="canDrag ? '.drag-handle' : null"
+                  :disabled="!canDrag"
+                  item-key="id"
+                  :animation="200"
+                  ghost-class="ghost-row"
+                  @end="onDragEnd"
+                >
+                  <template #item="{ element: product, index }">
+                    <tr :class="{ 'p-row-odd': index % 2 === 1 }">
+                      <td v-if="canDrag" class="drag-handle-cell">
+                        <i class="pi pi-bars drag-handle"></i>
+                      </td>
+                      <td>
+                        <Checkbox v-model="selectedItems" :value="product" :binary="false" />
                       </td>
+                      <template v-for="column in visibleColumns" :key="column.name">
+                        <!-- Actions column -->
+                        <td
+                          v-if="column.type === 'actions'"
+                          class="row-actions-cell"
+                          :style="{
+                            width: column.width || ACTIONS_COLUMN_MIN_WIDTH,
+                            minWidth: column.minWidth || column.width || ACTIONS_COLUMN_MIN_WIDTH,
+                          }"
+                        >
+                          <ActionsColumn
+                            :data="product"
+                            :actions="getActionsConfig(column)"
+                            grid-id="category-products"
+                            :ui-group="UI_GROUP"
+                            @view="viewProduct"
+                            @edit="editProduct"
+                            @delete="deleteProduct"
+                            @publish="togglePublish"
+                            @duplicate="duplicateProduct"
+                            @refresh="loadProducts"
+                          />
+                        </td>
 
-                      <!-- Editable column: inline edit mode -->
-                      <td
-                        v-else-if="column.editable && isEditingCell(product, column)"
-                        :style="{ width: column.width, minWidth: column.minWidth }"
-                        :class="['inline-edit-cell', { 'inline-edit-saving': inlineEditSaving }]"
-                      >
-                        <Checkbox
-                          v-if="isBooleanColumn(column)"
-                          ref="inlineEditInputRef"
-                          :model-value="!!inlineEditValue"
-                          :binary="true"
-                          :disabled="inlineEditSaving"
-                          @update:model-value="inlineEditValue = $event ? 1 : 0"
-                          @change="saveInlineEdit(product, column)"
-                        />
-                        <InputText
-                          v-else-if="normalizeGridColumnEditorType(column.editor_type) === GridColumnEditorType.TEXT"
-                          ref="inlineEditInputRef"
-                          v-model="inlineEditValue"
-                          class="w-full"
-                          :disabled="inlineEditSaving"
-                          @blur="saveInlineEdit(product, column)"
-                          @keydown.enter.prevent="$event.target.blur()"
-                          @keydown.escape="cancelInlineEdit"
-                        />
-                        <div
-                          v-else-if="isSelectLikeEditorType(column.editor_type)"
-                          class="inline-edit-input-wrapper w-full"
-                          @keydown.enter.capture.prevent="$event.target?.blur?.()"
-                          @keydown.escape.capture.prevent="cancelInlineEdit"
+                        <!-- Editable column: inline edit mode -->
+                        <td
+                          v-else-if="column.editable && isEditingCell(product, column)"
+                          :style="{ width: column.width, minWidth: column.minWidth }"
+                          :class="['inline-edit-cell', { 'inline-edit-saving': inlineEditSaving }]"
                         >
-                          <Select
+                          <Checkbox
+                            v-if="isBooleanColumn(column)"
                             ref="inlineEditInputRef"
-                            v-model="inlineEditValue"
-                            :options="selectOptionsForColumn(column)"
-                            option-label="label"
-                            option-value="value"
-                            class="w-full"
-                            :show-clear="selectUsesClear(column)"
+                            :model-value="!!inlineEditValue"
+                            :binary="true"
                             :disabled="inlineEditSaving"
+                            @update:model-value="inlineEditValue = $event ? 1 : 0"
                             @change="saveInlineEdit(product, column)"
                           />
-                        </div>
-                        <div
-                          v-else
-                          class="inline-edit-input-wrapper w-full"
-                          @keydown.enter.capture.prevent="$event.target?.blur?.()"
-                          @keydown.escape.capture.prevent="cancelInlineEdit"
-                        >
-                          <InputNumber
+                          <InputText
+                            v-else-if="normalizeGridColumnEditorType(column.editor_type) === GridColumnEditorType.TEXT"
                             ref="inlineEditInputRef"
                             v-model="inlineEditValue"
                             class="w-full"
-                            :min-fraction-digits="0"
-                            :max-fraction-digits="4"
                             :disabled="inlineEditSaving"
                             @blur="saveInlineEdit(product, column)"
+                            @keydown.enter.prevent="$event.target.blur()"
+                            @keydown.escape="cancelInlineEdit"
                           />
-                        </div>
-                      </td>
-
-                      <!-- Image column -->
-                      <td v-else-if="column.type === 'image'" :style="{ width: column.width }">
-                        <img
-                          :src="product[column.name] || defaultThumb"
-                          :alt="product.pagetitle"
-                          class="product-thumb"
-                        />
-                      </td>
-
-                      <!-- Boolean column -->
-                      <td
-                        v-else-if="column.type === 'boolean'"
-                        :style="{ width: column.width }"
-                        :class="{ 'editable-cell': column.editable }"
-                        @dblclick="column.editable && startInlineEdit(product, column)"
-                      >
-                        <Tag
-                          :value="product[column.name] ? _('yes') : _('no')"
-                          :severity="product[column.name] ? 'success' : 'secondary'"
-                        />
-                      </td>
-
-                      <!-- Price column -->
-                      <td
-                        v-else-if="column.type === 'price'"
-                        :style="{ width: column.width }"
-                        :class="{ 'editable-cell': column.editable }"
-                        @dblclick="column.editable && startInlineEdit(product, column)"
-                      >
-                        {{ formatPrice(product[column.name]) }}
-                      </td>
-
-                      <!-- Weight column -->
-                      <td
-                        v-else-if="column.type === 'weight'"
-                        :style="{ width: column.width }"
-                        :class="{ 'editable-cell': column.editable }"
-                        @dblclick="column.editable && startInlineEdit(product, column)"
-                      >
-                        {{ formatWeight(product[column.name]) }}
-                      </td>
-
-                      <!-- Template column (renders HTML) -->
-                      <td
-                        v-else-if="column.type === 'template'"
-                        :style="{ width: column.width, minWidth: column.minWidth }"
-                        :class="{ 'editable-cell': column.editable }"
-                        @dblclick="column.editable && startInlineEdit(product, column)"
-                      >
-                        <div v-if="nested && product.category_name" class="nested-product">
-                          <span v-html="renderField(product, column)"></span>
-                          <div class="product-category">{{ product.category_name }}</div>
-                        </div>
-                        <span v-else v-html="renderField(product, column)"></span>
-                      </td>
-
-                      <!-- Regular columns -->
-                      <td
-                        v-else
-                        :style="{ width: column.width, minWidth: column.minWidth }"
-                        :class="{ 'editable-cell': column.editable }"
-                        @dblclick="column.editable && startInlineEdit(product, column)"
-                      >
-                        {{ product[column.name] }}
-                      </td>
-                    </template>
-                  </tr>
-                </template>
-              </draggable>
-            </table>
-          </div>
-
-          <!-- Loading overlay -->
-          <div v-if="loading" class="loading-overlay">
-            <i class="pi pi-spinner pi-spin"></i>
-          </div>
+                          <div
+                            v-else-if="isSelectLikeEditorType(column.editor_type)"
+                            class="inline-edit-input-wrapper w-full"
+                            @keydown.enter.capture.prevent="$event.target?.blur?.()"
+                            @keydown.escape.capture.prevent="cancelInlineEdit"
+                          >
+                            <Select
+                              ref="inlineEditInputRef"
+                              v-model="inlineEditValue"
+                              :options="selectOptionsForColumn(column)"
+                              option-label="label"
+                              option-value="value"
+                              class="w-full"
+                              :show-clear="selectUsesClear(column)"
+                              :disabled="inlineEditSaving"
+                              @change="saveInlineEdit(product, column)"
+                            />
+                          </div>
+                          <div
+                            v-else
+                            class="inline-edit-input-wrapper w-full"
+                            @keydown.enter.capture.prevent="$event.target?.blur?.()"
+                            @keydown.escape.capture.prevent="cancelInlineEdit"
+                          >
+                            <InputNumber
+                              ref="inlineEditInputRef"
+                              v-model="inlineEditValue"
+                              class="w-full"
+                              :min-fraction-digits="0"
+                              :max-fraction-digits="4"
+                              :disabled="inlineEditSaving"
+                              @blur="saveInlineEdit(product, column)"
+                            />
+                          </div>
+                        </td>
+
+                        <!-- Image column -->
+                        <td v-else-if="column.type === 'image'" :style="{ width: column.width }">
+                          <img
+                            :src="product[column.name] || defaultThumb"
+                            :alt="product.pagetitle"
+                            class="product-thumb"
+                          />
+                        </td>
+
+                        <!-- Boolean column -->
+                        <td
+                          v-else-if="column.type === 'boolean'"
+                          :style="{ width: column.width }"
+                          :class="{ 'editable-cell': column.editable }"
+                          @dblclick="column.editable && startInlineEdit(product, column)"
+                        >
+                          <Tag
+                            :value="product[column.name] ? _('yes') : _('no')"
+                            :severity="product[column.name] ? 'success' : 'secondary'"
+                          />
+                        </td>
+
+                        <!-- Price column -->
+                        <td
+                          v-else-if="column.type === 'price'"
+                          :style="{ width: column.width }"
+                          :class="{ 'editable-cell': column.editable }"
+                          @dblclick="column.editable && startInlineEdit(product, column)"
+                        >
+                          {{ formatPrice(product[column.name]) }}
+                        </td>
+
+                        <!-- Weight column -->
+                        <td
+                          v-else-if="column.type === 'weight'"
+                          :style="{ width: column.width }"
+                          :class="{ 'editable-cell': column.editable }"
+                          @dblclick="column.editable && startInlineEdit(product, column)"
+                        >
+                          {{ formatWeight(product[column.name]) }}
+                        </td>
+
+                        <!-- Template column (renders HTML) -->
+                        <td
+                          v-else-if="column.type === 'template'"
+                          :style="{ width: column.width, minWidth: column.minWidth }"
+                          :class="{ 'editable-cell': column.editable }"
+                          @dblclick="column.editable && startInlineEdit(product, column)"
+                        >
+                          <div v-if="nested && product.category_name" class="nested-product">
+                            <span v-html="renderField(product, column)"></span>
+                            <div class="product-category">{{ product.category_name }}</div>
+                          </div>
+                          <span v-else v-html="renderField(product, column)"></span>
+                        </td>
+
+                        <!-- Regular columns -->
+                        <td
+                          v-else
+                          :style="{ width: column.width, minWidth: column.minWidth }"
+                          :class="{ 'editable-cell': column.editable }"
+                          @dblclick="column.editable && startInlineEdit(product, column)"
+                        >
+                          {{ product[column.name] }}
+                        </td>
+                      </template>
+                    </tr>
+                  </template>
+                </draggable>
+              </table>
+            </div>
 
-          <!-- Pagination -->
-          <div class="p-paginator p-component">
-            <span class="p-paginator-current">
-              {{ _('showing') }} {{ first + 1 }}-{{ Math.min(first + rows, totalRecords) }}
-              {{ _('of') }} {{ totalRecords }}
-            </span>
-            <Button
-              icon="pi pi-angle-double-left"
-              :disabled="first === 0"
-              text
-              :title="_('first_page')"
-              @click="onPageFirst"
-            />
-            <Button icon="pi pi-angle-left" :disabled="first === 0" text @click="onPagePrev" />
-            <Button
-              icon="pi pi-angle-right"
-              :disabled="first + rows >= totalRecords"
-              text
-              @click="onPageNext"
-            />
-            <Button
-              icon="pi pi-angle-double-right"
-              :disabled="first + rows >= totalRecords || totalRecords === 0"
-              text
-              :title="_('last_page')"
-              @click="onPageLast"
-            />
-            <label class="rows-per-page-label">{{ _('rows_per_page') }}</label>
-            <Select
-              v-model="rows"
-              :options="rowsPerPageOptions"
-              class="rows-per-page-select"
-              style="min-width: 5rem"
-              @change="onRowsChange"
+            <Paginator
+              :first="first"
+              :rows="rows"
+              :total-records="totalRecords"
+              :rows-per-page-options="rowsPerPageOptions"
+              template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+              :current-page-report-template="pageReportTemplate"
+              @page="onPage"
             />
           </div>
         </div>
@@ -1232,27 +1271,32 @@ onMounted(async () => {
 .filters-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  align-items: flex-end;
+    gap: var(--p-modx-space-panel, 15px);
 }
 
 .filter-item {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
   min-width: 7.5rem;
 }
 
 .filter-item label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin: 0;
   font-weight: 500;
   font-size: 0.875rem;
   color: var(--ms3-text-muted);
+  line-height: 1.3;
 }
 
 .filter-buttons {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
+  align-items: center;
+    padding-bottom: 0;
 }
 
 /* Bulk actions toolbar */
@@ -1343,6 +1387,25 @@ onMounted(async () => {
   border-collapse: collapse;
 }
 
+/* Keep action icons on one row (saved grid width is often too narrow). */
+.row-actions-cell {
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.row-actions-cell :deep(.actions-column),
+.row-actions-cell :deep(.row-actions) {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.row-actions-cell :deep(.p-button) {
+  flex-shrink: 0;
+}
 .p-datatable-thead th {
   text-align: left;
   padding: 0.75rem 1rem;
@@ -1379,39 +1442,76 @@ onMounted(async () => {
   background: var(--ms3-bg-slate);
 }
 
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--ms3-bg-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2rem;
+.products-table-shell {
+  position: relative;
+  min-height: 20rem;
 }
 
-/* Pagination */
-.p-paginator {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0.75rem 1rem;
-  border-top: var(--ms3-border-width) solid var(--ms3-border-color-alt);
-  gap: 0.5rem;
+.products-table-shell .p-datatable {
+  position: relative;
+  min-height: inherit;
 }
 
-.p-paginator-current {
-  color: var(--ms3-text-muted);
-  font-size: 0.9rem;
-  margin-right: auto;
+.products-skeleton td {
+  height: 5rem;
+  vertical-align: middle;
 }
 
-.rows-per-page-label {
-  font-size: 0.9rem;
-  color: var(--ms3-text-muted);
-  margin-right: 0.5rem;
+.skeleton-block {
+  display: block;
+  height: 0.75rem;
+  width: 75%;
+  max-width: 12rem;
+  border-radius: 0.25rem;
+  background: linear-gradient(90deg,
+      var(--ms3-border-color-alt, #e4e4e4) 0%,
+      var(--ms3-bg-muted, #f4f4f4) 50%,
+      var(--ms3-border-color-alt, #e4e4e4) 100%);
+  background-size: 200% 100%;
+  animation: ms3-skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+.skeleton-block--short {
+  width: 3.5rem;
+}
+
+.skeleton-block--thumb {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.skeleton-block--check,
+.skeleton-block--icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @keyframes ms3-skeleton-shimmer {
+    0% {
+      background-position: 100% 0;
+    }
+
+    100% {
+      background-position: -100% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton-block {
+      animation: none;
+    }
 }
 
 /* Product thumbnail */
diff --git a/vueManager/src/components/CustomersGrid.vue b/vueManager/src/components/CustomersGrid.vue
index 85af08962..bc40bc84e 100644
--- a/vueManager/src/components/CustomersGrid.vue
+++ b/vueManager/src/components/CustomersGrid.vue
@@ -1,19 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputGroup from 'primevue/inputgroup'
-import InputGroupAddon from 'primevue/inputgroupaddon'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, Column, ConfirmDialog, DataTable, Dialog, InputGroup, InputGroupAddon, InputText, Select, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, nextTick, onMounted, ref } from 'vue'
 
 import { useGridFilterParams } from '../composables/useGridFilterParams.js'
@@ -448,13 +435,20 @@ function initFilters() {
 
   columns.value.forEach(column => {
     if (column.filterable) {
-      newFilters[column.name] = ''
+      newFilters[column.name] = null
     }
   })
 
   filterValues.value = newFilters
 }
 
+function booleanFilterOptions() {
+  return [
+    { label: _('yes'), value: 1 },
+    { label: _('no'), value: 0 },
+  ]
+}
+
 /**
  * Apply filters
  */
@@ -659,7 +653,7 @@ onMounted(async () => {
 
       <template #content>
         <!-- Search -->
-        <div class="p-inputgroup mb-3">
+        <InputGroup class="mb-4">
           <InputText
             v-model="searchQuery"
             name="ms3-customers-grid-search"
@@ -667,39 +661,57 @@ onMounted(async () => {
             :placeholder="_('search_placeholder')"
             @keyup.enter="onSearch"
           />
-          <Button icon="pi pi-search" :label="_('search')" @click="onSearch" />
-        </div>
+          <Button
+            icon="pi pi-search"
+            :label="_('search')"
+            severity="success"
+            @click="onSearch"
+          />
+        </InputGroup>
 
         <!-- Filters form -->
         <div
           v-if="filterableColumns.length > 0"
-          class="filters-form mb-3 p-3 surface-ground"
-          style="border-radius: 0.375rem"
+          class="filters-form mb-4 surface-ground"
         >
-          <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem">
+          <div class="filters-form-fields">
             <div
               v-for="column in filterableColumns"
               :key="column.name"
-              style="flex: 1 1 18.75rem; min-width: 15.625rem"
+              class="filters-form-field"
             >
               <div class="field">
-                <label
-                  :for="`filter-${column.name}`"
-                  style="display: block; margin-bottom: 0.5rem; font-weight: 500"
-                  >{{ column.label }}</label
-                >
+                <label :for="`filter-${column.name}`">{{ column.label }}</label>
+                <Select
+                  v-if="column.type === 'boolean'"
+                  :id="`filter-${column.name}`"
+                  v-model="filterValues[column.name]"
+                  :options="booleanFilterOptions()"
+                  option-label="label"
+                  option-value="value"
+                  :placeholder="_('all')"
+                  :show-clear="true"
+                  class="w-full"
+                  @change="applyFilters"
+                />
                 <InputText
+                  v-else
                   :id="`filter-${column.name}`"
                   v-model="filterValues[column.name]"
                   :placeholder="_('filter_by').replace('{field}', column.label)"
-                  style="width: 100%"
+                  class="w-full"
                   @keyup.enter="applyFilters"
                 />
               </div>
             </div>
           </div>
-          <div style="display: flex; gap: 0.5rem">
-            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
+          <div class="filters-form-actions">
+            <Button
+              :label="_('apply_filters')"
+              icon="pi pi-filter"
+              severity="success"
+              @click="applyFilters"
+            />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -710,7 +722,7 @@ onMounted(async () => {
         </div>
 
         <!-- Bulk actions toolbar -->
-        <div v-if="hasSelection" class="bulk-actions-bar mb-3">
+        <div v-if="hasSelection" class="bulk-actions-bar mb-4">
           <div class="bulk-info">
             <i class="pi pi-check-square"></i>
             <span>{{ _('selected_count').replace('{count}', selectionCount) }}</span>
@@ -720,7 +732,6 @@ onMounted(async () => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -728,7 +739,6 @@ onMounted(async () => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -939,13 +949,14 @@ onMounted(async () => {
           type="button"
           :label="_('cancel')"
           icon="pi pi-times"
-          class="p-button-text"
+          severity="secondary"
           @click="editDialogVisible = false"
         />
         <Button
           type="button"
           :label="_('save')"
           icon="pi pi-check"
+          severity="success"
           :loading="saving"
           @click="saveCustomer"
         />
@@ -1112,12 +1123,13 @@ onMounted(async () => {
             <Button
               :label="_('cancel')"
               icon="pi pi-times"
-              class="p-button-text"
+              severity="secondary"
               @click="cancelAddressEdit"
             />
             <Button
               :label="_('save')"
               icon="pi pi-check"
+              severity="success"
               :loading="savingAddress"
               @click="saveAddress"
             />
@@ -1130,7 +1142,35 @@ onMounted(async () => {
 
 <style scoped>
 .customers-grid {
-  padding: 1.25rem;
+  height: 100%;
+  }
+
+  .filters-form {
+    padding: 15px 0;
+    border-radius: 3px;
+  }
+
+  .filters-form-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin-bottom: 15px;
+  }
+
+  .filters-form-field {
+    flex: 1 1 18.75rem;
+    min-width: 15.625rem;
+  }
+
+  .filters-form-field label {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 500;
+  }
+
+  .filters-form-actions {
+    display: flex;
+    gap: 0.5rem;
 }
 
 /* Bulk actions toolbar */
@@ -1138,10 +1178,10 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 15px;
   background: var(--ms3-bg-warning);
   border: var(--ms3-border-width) solid var(--ms3-border-warning);
-  border-radius: 0.375rem;
+  border-radius: 3px;
 }
 
 .bulk-info {
@@ -1209,22 +1249,26 @@ onMounted(async () => {
 .checkboxes-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 1rem 1.5rem;
   padding: 0.5rem 0;
 }
 
 .checkbox-col {
-  flex: 0 0 calc(25% - 0.75rem);
+  flex: 0 1 auto;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
 }
 
 .checkbox-col label {
-  margin-left: 0.5rem;
-  margin-bottom: 0;
+  margin: 0;
+  line-height: 1;
   cursor: pointer;
   font-size: 0.875rem;
+  font-weight: 500;
   user-select: none;
+  white-space: nowrap;
 }
 
 .w-full {
@@ -1343,13 +1387,21 @@ onMounted(async () => {
   flex: 1 1 100%;
 }
 
-.address-form label {
+.address-form .form-col label,
+.address-form .form-col-sm label,
+.address-form .form-col-full label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
   font-size: 0.875rem;
 }
 
+.address-form .checkbox-col label {
+  display: inline;
+  margin: 0;
+  line-height: 1;
+}
+
 .form-actions {
   display: flex;
   justify-content: flex-end;
diff --git a/vueManager/src/components/DeliveriesGrid.vue b/vueManager/src/components/DeliveriesGrid.vue
index 041d5b2ec..2537d0437 100644
--- a/vueManager/src/components/DeliveriesGrid.vue
+++ b/vueManager/src/components/DeliveriesGrid.vue
@@ -1,24 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Badge from 'primevue/badge'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { useToast } from 'primevue/usetoast'
+import { Badge, Button, Card, Checkbox, Column, ConfirmDialog, DataTable, Dialog, InputNumber, InputText, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Toast, ToggleSwitch, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -455,7 +437,12 @@ onMounted(async () => {
             </template>
           </div>
           <div class="filter-buttons">
-            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
+            <Button
+              :label="_('apply_filters')"
+              icon="pi pi-filter"
+              severity="success"
+              @click="applyFilters"
+            />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -476,7 +463,6 @@ onMounted(async () => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -484,7 +470,6 @@ onMounted(async () => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -773,7 +758,13 @@ onMounted(async () => {
 
       <template #footer>
         <Button :label="_('cancel')" icon="pi pi-times" severity="secondary" @click="close" />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveDelivery" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveDelivery"
+        />
       </template>
     </Dialog>
   </div>
@@ -781,7 +772,7 @@ onMounted(async () => {
 
 <style scoped>
 .deliveries-grid {
-  padding: 1.25rem;
+  padding: 0;
 }
 
 .grid-header {
@@ -822,11 +813,11 @@ onMounted(async () => {
 .filters-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 15px;
   margin-bottom: 1rem;
-  padding: 1rem;
+  padding: 15px 0;
   background: var(--ms3-bg-slate);
-  border-radius: 0.375rem;
+  border-radius: 3px;
 }
 
 .filter-item {
@@ -837,10 +828,9 @@ onMounted(async () => {
 
 .filter-item label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 4px;
   font-weight: 500;
   font-size: 0.875rem;
-  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -1019,11 +1009,16 @@ onMounted(async () => {
 .checkbox-field {
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 }
 
 .checkbox-field label {
-  margin-left: 0.5rem;
+  margin: 0;
+  line-height: 1;
   cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  user-select: none;
 }
 
 /* Grid thumbnail */
diff --git a/vueManager/src/components/DynamicField.vue b/vueManager/src/components/DynamicField.vue
index 8cb5e2883..af3611c3a 100644
--- a/vueManager/src/components/DynamicField.vue
+++ b/vueManager/src/components/DynamicField.vue
@@ -245,15 +245,7 @@
 </template>
 
 <script setup>
-import Checkbox from 'primevue/checkbox'
-import ColorPicker from 'primevue/colorpicker'
-import DatePicker from 'primevue/datepicker'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
-import ToggleSwitch from 'primevue/toggleswitch'
+import { Checkbox, ColorPicker, DatePicker, InputNumber, InputText, Message, Select, Textarea, ToggleSwitch } from 'primevue'
 import { computed, ref, watch } from 'vue'
 
 import { getKeyValueConfigFromField, serializeKeyValueForPost } from '../utils/keyValueField.js'
diff --git a/vueManager/src/components/ExtraFieldsManager.vue b/vueManager/src/components/ExtraFieldsManager.vue
index 05d3d92ec..8587eefe7 100644
--- a/vueManager/src/components/ExtraFieldsManager.vue
+++ b/vueManager/src/components/ExtraFieldsManager.vue
@@ -1,20 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import Fieldset from 'primevue/fieldset'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Tag from 'primevue/tag'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, Column, ConfirmDialog, DataTable, Dialog, Fieldset, InputText, Select, Tag, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
@@ -532,7 +518,7 @@ onMounted(() => {
 
     <p class="tab-description">{{ _('ms3_utilities_extra_fields_description') }}</p>
 
-    <div class="flex justify-content-between align-items-center mb-3">
+    <div class="ms3-utilities-toolbar">
       <div class="flex align-items-center gap-2">
         <label for="class-filter">{{ _('ms3_vue_extra_fields_class_filter') }}</label>
         <Select
@@ -549,6 +535,7 @@ onMounted(() => {
       <Button
         :label="_('ms3_vue_extra_fields_create')"
         icon="pi pi-plus"
+        severity="success"
         :disabled="loading"
         @click="openCreateDialog"
       />
@@ -581,7 +568,7 @@ onMounted(() => {
 
           <Column field="dbtype" :header="_('ms3_vue_table_dbtype')" sortable style="width: 7.5rem">
             <template #body="{ data }">
-              <Tag :value="data.dbtype.toUpperCase()" severity="info" />
+              <Tag :value="data.dbtype.toUpperCase()" severity="secondary" />
             </template>
           </Column>
 
@@ -631,8 +618,7 @@ onMounted(() => {
                 icon="pi pi-pencil"
                 severity="secondary"
                 text
-                rounded
-                class="mr-1"
+                rounded class="mr-1"
                 @click.stop="openEditDialog(data)"
               />
               <Button
@@ -896,13 +882,14 @@ onMounted(() => {
         <Button
           :label="_('ms3_vue_dialog_cancel')"
           icon="pi pi-times"
-          text
+          severity="secondary"
           :disabled="saving"
           @click="dialogVisible = false"
         />
         <Button
           :label="isEditMode ? _('ms3_vue_dialog_save') : _('ms3_vue_dialog_create')"
           icon="pi pi-check"
+          severity="success"
           :loading="saving"
           @click="saveField"
         />
@@ -913,78 +900,16 @@ onMounted(() => {
 
 <style scoped>
 .extra-fields-manager {
-  padding: 1rem;
-}
-</style>
-
-<style>
-/* Modal window styles - work in both .vueApp and .p-dialog */
-.vueApp .edit-field-form,
-.p-dialog .edit-field-form {
-  padding: 0.625rem 0;
-}
-
-.vueApp .form-grid,
-.p-dialog .form-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin: -0.5rem;
-}
-
-.vueApp .edit-field-form .field,
-.p-dialog .edit-field-form .field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding: 0.5rem;
-  box-sizing: border-box;
-}
-
-.vueApp .edit-field-form .field label,
-.p-dialog .edit-field-form .field label {
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--ms3-text-primary);
-}
-
-.vueApp .edit-field-form .field small,
-.p-dialog .edit-field-form .field small {
-  color: var(--ms3-text-muted);
-  font-size: 0.75rem;
-  margin-top: -0.125rem;
-}
-
-.vueApp .edit-field-form .w-full,
-.p-dialog .edit-field-form .w-full {
+  padding: 0;
   width: 100%;
 }
 
-/* Grid for modal window */
-.vueApp .col-6,
-.p-dialog .col-6 {
-  flex: 0 0 calc(50% - 1rem);
-  max-width: calc(50% - 1rem);
-}
-
-.vueApp .col-12,
-.p-dialog .col-12 {
-  flex: 0 0 calc(100% - 1rem);
-  max-width: calc(100% - 1rem);
-}
-
-/* Checkbox in modal window */
-.vueApp .edit-field-form .checkbox-wrapper,
-.p-dialog .edit-field-form .checkbox-wrapper {
+.ms3-utilities-toolbar {
   display: flex;
-  gap: 0.625rem;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
-}
-
-.vueApp .edit-field-form .checkbox-label,
-.p-dialog .edit-field-form .checkbox-label {
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
+  gap: 0.75rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 </style>
diff --git a/vueManager/src/components/FieldsManagement.vue b/vueManager/src/components/FieldsManagement.vue
index a24c85da0..a8efe1621 100644
--- a/vueManager/src/components/FieldsManagement.vue
+++ b/vueManager/src/components/FieldsManagement.vue
@@ -3,7 +3,13 @@ import ProductDataConfig from './ProductDataConfig.vue'
 </script>
 
 <template>
-  <div style="padding: 1.25rem">
+  <div class="fields-management">
     <ProductDataConfig />
   </div>
 </template>
+
+<style scoped>
+.fields-management {
+  padding: 0;
+}
+</style>
diff --git a/vueManager/src/components/FileBrowser.vue b/vueManager/src/components/FileBrowser.vue
index 478041cf0..bc15b24a8 100644
--- a/vueManager/src/components/FileBrowser.vue
+++ b/vueManager/src/components/FileBrowser.vue
@@ -1,6 +1,5 @@
 <script setup>
-import Button from 'primevue/button'
-import InputText from 'primevue/inputtext'
+import { Button, InputText } from 'primevue'
 import { computed, ref, watch } from 'vue'
 
 import { normalizeImagePath } from '../utils/displayFormatters.js'
@@ -155,12 +154,12 @@ function getImageUrl(path) {
         v-if="inputValue && !disabled"
         icon="pi pi-times"
         severity="secondary"
-        text
-        class="clear-button"
+        text class="clear-button"
         @click="clearValue"
       />
       <Button
         icon="pi pi-folder-open"
+        severity="success"
         :disabled="disabled"
         class="browse-button"
         @click="openBrowser"
diff --git a/vueManager/src/components/GridFieldsConfig.vue b/vueManager/src/components/GridFieldsConfig.vue
index 53ffea5d7..0f5b076b4 100644
--- a/vueManager/src/components/GridFieldsConfig.vue
+++ b/vueManager/src/components/GridFieldsConfig.vue
@@ -1,16 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, ConfirmDialog, Dialog, InputText, Select, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -996,7 +986,7 @@ onMounted(() => {
 
     <p class="tab-description">{{ _('ms3_utilities_grid_fields_description') }}</p>
 
-    <div class="flex justify-content-between align-items-center mb-3">
+    <div class="ms3-utilities-toolbar">
       <div class="flex align-items-center gap-2">
         <label for="grid-select">{{ _('select_grid') }}</label>
         <Select
@@ -1009,7 +999,12 @@ onMounted(() => {
           @change="onGridChange"
         />
       </div>
-      <Button :label="_('add_field')" icon="pi pi-plus" @click="openAddDialog" />
+      <Button
+        :label="_('add_field')"
+        icon="pi pi-plus"
+        severity="success"
+        @click="openAddDialog"
+      />
     </div>
 
     <p v-if="isCategoryProductsGrid" class="inline-edit-hint">
@@ -1035,7 +1030,7 @@ onMounted(() => {
                     {{ _('field_editable') }}
                   </th>
                   <th style="width: 7.5rem">{{ _('width') }}</th>
-                  <th style="width: 6.25rem">{{ _('actions') }}</th>
+                  <th style="width: 7.5rem">{{ _('actions') }}</th>
                 </tr>
               </thead>
               <draggable
@@ -1075,24 +1070,23 @@ onMounted(() => {
                     <td>
                       <InputText v-model="field.width" placeholder="9.375rem" class="w-full" />
                     </td>
-                    <td>
-                      <Button
-                        icon="pi pi-pencil"
-                        size="small"
-                        text
-                        :title="_('edit')"
-                        class="mr-2"
-                        @click="openEditDialog(field, index)"
-                      />
-                      <Button
-                        icon="pi pi-trash"
-                        size="small"
-                        severity="danger"
-                        text
-                        :title="_('delete')"
-                        :disabled="field.isSystem"
-                        @click="deleteField(field, index)"
-                      />
+                    <td class="row-actions-cell">
+                      <div class="row-actions">
+                        <Button
+                          icon="pi pi-pencil"
+                          text
+                          :title="_('edit')"
+                          @click="openEditDialog(field, index)"
+                        />
+                        <Button
+                          icon="pi pi-trash"
+                          severity="danger"
+                          text
+                          :title="_('delete')"
+                          :disabled="field.isSystem"
+                          @click="deleteField(field, index)"
+                        />
+                      </div>
                     </td>
                   </tr>
                 </template>
@@ -1108,7 +1102,13 @@ onMounted(() => {
 
         <!-- Save button -->
         <div class="flex justify-content-end">
-          <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveConfig" />
+          <Button
+            :label="_('save')"
+            icon="pi pi-check"
+            severity="success"
+            :loading="saving"
+            @click="saveConfig"
+          />
         </div>
       </template>
     </Card>
@@ -1408,12 +1408,12 @@ onMounted(() => {
           :label="_('cancel')"
           icon="pi pi-times"
           severity="secondary"
-          text
           @click="closeAddDialog"
         />
         <Button
           :label="_('create')"
           icon="pi pi-check"
+          severity="success"
           :disabled="!newField.field_name"
           @click="addField"
         />
@@ -1722,12 +1722,12 @@ onMounted(() => {
           :label="_('cancel')"
           icon="pi pi-times"
           severity="secondary"
-          text
           @click="closeEditDialog"
         />
         <Button
           :label="_('save')"
           icon="pi pi-check"
+          severity="success"
           :disabled="!editingField || !editingField.field_name"
           @click="saveEdit"
         />
@@ -1738,7 +1738,17 @@ onMounted(() => {
 
 <style scoped>
 .grid-fields-config {
-  padding: 1.25rem;
+  padding: 0;
+  width: 100%;
+}
+
+.ms3-utilities-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .drag-handle-cell {
@@ -1747,6 +1757,19 @@ onMounted(() => {
   padding: 0.5rem;
 }
 
+.row-actions-cell {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.row-actions {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .drag-handle {
   cursor: grab;
   color: var(--ms3-text-muted);
@@ -1817,10 +1840,10 @@ label.opacity-50 {
 }
 
 .inline-edit-hint {
-  margin: -0.5rem 0 1rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--ms3-bg-muted, #f0f4f8);
-  border-radius: 0.375rem;
+  margin: 0 0 var(--p-modx-space-panel, 15px);
+  padding: 0;
+  background: none;
+  border-radius: 0;
   font-size: 0.875rem;
   color: var(--ms3-text-muted, #64748b);
   max-width: 100%;
diff --git a/vueManager/src/components/HelpPage.vue b/vueManager/src/components/HelpPage.vue
index 1ec9beb42..ade321f94 100644
--- a/vueManager/src/components/HelpPage.vue
+++ b/vueManager/src/components/HelpPage.vue
@@ -1,247 +1,381 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
 import { computed } from 'vue'
 
 const { _ } = useLexicon()
 
-// Logo from ms3.config
 const logo = computed(() => (typeof ms3 !== 'undefined' ? ms3.config?.defaultThumb : null) || '')
 
-// Quick links to admin sections
-const quickLinks = computed(() => [
-  {
-    icon: 'pi pi-shopping-cart',
-    href: _('ms3_orders_href'),
-    text: _('ms3_orders_text'),
-  },
-  {
-    icon: 'pi pi-users',
-    href: _('ms3_customers_href'),
-    text: _('ms3_customers_text'),
-  },
-  {
-    icon: 'pi pi-bell',
-    href: _('ms3_notifications_href'),
-    text: _('ms3_notifications_text'),
-  },
-  {
-    icon: 'pi pi-cog',
-    href: _('ms3_settings_href'),
-    text: _('ms3_settings_text'),
-  },
-  {
-    icon: 'pi pi-wrench',
-    href: _('ms3_utilities_href'),
-    text: _('ms3_utilities_text'),
-  },
-  {
-    icon: 'pi pi-sliders-h',
-    href: _('ms3_sys_settings_href'),
-    text: _('ms3_sys_settings_text'),
-  },
-])
-
-// Resource cards
-const resourceCards = computed(() => [
-  {
-    icon: 'pi pi-desktop',
-    href: _('ms3_demo_href'),
-    title: _('ms3_demo_title'),
-    text: _('ms3_demo_text'),
-  },
-  {
-    icon: 'pi pi-book',
-    href: _('ms3_docs_href'),
-    title: _('ms3_docs_title'),
-    text: _('ms3_docs_text'),
-  },
-  {
-    icon: 'pi pi-box',
-    href: _('ms3_components_href'),
-    title: _('ms3_components_title'),
-    text: _('ms3_components_text'),
-  },
-  {
-    icon: 'pi pi-comments',
-    href: _('ms3_forum_href'),
-    title: _('ms3_forum_title'),
-    text: _('ms3_forum_text'),
-  },
-  {
-    icon: 'pi pi-github',
-    href: _('ms3_github_href'),
-    title: _('ms3_github_title'),
-    text: _('ms3_github_text'),
-  },
-])
-
-function navigateTo(href) {
-  if (href && href !== '#') {
-    if (href.startsWith('http')) {
-      window.open(href, '_blank')
-    } else {
-      window.location.href = href
-    }
+const quickLinks = computed(() =>
+  [
+    {
+      icon: 'pi pi-shopping-cart',
+      href: _('ms3_orders_href'),
+      text: _('ms3_orders_text'),
+    },
+    {
+      icon: 'pi pi-users',
+      href: _('ms3_customers_href'),
+      text: _('ms3_customers_text'),
+    },
+    {
+      icon: 'pi pi-bell',
+      href: _('ms3_notifications_href'),
+      text: _('ms3_notifications_text'),
+    },
+    {
+      icon: 'pi pi-cog',
+      href: _('ms3_settings_href'),
+      text: _('ms3_settings_text'),
+    },
+    {
+      icon: 'pi pi-wrench',
+      href: _('ms3_utilities_href'),
+      text: _('ms3_utilities_text'),
+    },
+    {
+      icon: 'pi pi-sliders-h',
+      href: _('ms3_sys_settings_href'),
+      text: _('ms3_sys_settings_text'),
+    },
+  ].filter(link => link.href && link.href !== '#')
+)
+
+const resourceCards = computed(() =>
+  [
+    {
+      icon: 'pi pi-desktop',
+      href: _('ms3_demo_href'),
+      title: _('ms3_demo_title'),
+      text: _('ms3_demo_text'),
+    },
+    {
+      icon: 'pi pi-book',
+      href: _('ms3_docs_href'),
+      title: _('ms3_docs_title'),
+      text: _('ms3_docs_text'),
+    },
+    {
+      icon: 'pi pi-box',
+      href: _('ms3_components_href'),
+      title: _('ms3_components_title'),
+      text: _('ms3_components_text'),
+    },
+    {
+      icon: 'pi pi-comments',
+      href: _('ms3_forum_href'),
+      title: _('ms3_forum_title'),
+      text: _('ms3_forum_text'),
+    },
+    {
+      icon: 'pi pi-github',
+      href: _('ms3_github_href'),
+      title: _('ms3_github_title'),
+      text: _('ms3_github_text'),
+    },
+    {
+      icon: 'pi pi-globe',
+      href: _('ms3_localization_href'),
+      title: _('ms3_localization_title'),
+      text: _('ms3_localization_text'),
+    },
+  ].filter(card => card.href && card.href !== '#')
+)
+
+function isExternal(href) {
+  return Boolean(href && href.startsWith('http'))
+}
+
+function onResourceClick(event, href) {
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return
   }
+  if (isExternal(href)) {
+    return
+  }
+  event.preventDefault()
+  window.location.href = href
 }
 </script>
 
 <template>
   <div class="ms3-help-page">
-    <!-- Header section -->
-    <Card class="ms3-help-header">
-      <template #content>
-        <div class="header-content">
-          <div class="header-text">
-            <h2>{{ _('ms3_help') }}</h2>
-            <p>{{ _('ms3_help_text') }}</p>
-          </div>
-          <img v-if="logo" :src="logo" alt="MiniShop3" class="header-logo" />
-        </div>
-      </template>
-    </Card>
-
-    <!-- Quick links -->
-    <Card class="ms3-quick-links">
-      <template #content>
-        <div class="quick-links-grid">
-          <Button
-            v-for="link in quickLinks"
-            :key="link.href"
-            :label="link.text"
-            :icon="link.icon"
-            severity="secondary"
-            outlined
-            @click="navigateTo(link.href)"
-          />
-        </div>
-      </template>
-    </Card>
-
-    <!-- Resource cards -->
-    <div class="ms3-resource-cards">
-      <Card
-        v-for="card in resourceCards"
-        :key="card.title"
-        class="resource-card"
-        @click="navigateTo(card.href)"
-      >
-        <template #content>
-          <div class="resource-content">
-            <i :class="[card.icon, 'resource-icon']" />
-            <div class="resource-text">
-              <strong>{{ card.title }}</strong>
-              <span>{{ card.text }}</span>
-            </div>
-          </div>
-        </template>
-      </Card>
-    </div>
-
-    <!-- Support section -->
-    <Card class="ms3-support-section">
-      <template #content>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <div v-html="_('ms3_help_text_support')" />
-      </template>
-    </Card>
+    <header class="ms3-help-page__header">
+      <div class="ms3-help-page__header-text">
+        <h2 class="ms3-help-page__title">{{ _('ms3_help') }}</h2>
+        <p class="ms3-help-page__intro">{{ _('ms3_help_text') }}</p>
+      </div>
+      <img v-if="logo" :src="logo" alt="MiniShop3" class="ms3-help-page__logo" />
+    </header>
+
+    <section class="ms3-help-page__section" aria-labelledby="ms3-help-nav-heading">
+      <h3 id="ms3-help-nav-heading" class="ms3-help-page__section-title">
+        {{ _('ms3_help_nav_title') }}
+      </h3>
+      <div class="ms3-help-page__nav-grid">
+        <a
+          v-for="link in quickLinks"
+          :key="link.href"
+          class="p-button p-component p-button-secondary"
+          :href="link.href"
+          :target="isExternal(link.href) ? '_blank' : undefined"
+          :rel="isExternal(link.href) ? 'noopener noreferrer' : undefined"
+        >
+          <span :class="[link.icon, 'p-button-icon', 'p-button-icon-left']" aria-hidden="true" />
+          <span class="p-button-label">{{ link.text }}</span>
+        </a>
+      </div>
+    </section>
+
+    <section class="ms3-help-page__section" aria-labelledby="ms3-help-resources-heading">
+      <h3 id="ms3-help-resources-heading" class="ms3-help-page__section-title">
+        {{ _('ms3_help_resources_title') }}
+      </h3>
+      <div class="ms3-help-page__resources">
+        <a
+          v-for="card in resourceCards"
+          :key="card.title"
+          class="ms3-help-page__resource"
+          :href="card.href"
+          :target="isExternal(card.href) ? '_blank' : undefined"
+          :rel="isExternal(card.href) ? 'noopener noreferrer' : undefined"
+          @click="onResourceClick($event, card.href)"
+        >
+          <span class="ms3-help-page__resource-icon-wrap" aria-hidden="true">
+            <i :class="[card.icon, 'ms3-help-page__resource-icon']" />
+          </span>
+          <span class="ms3-help-page__resource-body">
+            <span class="ms3-help-page__resource-title">
+              {{ card.title }}
+              <i
+                v-if="isExternal(card.href)"
+                class="pi pi-external-link ms3-help-page__external"
+                aria-hidden="true"
+              />
+            </span>
+            <span class="ms3-help-page__resource-text">{{ card.text }}</span>
+          </span>
+        </a>
+      </div>
+    </section>
+
+    <section class="ms3-help-page__support">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div class="ms3-help-page__support-body" v-html="_('ms3_help_text_support')" />
+    </section>
   </div>
 </template>
 
 <style scoped>
 .ms3-help-page {
-  padding: 1rem;
-  max-width: 75rem;
-}
-
-.ms3-help-header {
-  margin-bottom: 1rem;
+  padding: var(--p-modx-space-panel, 15px);
+  max-width: 56rem;
+  box-sizing: border-box;
 }
 
-.header-content {
+.ms3-help-page__header {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 2rem;
+  gap: var(--p-modx-space-panel, 15px);
+  margin-bottom: 1.5rem;
 }
 
-.header-text h2 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.5rem;
-  color: var(--p-text-color);
+.ms3-help-page__title {
+  margin: 0 0 0.25rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
 }
 
-.header-text p {
+.ms3-help-page__intro {
   margin: 0;
-  color: var(--p-text-muted-color);
+  padding: 0;
+  max-width: 40rem;
+  color: var(--ms3-text-muted, #64748b);
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
-.header-logo {
-  max-height: 5rem;
+.ms3-help-page__logo {
+  max-height: 3.5rem;
   object-fit: contain;
 }
 
-.ms3-quick-links {
-  margin-bottom: 1rem;
+.ms3-help-page__section {
+  margin-bottom: 1.5rem;
+}
+
+.ms3-help-page__section-title {
+  margin: 0 0 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--ms3-text-muted, #64748b);
 }
 
-.quick-links-grid {
+.ms3-help-page__nav-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.ms3-resource-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.resource-card {
+/* MODX manager resets bare `a` (padding/bg). Re-assert PrimeVue secondary button. */
+.ms3-help-page__nav-grid > a.p-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--p-button-gap, 0.375rem);
+  box-sizing: border-box;
+  min-height: var(--p-modx-control-height, 36px);
+  padding: var(--p-button-padding-y, 0.5rem) var(--p-button-padding-x, 0.875rem);
+  margin: 0;
+  border: 1px solid var(--p-button-secondary-border-color, #d0d0d0);
+  border-radius: var(--p-button-border-radius, 0.25rem);
+  background: var(--p-button-secondary-background, #fff);
+  color: var(--p-button-secondary-color, #4a4a4a);
+  font-size: var(--p-modx-font-size-lg, 0.875rem);
+  font-weight: var(--p-button-label-font-weight, 400);
+  line-height: 1;
+  text-decoration: none;
   cursor: pointer;
   transition:
-    transform 0.2s,
-    box-shadow 0.2s;
+    background-color var(--p-button-transition-duration, 0.15s),
+    border-color var(--p-button-transition-duration, 0.15s),
+    color var(--p-button-transition-duration, 0.15s);
+}
+
+.ms3-help-page__nav-grid > a.p-button:hover {
+  background: var(--p-button-secondary-hover-background, #e8e8e8);
+  border-color: var(--p-button-secondary-hover-border-color, #c0c0c0);
+  color: var(--p-button-secondary-hover-color, #333);
 }
 
-.resource-card:hover {
-  transform: translateY(-0.125rem);
-  box-shadow: var(--ms3-shadow-dropdown);
+.ms3-help-page__nav-grid > a.p-button:focus-visible {
+  outline: 2px solid var(--p-primary-color, #234368);
+  outline-offset: 2px;
 }
 
-.resource-content {
+.ms3-help-page__nav-grid > a.p-button .p-button-icon {
+  font-size: 1rem;
+}
+
+.ms3-help-page__resources {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  text-align: center;
+  gap: 0.5rem;
+  max-width: 40rem;
+}
+
+.ms3-help-page__resource {
+  display: flex;
+  align-items: flex-start;
   gap: 0.75rem;
+  padding: 0.75rem var(--p-modx-space-panel, 15px);
+  box-sizing: border-box;
+  background: var(--p-content-background, #fff);
+  border: 1px solid var(--ms3-border-color-alt, #e4e4e4);
+  border-radius: var(--p-content-border-radius, 0.25rem);
+  border-left: 3px solid transparent;
+  color: inherit;
+  text-decoration: none;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
 }
 
-.resource-icon {
-  font-size: 2rem;
-  color: var(--p-primary-color);
+.ms3-help-page__resource:hover {
+  border-color: var(--ms3-border-color, #d0d0d0);
+  border-left-color: var(--p-primary-color, #234368);
+  background: var(--ms3-bg-muted, #fbfbfb);
 }
 
-.resource-text {
+.ms3-help-page__resource:focus-visible {
+  outline: 2px solid var(--p-primary-color, #234368);
+  outline-offset: 2px;
+}
+
+.ms3-help-page__resource-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 2rem;
+  width: 2rem;
+  height: 2rem;
+  margin-top: 0.125rem;
+}
+
+.ms3-help-page__resource-icon {
+  font-size: 1.25rem;
+  color: var(--p-primary-color, #234368);
+}
+
+.ms3-help-page__resource-body {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.125rem;
+  min-width: 0;
 }
 
-.resource-text strong {
-  font-size: 0.95rem;
-  color: var(--p-text-color);
+.ms3-help-page__resource-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.3;
 }
 
-.resource-text span {
-  font-size: 0.85rem;
-  color: var(--p-text-muted-color);
+.ms3-help-page__external {
+  font-size: 0.75rem;
+  color: var(--ms3-text-muted, #64748b);
+  font-weight: 400;
 }
 
-.ms3-support-section :deep(a) {
-  color: var(--p-primary-color);
+.ms3-help-page__resource-text {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--ms3-text-muted, #64748b);
+}
+
+.ms3-help-page__support {
+  max-width: 40rem;
+  padding-top: 0.25rem;
+}
+
+.ms3-help-page__support-body {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--ms3-text-muted, #64748b);
+}
+
+.ms3-help-page__support-body :deep(strong) {
+  color: #333;
+  font-weight: 600;
+}
+
+.ms3-help-page__support-body :deep(a) {
+  color: var(--p-primary-color, #234368);
+}
+
+.ms3-help-page__support-body :deep(a:focus-visible) {
+  outline: 2px solid var(--p-primary-color, #234368);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ms3-help-page__resource {
+    transition: none;
+  }
 }
 </style>
diff --git a/vueManager/src/components/ImportProducts.vue b/vueManager/src/components/ImportProducts.vue
index 195c25859..9d97e9e90 100644
--- a/vueManager/src/components/ImportProducts.vue
+++ b/vueManager/src/components/ImportProducts.vue
@@ -1,16 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
-import Message from 'primevue/message'
-import ProgressBar from 'primevue/progressbar'
-import RadioButton from 'primevue/radiobutton'
-import Select from 'primevue/select'
-import SelectButton from 'primevue/selectbutton'
-import Toast from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+import { Button, Checkbox, Column, DataTable, Message, ProgressBar, RadioButton, Select, SelectButton, Toast, useToast } from 'primevue'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
@@ -328,61 +318,80 @@ onMounted(() => {
       {{ fieldsError }}
     </Message>
 
-    <div class="step-indicators">
-      <div
+    <nav class="step-indicators" :aria-label="_('ms3_utilities_import')">
+      <button
+        type="button"
         class="step-indicator"
         :class="{ active: currentStep === 1, completed: currentStep > 1 }"
+        :aria-current="currentStep === 1 ? 'step' : undefined"
         @click="goToStep(1)"
       >
-        <span class="step-number">1</span>
+        <span class="step-number" aria-hidden="true">1</span>
         <span class="step-title">{{ _('ms3_import_step_upload') }}</span>
-      </div>
-      <div class="step-connector" :class="{ active: currentStep > 1 }"></div>
-      <div
+      </button>
+      <span class="step-connector" :class="{ active: currentStep > 1 }" aria-hidden="true" />
+      <button
+        type="button"
         class="step-indicator"
         :class="{
           active: currentStep === 2,
           completed: currentStep > 2,
           disabled: !canProceedToStep2,
         }"
+        :disabled="!canProceedToStep2"
+        :aria-current="currentStep === 2 ? 'step' : undefined"
         @click="goToStep(2)"
       >
-        <span class="step-number">2</span>
+        <span class="step-number" aria-hidden="true">2</span>
         <span class="step-title">{{ _('ms3_import_step_mapping') }}</span>
-      </div>
-      <div class="step-connector" :class="{ active: currentStep > 2 }"></div>
-      <div
+      </button>
+      <span class="step-connector" :class="{ active: currentStep > 2 }" aria-hidden="true" />
+      <button
+        type="button"
         class="step-indicator"
         :class="{ active: currentStep === 3, disabled: !canProceedToStep3 }"
+        :disabled="!canProceedToStep3"
+        :aria-current="currentStep === 3 ? 'step' : undefined"
         @click="goToStep(3)"
       >
-        <span class="step-number">3</span>
+        <span class="step-number" aria-hidden="true">3</span>
         <span class="step-title">{{ _('ms3_import_step_import') }}</span>
-      </div>
-    </div>
+      </button>
+    </nav>
 
     <!-- Step 1: File Upload -->
     <div v-show="currentStep === 1" class="step-content">
       <h3>{{ _('ms3_import_select_file') }}</h3>
 
       <div class="upload-section">
-        <div class="upload-area" :class="{ uploading: uploading }" @click="triggerFileInput">
+        <div
+          class="upload-area"
+          role="button"
+          tabindex="0"
+          :class="{ uploading: uploading }"
+          :aria-label="_('ms3_import_drop_or_click')"
+          @click="triggerFileInput"
+          @keydown.enter.prevent="triggerFileInput"
+          @keydown.space.prevent="triggerFileInput"
+        >
           <input
             ref="fileInputRef"
             type="file"
             accept=".csv"
-            style="display: none"
+            class="upload-input"
             @change="handleFileSelect"
           />
-          <div class="upload-icon">
-            <i v-if="!uploading" class="pi pi-cloud-upload"></i>
-            <i v-else class="pi pi-spin pi-spinner"></i>
-          </div>
-          <div class="upload-text">
-            <span v-if="!uploading">{{ _('ms3_import_drop_or_click') }}</span>
-            <span v-else>{{ _('ms3_import_uploading') }}</span>
+          <i
+            class="upload-icon"
+            :class="uploading ? 'pi pi-spin pi-spinner' : 'pi pi-cloud-upload'"
+            aria-hidden="true"
+          />
+          <div class="upload-copy">
+            <span class="upload-text">{{
+              uploading ? _('ms3_import_uploading') : _('ms3_import_drop_or_click')
+            }}</span>
+            <span class="upload-hint">{{ _('ms3_import_csv_only') }}</span>
           </div>
-          <div class="upload-hint">{{ _('ms3_import_csv_only') }}</div>
         </div>
         <Message v-if="uploadError" severity="error" :closable="true" @close="uploadError = null">{{
           uploadError
@@ -408,12 +417,13 @@ onMounted(() => {
       <div v-if="filePath" class="settings-section">
         <h4>{{ _('ms3_import_settings') }}</h4>
         <div class="setting-row">
-          <label>{{ _('ms3_import_delimiter') }}</label>
+          <label id="ms3-import-delimiter-label">{{ _('ms3_import_delimiter') }}</label>
           <SelectButton
             v-model="delimiter"
             :options="delimiterOptions"
             option-label="label"
             option-value="value"
+            aria-labelledby="ms3-import-delimiter-label"
           />
         </div>
         <div class="setting-row">
@@ -446,6 +456,7 @@ onMounted(() => {
           :label="_('ms3_import_next')"
           icon="pi pi-arrow-right"
           icon-pos="right"
+          severity="success"
           :disabled="!canProceedToStep2"
           @click="currentStep = 2"
         />
@@ -525,6 +536,7 @@ onMounted(() => {
           :label="_('ms3_import_next')"
           icon="pi pi-arrow-right"
           icon-pos="right"
+          severity="success"
           :disabled="!canProceedToStep3"
           @click="currentStep = 3"
         />
@@ -591,7 +603,8 @@ onMounted(() => {
           <Button
             :label="_('ms3_import_start')"
             icon="pi pi-play"
-            :loading="loading"
+            severity="success"
+            :loading="importRunning"
             @click="startImport"
           />
         </div>
@@ -632,7 +645,12 @@ onMounted(() => {
           <template v-else>{{ importResult.message }}</template>
         </Message>
         <div class="step-actions">
-          <Button :label="_('ms3_import_new')" icon="pi pi-plus" @click="resetImport" />
+          <Button
+            :label="_('ms3_import_new')"
+            icon="pi pi-plus"
+            severity="success"
+            @click="resetImport"
+          />
         </div>
       </div>
     </div>
@@ -641,161 +659,172 @@ onMounted(() => {
 
 <style scoped>
 .import-products {
-  padding: 1.25rem;
-  max-width: 62.5rem;
+  padding: 0;
+  max-width: none;
+  width: 100%;
 }
 .import-global-error {
   margin-bottom: 1rem;
 }
+
+/* Quiet MODX-style stepper: green marks progress (same as primary CTA). */
 .step-indicators {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 1.875rem;
-  padding: 1.25rem 0;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-bottom: 1.25rem;
+  padding: 0;
 }
 .step-indicator {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  border-radius: 0.5rem;
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--ms3-text-muted, #64748b);
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25;
   cursor: pointer;
-  transition: all 0.2s;
-  background: var(--ms3-bg-muted);
 }
-.step-indicator:hover:not(.disabled) {
-  background: var(--ms3-bg-neutral);
+.step-indicator:hover:not(:disabled):not(.disabled) {
+  color: var(--ms3-text-darkest, #1e293b);
+  background: var(--ms3-bg-muted, #f8f9fa);
 }
 .step-indicator.active {
-  background: var(--ms3-accent-primary);
-  color: var(--ms3-text-on-primary);
+  color: var(--ms3-text-darkest, #1e293b);
+  font-weight: 600;
 }
 .step-indicator.completed {
-  background: var(--ms3-text-success);
-  color: var(--ms3-text-on-primary);
+  color: var(--ms3-text-darkest, #1e293b);
 }
+.step-indicator:disabled,
 .step-indicator.disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 .step-number {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.5rem;
+  height: 1.5rem;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--ms3-border-color-alt, #dee2e6);
+  background: var(--ms3-bg-surface, #fff);
+  color: inherit;
+  font-size: 0.75rem;
   font-weight: 600;
+  box-sizing: border-box;
 }
 .step-indicator.active .step-number,
 .step-indicator.completed .step-number {
-  background: rgba(255, 255, 255, 0.2);
+  border-color: var(--p-green-600, #6cb24a);
+  background: var(--p-green-600, #6cb24a);
+  color: #fff;
 }
 .step-title {
-  font-weight: 500;
+  font-weight: inherit;
 }
 .step-connector {
-  width: 2.5rem;
-  height: 0.125rem;
-  background: var(--ms3-border-color-alt);
-  margin: 0 0.5rem;
+  display: block;
+  width: 1.5rem;
+  height: 1px;
+  margin: 0 0.125rem;
+  background: var(--ms3-border-color-alt, #dee2e6);
+  flex-shrink: 0;
 }
 .step-connector.active {
-  background: var(--ms3-text-success);
+  background: var(--p-green-600, #6cb24a);
 }
 .step-content {
-  padding: 1.25rem 0;
+  padding: 0;
 }
 .step-content h3 {
-  margin-bottom: 1.25rem;
-  font-size: 1.25rem;
+  margin: 0 0 0.75rem;
+  font-size: 1.125rem;
   font-weight: 600;
+  color: var(--ms3-text-darkest, #1e293b);
 }
 .step-content h4 {
-  margin: 1.25rem 0 0.625rem;
-  font-size: 1rem;
-  font-weight: 500;
-}
-.file-source-tabs {
-  margin-bottom: 1.25rem;
+  margin: 1rem 0 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
 }
-.source-tab-buttons {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+.upload-section {
+  max-width: 28rem;
 }
-.source-tab-btn {
+.upload-area {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
-  border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
-  background: var(--ms3-bg-surface);
-  border-radius: var(--ms3-radius-md);
+  gap: 0.75rem;
+  max-width: 28rem;
+  border: 1px dashed var(--ms3-border-color-alt, #dee2e6);
+  border-radius: 0.25rem;
+  padding: var(--p-modx-space-panel, 15px);
   cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.9rem;
-}
-.source-tab-btn:hover {
-  background: var(--ms3-bg-muted);
-}
-.source-tab-btn.active {
-  background: var(--ms3-accent-primary);
-  color: var(--ms3-text-on-primary);
-  border-color: var(--ms3-accent-primary);
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+  background: var(--ms3-bg-gray-50, #fafafa);
 }
-.source-tab-content {
-  min-height: 9.375rem;
-}
-.upload-area {
-  border: var(--ms3-border-width-focus) dashed var(--ms3-border-color-alt);
-  border-radius: var(--ms3-radius-lg);
-  padding: 2.5rem 1.25rem;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: var(--ms3-bg-gray-50);
-}
-.upload-area:hover {
-  border-color: var(--ms3-accent-primary);
-  background: var(--ms3-bg-accent);
+.upload-area:hover,
+.upload-area:focus-visible {
+  border-color: var(--p-green-600, #6cb24a);
+  background: var(--ms3-bg-success-light, #e8f5e9);
+  outline: none;
 }
 .upload-area.uploading {
   pointer-events: none;
   opacity: 0.7;
 }
+.upload-input {
+  display: none;
+}
 .upload-icon {
-  font-size: 3rem;
-  color: var(--ms3-text-muted);
-  margin-bottom: 0.9375rem;
+  flex: 0 0 auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--ms3-text-muted, #64748b);
+}
+.upload-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
 }
 .upload-text {
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.35;
+  color: var(--ms3-text-darkest, #1e293b);
 }
 .upload-hint {
-  font-size: 0.85rem;
-  color: var(--ms3-text-muted);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: var(--ms3-text-muted, #64748b);
 }
 .modx-browser-section {
   text-align: center;
-  padding: 2.5rem 1.25rem;
+  padding: 1.5rem 1rem;
   background: var(--ms3-bg-gray-50);
-  border-radius: var(--ms3-radius-lg);
-  border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+  border-radius: 0.25rem;
+  border: 1px solid var(--ms3-border-color-alt);
 }
 .browser-hint {
-  margin-bottom: 1.25rem;
+  margin-bottom: 1rem;
   color: var(--ms3-text-muted);
 }
 .selected-file {
-  margin: 1.25rem 0;
-  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  padding: 0.625rem 0.875rem;
   background: var(--ms3-bg-success-light);
-  border-radius: var(--ms3-radius-md);
-  border: var(--ms3-border-width) solid var(--ms3-border-success-light);
+  border-radius: 0.25rem;
+  border: 1px solid var(--ms3-border-success-light);
 }
 .selected-file-header {
   display: flex;
@@ -804,7 +833,7 @@ onMounted(() => {
 }
 .selected-file-header i {
   color: var(--ms3-text-success-dark);
-  font-size: 1.2rem;
+  font-size: 1.125rem;
 }
 .file-name {
   flex: 1;
@@ -815,29 +844,32 @@ onMounted(() => {
 .update-settings,
 .import-options {
   background: var(--ms3-bg-muted);
-  padding: 0.9375rem;
-  border-radius: 0.375rem;
-  margin: 1.25rem 0;
+  padding: var(--p-modx-space-panel, 15px);
+  border-radius: 0.25rem;
+  margin: var(--p-modx-space-panel, 15px) 0;
 }
 .setting-row {
   display: flex;
   align-items: center;
   gap: 0.625rem;
-  margin: 0.625rem 0;
+  margin: 0;
+}
+.setting-row + .setting-row {
+  margin-top: var(--p-modx-space-panel, 15px);
 }
 .setting-row label {
   cursor: pointer;
 }
 .file-info {
-  margin: 1.25rem 0;
+  margin: 1rem 0;
 }
 .step-actions {
   display: flex;
-  gap: 0.625rem;
+  gap: 0.5rem;
   justify-content: flex-end;
-  margin-top: 1.875rem;
-  padding-top: 1.25rem;
-  border-top: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+  margin-top: 1.25rem;
+  padding-top: 0.9375rem;
+  border-top: 1px solid var(--ms3-border-color-alt);
 }
 .mapping-table {
   margin: 1.25rem 0;
diff --git a/vueManager/src/components/KeyValueField.vue b/vueManager/src/components/KeyValueField.vue
index 22387a172..ca2ee24de 100644
--- a/vueManager/src/components/KeyValueField.vue
+++ b/vueManager/src/components/KeyValueField.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
+import { Button, InputNumber, InputText, Message } from 'primevue'
 import { computed, ref, watch } from 'vue'
 
 import {
@@ -218,9 +215,7 @@ function removeFreePair(index) {
             icon="pi pi-times"
             severity="danger"
             text
-            rounded
-            size="small"
-            class="ms3-key-value-actions-col"
+            rounded class="ms3-key-value-actions-col"
             :disabled="disabled"
             @click="removeFreePair(index)"
           />
@@ -230,9 +225,7 @@ function removeFreePair(index) {
       <Button
         icon="pi pi-plus"
         :label="_('ms3_vue_key_value_add_pair')"
-        severity="secondary"
-        size="small"
-        class="ms3-key-value-add"
+        severity="secondary" class="ms3-key-value-add"
         :disabled="disabled"
         @click="addFreePair"
       />
diff --git a/vueManager/src/components/KeyValueSchemaEditor.vue b/vueManager/src/components/KeyValueSchemaEditor.vue
index b3e763e0f..dc586545f 100644
--- a/vueManager/src/components/KeyValueSchemaEditor.vue
+++ b/vueManager/src/components/KeyValueSchemaEditor.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
+import { Button, Checkbox, InputText, Select } from 'primevue'
 import { computed } from 'vue'
 
 import { defaultKeyValueConfig } from '../utils/keyValueField.js'
@@ -84,7 +81,6 @@ function updateKey(index, patch) {
         <Button
           icon="pi pi-plus"
           :label="_('ms3_vue_key_value_add_key')"
-          size="small"
           severity="secondary"
           @click="addKey"
         />
@@ -125,7 +121,6 @@ function updateKey(index, patch) {
           severity="danger"
           text
           rounded
-          size="small"
           @click="removeKey(index)"
         />
       </div>
diff --git a/vueManager/src/components/LinksGrid.vue b/vueManager/src/components/LinksGrid.vue
index 1e5ba50b9..550fe36f4 100644
--- a/vueManager/src/components/LinksGrid.vue
+++ b/vueManager/src/components/LinksGrid.vue
@@ -1,17 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Paginator from 'primevue/paginator'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Column, ConfirmDialog, DataTable, Dialog, InputText, Paginator, Select, Textarea, Toast, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 
 import { useCrudDialog } from '../composables/useCrudDialog.js'
@@ -234,7 +223,6 @@ onMounted(() => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -242,7 +230,6 @@ onMounted(() => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -355,7 +342,13 @@ onMounted(() => {
 
       <template #footer>
         <Button :label="_('cancel')" icon="pi pi-times" severity="secondary" @click="close" />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveLink" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveLink"
+        />
       </template>
     </Dialog>
   </div>
@@ -366,32 +359,34 @@ onMounted(() => {
 .ms3-link-form {
   display: flex;
   flex-direction: column;
+  gap: 15px;
 }
 
 .ms3-link-form .form-row {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: 4px;
+  margin-bottom: 0;
 }
 
 .ms3-link-form .form-row label {
   font-weight: 500;
+  font-size: 0.875rem;
   color: var(--ms3-text-primary);
 }
 
-.ms3-link-form .type-description {
-  color: var(--ms3-text-muted);
-  font-style: italic;
-  padding: 0.5rem;
-  background: var(--ms3-bg-gray-100);
-  border-radius: 0.25rem;
-  margin-top: 0.25rem;
-}
-
+/* Field help like MODX resource form hints — no boxed callout */
+.ms3-link-form .type-description,
 .ms3-link-form .type-hint {
-  color: var(--ms3-text-muted-light);
-  font-size: 0.8rem;
+  display: block;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border-radius: 0;
+  font-style: normal;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--ms3-text-muted);
 }
 
 .ms3-link-form .w-full {
@@ -401,7 +396,7 @@ onMounted(() => {
 
 <style scoped>
 .links-grid {
-  padding: 1.25rem;
+  padding: 0;
 }
 
 .grid-header {
diff --git a/vueManager/src/components/ModelFieldsGrid.vue b/vueManager/src/components/ModelFieldsGrid.vue
index d4bbdec67..64044be30 100644
--- a/vueManager/src/components/ModelFieldsGrid.vue
+++ b/vueManager/src/components/ModelFieldsGrid.vue
@@ -1,22 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import Fieldset from 'primevue/fieldset'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Panel from 'primevue/panel'
-import Select from 'primevue/select'
-import Slider from 'primevue/slider'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Checkbox, Column, ConfirmDialog, DataTable, Dialog, Fieldset, InputNumber, InputText, Panel, Select, Slider, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -643,7 +627,7 @@ onMounted(async () => {
     <p class="tab-description">{{ _('ms3_utilities_model_fields_description') }}</p>
 
     <!-- Model filter - top bar -->
-    <div class="model-filter-bar mb-3">
+    <div class="model-filter-bar ms3-utilities-section">
       <div style="display: flex; align-items: center; gap: 0.5rem">
         <label style="font-weight: 500">{{ _('ms3_model_field_model') }}:</label>
         <Select
@@ -662,13 +646,13 @@ onMounted(async () => {
       v-model:collapsed="sectionsPanelCollapsed"
       :header="_('ms3_model_sections_title')"
       :toggleable="true"
-      class="sections-panel mb-3"
+      class="sections-panel ms3-utilities-section ms3-config-panel"
     >
       <template #icons>
         <Button
           :label="_('ms3_model_section_add')"
           icon="pi pi-plus"
-          class="p-button-sm"
+          severity="success"
           @click.stop="createSection"
         />
       </template>
@@ -676,7 +660,6 @@ onMounted(async () => {
       <DataTable
         :value="sections"
         :loading="sectionsLoading"
-        size="small"
         striped-rows
         class="sections-table"
       >
@@ -699,8 +682,7 @@ onMounted(async () => {
           <template #body="{ data }">
             <Button
               :icon="data.hidden ? 'pi pi-eye-slash' : 'pi pi-eye'"
-              :class="data.hidden ? 'p-button-secondary' : 'p-button-success'"
-              class="p-button-sm p-button-text"
+              :class="data.hidden ? 'p-button-secondary' : 'p-button-success'" class="p-button-text"
               @click="toggleSectionHidden(data)"
             />
           </template>
@@ -714,17 +696,21 @@ onMounted(async () => {
         </Column>
         <Column :header="_('actions')" style="width: 7.5rem">
           <template #body="{ data }">
-            <Button
-              icon="pi pi-pencil"
-              class="p-button-sm p-button-text p-button-warning"
-              @click="editSection(data)"
-            />
-            <Button
-              icon="pi pi-trash"
-              class="p-button-sm p-button-text p-button-danger"
-              :disabled="data.is_default"
-              @click="deleteSection(data)"
-            />
+            <div class="row-actions">
+              <Button
+                icon="pi pi-pencil"
+                text
+                severity="secondary"
+                @click="editSection(data)"
+              />
+              <Button
+                icon="pi pi-trash"
+                text
+                severity="danger"
+                :disabled="data.is_default"
+                @click="deleteSection(data)"
+              />
+            </div>
           </template>
         </Column>
         <template #empty>
@@ -733,111 +719,115 @@ onMounted(async () => {
       </DataTable>
     </Panel>
 
-    <!-- Fields Card -->
-    <Card>
-      <template #title>
-        <div style="display: flex; justify-content: space-between; align-items: center">
-          <span>{{ _('ms3_model_fields_title') }}</span>
-          <Button
-            :label="_('ms3_model_field_add')"
-            icon="pi pi-plus"
-            class="p-button-sm"
-            @click="createField"
-          />
-        </div>
+    <!-- Fields panel (same chrome as sections above) -->
+    <Panel
+      :header="_('ms3_model_fields_title')"
+      class="fields-panel ms3-utilities-section ms3-config-panel"
+    >
+      <template #icons>
+        <Button
+          :label="_('ms3_model_field_add')"
+          icon="pi pi-plus"
+          severity="success"
+          @click.stop="createField"
+        />
       </template>
 
-      <template #content>
-        <!-- Fields table with VueDraggable -->
-        <div v-if="!loading" class="p-datatable p-component p-datatable-striped p-datatable-sm">
-          <div class="p-datatable-wrapper">
-            <table class="p-datatable-table">
-              <thead class="p-datatable-thead">
+      <!-- Fields table with VueDraggable -->
+      <div v-if="!loading" class="p-datatable p-component p-datatable-striped">
+        <div class="p-datatable-wrapper">
+          <table class="p-datatable-table">
+            <thead class="p-datatable-thead">
+              <tr>
+                <th style="width: 3rem"></th>
+                <th>{{ _('ms3_model_field_name') }}</th>
+                <th>{{ _('ms3_model_field_label') }}</th>
+                <th style="width: 7.5rem">{{ _('ms3_model_field_section') }}</th>
+                <th style="width: 6.25rem">{{ _('ms3_model_field_width') }}</th>
+                <th style="width: 7.5rem">{{ _('ms3_model_field_xtype') }}</th>
+                <th style="width: 6.5rem">{{ _('ms3_model_field_visible') }}</th>
+                <th style="width: 8.5rem">{{ _('ms3_model_field_required') }}</th>
+                <th style="width: 7.5rem">{{ _('actions') }}</th>
+              </tr>
+            </thead>
+            <draggable
+              v-model="fields"
+              tag="tbody"
+              class="p-datatable-tbody"
+              handle=".drag-handle"
+              item-key="id"
+              :animation="200"
+              ghost-class="ghost-row"
+              @end="onDragEnd"
+            >
+              <template #item="{ element: field }">
                 <tr>
-                  <th style="width: 3rem"></th>
-                  <th>{{ _('ms3_model_field_name') }}</th>
-                  <th>{{ _('ms3_model_field_label') }}</th>
-                  <th style="width: 7.5rem">{{ _('ms3_model_field_section') }}</th>
-                  <th style="width: 6.25rem">{{ _('ms3_model_field_width') }}</th>
-                  <th style="width: 7.5rem">{{ _('ms3_model_field_xtype') }}</th>
-                  <th style="width: 5rem">{{ _('ms3_model_field_visible') }}</th>
-                  <th style="width: 5rem">{{ _('ms3_model_field_required') }}</th>
-                  <th style="width: 7.5rem">{{ _('actions') }}</th>
-                </tr>
-              </thead>
-              <draggable
-                v-model="fields"
-                tag="tbody"
-                class="p-datatable-tbody"
-                handle=".drag-handle"
-                item-key="id"
-                :animation="200"
-                ghost-class="ghost-row"
-                @end="onDragEnd"
-              >
-                <template #item="{ element: field }">
-                  <tr>
-                    <td class="drag-handle-cell">
-                      <i class="pi pi-bars drag-handle"></i>
-                    </td>
-                    <td>
-                      <strong>{{ field.name }}</strong>
-                    </td>
-                    <td>
-                      {{ field.label_translated || field.label || '-' }}
-                    </td>
-                    <td>
-                      {{ getSectionLabel(field.section_id) }}
-                    </td>
-                    <td>{{ field.width }}/12</td>
-                    <td>
-                      {{ getXtypeLabel(field.xtype) }}
-                    </td>
-                    <td>
-                      <Button
-                        :icon="field.visible ? 'pi pi-eye' : 'pi pi-eye-slash'"
-                        :class="field.visible ? 'p-button-success' : 'p-button-secondary'"
-                        class="p-button-sm p-button-text"
-                        @click="toggleVisible(field)"
-                      />
-                    </td>
-                    <td>
-                      <i
-                        :class="
-                          field.required
-                            ? 'pi pi-check text-green-500'
-                            : 'pi pi-minus text-gray-400'
-                        "
-                      />
-                    </td>
-                    <td>
+                  <td class="drag-handle-cell">
+                    <i class="pi pi-bars drag-handle"></i>
+                  </td>
+                  <td>
+                    <strong>{{ field.name }}</strong>
+                  </td>
+                  <td>
+                    {{ field.label_translated || field.label || '-' }}
+                  </td>
+                  <td>
+                    {{ getSectionLabel(field.section_id) }}
+                  </td>
+                  <td>{{ field.width }}/12</td>
+                  <td>
+                    {{ getXtypeLabel(field.xtype) }}
+                  </td>
+                  <td>
+                    <Button
+                      :icon="field.visible ? 'pi pi-eye' : 'pi pi-eye-slash'"
+                      :class="field.visible ? 'p-button-success' : 'p-button-secondary'"
+                      class="p-button-text"
+                      @click="toggleVisible(field)"
+                    />
+                  </td>
+                  <td>
+                    <i
+                      :class="
+                        field.required
+                          ? 'pi pi-check text-green-500'
+                          : 'pi pi-minus text-gray-400'
+                      "
+                    />
+                  </td>
+                  <td class="row-actions-cell">
+                    <div class="row-actions">
                       <Button
                         icon="pi pi-pencil"
-                        class="p-button-sm p-button-text p-button-warning"
+                        text
+                        severity="secondary"
+                        :title="_('edit')"
                         @click="editField(field)"
                       />
                       <Button
                         icon="pi pi-trash"
-                        class="p-button-sm p-button-text p-button-danger"
+                        text
+                        severity="danger"
+                        :title="_('delete')"
                         @click="deleteField(field)"
                       />
-                    </td>
-                  </tr>
-                </template>
-              </draggable>
-            </table>
-          </div>
-          <div v-if="fields.length === 0" class="text-center p-4">
-            {{ _('ms3_model_fields_empty') }}
-          </div>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </draggable>
+          </table>
         </div>
-
-        <!-- Loading indicator -->
-        <div v-if="loading" class="loading-indicator">
-          <i class="pi pi-spinner pi-spin" style="font-size: 2rem"></i>
+        <div v-if="fields.length === 0" class="text-center p-4">
+          {{ _('ms3_model_fields_empty') }}
         </div>
-      </template>
-    </Card>
+      </div>
+
+      <!-- Loading indicator -->
+      <div v-if="loading" class="loading-indicator">
+        <i class="pi pi-spinner pi-spin" style="font-size: 2rem"></i>
+      </div>
+    </Panel>
 
     <!-- Edit Field Dialog -->
     <Dialog
@@ -851,7 +841,7 @@ onMounted(async () => {
       <div v-if="editingField" class="edit-form">
         <!-- Basic info -->
         <Fieldset :legend="_('ms3_model_field_basic_info')" class="mb-3">
-          <div class="grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
+          <div class="ms3-dialog-grid">
             <div class="field">
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_model') }} *</label>
               <Select
@@ -883,7 +873,7 @@ onMounted(async () => {
             />
           </div>
 
-          <div class="grid mt-3" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
+          <div class="ms3-dialog-grid mt-3">
             <div class="field">
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_xtype') }}</label>
               <Select
@@ -910,7 +900,7 @@ onMounted(async () => {
 
         <!-- Display settings -->
         <Fieldset :legend="_('ms3_model_field_display_settings')" class="mb-3">
-          <div class="grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
+          <div class="ms3-dialog-grid">
             <div class="field">
               <label class="block mb-2 font-medium"
                 >{{ _('ms3_model_field_width') }} ({{ editingField.width }}/12)</label
@@ -943,7 +933,7 @@ onMounted(async () => {
             />
           </div>
 
-          <div class="field mt-3" style="display: flex; gap: 2rem">
+          <div class="field mt-3" style="display: flex; gap: var(--p-modx-space-panel, 15px)">
             <div style="display: flex; align-items: center; gap: 0.5rem">
               <Checkbox v-model="editingField.visible" :binary="true" input-id="visible" />
               <label for="visible">{{ _('ms3_model_field_visible') }}</label>
@@ -982,10 +972,16 @@ onMounted(async () => {
         <Button
           :label="_('cancel')"
           icon="pi pi-times"
-          class="p-button-text"
+          severity="secondary"
           @click="editDialogVisible = false"
         />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveField" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveField"
+        />
       </template>
     </Dialog>
 
@@ -1062,10 +1058,16 @@ onMounted(async () => {
         <Button
           :label="_('cancel')"
           icon="pi pi-times"
-          class="p-button-text"
+          severity="secondary"
           @click="sectionDialogVisible = false"
         />
-        <Button :label="_('save')" icon="pi pi-check" :loading="savingSec" @click="saveSection" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="savingSec"
+          @click="saveSection"
+        />
       </template>
     </Dialog>
   </div>
@@ -1073,43 +1075,21 @@ onMounted(async () => {
 
 <style scoped>
 .model-fields-grid {
-  padding: 1rem;
+  padding: 0;
   width: 100%;
   box-sizing: border-box;
 }
 
 .model-filter-bar {
-  padding: 0.75rem 1rem;
+  padding: var(--p-modx-space-panel, 15px);
   background: var(--ms3-bg-muted);
-  border-radius: 0.375rem;
-  border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+  border-radius: 0.25rem;
+  border: 1px solid var(--ms3-border-color-alt);
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .sections-panel {
-  margin-bottom: 1rem;
-}
-
-.sections-panel :deep(.p-panel-header) {
-  padding: 0.75rem 1rem;
-  background: var(--ms3-bg-muted);
-}
-
-.sections-panel :deep(.p-panel-content) {
-  padding: 0;
-}
-
-.sections-panel :deep(.p-panel-icons) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.sections-table :deep(.p-datatable-header) {
-  display: none;
-}
-
-.model-fields-grid :deep(.p-card) {
-  width: 100%;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .model-fields-grid :deep(.p-datatable-wrapper) {
@@ -1121,9 +1101,15 @@ onMounted(async () => {
   table-layout: fixed;
 }
 
+.model-fields-grid :deep(.p-datatable-thead th) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .edit-form .field label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
   font-weight: 500;
 }
 
@@ -1186,7 +1172,7 @@ onMounted(async () => {
 }
 
 .mb-3 {
-  margin-bottom: 1rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .text-center {
diff --git a/vueManager/src/components/NotificationsGrid.vue b/vueManager/src/components/NotificationsGrid.vue
index 43862cb19..7c639f2d4 100644
--- a/vueManager/src/components/NotificationsGrid.vue
+++ b/vueManager/src/components/NotificationsGrid.vue
@@ -1,19 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Tag from 'primevue/tag'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, Column, ConfirmDialog, DataTable, Dialog, InputNumber, InputText, Select, Tag, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 
 import { useCrudDialog } from '../composables/useCrudDialog.js'
@@ -252,64 +239,77 @@ onMounted(async () => {
       <template #content>
         <!-- Toolbar -->
         <div class="toolbar mb-3">
-          <Button :label="_('ms3_notification_add')" icon="pi pi-plus" @click="openCreate" />
+          <Button
+            :label="_('ms3_notification_add')"
+            icon="pi pi-plus"
+            severity="success"
+            @click="openCreate"
+          />
         </div>
 
         <!-- Filters -->
-        <div class="filters-form mb-3 p-3 surface-ground" style="border-radius: 0.375rem">
-          <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end">
-            <div style="flex: 1; min-width: 12.5rem">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 500">{{
-                _('ms3_notification_status')
-              }}</label>
-              <Select
-                v-model="filterStatusId"
-                :options="statusOptions"
-                option-label="name"
-                option-value="id"
-                :placeholder="_('all')"
-                style="width: 100%"
-                show-clear
-              />
-            </div>
-            <div style="flex: 1; min-width: 9.375rem">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 500">{{
-                _('ms3_notification_channel')
-              }}</label>
-              <Select
-                v-model="filterChannel"
-                :options="references.channels"
-                option-label="name"
-                option-value="id"
-                :placeholder="_('all')"
-                style="width: 100%"
-                show-clear
-              />
+        <div class="filters-form mb-4 surface-ground">
+          <div class="filters-form-fields">
+            <div class="filters-form-field">
+              <div class="field">
+                <label for="filter-status">{{ _('ms3_notification_status') }}</label>
+                <Select
+                  id="filter-status"
+                  v-model="filterStatusId"
+                  :options="statusOptions"
+                  option-label="name"
+                  option-value="id"
+                  :placeholder="_('all')"
+                  class="w-full"
+                  show-clear
+                />
+              </div>
             </div>
-            <div style="flex: 1; min-width: 9.375rem">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 500">{{
-                _('ms3_notification_recipient')
-              }}</label>
-              <Select
-                v-model="filterRecipientType"
-                :options="references.recipient_types"
-                option-label="name"
-                option-value="id"
-                :placeholder="_('all')"
-                style="width: 100%"
-                show-clear
-              />
+            <div class="filters-form-field">
+              <div class="field">
+                <label for="filter-channel">{{ _('ms3_notification_channel') }}</label>
+                <Select
+                  id="filter-channel"
+                  v-model="filterChannel"
+                  :options="references.channels"
+                  option-label="name"
+                  option-value="id"
+                  :placeholder="_('all')"
+                  class="w-full"
+                  show-clear
+                />
+              </div>
             </div>
-            <div style="display: flex; gap: 0.5rem">
-              <Button :label="_('apply')" icon="pi pi-filter" @click="resetPageAndLoad" />
-              <Button
-                :label="_('clear')"
-                icon="pi pi-filter-slash"
-                severity="secondary"
-                @click="clearFilters"
-              />
+            <div class="filters-form-field">
+              <div class="field">
+                <label for="filter-recipient">{{ _('ms3_notification_recipient') }}</label>
+                <Select
+                  id="filter-recipient"
+                  v-model="filterRecipientType"
+                  :options="references.recipient_types"
+                  option-label="name"
+                  option-value="id"
+                  :placeholder="_('all')"
+                  class="w-full"
+                  show-clear
+                />
+              </div>
             </div>
           </div>
+          <div class="filters-form-actions">
+            <Button
+              :label="_('apply')"
+              icon="pi pi-filter"
+              severity="success"
+              @click="resetPageAndLoad"
+            />
+            <Button
+              :label="_('clear')"
+              icon="pi pi-filter-slash"
+              severity="secondary"
+              @click="clearFilters"
+            />
+          </div>
         </div>
 
         <!-- Table -->
@@ -321,7 +321,13 @@ onMounted(async () => {
         >
           <Column field="enabled" :header="_('ms3_notification_enabled')" style="width: 5rem">
             <template #body="{ data }">
-              <Checkbox :model-value="data.enabled" :binary="true" @click="toggleEnabled(data)" />
+              <div class="enabled-cell">
+                <Checkbox
+                  :model-value="data.enabled"
+                  :binary="true"
+                  @click="toggleEnabled(data)"
+                />
+              </div>
             </template>
           </Column>
 
@@ -517,8 +523,19 @@ onMounted(async () => {
       </div>
 
       <template #footer>
-        <Button :label="_('cancel')" icon="pi pi-times" class="p-button-text" @click="close" />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveNotification" />
+        <Button
+          :label="_('cancel')"
+          icon="pi pi-times"
+          severity="secondary"
+          @click="close"
+        />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveNotification"
+        />
       </template>
     </Dialog>
   </div>
@@ -526,13 +543,40 @@ onMounted(async () => {
 
 <style scoped>
 .notifications-grid {
-  padding: 1.25rem;
+  height: 100%;
 }
 
 .toolbar {
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 1rem;
+}
+
+.filters-form {
+  padding: 15px 0;
+  border-radius: 3px;
+}
+
+.filters-form-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.filters-form-field {
+  flex: 1 1 12.5rem;
+  min-width: 9.375rem;
+}
+
+.filters-form-field label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.filters-form-actions {
+  display: flex;
+  gap: 0.5rem;
 }
 
 .notification-form {
@@ -574,11 +618,24 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 0;
 }
 
 .checkbox-col label {
-  margin-bottom: 0;
+  margin: 0;
+    line-height: 1;
   cursor: pointer;
+  font-size: 0.875rem;
+    font-weight: 500;
+    user-select: none;
+    white-space: nowrap;
+  }
+  
+  .enabled-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.25rem;
 }
 
 .w-full {
diff --git a/vueManager/src/components/OptionGroupsGrid.vue b/vueManager/src/components/OptionGroupsGrid.vue
index 9148aa772..1249d6109 100644
--- a/vueManager/src/components/OptionGroupsGrid.vue
+++ b/vueManager/src/components/OptionGroupsGrid.vue
@@ -1,16 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Badge from 'primevue/badge'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Badge, Button, Card, Checkbox, ConfirmDialog, Dialog, InputText, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -226,7 +216,6 @@ onMounted(() => {
               :label="_('ms3_option_group_create')"
               icon="pi pi-plus"
               severity="success"
-              size="small"
               @click="openCreateDialog"
             />
             <Button
@@ -234,12 +223,15 @@ onMounted(() => {
               :label="`${_('delete')} (${selectionCount})`"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               @click="confirmBulkDelete"
             />
           </div>
           <div class="right">
-            <InputText v-model="searchQuery" :placeholder="_('search')" size="small" />
+            <InputText
+              v-model="searchQuery"
+              :placeholder="_('search')"
+              class="groups-search"
+            />
           </div>
         </div>
 
@@ -295,7 +287,7 @@ onMounted(() => {
                   {{ element.description || '—' }}
                 </span>
                 <span class="col-count">
-                  <Badge :value="element.options_count || 0" severity="info" />
+                  <Badge :value="element.options_count || 0" severity="secondary" />
                 </span>
                 <span class="col-actions">
                   <Button
@@ -303,7 +295,6 @@ onMounted(() => {
                     severity="secondary"
                     text
                     rounded
-                    size="small"
                     :aria-label="_('edit')"
                     @click="openEditDialog(element)"
                   />
@@ -312,7 +303,6 @@ onMounted(() => {
                     severity="danger"
                     text
                     rounded
-                    size="small"
                     :aria-label="_('delete')"
                     @click="confirmDelete(element)"
                   />
@@ -353,7 +343,13 @@ onMounted(() => {
       </div>
       <template #footer>
         <Button :label="_('cancel')" severity="secondary" @click="close" />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveGroup" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveGroup"
+        />
       </template>
     </Dialog>
   </div>
@@ -372,14 +368,24 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 15px;
 }
 
 .vueApp .ms3-option-groups .grid-toolbar .left {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
 
+.vueApp .ms3-option-groups .grid-toolbar .right {
+  display: flex;
+  align-items: center;
+}
+
+.vueApp .ms3-option-groups .groups-search {
+  width: 14rem;
+}
+
 .vueApp .ms3-option-groups .status-row,
 .vueApp .ms3-option-groups .empty-state {
   padding: 2rem;
@@ -388,8 +394,8 @@ onMounted(() => {
 }
 
 .vueApp .ms3-option-groups .reorder-hint {
-  margin: 0.5rem 0 0.75rem 0;
-  font-size: 0.8rem;
+  margin: 0 0 0.5rem 0;
+  font-size: 0.75rem;
   color: var(--ms3-text-muted);
 }
 
@@ -399,23 +405,25 @@ onMounted(() => {
   grid-template-columns: 2rem 2rem 1fr 2fr 8rem 7rem;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
+  padding: 0.5rem 0.625rem;
+  min-height: 2.25rem;
 }
 
 .vueApp .ms3-option-groups .list-header {
-  font-weight: 600;
+  font-weight: 500;
   color: var(--ms3-text-muted);
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  font-size: 0.8125rem;
+  text-transform: none;
+  letter-spacing: normal;
   border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
+  margin-bottom: 0.5rem;
 }
 
 .vueApp .ms3-option-groups .list-row {
   border: var(--ms3-border-width) solid var(--ms3-border-color);
-  border-radius: 0.375rem;
+  border-radius: 3px;
   background: var(--ms3-bg-slate);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.375rem;
 }
 
 .vueApp .ms3-option-groups .list-row.selected {
@@ -453,17 +461,18 @@ onMounted(() => {
 .vueApp .ms3-option-groups .edit-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 15px;
 }
 
 .vueApp .ms3-option-groups .form-row {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 4px;
 }
 
 .vueApp .ms3-option-groups .form-row label {
   font-weight: 500;
+  font-size: 0.875rem;
 }
 
 .vueApp .ms3-option-groups .required {
diff --git a/vueManager/src/components/OptionValuesEditor.vue b/vueManager/src/components/OptionValuesEditor.vue
index a622f8423..557156390 100644
--- a/vueManager/src/components/OptionValuesEditor.vue
+++ b/vueManager/src/components/OptionValuesEditor.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import ColorPicker from 'primevue/colorpicker'
-import InputText from 'primevue/inputtext'
+import { Button, ColorPicker, InputText } from 'primevue'
 import { computed } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -137,7 +135,6 @@ function hexWithHash(v) {
             severity="danger"
             text
             rounded
-            size="small"
             @click="removeRow(index)"
           />
         </div>
@@ -147,9 +144,7 @@ function hexWithHash(v) {
     <Button
       icon="pi pi-plus"
       :label="_('ms3_add_value') || 'Добавить значение'"
-      severity="secondary"
-      size="small"
-      class="add-button"
+      severity="secondary" class="add-button"
       @click="addRow"
     />
   </div>
diff --git a/vueManager/src/components/OptionsAndGroupsTabs.vue b/vueManager/src/components/OptionsAndGroupsTabs.vue
index daf813e48..ddf618c09 100644
--- a/vueManager/src/components/OptionsAndGroupsTabs.vue
+++ b/vueManager/src/components/OptionsAndGroupsTabs.vue
@@ -1,10 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primevue'
 import { ref } from 'vue'
 
 import OptionGroupsGrid from './OptionGroupsGrid.vue'
diff --git a/vueManager/src/components/OptionsChips.vue b/vueManager/src/components/OptionsChips.vue
index 1161cfc5c..843dced4a 100644
--- a/vueManager/src/components/OptionsChips.vue
+++ b/vueManager/src/components/OptionsChips.vue
@@ -260,31 +260,34 @@ onMounted(() => {
 }
 
 .vueApp .chips-container:focus-within {
-  border-color: var(--ms3-accent-primary);
+  border-color: var(--p-form-field-focus-border-color, var(--p-primary-color, #234368));
   outline: none;
-  box-shadow: 0 0 0 0.2rem var(--ms3-accent-focus);
+  box-shadow: none;
 }
 
 .vueApp .chip-item {
   display: inline-flex;
   align-items: center;
-  background: var(--ms3-accent-primary);
-  color: var(--ms3-text-on-primary);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.1875rem;
+  gap: 0.25rem;
+  background: var(--p-highlight-background, #d6e7f8);
+  color: var(--p-highlight-color, #1b3451);
+  border: var(--ms3-border-width) solid var(--p-primary-200, #b9d3ee);
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--p-autocomplete-chip-border-radius, 2px);
   font-size: 0.875rem;
+  line-height: 1.25rem;
   white-space: nowrap;
 }
 
 .vueApp .chip-text {
-  margin-right: 0.25rem;
+  margin-right: 0;
 }
 
 .vueApp .chip-remove {
   cursor: pointer;
-  margin-left: 0.375rem;
-  opacity: 0.9;
-  transition: all 0.2s;
+  margin-left: 0;
+  opacity: 0.75;
+  transition: opacity 0.15s, background-color 0.15s;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -293,7 +296,8 @@ onMounted(() => {
   min-width: 1.125rem;
   min-height: 1.125rem;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+  background: transparent;
+  color: inherit;
   user-select: none;
   font-size: 0.65rem;
 }
@@ -304,8 +308,8 @@ onMounted(() => {
 
 .vueApp .chip-remove:hover {
   opacity: 1;
-  background: rgba(255, 255, 255, 0.4);
-  transform: scale(1.15);
+  background: color-mix(in srgb, var(--p-highlight-color, #1b3451) 12%, transparent);
+  transform: none;
 }
 
 .vueApp .chip-input {
diff --git a/vueManager/src/components/OptionsGrid.vue b/vueManager/src/components/OptionsGrid.vue
index 80d4788ae..4e4c71fd2 100644
--- a/vueManager/src/components/OptionsGrid.vue
+++ b/vueManager/src/components/OptionsGrid.vue
@@ -1,16 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Column, ConfirmDialog, DataTable, Dialog, InputText, Select, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
@@ -361,7 +351,7 @@ onBeforeUnmount(() => {
           <Button
             icon="pi pi-plus"
             :label="_('ms3_option_create') || 'Создать опцию'"
-            severity="primary"
+            severity="success"
             @click="openCreateDialog"
           />
 
@@ -422,7 +412,6 @@ onBeforeUnmount(() => {
                 severity="secondary"
                 text
                 rounded
-                size="small"
                 :title="_('edit') || 'Редактировать'"
                 @click="openEditDialog(data)"
               />
@@ -431,7 +420,6 @@ onBeforeUnmount(() => {
                 severity="danger"
                 text
                 rounded
-                size="small"
                 :title="_('delete') || 'Удалить'"
                 @click="confirmDelete(data)"
               />
@@ -560,7 +548,12 @@ onBeforeUnmount(() => {
           :disabled="dialogSaving"
           @click="dialogVisible = false"
         />
-        <Button :label="_('save') || 'Сохранить'" :loading="dialogSaving" @click="saveOption" />
+        <Button
+          :label="_('save') || 'Сохранить'"
+          severity="success"
+          :loading="dialogSaving"
+          @click="saveOption"
+        />
       </template>
     </Dialog>
 
@@ -589,6 +582,7 @@ onBeforeUnmount(() => {
         />
         <Button
           :label="`${_('ms3_options_assign') || 'Назначить'} (${selectedRows.length} × ${assignCategories.length})`"
+          severity="success"
           :loading="assigning"
           :disabled="assignCategories.length === 0"
           @click="performAssign"
diff --git a/vueManager/src/components/OrderView.vue b/vueManager/src/components/OrderView.vue
index befa2e4cb..d18c8c939 100644
--- a/vueManager/src/components/OrderView.vue
+++ b/vueManager/src/components/OrderView.vue
@@ -1,13 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import Toast from 'primevue/toast'
+import { Button, ConfirmDialog, Tab, TabList, TabPanel, TabPanels, Tabs, Toast } from 'primevue'
 import { provide } from 'vue'
 
 import { ORDER_CONTEXT_KEY } from '../composables/orderContext.js'
@@ -206,7 +199,9 @@ defineExpose({ registerPluginTab })
 
 <style scoped>
 .order-view {
-  padding: 1.25rem;
+  height: 100%;
+    padding: var(--p-modx-space-panel, 15px);
+    box-sizing: border-box;
 }
 
 .order-extjs-tab-container {
diff --git a/vueManager/src/components/OrdersGrid.vue b/vueManager/src/components/OrdersGrid.vue
index 7f419e0c4..3bb34ebdd 100644
--- a/vueManager/src/components/OrdersGrid.vue
+++ b/vueManager/src/components/OrdersGrid.vue
@@ -1,17 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import DatePicker from 'primevue/datepicker'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Tag from 'primevue/tag'
-import Toast from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, Column, ConfirmDialog, DataTable, DatePicker, InputText, Select, Tag, Toast, useToast } from 'primevue'
 import { onMounted, ref } from 'vue'
 
 import { useGridConfig } from '../composables/useGridConfig.js'
@@ -69,7 +58,6 @@ const { columns, loadGridConfig } = useGridConfig({
   },
 })
 
-
 /**
  * Build GET params shared by list and stats endpoints (#469).
  *
@@ -467,7 +455,6 @@ onMounted(async () => {
               :label="_('ms3_order_create')"
               icon="pi pi-plus"
               severity="success"
-              size="small"
               @click="createNewOrder"
             />
           </div>
@@ -499,8 +486,7 @@ onMounted(async () => {
         <!-- Filters form -->
         <div
           v-if="sortedFilters.length > 0"
-          class="filters-form mb-3 p-3 surface-ground"
-          style="border-radius: 0.375rem"
+          class="filters-form mb-4 surface-ground"
         >
           <div class="filters-row">
             <template v-for="filter in sortedFilters" :key="filter.key">
@@ -586,7 +572,7 @@ onMounted(async () => {
             <Button
               :label="_('apply_filters')"
               icon="pi pi-filter"
-              size="small"
+              severity="success"
               @click="applyFilters"
             />
             <Button
@@ -594,14 +580,13 @@ onMounted(async () => {
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
               severity="secondary"
-              size="small"
               @click="clearFilters"
             />
           </div>
         </div>
 
         <!-- Bulk actions toolbar -->
-        <div v-if="hasSelection" class="bulk-actions-bar mb-3">
+        <div v-if="hasSelection" class="bulk-actions-bar mb-4">
           <div class="bulk-info">
             <i class="pi pi-check-square"></i>
             <span>{{ _('selected_count').replace('{count}', selectionCount) }}</span>
@@ -611,7 +596,6 @@ onMounted(async () => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -619,7 +603,6 @@ onMounted(async () => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -737,7 +720,7 @@ onMounted(async () => {
 
 <style scoped>
 .orders-grid {
-  padding: 1.25rem;
+  height: 100%;
 }
 
 .grid-header {
@@ -796,11 +779,15 @@ onMounted(async () => {
   width: 100%;
 }
 
+.filters-form {
+  padding: 15px 0;
+  border-radius: 3px;
+}
 .filters-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: 15px;
+    margin-bottom: 15px;
 }
 
 .filter-item {
@@ -811,7 +798,7 @@ onMounted(async () => {
 
 .filter-item label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 4px;
   font-weight: 500;
   font-size: 0.875rem;
   color: var(--ms3-text-muted);
@@ -842,10 +829,10 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 15px;
   background: var(--ms3-bg-warning);
   border: var(--ms3-border-width) solid var(--ms3-border-warning);
-  border-radius: 0.375rem;
+  border-radius: 3px;
 }
 
 .bulk-info {
diff --git a/vueManager/src/components/PaymentsGrid.vue b/vueManager/src/components/PaymentsGrid.vue
index 594f09b0a..80fc4e943 100644
--- a/vueManager/src/components/PaymentsGrid.vue
+++ b/vueManager/src/components/PaymentsGrid.vue
@@ -1,23 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Badge from 'primevue/badge'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import ToggleSwitch from 'primevue/toggleswitch'
-import { useToast } from 'primevue/usetoast'
+import { Badge, Button, Card, Checkbox, Column, ConfirmDialog, DataTable, Dialog, InputText, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Toast, ToggleSwitch, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -423,7 +406,12 @@ onMounted(async () => {
             </template>
           </div>
           <div class="filter-buttons">
-            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
+            <Button
+              :label="_('apply_filters')"
+              icon="pi pi-filter"
+              severity="success"
+              @click="applyFilters"
+            />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -444,7 +432,6 @@ onMounted(async () => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -452,7 +439,6 @@ onMounted(async () => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -699,7 +685,13 @@ onMounted(async () => {
 
       <template #footer>
         <Button :label="_('cancel')" icon="pi pi-times" severity="secondary" @click="close" />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="savePayment" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="savePayment"
+        />
       </template>
     </Dialog>
   </div>
@@ -707,7 +699,7 @@ onMounted(async () => {
 
 <style scoped>
 .payments-grid {
-  padding: 1.25rem;
+  padding: 0;
 }
 
 .grid-header {
@@ -748,11 +740,11 @@ onMounted(async () => {
 .filters-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 15px;
   margin-bottom: 1rem;
-  padding: 1rem;
+  padding: 15px 0;
   background: var(--ms3-bg-slate);
-  border-radius: 0.375rem;
+  border-radius: 3px;
 }
 
 .filter-item {
@@ -763,10 +755,9 @@ onMounted(async () => {
 
 .filter-item label {
   display: block;
-  margin-bottom: var(--ms3-spacing-2);
+  margin-bottom: 4px;
   font-weight: 500;
   font-size: 0.875rem;
-  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -933,11 +924,16 @@ onMounted(async () => {
 .checkbox-field {
   display: flex;
   align-items: center;
+  gap: 0.5rem;
 }
 
 .checkbox-field label {
-  margin-left: 0.5rem;
+  margin: 0;
+  line-height: 1;
   cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  user-select: none;
 }
 
 /* Grid thumbnail */
diff --git a/vueManager/src/components/ProductData.vue b/vueManager/src/components/ProductData.vue
index efe113980..7c0d78c85 100644
--- a/vueManager/src/components/ProductData.vue
+++ b/vueManager/src/components/ProductData.vue
@@ -1,10 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import { Button, Card, Column, DataTable, Dialog, InputText, Select } from 'primevue'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Column, ConfirmDialog, DataTable, Dialog, InputText, Select,Toast, useConfirm, useToast } from 'primevue'
 import { onMounted, ref } from 'vue'
 
 const confirm = useConfirm()
diff --git a/vueManager/src/components/ProductDataConfig.vue b/vueManager/src/components/ProductDataConfig.vue
index ea407a52d..ea3e913d0 100644
--- a/vueManager/src/components/ProductDataConfig.vue
+++ b/vueManager/src/components/ProductDataConfig.vue
@@ -1,17 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { Button, Checkbox, ConfirmDialog, Dialog, InputNumber, InputText, Panel, Select, Textarea, Toast, useConfirm, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -538,181 +527,179 @@ onMounted(() => {
     <p class="tab-description">{{ _('ms3_vue_product_fields_description') }}</p>
 
     <!-- Sections table -->
-    <Card style="margin-top: 1.25rem">
-      <template #title>
-        <div style="display: flex; justify-content: space-between; align-items: center">
-          <span>{{ _('ms3_vue_sections') }}</span>
-          <div style="display: flex; gap: 0.625rem">
-            <Button
-              :label="_('ms3_vue_save_changes')"
-              icon="pi pi-save"
-              size="small"
-              :loading="saving"
-              :disabled="loadingSections"
-              @click="saveSections"
-            />
-            <Button
-              :label="_('ms3_vue_section_add')"
-              icon="pi pi-plus"
-              size="small"
-              @click="openAddSectionDialog"
-            />
-          </div>
-        </div>
+    <Panel
+      :header="_('ms3_vue_sections')"
+      class="ms3-utilities-section ms3-config-panel"
+    >
+      <template #icons>
+        <Button
+          :label="_('ms3_vue_save_changes')"
+          icon="pi pi-save"
+          severity="success"
+          :loading="saving"
+          :disabled="loadingSections"
+          @click.stop="saveSections"
+        />
+        <Button
+          :label="_('ms3_vue_section_add')"
+          icon="pi pi-plus"
+          severity="success"
+          @click.stop="openAddSectionDialog"
+        />
       </template>
 
-      <template #content>
-        <!-- Sections table with VueDraggable -->
-        <div v-if="!loadingSections" class="p-datatable p-component p-datatable-striped">
-          <div class="p-datatable-wrapper">
-            <table class="p-datatable-table" style="min-width: 50rem">
-              <thead class="p-datatable-thead">
+      <!-- Sections table with VueDraggable -->
+      <div v-if="!loadingSections" class="p-datatable p-component p-datatable-striped">
+        <div class="p-datatable-wrapper">
+          <table class="p-datatable-table" style="min-width: 50rem">
+            <thead class="p-datatable-thead">
+              <tr>
+                <th style="width: 3rem"></th>
+                <th style="width: 6.25rem">{{ _('ms3_vue_visible') }}</th>
+                <th style="width: 12.5rem">{{ _('ms3_vue_section_key') }}</th>
+                <th style="width: 15.625rem">{{ _('ms3_vue_section_label') }}</th>
+                <th style="width: 7.5rem">{{ _('ms3_vue_actions') }}</th>
+              </tr>
+            </thead>
+            <draggable
+              v-model="sections"
+              tag="tbody"
+              class="p-datatable-tbody"
+              handle=".drag-handle"
+              item-key="key"
+              :animation="200"
+              ghost-class="ghost-row"
+              @end="onSectionDragEnd"
+            >
+              <template #item="{ element: section, index }">
                 <tr>
-                  <th style="width: 3rem"></th>
-                  <th style="width: 6.25rem">{{ _('ms3_vue_visible') }}</th>
-                  <th style="width: 12.5rem">{{ _('ms3_vue_section_key') }}</th>
-                  <th style="width: 15.625rem">{{ _('ms3_vue_section_label') }}</th>
-                  <th style="width: 6.25rem">{{ _('ms3_vue_actions') }}</th>
-                </tr>
-              </thead>
-              <draggable
-                v-model="sections"
-                tag="tbody"
-                class="p-datatable-tbody"
-                handle=".drag-handle"
-                item-key="key"
-                :animation="200"
-                ghost-class="ghost-row"
-                @end="onSectionDragEnd"
-              >
-                <template #item="{ element: section, index }">
-                  <tr>
-                    <td class="drag-handle-cell">
-                      <i class="pi pi-bars drag-handle"></i>
-                    </td>
-                    <td>
-                      <Checkbox
-                        v-model="section.hidden"
-                        :binary="true"
-                        :true-value="false"
-                        :false-value="true"
-                      />
-                    </td>
-                    <td>{{ section.key }}</td>
-                    <td>{{ section.label }}</td>
-                    <td>
+                  <td class="drag-handle-cell">
+                    <i class="pi pi-bars drag-handle"></i>
+                  </td>
+                  <td>
+                    <Checkbox
+                      v-model="section.hidden"
+                      :binary="true"
+                      :true-value="false"
+                      :false-value="true"
+                    />
+                  </td>
+                  <td>{{ section.key }}</td>
+                  <td>{{ section.label }}</td>
+                  <td class="row-actions-cell">
+                    <div class="row-actions">
                       <Button
                         icon="pi pi-pencil"
-                        size="small"
                         text
+                        severity="secondary"
                         :title="_('ms3_vue_section_edit')"
                         @click="openEditSectionDialog(section, index)"
                       />
                       <Button
                         icon="pi pi-trash"
-                        size="small"
                         severity="danger"
                         text
                         :title="_('ms3_vue_section_delete')"
                         @click="deleteSection(section.key)"
                       />
-                    </td>
-                  </tr>
-                </template>
-              </draggable>
-            </table>
-          </div>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </draggable>
+          </table>
         </div>
+      </div>
 
-        <!-- Loading indicator -->
-        <div v-if="loadingSections" class="loading-indicator">
-          <i class="pi pi-spinner pi-spin" style="font-size: 2rem"></i>
-        </div>
-      </template>
-    </Card>
+      <!-- Loading indicator -->
+      <div v-if="loadingSections" class="loading-indicator">
+        <i class="pi pi-spinner pi-spin" style="font-size: 2rem"></i>
+      </div>
+    </Panel>
 
     <!-- Fields table -->
-    <Card style="margin-top: 1.25rem">
-      <template #title>
-        <div style="display: flex; justify-content: space-between; align-items: center">
-          <span>{{ _('ms3_vue_product_properties') }}</span>
-          <Button
-            :label="_('ms3_vue_save_changes')"
-            icon="pi pi-save"
-            :loading="saving"
-            :disabled="loading"
-            @click="saveConfig"
-          />
-        </div>
+    <Panel
+      :header="_('ms3_vue_product_properties')"
+      class="ms3-utilities-section ms3-config-panel"
+    >
+      <template #icons>
+        <Button
+          :label="_('ms3_vue_save_changes')"
+          icon="pi pi-save"
+          severity="success"
+          :loading="saving"
+          :disabled="loading"
+          @click.stop="saveConfig"
+        />
       </template>
 
-      <template #content>
-        <!-- Fields table with VueDraggable -->
-        <div v-if="!loading" class="p-datatable p-component p-datatable-striped">
-          <div class="p-datatable-wrapper">
-            <table class="p-datatable-table" style="min-width: 50rem">
-              <thead class="p-datatable-thead">
+      <!-- Fields table with VueDraggable -->
+      <div v-if="!loading" class="p-datatable p-component p-datatable-striped">
+        <div class="p-datatable-wrapper">
+          <table class="p-datatable-table" style="min-width: 50rem">
+            <thead class="p-datatable-thead">
+              <tr>
+                <th style="width: 3rem"></th>
+                <th style="width: 6.25rem">{{ _('ms3_vue_visible_column') }}</th>
+                <th style="width: 12.5rem">{{ _('ms3_vue_field_column') }}</th>
+                <th style="width: 12.5rem">{{ _('ms3_vue_label_column') }}</th>
+                <th style="width: 9.375rem">{{ _('ms3_vue_type_column') }}</th>
+                <th style="width: 9.375rem">{{ _('ms3_vue_section_column') }}</th>
+                <th>{{ _('ms3_vue_description_column') }}</th>
+                <th style="width: 7.5rem">{{ _('ms3_vue_actions_column') }}</th>
+              </tr>
+            </thead>
+            <draggable
+              v-model="fields"
+              tag="tbody"
+              class="p-datatable-tbody"
+              handle=".drag-handle"
+              item-key="name"
+              :animation="200"
+              ghost-class="ghost-row"
+              @end="onFieldsDragEnd"
+            >
+              <template #item="{ element: field, index }">
                 <tr>
-                  <th style="width: 3rem"></th>
-                  <th style="width: 6.25rem">{{ _('ms3_vue_visible_column') }}</th>
-                  <th style="width: 12.5rem">{{ _('ms3_vue_field_column') }}</th>
-                  <th style="width: 12.5rem">{{ _('ms3_vue_label_column') }}</th>
-                  <th style="width: 9.375rem">{{ _('ms3_vue_type_column') }}</th>
-                  <th style="width: 9.375rem">{{ _('ms3_vue_section_column') }}</th>
-                  <th>{{ _('ms3_vue_description_column') }}</th>
-                  <th style="width: 7.5rem">{{ _('ms3_vue_actions_column') }}</th>
-                </tr>
-              </thead>
-              <draggable
-                v-model="fields"
-                tag="tbody"
-                class="p-datatable-tbody"
-                handle=".drag-handle"
-                item-key="name"
-                :animation="200"
-                ghost-class="ghost-row"
-                @end="onFieldsDragEnd"
-              >
-                <template #item="{ element: field, index }">
-                  <tr>
-                    <td class="drag-handle-cell">
-                      <i class="pi pi-bars drag-handle"></i>
-                    </td>
-                    <td>
-                      <Checkbox
-                        v-model="field.visible"
-                        :binary="true"
-                        :true-value="true"
-                        :false-value="false"
-                      />
-                    </td>
-                    <td>{{ field.name }}</td>
-                    <td>{{ field.label }}</td>
-                    <td>{{ field.xtype }}</td>
-                    <td>{{ getSectionLabel(field.section) }}</td>
-                    <td>{{ field.description }}</td>
-                    <td>
+                  <td class="drag-handle-cell">
+                    <i class="pi pi-bars drag-handle"></i>
+                  </td>
+                  <td>
+                    <Checkbox
+                      v-model="field.visible"
+                      :binary="true"
+                      :true-value="true"
+                      :false-value="false"
+                    />
+                  </td>
+                  <td>{{ field.name }}</td>
+                  <td>{{ field.label }}</td>
+                  <td>{{ field.xtype }}</td>
+                  <td>{{ getSectionLabel(field.section) }}</td>
+                  <td>{{ field.description }}</td>
+                  <td class="row-actions-cell">
+                    <div class="row-actions">
                       <Button
                         icon="pi pi-pencil"
-                        size="small"
-                        outlined
+                        text
+                        severity="secondary"
                         :title="_('ms3_vue_edit_field_button')"
                         @click="openEditDialog(field, index)"
                       />
-                    </td>
-                  </tr>
-                </template>
-              </draggable>
-            </table>
-          </div>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </draggable>
+          </table>
         </div>
+      </div>
 
-        <!-- Loading indicator -->
-        <div v-if="loading" class="loading-indicator">
-          <i class="pi pi-spinner pi-spin" style="font-size: 2rem"></i>
-        </div>
-      </template>
-    </Card>
+      <!-- Loading indicator -->
+      <div v-if="loading" class="loading-indicator">
+        <i class="pi pi-spinner pi-spin" style="font-size: 2rem"></i>
+      </div>
+    </Panel>
 
     <!-- Add section dialog -->
     <Dialog
@@ -789,7 +776,7 @@ onMounted(() => {
           severity="secondary"
           @click="closeAddSectionDialog"
         />
-        <Button :label="_('ms3_vue_add_button')" icon="pi pi-check" @click="addSection" />
+        <Button :label="_('ms3_vue_add_button')" icon="pi pi-check" severity="success" @click="addSection" />
       </template>
     </Dialog>
 
@@ -869,7 +856,12 @@ onMounted(() => {
           severity="secondary"
           @click="closeEditSectionDialog"
         />
-        <Button :label="_('ms3_vue_save_button')" icon="pi pi-save" @click="saveEditedSection" />
+        <Button
+          :label="_('ms3_vue_save_button')"
+          icon="pi pi-save"
+          severity="success"
+          @click="saveEditedSection"
+        />
       </template>
     </Dialog>
 
@@ -993,6 +985,7 @@ onMounted(() => {
         <Button
           :label="_('ms3_vue_field_save')"
           icon="pi pi-save"
+          severity="success"
           :loading="saving"
           @click="saveFieldChanges"
         />
@@ -1006,7 +999,16 @@ onMounted(() => {
 
 <style scoped>
 .product-data-config {
-  padding: 1.25rem;
+  padding: 0;
+  width: 100%;
+}
+
+.product-data-config > .tab-description {
+  margin: 0 0 var(--p-modx-space-panel, 15px);
+}
+
+.product-data-config > .ms3-config-panel + .ms3-config-panel {
+  margin-top: 0;
 }
 
 h2 {
@@ -1014,11 +1016,6 @@ h2 {
   font-size: 1.5rem;
 }
 
-p {
-  margin: 0 0 1.25rem 0;
-  color: var(--ms3-text-muted);
-}
-
 .drag-handle-cell {
   text-align: center;
   vertical-align: middle;
@@ -1068,75 +1065,3 @@ p {
   background: var(--ms3-bg-neutral);
 }
 </style>
-
-<style>
-/* Modal window styles - work in both .vueApp and .p-dialog */
-.vueApp .edit-field-form,
-.p-dialog .edit-field-form {
-  padding: 0.625rem 0;
-}
-
-.vueApp .form-grid,
-.p-dialog .form-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin: -0.5rem;
-}
-
-.vueApp .edit-field-form .field,
-.p-dialog .edit-field-form .field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding: 0.5rem;
-  box-sizing: border-box;
-}
-
-.vueApp .edit-field-form .field label,
-.p-dialog .edit-field-form .field label {
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--ms3-text-primary);
-}
-
-.vueApp .edit-field-form .field small,
-.p-dialog .edit-field-form .field small {
-  color: var(--ms3-text-muted);
-  font-size: 0.75rem;
-  margin-top: -0.125rem;
-}
-
-.vueApp .edit-field-form .w-full,
-.p-dialog .edit-field-form .w-full {
-  width: 100%;
-}
-
-/* Grid for modal window */
-.vueApp .col-6,
-.p-dialog .col-6 {
-  flex: 0 0 calc(50% - 1rem);
-  max-width: calc(50% - 1rem);
-}
-
-.vueApp .col-12,
-.p-dialog .col-12 {
-  flex: 0 0 calc(100% - 1rem);
-  max-width: calc(100% - 1rem);
-}
-
-/* Checkbox in modal window */
-.vueApp .edit-field-form .checkbox-wrapper,
-.p-dialog .edit-field-form .checkbox-wrapper {
-  display: flex;
-  gap: 0.625rem;
-  align-items: center;
-}
-
-.vueApp .edit-field-form .checkbox-label,
-.p-dialog .edit-field-form .checkbox-label {
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
-}
-</style>
diff --git a/vueManager/src/components/ProductDataFields.vue b/vueManager/src/components/ProductDataFields.vue
index 946238239..677a70106 100644
--- a/vueManager/src/components/ProductDataFields.vue
+++ b/vueManager/src/components/ProductDataFields.vue
@@ -1,10 +1,7 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Card from 'primevue/card'
-import Fieldset from 'primevue/fieldset'
-import Message from 'primevue/message'
-import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, ref } from 'vue'
+import { Message, Panel, useToast } from 'primevue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 
 import request from '../request.js'
 import { groupProductDataSections } from '../utils/groupProductDataSections.js'
@@ -209,6 +206,65 @@ const fieldsBySections = computed(() => {
   return groupProductDataSections(visibleFields.value, fieldsConfig.value.sections || {})
 })
 
+/** Ordered section list for stable Panel rendering (#611 sort_order). */
+const sectionEntries = computed(() =>
+  fieldsBySections.value.map(section => ({
+    key: section.key ?? section.id,
+    section,
+  }))
+)
+
+function isCheckboxField(field) {
+  return field?.xtype === 'xcheckbox' || field?.xtype === 'checkbox'
+}
+
+/**
+ * Keep field order; consecutive checkboxes share one full-width flex row
+ * so PageBuilder col-% utilities cannot spread them across the grid.
+ */
+function groupSectionFields(fields) {
+  const rows = []
+  let checkboxRun = []
+
+  const flushCheckboxes = () => {
+    if (!checkboxRun.length) {
+      return
+    }
+    rows.push({
+      type: 'checkboxes',
+      key: `cb-${checkboxRun.map(f => f.name).join('-')}`,
+      fields: checkboxRun,
+    })
+    checkboxRun = []
+  }
+
+  for (const field of fields || []) {
+    if (isCheckboxField(field)) {
+      checkboxRun.push(field)
+      continue
+    }
+    flushCheckboxes()
+    rows.push({ type: 'field', key: field.name, field })
+  }
+  flushCheckboxes()
+  return rows
+}
+
+/** Per-section collapse state (seeded from config.collapsed). */
+const sectionCollapsed = reactive({})
+
+watch(
+  sectionEntries,
+  entries => {
+    entries.forEach(({ key, section }) => {
+      if (sectionCollapsed[key] === undefined) {
+        sectionCollapsed[key] = !!section.collapsed
+      }
+    })
+  },
+  { immediate: true }
+)
+
 // Load configuration on mount
 onMounted(() => {
   loadConfig()
@@ -217,197 +273,256 @@ onMounted(() => {
 
 <template>
   <div class="product-data-fields">
-    <Card>
-      <template #title>
-        <span>{{ _('ms3_vue_product_data_title') }}</span>
-      </template>
-
-      <template #content>
-        <Message v-if="loading" severity="info">
-          {{ _('ms3_vue_loading_config') }}
-        </Message>
-
-        <Message v-else-if="visibleFields.length === 0" severity="warn">
-          {{ _('ms3_vue_no_visible_fields') }}
-        </Message>
-
-        <div v-else class="sections-container">
-          <Fieldset
-            v-for="section in fieldsBySections"
-            :key="section.id ?? section.key"
-            :legend="section.label || section.key"
-            :toggleable="true"
-            :collapsed="section.collapsed"
-            class="section-fieldset"
-          >
-            <div class="fields-grid">
-              <div
-                v-for="field in section.fields"
-                :key="field.name"
-                :class="[
-                  'field-item',
-                  isFullWidthExtraFieldXtype(field.xtype)
-                    ? 'col-12'
-                    : `col-${field.width || 4}`,
-                  { 'field-checkbox': field.xtype === 'xcheckbox' || field.xtype === 'checkbox' },
-                ]"
-              >
-                <!-- Checkbox layout: checkbox + label in one line -->
-                <template v-if="field.xtype === 'xcheckbox' || field.xtype === 'checkbox'">
-                  <div class="checkbox-wrapper">
-                    <DynamicField
-                      v-model="fieldValues[field.name]"
-                      :field-config="field"
-                      :disabled="loading || saving"
-                      @blur="handleFieldChange(field.name, $event.value)"
-                    />
-                    <label
-                      :for="field.name"
-                      class="field-label checkbox-label"
-                      :title="'[[+' + field.name + ']]'"
-                    >
-                      {{ field.label }}
-                      <span v-if="field.required" class="required">*</span>
-                    </label>
-                  </div>
-                  <small v-if="field.description" class="field-description">
-                    {{ field.description }}
-                  </small>
-                </template>
-
-                <!-- Regular field: label on top, field below -->
-                <template v-else>
-                  <label :for="field.name" class="field-label" :title="'[[+' + field.name + ']]'">
-                    {{ field.label }}
-                    <span v-if="field.required" class="required">*</span>
-                  </label>
-
+    <div v-if="loading" class="loading-indicator" aria-busy="true" aria-live="polite">
+      <i class="pi pi-spinner pi-spin" aria-hidden="true"></i>
+      <span class="sr-only">{{ _('ms3_vue_loading_config') }}</span>
+    </div>
+
+    <Message v-else-if="visibleFields.length === 0" severity="warn">
+      {{ _('ms3_vue_no_visible_fields') }}
+    </Message>
+
+    <div v-else class="sections-container">
+      <Panel
+        v-for="{ key: sectionKey, section } in sectionEntries"
+        :key="sectionKey"
+        v-model:collapsed="sectionCollapsed[sectionKey]"
+        :header="section.label || sectionKey"
+        toggleable
+        class="ms3-utilities-section ms3-config-panel product-data-section"
+      >
+        <div class="fields-grid">
+          <template v-for="row in groupSectionFields(section.fields)" :key="row.key">
+            <!-- Packed checkbox row (theme 15px gap, no col-% spread) -->
+            <div v-if="row.type === 'checkboxes'" class="field-item field-checkbox-row col-12">
+              <div v-for="field in row.fields" :key="field.name" class="checkbox-field">
+                <div class="checkbox-wrapper">
                   <DynamicField
                     v-model="fieldValues[field.name]"
                     :field-config="field"
                     :disabled="loading || saving"
                     @blur="handleFieldChange(field.name, $event.value)"
                   />
-
-                  <small v-if="field.description" class="field-description">
-                    {{ field.description }}
-                  </small>
-                </template>
+                  <label
+                    :for="field.name"
+                    class="field-label checkbox-label"
+                    :title="'[[+' + field.name + ']]'"
+                  >
+                    {{ field.label }}
+                    <span v-if="field.required" class="required">*</span>
+                  </label>
+                </div>
+                <small v-if="field.description" class="field-description">
+                  {{ field.description }}
+                </small>
               </div>
             </div>
-          </Fieldset>
+
+            <!-- Regular field: label on top, control below -->
+            <div
+              v-else
+              class="field-item"
+              :class="
+                isFullWidthExtraFieldXtype(row.field.xtype)
+                  ? 'col-12'
+                  : `col-${row.field.width || 4}`
+              "
+            >
+              <label
+                :for="row.field.name"
+                class="field-label"
+                :title="'[[+' + row.field.name + ']]'"
+              >
+                {{ row.field.label }}
+                <span v-if="row.field.required" class="required">*</span>
+              </label>
+
+              <DynamicField
+                v-model="fieldValues[row.field.name]"
+                :field-config="row.field"
+                :disabled="loading || saving"
+                @blur="handleFieldChange(row.field.name, $event.value)"
+              />
+
+              <small v-if="row.field.description" class="field-description">
+                {{ row.field.description }}
+              </small>
+            </div>
+          </template>
         </div>
-      </template>
-    </Card>
+      </Panel>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .product-data-fields {
-  padding: 1.25rem;
+  padding: 0;
+    width: 100%;
 }
 
-.fields-grid {
+.loading-indicator {
   display: flex;
-  flex-wrap: wrap;
-  gap: 1.25rem;
-  margin: -0.625rem; /* Compensate field padding */
+  justify-content: center;
+    align-items: center;
+    min-height: 8rem;
+    color: var(--ms3-text-muted, #64748b);
+    font-size: 1.75rem;
+  }
+  
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  
+  .sections-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+  
+.fields-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--p-modx-space-panel, 15px);
+  margin: 0;
+}
+
+/*
+ * PageBuilder ships `.vueApp .col-4 { width: 33.333%; flex: 0 0 auto }` for its
+ * flex grid. That shrinks MS3 CSS-grid cells and leaves huge empty gutters.
+ */
+.fields-grid > .field-item[class*='col-'] {
+  width: 100%;
+  max-width: none;
+  flex: none;
+  padding: 0;
+  min-width: 0;
 }
 
 .field-item {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.625rem;
+  gap: 0.25rem;
+  padding: 0;
   box-sizing: border-box;
+  grid-column: span 4;
+}
+
+/* Checkboxes pack left with theme gap — not one third of the row each. */
+.field-item.field-checkbox-row {
+  grid-column: span 12;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--p-modx-space-panel, 15px);
+  width: 100%;
+  max-width: none;
+  padding: 0;
+}
+
+.field-item.field-checkbox-row .checkbox-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: max-content;
+  max-width: 100%;
 }
 
 .field-item :deep(input),
 .field-item :deep(textarea),
 .field-item :deep(.p-inputtext),
 .field-item :deep(.p-inputnumber),
-.field-item :deep(.p-dropdown) {
+.field-item :deep(.p-select),
+.field-item :deep(.p-dropdown),
+.field-item :deep(.p-inputchips),
+.field-item :deep(.p-multiselect) {
   width: 100%;
 }
 
-/* 12-column grid system */
 .col-1 {
-  flex: 0 0 calc(8.333% - 1.25rem);
-  max-width: calc(8.333% - 1.25rem);
+  grid-column: span 1;
 }
 .col-2 {
-  flex: 0 0 calc(16.666% - 1.25rem);
-  max-width: calc(16.666% - 1.25rem);
+  grid-column: span 2;
 }
 .col-3 {
-  flex: 0 0 calc(25% - 1.25rem);
-  max-width: calc(25% - 1.25rem);
+  grid-column: span 3;
 }
 .col-4 {
-  flex: 0 0 calc(33.333% - 1.25rem);
-  max-width: calc(33.333% - 1.25rem);
+  grid-column: span 4;
 }
 .col-5 {
-  flex: 0 0 calc(41.666% - 1.25rem);
-  max-width: calc(41.666% - 1.25rem);
+  grid-column: span 5;
 }
 .col-6 {
-  flex: 0 0 calc(50% - 1.25rem);
-  max-width: calc(50% - 1.25rem);
+  grid-column: span 6;
 }
 .col-7 {
-  flex: 0 0 calc(58.333% - 1.25rem);
-  max-width: calc(58.333% - 1.25rem);
+  grid-column: span 7;
 }
 .col-8 {
-  flex: 0 0 calc(66.666% - 1.25rem);
-  max-width: calc(66.666% - 1.25rem);
+  grid-column: span 8;
 }
 .col-9 {
-  flex: 0 0 calc(75% - 1.25rem);
-  max-width: calc(75% - 1.25rem);
+  grid-column: span 9;
 }
 .col-10 {
-  flex: 0 0 calc(83.333% - 1.25rem);
-  max-width: calc(83.333% - 1.25rem);
+  grid-column: span 10;
 }
 .col-11 {
-  flex: 0 0 calc(91.666% - 1.25rem);
-  max-width: calc(91.666% - 1.25rem);
+  grid-column: span 11;
 }
 .col-12 {
-  flex: 0 0 calc(100% - 1.25rem);
-  max-width: calc(100% - 1.25rem);
+  grid-column: span 12;
 }
 
-/* Responsive: on tablets col-4 becomes col-6 */
 @media (max-width: 64rem) {
-  .col-4 {
-    flex: 0 0 calc(50% - 1.25rem);
-    max-width: calc(50% - 1.25rem);
+  .col-4,
+    .col-5 {
+      grid-column: span 6;
   }
 }
 
-/* Responsive: on mobile all fields full width */
 @media (max-width: 48rem) {
-  .field-item {
-    flex: 0 0 calc(100% - 1.25rem) !important;
-    max-width: calc(100% - 1.25rem) !important;
+  .field-item:not(.field-checkbox-row),
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10,
+  .col-11,
+  .col-12 {
+    grid-column: span 12;
   }
 }
 
 .field-label {
-  font-weight: 600;
+  display: block;
+    margin: 0;
+    font-weight: 500;
   font-size: 0.875rem;
-  color: var(--ms3-text-primary);
+  color: var(--ms3-text-primary, #333);
 }
 
 .field-label .required {
-  color: var(--ms3-text-danger-alt);
-  margin-left: 0.125rem;
+  color: var(--ms3-text-danger-alt, #ef4444);
+    margin-inline-start: 0.125rem;
 }
 
-/* Checkbox: horizontal layout */
 .checkbox-wrapper {
   display: flex;
   align-items: center;
@@ -425,18 +540,9 @@ onMounted(() => {
 }
 
 .field-description {
-  color: var(--ms3-text-muted);
+  color: var(--ms3-text-muted, #64748b);
   font-size: 0.75rem;
-  margin-top: 0.25rem;
-}
-
-.sections-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.section-fieldset {
-  margin-bottom: 0;
+  margin-top: 0;
+    line-height: 1.35;
 }
 </style>
diff --git a/vueManager/src/components/RepeaterField.vue b/vueManager/src/components/RepeaterField.vue
index d0f3ec96f..61db28f75 100644
--- a/vueManager/src/components/RepeaterField.vue
+++ b/vueManager/src/components/RepeaterField.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
+import { Button, InputNumber, InputText } from 'primevue'
 import { computed, ref, watch } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -172,9 +170,7 @@ function onDragEnd() {
               icon="pi pi-times"
               severity="danger"
               text
-              rounded
-              size="small"
-              class="ms3-repeater-actions-col"
+              rounded class="ms3-repeater-actions-col"
               :disabled="disabled || !canRemoveRow"
               @click="removeRow(index)"
             />
@@ -185,9 +181,7 @@ function onDragEnd() {
       <Button
         icon="pi pi-plus"
         :label="_('ms3_vue_repeater_add_row')"
-        severity="secondary"
-        size="small"
-        class="ms3-repeater-add"
+        severity="secondary" class="ms3-repeater-add"
         :disabled="disabled || !canAddRow"
         @click="addRow"
       />
diff --git a/vueManager/src/components/RepeaterSchemaEditor.vue b/vueManager/src/components/RepeaterSchemaEditor.vue
index 6c8b2b315..1a248a85c 100644
--- a/vueManager/src/components/RepeaterSchemaEditor.vue
+++ b/vueManager/src/components/RepeaterSchemaEditor.vue
@@ -1,10 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
+import { Button, Checkbox, InputNumber, InputText, Select } from 'primevue'
 import { computed } from 'vue'
 
 import { defaultRepeaterConfig } from '../utils/repeaterField.js'
@@ -106,7 +102,6 @@ function updateColumn(index, patch) {
       <Button
         icon="pi pi-plus"
         :label="_('ms3_vue_repeater_add_column')"
-        size="small"
         severity="secondary"
         @click="addColumn"
       />
@@ -147,7 +142,6 @@ function updateColumn(index, patch) {
         severity="danger"
         text
         rounded
-        size="small"
         :disabled="config.columns.length <= 1"
         @click="removeColumn(index)"
       />
diff --git a/vueManager/src/components/ResourceCategoryTree.vue b/vueManager/src/components/ResourceCategoryTree.vue
index bea6603c4..978cee547 100644
--- a/vueManager/src/components/ResourceCategoryTree.vue
+++ b/vueManager/src/components/ResourceCategoryTree.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Checkbox from 'primevue/checkbox'
-import ContextMenu from 'primevue/contextmenu'
-import Tree from 'primevue/tree'
+import { Checkbox, ContextMenu, Tree } from 'primevue'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
diff --git a/vueManager/src/components/SettingsPage.vue b/vueManager/src/components/SettingsPage.vue
index 29acc6ba1..33f69dd22 100644
--- a/vueManager/src/components/SettingsPage.vue
+++ b/vueManager/src/components/SettingsPage.vue
@@ -1,11 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs } from 'primevue'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import DeliveriesGrid from './DeliveriesGrid.vue'
@@ -108,13 +103,12 @@ function navigateTo(path) {
       <div v-if="canListOrders" class="ms3-settings-page__actions">
         <Button
           :label="_('ms3_orders')"
-          class="p-button-sm"
-          severity="contrast"
+          severity="secondary"
           @click="navigateTo('?a=mgr/orders&namespace=minishop3')"
         />
         <Button
           :label="_('ms3_utilities')"
-          class="p-button-sm p-button-secondary"
+          severity="secondary"
           @click="navigateTo('?a=mgr/utilities&namespace=minishop3')"
         />
       </div>
@@ -139,7 +133,8 @@ function navigateTo(path) {
 
 <style scoped>
 .ms3-settings-page {
-  padding: 1.25rem;
+  padding: var(--p-modx-space-panel, 15px);
+    box-sizing: border-box;
 }
 
 .ms3-settings-page__header {
@@ -148,7 +143,8 @@ function navigateTo(path) {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 1rem;
+  padding: 0;
+    margin-bottom: 0.75rem;
 }
 
 .ms3-settings-page__title {
@@ -164,13 +160,20 @@ function navigateTo(path) {
   gap: 0.5rem;
 }
 
+.ms3-settings-page__tabs :deep(.p-tabpanels) {
+  padding: var(--p-tabs-tabpanel-padding, var(--p-modx-space-panel, 15px));
+}
+
+.ms3-settings-page__tabs :deep(.p-tabpanel) {
+  padding: 0;
+}
 .ms3-settings-page__intro {
-  margin: 0 0 1rem;
-  padding: 0.75rem 1rem;
-  color: #555;
+  margin: 0 0 var(--p-modx-space-panel, 15px);
+    padding: 0;
+    color: var(--ms3-text-muted, #64748b);
   font-size: 0.875rem;
   line-height: 1.45;
-  background: #f6f6f6;
-  border-left: 3px solid #ccc;
+  background: none;
+    border: none;
 }
 </style>
diff --git a/vueManager/src/components/StatusesGrid.vue b/vueManager/src/components/StatusesGrid.vue
index ed7d963a6..c91624e0e 100644
--- a/vueManager/src/components/StatusesGrid.vue
+++ b/vueManager/src/components/StatusesGrid.vue
@@ -1,15 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import ColorPicker from 'primevue/colorpicker'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, ColorPicker, ConfirmDialog, Dialog, InputText, Textarea, Toast, useToast } from 'primevue'
 import { onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -272,7 +263,6 @@ onMounted(() => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -280,7 +270,6 @@ onMounted(() => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -453,7 +442,13 @@ onMounted(() => {
 
       <template #footer>
         <Button :label="_('cancel')" icon="pi pi-times" severity="secondary" @click="close" />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveStatus" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveStatus"
+        />
       </template>
     </Dialog>
   </div>
@@ -539,8 +534,12 @@ onMounted(() => {
 }
 
 .ms3-status-form .checkbox-item label {
+  margin: 0;
+  line-height: 1;
   cursor: pointer;
-  font-weight: normal;
+  font-size: 0.875rem;
+  font-weight: 500;
+  user-select: none;
 }
 
 .ms3-status-form .help-texts {
@@ -568,7 +567,7 @@ onMounted(() => {
 
 <style scoped>
 .statuses-grid {
-  padding: 1.25rem;
+  padding: 0;
 }
 
 .grid-header {
diff --git a/vueManager/src/components/UtilitiesGallery.vue b/vueManager/src/components/UtilitiesGallery.vue
index 3bdbc8cbf..380bb5f3b 100644
--- a/vueManager/src/components/UtilitiesGallery.vue
+++ b/vueManager/src/components/UtilitiesGallery.vue
@@ -1,11 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Fieldset from 'primevue/fieldset'
-import InputNumber from 'primevue/inputnumber'
-import Message from 'primevue/message'
-import ProgressBar from 'primevue/progressbar'
+import { Button, Card, Fieldset, InputNumber, Message, ProgressBar } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 
 import request from '../request.js'
@@ -161,6 +156,7 @@ onMounted(() => {
         <InputNumber
           v-model="limit"
           input-id="limit-input"
+          class="limit-input"
           :min="1"
           :max="100"
           :disabled="isRunning"
@@ -182,15 +178,14 @@ onMounted(() => {
         icon="pi pi-refresh"
         :loading="isRunning"
         :disabled="!canStart"
-        severity="primary"
+        severity="success"
         @click="startRegeneration"
       />
       <Button
         v-if="isCompleted"
         :label="_('ms3_utilities_gallery_reset', 'Reset')"
         icon="pi pi-times"
-        severity="secondary"
-        class="reset-btn"
+        severity="secondary" class="reset-btn"
         @click="resetState"
       />
     </div>
@@ -227,12 +222,13 @@ onMounted(() => {
 
 <style scoped>
 .utilities-gallery {
-  padding: 1.25rem;
-  max-width: 50rem;
+  padding: 0;
+  max-width: none;
+  width: 100%;
 }
 
 .info-card {
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .info-content {
@@ -244,7 +240,7 @@ onMounted(() => {
 }
 
 .params-fieldset {
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .thumbnails-info {
@@ -262,9 +258,9 @@ onMounted(() => {
 
 .settings-section {
   background: var(--ms3-bg-muted);
-  padding: 0.9375rem 1.25rem;
-  border-radius: 0.375rem;
-  margin-bottom: 1.25rem;
+  padding: var(--p-modx-space-panel, 15px);
+  border-radius: 0.25rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .setting-row {
@@ -278,10 +274,22 @@ onMounted(() => {
   min-width: 9.375rem;
 }
 
+/* Compact stepper for 1–100; ± buttons are 1.875rem each. */
+.limit-input {
+  width: 7.5rem;
+  flex: 0 0 auto;
+}
+
+.limit-input :deep(.p-inputnumber-input) {
+  width: 100%;
+  min-width: 0;
+  text-align: center;
+}
+
 .action-section {
   display: flex;
-  gap: 0.625rem;
-  margin-bottom: 1.25rem;
+  gap: 0.5rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .reset-btn {
@@ -291,9 +299,9 @@ onMounted(() => {
 .progress-section {
   background: var(--ms3-bg-surface);
   border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
-  border-radius: 0.375rem;
-  padding: 0.9375rem;
-  margin-bottom: 1.25rem;
+  border-radius: 0.25rem;
+  padding: var(--p-modx-space-panel, 15px);
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .progress-labels {
diff --git a/vueManager/src/components/UtilitiesPage.vue b/vueManager/src/components/UtilitiesPage.vue
index 92893d60f..14571827b 100644
--- a/vueManager/src/components/UtilitiesPage.vue
+++ b/vueManager/src/components/UtilitiesPage.vue
@@ -1,11 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
+import { Button, Tab, TabList, TabPanel, TabPanels, Tabs } from 'primevue'
 import { ref, watch } from 'vue'
 
 import { getMs3Config } from '../utils/modx.js'
@@ -108,13 +103,12 @@ function goTo(path) {
       <div v-if="canListSettings" class="ms3-utilities-page__actions">
         <Button
           :label="_('ms3_orders')"
-          class="p-button-sm"
-          severity="contrast"
+          severity="secondary"
           @click="goTo('?a=mgr/orders&namespace=minishop3')"
         />
         <Button
           :label="_('ms3_settings')"
-          class="p-button-sm p-button-secondary"
+          severity="secondary"
           @click="goTo('?a=mgr/settings&namespace=minishop3')"
         />
       </div>
@@ -136,8 +130,14 @@ function goTo(path) {
 </template>
 
 <style scoped>
+/*
+ * Page chrome inset + Modx tabpanel padding (15px / 0.9375rem all sides).
+ * Do not zero horizontal/bottom on .p-tabpanels — content must not sit flush
+ * against the white panel edges (theme default tabs.tabpanel.padding).
+ */
 .ms3-utilities-page {
-  padding: 1.25rem;
+  padding: var(--p-modx-space-panel, 15px);
+    box-sizing: border-box;
 }
 
 .ms3-utilities-page__header {
@@ -146,7 +146,8 @@ function goTo(path) {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 1rem;
+  padding: 0;
+    margin-bottom: 0.75rem;
 }
 
 .ms3-utilities-page__title {
@@ -161,4 +162,21 @@ function goTo(path) {
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+.ms3-utilities-page__tabs :deep(.p-tabpanels) {
+  padding: var(--p-tabs-tabpanel-padding, var(--p-modx-space-panel, 15px));
+}
+
+.ms3-utilities-page__tabs :deep(.p-tabpanel) {
+  padding: 0;
+}
+
+/* Shared vertical rhythm for every utilities tab body. */
+.ms3-utilities-page__tabs :deep(.tab-description) {
+  margin: 0 0 var(--p-modx-space-panel, 15px);
+}
+
+.ms3-utilities-page__tabs :deep(.ms3-config-panel + .ms3-config-panel),
+.ms3-utilities-page__tabs :deep(.p-card + .p-card) {
+  margin-top: 0;
+}
 </style>
diff --git a/vueManager/src/components/ValidationRulesEditor.vue b/vueManager/src/components/ValidationRulesEditor.vue
index cf7bb4661..17aee3988 100644
--- a/vueManager/src/components/ValidationRulesEditor.vue
+++ b/vueManager/src/components/ValidationRulesEditor.vue
@@ -1,12 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Chip from 'primevue/chip'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
-import ToggleSwitch from 'primevue/toggleswitch'
+import { Button, Chip, Dialog, InputText, Select, Textarea, ToggleSwitch } from 'primevue'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
@@ -593,7 +587,7 @@ const editingFieldName = computed(() => {
       <div class="json-actions">
         <Button
           :label="_('apply')"
-          size="small"
+          severity="success"
           :disabled="!!jsonError"
           @click="applyJsonChanges"
         />
@@ -611,7 +605,6 @@ const editingFieldName = computed(() => {
             severity="danger"
             text
             rounded
-            size="small"
             @click="removeField(fieldIndex)"
           />
         </div>
@@ -627,7 +620,6 @@ const editingFieldName = computed(() => {
           <Button
             v-tooltip="_('ms3_add_rule')"
             icon="pi pi-plus"
-            size="small"
             severity="secondary"
             text
             rounded
@@ -640,9 +632,7 @@ const editingFieldName = computed(() => {
       <Button
         icon="pi pi-plus"
         :label="_('ms3_add_field')"
-        size="small"
-        severity="secondary"
-        outlined
+        severity="success"
         class="add-field-btn"
         :disabled="availableFieldsForAdd.length === 0"
         @click="openAddFieldDialog"
@@ -676,7 +666,12 @@ const editingFieldName = computed(() => {
 
       <template #footer>
         <Button :label="_('cancel')" severity="secondary" @click="showAddFieldDialog = false" />
-        <Button :label="_('add')" :disabled="!selectedField" @click="addField" />
+        <Button
+          :label="_('add')"
+          severity="success"
+          :disabled="!selectedField"
+          @click="addField"
+        />
       </template>
     </Dialog>
 
@@ -726,6 +721,7 @@ const editingFieldName = computed(() => {
         <Button :label="_('cancel')" severity="secondary" @click="closeRuleDialog" />
         <Button
           :label="_('add')"
+          severity="success"
           :disabled="!selectedRule || (selectedRuleDef?.hasParam && !ruleParam.trim())"
           @click="addRule"
         />
diff --git a/vueManager/src/components/VendorCombo.vue b/vueManager/src/components/VendorCombo.vue
index 808a06760..f7603900b 100644
--- a/vueManager/src/components/VendorCombo.vue
+++ b/vueManager/src/components/VendorCombo.vue
@@ -6,14 +6,15 @@
       :options="vendors"
       option-label="name"
       option-value="id"
-      :placeholder="placeholder"
+      :placeholder="resolvedPlaceholder"
       :disabled="disabled"
       :loading="loading"
       :show-clear="showClear"
       :filter="enableFilter"
-      filter-placeholder="Search vendor..."
+      :filter-placeholder="filterPlaceholder"
       :empty-message="emptyMessage"
       :empty-filter-message="emptyFilterMessage"
+      :pt="selectPt"
       class="w-full"
       @change="handleChange"
     >
@@ -27,7 +28,8 @@
 </template>
 
 <script setup>
-import Select from 'primevue/select'
+import { useLexicon } from '@vuetools/useLexicon'
+import { Select } from 'primevue'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import request from '../request.js'
@@ -54,7 +56,7 @@ const props = defineProps({
    */
   placeholder: {
     type: String,
-    default: 'Select vendor',
+    default: '',
   },
 
   /**
@@ -83,6 +85,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:modelValue', 'change'])
+const { _ } = useLexicon()
 
 // State
 const loading = ref(false)
@@ -90,16 +93,36 @@ const vendors = ref([])
 const localValue = ref(props.modelValue)
 const wrapperRef = ref(null)
 
+function lex(key, fallback) {
+  const value = _(key)
+  return value && value !== key ? value : fallback
+}
+
+const resolvedPlaceholder = computed(
+  () => props.placeholder || lex('ms3_vendor_select', 'Select vendor')
+)
+
+const filterPlaceholder = computed(() => lex('ms3_vendor_search', 'Search vendor…'))
+
+const selectPt = computed(() => ({
+  clearIcon: {
+    'aria-label': lex('clear', 'Clear'),
+    role: 'button',
+    tabindex: '0',
+  },
+}))
+
 // Computed
 const emptyMessage = computed(() => {
   return vendors.value.length === 0
-    ? 'No vendors found. Add a vendor in component settings.'
-    : 'No results'
+    ? lex(
+        'ms3_vendor_empty',
+        'No vendors found. Add a vendor in component settings.'
+      )
+    : lex('ms3_vendor_not_found', 'Vendor not found')
 })
 
-const emptyFilterMessage = computed(() => {
-  return 'Vendor not found'
-})
+const emptyFilterMessage = computed(() => lex('ms3_vendor_not_found', 'Vendor not found'))
 
 /**
  * Load vendors from API
diff --git a/vueManager/src/components/VendorsGrid.vue b/vueManager/src/components/VendorsGrid.vue
index 04bc55265..ec5c27f91 100644
--- a/vueManager/src/components/VendorsGrid.vue
+++ b/vueManager/src/components/VendorsGrid.vue
@@ -1,20 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import Checkbox from 'primevue/checkbox'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Paginator from 'primevue/paginator'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+import { Button, Card, Checkbox, ConfirmDialog, Dialog, InputText, Paginator, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Toast, useToast } from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -505,7 +491,12 @@ onMounted(async () => {
             </template>
           </div>
           <div class="filter-buttons">
-            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
+            <Button
+              :label="_('apply_filters')"
+              icon="pi pi-filter"
+              severity="success"
+              @click="applyFilters"
+            />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -526,7 +517,6 @@ onMounted(async () => {
               :label="_('clear_selection')"
               icon="pi pi-times"
               severity="secondary"
-              size="small"
               text
               @click="clearSelection"
             />
@@ -534,7 +524,6 @@ onMounted(async () => {
               :label="_('delete_selected')"
               icon="pi pi-trash"
               severity="danger"
-              size="small"
               :loading="bulkProcessing"
               @click="confirmBulkDelete"
             />
@@ -672,7 +661,7 @@ onMounted(async () => {
                   <div class="form-grid">
                     <template v-for="field in group.fields" :key="field.name">
                       <div
-                        class="form-row mb-3"
+                        class="form-row"
                         :style="{ gridColumn: `span ${field.width || 6}` }"
                       >
                         <label :for="`vendor-field-${field.name}`">
@@ -711,17 +700,17 @@ onMounted(async () => {
               <!-- Tab 1: Info -->
               <TabPanel value="0">
                 <div class="edit-form">
-                  <div class="form-row mb-3">
+                  <div class="form-row">
                     <label>{{ _('vendor_name') }} *</label>
                     <InputText v-model="editingVendor.name" class="w-full" />
                   </div>
 
-                  <div class="form-row mb-3">
+                  <div class="form-row">
                     <label>{{ _('vendor_country') }}</label>
                     <InputText v-model="editingVendor.country" class="w-full" />
                   </div>
 
-                  <div class="form-row mb-3">
+                  <div class="form-row">
                     <label>{{ _('vendor_logo') }}</label>
                     <FileBrowser
                       v-model="editingVendor.logo"
@@ -730,7 +719,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="form-row mb-3">
+                  <div class="form-row">
                     <label>{{ _('vendor_description') }}</label>
                     <Textarea v-model="editingVendor.description" class="w-full" rows="4" />
                   </div>
@@ -740,12 +729,12 @@ onMounted(async () => {
               <!-- Tab 2: Contacts -->
               <TabPanel value="1">
                 <div class="edit-form">
-                  <div class="form-row mb-3">
+                  <div class="form-row">
                     <label>{{ _('vendor_address') }}</label>
                     <Textarea v-model="editingVendor.address" class="w-full" rows="2" />
                   </div>
 
-                  <div class="form-row-group mb-3">
+                  <div class="form-row-group">
                     <div class="form-row">
                       <label>{{ _('vendor_phone') }}</label>
                       <InputText v-model="editingVendor.phone" class="w-full" />
@@ -757,7 +746,7 @@ onMounted(async () => {
                     </div>
                   </div>
 
-                  <div class="form-row mb-3">
+                  <div class="form-row">
                     <label>{{ _('vendor_resource') }}</label>
                     <InputText
                       v-model="editingVendor.resource_id"
@@ -781,7 +770,13 @@ onMounted(async () => {
           severity="secondary"
           @click="editDialogVisible = false"
         />
-        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveVendor" />
+        <Button
+          :label="_('save')"
+          icon="pi pi-check"
+          severity="success"
+          :loading="saving"
+          @click="saveVendor"
+        />
       </template>
     </Dialog>
   </div>
@@ -789,7 +784,7 @@ onMounted(async () => {
 
 <style scoped>
 .vendors-grid {
-  padding: 1.25rem;
+  padding: 0;
 }
 
 .grid-header {
@@ -830,11 +825,11 @@ onMounted(async () => {
 .filters-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 15px;
   margin-bottom: 1rem;
-  padding: 1rem;
+  padding: 15px 0;
   background: var(--ms3-bg-slate);
-  border-radius: 0.375rem;
+  border-radius: 3px;
 }
 
 .filter-item {
@@ -845,10 +840,9 @@ onMounted(async () => {
 
 .filter-item label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 4px;
   font-weight: 500;
   font-size: 0.875rem;
-  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -910,10 +904,11 @@ onMounted(async () => {
   color: var(--ms3-text-light);
 }
 
-/* Edit form styles */
+/* Edit form styles — spacing like MODX resource fields (panel 15px / label 4px) */
 .edit-form {
   display: flex;
   flex-direction: column;
+  gap: 15px;
 }
 
 .mb-3 {
@@ -924,13 +919,13 @@ onMounted(async () => {
 .form-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  gap: 1rem;
+  gap: 15px;
 }
 
 .form-row {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 4px;
 }
 
 .form-row label {
@@ -946,7 +941,7 @@ onMounted(async () => {
 .form-row-group {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: 15px;
 }
 
 @media (max-width: 37.5rem) {
@@ -976,7 +971,7 @@ onMounted(async () => {
 }
 
 :deep(.p-tabpanel) {
-  padding: 1rem 0;
+  padding: 15px 0 0;
 }
 
 /* Drag and drop styles */
diff --git a/vueManager/src/components/gallery/GalleryUploader.vue b/vueManager/src/components/gallery/GalleryUploader.vue
index 4061bc4ef..d806e0efa 100644
--- a/vueManager/src/components/gallery/GalleryUploader.vue
+++ b/vueManager/src/components/gallery/GalleryUploader.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="gallery-uploader">
-    <div id="uppy-dashboard" class="uppy-container"></div>
+    <div ref="dashboardEl" class="uppy-container" />
   </div>
 </template>
 
@@ -10,10 +10,15 @@ import Dashboard from '@uppy/dashboard'
 import ImageEditor from '@uppy/image-editor'
 import XHRUpload from '@uppy/xhr-upload'
 import { useLexicon } from '@vuetools/useLexicon'
-import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const { _ } = useLexicon()
 
+/** Compact drop target while idle; expands when files are queued or uploading. */
+const HEIGHT_IDLE = 168
+const HEIGHT_WITH_FILES = 300
+const HEIGHT_BUSY = 380
+
 const props = defineProps({
   productId: {
     type: [Number, String],
@@ -54,15 +59,18 @@ const props = defineProps({
 
 const emit = defineEmits(['upload-success', 'upload-error', 'upload-complete'])
 
+const dashboardEl = ref(null)
 let uppy = null
 
-onMounted(() => {
+onMounted(async () => {
+  await nextTick()
   initUppy()
 })
 
 onBeforeUnmount(() => {
   if (uppy) {
     uppy.close()
+    uppy = null
   }
 })
 
@@ -76,6 +84,7 @@ const buildUppyLocale = () => {
       browseFolders: _('ms3_gallery_uppy_browse_folders'),
       back: _('ms3_gallery_uppy_back'),
       addMoreFiles: _('ms3_gallery_uppy_add_more_files'),
+      addingMoreFiles: _('ms3_gallery_uppy_adding_more_files'),
       dropHint: _('ms3_gallery_uppy_drop_hint'),
       uploadComplete: _('ms3_gallery_uppy_upload_complete'),
       uploadFailed: _('ms3_gallery_uppy_upload_failed'),
@@ -86,6 +95,11 @@ const buildUppyLocale = () => {
       edit: _('ms3_gallery_uppy_edit'),
       retry: _('ms3_gallery_uppy_retry'),
       addMore: _('ms3_gallery_uppy_add_more'),
+      // Image editor chrome (Dashboard panel)
+      editing: _('ms3_gallery_uppy_editing'),
+      save: _('ms3_gallery_uppy_save'),
+      finishEditingFile: _('ms3_gallery_uppy_finish_editing'),
+      saveChanges: _('ms3_gallery_uppy_save_changes'),
       error: _('ms3_gallery_uppy_error'),
       failedToUpload: _('ms3_gallery_uppy_failed_to_upload'),
       noDuplicates: _('ms3_gallery_uppy_no_duplicates'),
@@ -114,7 +128,37 @@ const buildUppyLocale = () => {
   }
 }
 
+function dashboardHeightForState() {
+  if (!uppy) {
+    return HEIGHT_IDLE
+  }
+  const files = uppy.getFiles()
+  const count = files.length
+  if (count === 0) {
+    return HEIGHT_IDLE
+  }
+  const uploading = files.some(
+    f => f.progress?.uploadStarted && !f.progress?.uploadComplete && !f.error
+  )
+  if (uploading || count > 6) {
+    return HEIGHT_BUSY
+  }
+  return HEIGHT_WITH_FILES
+}
+
+function syncDashboardHeight() {
+  const plugin = uppy?.getPlugin('Dashboard')
+  if (!plugin) {
+    return
+  }
+  plugin.setOptions({ height: dashboardHeightForState() })
+}
+
 const initUppy = () => {
+  if (!dashboardEl.value) {
+    return
+  }
+
   const locale = buildUppyLocale()
   uppy = new Uppy({
     id: 'gallery-uploader',
@@ -135,20 +179,39 @@ const initUppy = () => {
   )
 
   uppy.use(Dashboard, {
-    target: '#uppy-dashboard',
+    target: dashboardEl.value,
     inline: true,
     width: '100%',
-    height: 400,
+    height: HEIGHT_IDLE,
     proudlyDisplayPoweredByUppy: false,
     showProgressDetails: true,
     hideUploadButton: false,
+    hideProgressAfterFinish: true,
+    // Gallery is multi-file; one file should not monopolize the panel.
+    singleFileFullScreen: false,
     note: noteText,
     theme: 'light',
+    doneButtonHandler: () => {
+      uppy.cancelAll()
+      syncDashboardHeight()
+    },
   })
 
   uppy.use(ImageEditor, {
     target: Dashboard,
     quality: 0.8,
+    locale: {
+      strings: {
+        revert: _('ms3_gallery_uppy_revert'),
+        rotate: _('ms3_gallery_uppy_rotate'),
+        zoomIn: _('ms3_gallery_uppy_zoom_in'),
+        zoomOut: _('ms3_gallery_uppy_zoom_out'),
+        flipHorizontal: _('ms3_gallery_uppy_flip_horizontal'),
+        aspectRatioSquare: _('ms3_gallery_uppy_crop_square'),
+        aspectRatioLandscape: _('ms3_gallery_uppy_crop_landscape'),
+        aspectRatioPortrait: _('ms3_gallery_uppy_crop_portrait'),
+      },
+    },
   })
 
   uppy.use(XHRUpload, {
@@ -156,14 +219,23 @@ const initUppy = () => {
     method: 'POST',
     formData: true,
     fieldName: 'file',
-    timeout: 60000, // 60 seconds
+    timeout: 60000,
     headers: {
       Accept: 'application/json',
     },
   })
 
+  uppy.on('file-added', () => {
+    syncDashboardHeight()
+  })
+  uppy.on('file-removed', () => {
+    syncDashboardHeight()
+  })
+  uppy.on('upload', () => {
+    syncDashboardHeight()
+  })
+
   uppy.on('upload-success', (file, response) => {
-    // File uploaded successfully
     emit('upload-success', { file, response })
   })
 
@@ -173,14 +245,18 @@ const initUppy = () => {
   })
 
   uppy.on('complete', result => {
-    // Upload complete
     emit('upload-complete', result)
+    syncDashboardHeight()
 
     setTimeout(() => {
+      if (!uppy) {
+        return
+      }
       result.successful.forEach(file => {
         uppy.removeFile(file.id)
       })
-    }, 2000)
+      syncDashboardHeight()
+    }, 1500)
   })
 
   uppy.on('restriction-failed', (file, error) => {
@@ -209,7 +285,6 @@ const formatBytes = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
-// Watch sourceId to rebuild upload URL
 watch(
   () => props.sourceId,
   () => {
@@ -232,13 +307,137 @@ watch(
   width: 100%;
 }
 
+/* Theme surface: no second dashed frame outside Uppy’s AddFiles. */
 .uppy-container {
-  border: var(--ms3-border-width-focus) dashed var(--ms3-border-upload);
-  border-radius: 0.5rem;
+  border-radius: var(--p-content-border-radius, 3px);
   overflow: hidden;
 }
 
-.uppy-container :deep(.uppy-Dashboard--isDraggingOver) {
-  border-color: var(--ms3-accent-green);
+.uppy-container :deep(.uppy-Dashboard-inner) {
+  background-color: var(--p-surface-ground, #f4f4f4);
+  border: 1px solid var(--p-content-border-color, #ccc);
+  border-radius: var(--p-content-border-radius, 3px);
+  width: 100% !important;
+  max-width: 100%;
+  transition: height 0.2s ease;
+}
+
+.uppy-container :deep(.uppy-Dashboard-AddFiles) {
+  border-color: var(--p-content-border-color, #ccc);
+  border-radius: var(--p-content-border-radius, 3px);
+}
+
+.uppy-container :deep(.uppy-Dashboard--isDraggingOver) .uppy-Dashboard-AddFiles,
+.uppy-container :deep(.uppy-Dashboard-dropFilesHereHint) {
+  border-color: var(--p-primary-color, #234368);
+}
+
+.uppy-container :deep(.uppy-Dashboard-AddFiles-title) {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--p-text-color, #333);
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+/* Uppy hides .AddFiles-info below height-md; keep the size note in the compact idle zone. */
+.uppy-container :deep(.uppy-Dashboard-AddFiles-info) {
+  display: block !important;
+  position: static !important;
+  padding-top: 0.25rem;
+  padding-bottom: 0.5rem;
+  margin-top: 0;
+}
+
+.uppy-container :deep(.uppy-Dashboard-note) {
+  color: var(--p-text-muted-color, #757575);
+  font-size: 0.8125rem;
+}
+
+.uppy-container :deep(.uppy-Dashboard-browse),
+.uppy-container :deep(.uppy-DashboardContent-back),
+.uppy-container :deep(.uppy-DashboardContent-addMore),
+.uppy-container :deep(.uppy-StatusBar-actionBtn:not(.uppy-StatusBar-actionBtn--upload)) {
+  color: var(--p-primary-color, #234368);
+}
+
+.uppy-container :deep(.uppy-DashboardContent-bar) {
+  min-height: var(--p-modx-control-height, 2.25rem);
+  height: auto;
+  padding-block: 0.25rem;
+  padding-inline: var(--p-modx-space-panel, 15px);
+  background: var(--p-surface-50, #fafafa);
+  border-bottom-color: var(--p-content-border-color, #e4e4e4);
+}
+
+.uppy-container :deep(.uppy-DashboardContent-title) {
+  color: var(--p-text-color, #333);
+  font-size: var(--p-modx-font-size-lg, 0.875rem);
+  font-weight: 500;
+  line-height: var(--p-modx-control-height, 2.25rem);
+  max-width: min(60%, 20rem);
+}
+
+/* Save = mgr success CTA (same role as StatusBar upload). */
+.uppy-container :deep(.uppy-DashboardContent-save) {
+  color: #fff;
+  background-color: var(--p-button-success-background, #6cb24a);
+  min-height: var(--p-modx-control-height, 2.25rem);
+  padding: 0.375rem 0.875rem;
+  margin-inline-start: 0;
+  border-radius: var(--p-button-border-radius, 3px);
+  font-size: var(--p-modx-font-size-lg, 0.875rem);
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.uppy-container :deep(.uppy-DashboardContent-save:hover) {
+  color: #fff;
+  background-color: var(--p-button-success-hover-background, #5a9a3c);
+}
+
+.uppy-container :deep(.uppy-DashboardContent-save:focus) {
+  color: #fff;
+  background-color: var(--p-button-success-background, #6cb24a);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-button-success-background, #6cb24a) 40%, transparent);
+}
+.uppy-container :deep(.uppy-Dashboard-browse:focus),
+.uppy-container :deep(.uppy-Dashboard-browse:hover) {
+  border-bottom-color: var(--p-primary-color, #234368);
+}
+
+/* Primary CTA = theme success (same as mgr success buttons). */
+.uppy-container :deep(.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload) {
+  background-color: var(--p-button-success-background, #6cb24a);
+  min-height: var(--p-modx-control-height, 2.25rem);
+  padding-block: 0.5rem;
+  border-radius: var(--p-button-border-radius, 3px);
+}
+
+.uppy-container :deep(.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover) {
+  background-color: var(--p-button-success-hover-background, #5a9a3c);
+}
+
+.uppy-container :deep(.uppy-StatusBar-progress) {
+  background-color: var(--p-primary-color, #234368);
+}
+
+.uppy-container :deep(.uppy-StatusBar.is-complete .uppy-StatusBar-progress),
+.uppy-container :deep(.uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator) {
+  background-color: var(--p-button-success-background, #6cb24a);
+  color: var(--p-button-success-background, #6cb24a);
+}
+
+.uppy-container :deep(.uppy-DashboardTab-iconMyDevice),
+.uppy-container :deep(.uppy-StatusBar-spinner) {
+  color: var(--p-primary-color, #234368);
+  fill: var(--p-primary-color, #234368);
+}
+
+.uppy-container :deep(.uppy-Dashboard-Item-action:focus),
+.uppy-container :deep(.uppy-StatusBar-actionCircleBtn:focus),
+.uppy-container :deep(.uppy-DashboardContent-back:focus),
+.uppy-container :deep(.uppy-DashboardContent-addMore:focus) {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-primary-color, #234368) 35%, transparent);
 }
 </style>
diff --git a/vueManager/src/components/gallery/ProductGallery.vue b/vueManager/src/components/gallery/ProductGallery.vue
index 3ea3e67f3..77b8ebbbc 100644
--- a/vueManager/src/components/gallery/ProductGallery.vue
+++ b/vueManager/src/components/gallery/ProductGallery.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { ConfirmDialog, useConfirm, useToast } from 'primevue'
 import { onMounted, ref } from 'vue'
 
 import { useGalleryApi } from '../../composables/useGalleryApi.js'
@@ -405,7 +403,10 @@ onMounted(() => {
 
 <style scoped>
 .product-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--p-modx-space-panel, 15px);
   width: 100%;
-  padding: 0.5rem;
+  padding: 0;
 }
 </style>
diff --git a/vueManager/src/components/gallery/ProductGalleryEditDialog.vue b/vueManager/src/components/gallery/ProductGalleryEditDialog.vue
index 8e2963c81..fa51bf560 100644
--- a/vueManager/src/components/gallery/ProductGalleryEditDialog.vue
+++ b/vueManager/src/components/gallery/ProductGalleryEditDialog.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Textarea from 'primevue/textarea'
+import { Button, Dialog, InputText, Textarea } from 'primevue'
 import { ref, watch } from 'vue'
 
 const { _ } = useLexicon()
@@ -60,77 +57,117 @@ function onCancel() {
   <Dialog
     :visible="visible"
     :header="_('ms3_gallery_file_update')"
-    :modal="true"
-    :closable="true"
+    modal
+    closable
+    append-to="self"
     :style="{ width: '32rem' }"
     @update:visible="$emit('update:visible', $event)"
   >
-    <div class="gallery-edit-form">
+    <div class="edit-form gallery-edit-form">
       <div v-if="file?.thumbnail" class="gallery-edit-preview">
-        <a :href="file.url" target="_blank" class="gallery-edit-thumb-link">
+        <a :href="file.url" target="_blank" rel="noopener" class="gallery-edit-thumb-link">
           <img :src="file.thumbnail" :alt="file.name" />
         </a>
       </div>
 
-      <div class="gallery-edit-field">
-        <label>{{ _('ms3_gallery_file_name') }}</label>
-        <InputText v-model="form.file" class="w-full" />
+      <div class="field">
+        <label for="gallery-edit-file">{{ _('ms3_gallery_file_name') }}</label>
+        <InputText id="gallery-edit-file" v-model="form.file" class="w-full" />
       </div>
 
-      <div class="gallery-edit-field">
-        <label>{{ _('ms3_gallery_file_title') }}</label>
-        <InputText v-model="form.name" class="w-full" />
+      <div class="field">
+        <label for="gallery-edit-name">{{ _('ms3_gallery_file_title') }}</label>
+        <InputText id="gallery-edit-name" v-model="form.name" class="w-full" />
       </div>
 
-      <div class="gallery-edit-field">
-        <label>{{ _('ms3_gallery_file_description') }}</label>
-        <Textarea v-model="form.description" class="w-full" rows="3" />
+      <div class="field">
+        <label for="gallery-edit-description">{{ _('ms3_gallery_file_description') }}</label>
+        <Textarea id="gallery-edit-description" v-model="form.description" class="w-full" rows="3" />
       </div>
     </div>
 
     <template #footer>
-      <Button :label="_('ms3_product_cancel')" severity="secondary" text @click="onCancel" />
-      <Button :label="_('ms3_product_save')" @click="onSave" />
+      <Button :label="_('ms3_product_cancel')" severity="secondary" @click="onCancel" />
+      <Button :label="_('ms3_product_save')" severity="success" @click="onSave" />
     </template>
   </Dialog>
 </template>
 
-<style scoped>
-.gallery-edit-form {
+<style>
+/* Dialog may teleport; keep inputs inside content padding (border-box + min-width).
+ * Label→control: 4px (theme). Between fields: 15px once — no stacked margins. */
+.vueApp .gallery-edit-form,
+.p-dialog .gallery-edit-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--p-modx-space-panel, 15px);
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    box-sizing: border-box;
 }
 
-.gallery-edit-preview {
-  text-align: center;
-  padding: 0.5rem;
-  border: 1px solid var(--p-surface-200);
-  border-radius: 0.375rem;
-  background: var(--p-surface-50);
+/* Override stacked .edit-form field margins (primevue.scss) — spacing via parent gap only. */
+.vueApp .gallery-edit-form>.field,
+.p-dialog .gallery-edit-form>.field,
+.vueApp .gallery-edit-form>.field:not(:last-child),
+.p-dialog .gallery-edit-form>.field:not(:last-child),
+.vueApp .gallery-edit-form>.field.mb-3:not(:last-child),
+.p-dialog .gallery-edit-form>.field.mb-3:not(:last-child) {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0 !important;
+  padding: 0;
+  gap: 0.25rem;
 }
 
-.gallery-edit-preview img {
-  max-width: 100%;
-  max-height: 12rem;
+.vueApp .gallery-edit-form .field label,
+.p-dialog .gallery-edit-form .field label {
+  margin: 0;
+  padding: 0;
+  line-height: 1.3;
 }
 
-.gallery-edit-thumb-link {
-  display: inline-block;
+.vueApp .gallery-edit-form .w-full,
+.p-dialog .gallery-edit-form .w-full,
+.vueApp .gallery-edit-form .p-inputtext,
+.p-dialog .gallery-edit-form .p-inputtext,
+.vueApp .gallery-edit-form .p-textarea,
+.p-dialog .gallery-edit-form .p-textarea {
+  width: 100% !important;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  box-sizing: border-box !important;
 }
 
-.gallery-edit-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
+.vueApp .gallery-edit-preview,
+.p-dialog .gallery-edit-preview {
+  text-align: center;
+  padding: 0.5rem;
+  margin: 0;
+  border: 1px solid var(--p-content-border-color, #e4e4e4);
+  border-radius: var(--p-content-border-radius, 3px);
+  background: var(--p-surface-50, #fafafa);
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
 }
 
-.gallery-edit-field label {
-  font-weight: 600;
-  font-size: 0.875rem;
+.vueApp .gallery-edit-preview img,
+.p-dialog .gallery-edit-preview img {
+  max-width: 100%;
+  max-height: 10rem;
+  height: auto;
+  display: block;
+  margin-inline: auto;
 }
 
-.w-full {
-  width: 100%;
+.vueApp .gallery-edit-thumb-link,
+.p-dialog .gallery-edit-thumb-link {
+  display: inline-block;
+  max-width: 100%;
 }
 </style>
diff --git a/vueManager/src/components/gallery/ProductGalleryGrid.vue b/vueManager/src/components/gallery/ProductGalleryGrid.vue
index f729f2631..cdd11d157 100644
--- a/vueManager/src/components/gallery/ProductGalleryGrid.vue
+++ b/vueManager/src/components/gallery/ProductGalleryGrid.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import ContextMenu from 'primevue/contextmenu'
-import InputText from 'primevue/inputtext'
-import Paginator from 'primevue/paginator'
+import { ContextMenu, InputText, Paginator } from 'primevue'
 import { computed, ref, watch } from 'vue'
 import draggable from 'vuedraggable'
 
@@ -225,7 +223,8 @@ function onContextMenu(event, image) {
 }
 
 .gallery-search {
-  padding: 0.5rem 0;
+  padding: 0;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .gallery-search-wrap {
@@ -268,8 +267,9 @@ function onContextMenu(event, image) {
 }
 
 .gallery-empty {
-  padding: 2rem;
-  text-align: center;
+  padding: var(--p-modx-space-panel, 15px) 0;
+  text-align: start;
+  font-size: 0.875rem;
   color: var(--p-text-muted-color);
 }
 
@@ -316,12 +316,12 @@ function onContextMenu(event, image) {
   left: 0.25rem;
   z-index: 1;
   padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
+  border-radius: var(--p-border-radius-sm, 3px);
   font-size: 0.625rem;
   font-weight: 600;
   line-height: 1.2;
-  color: var(--p-primary-contrast-color, #fff);
-  background: var(--p-primary-color);
+  color: var(--p-button-success-contrast-color, #fff);
+  background: var(--p-button-success-background, #6cb24a);
 }
 
 .gallery-images :deep(.gallery-item-thumb img) {
diff --git a/vueManager/src/components/gallery/ProductGalleryToolbar.vue b/vueManager/src/components/gallery/ProductGalleryToolbar.vue
index d95d6141f..bf8ea449e 100644
--- a/vueManager/src/components/gallery/ProductGalleryToolbar.vue
+++ b/vueManager/src/components/gallery/ProductGalleryToolbar.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Menu from 'primevue/menu'
-import Select from 'primevue/select'
+import { Button, Menu, Select } from 'primevue'
 import { computed, ref } from 'vue'
 
 const { _ } = useLexicon()
@@ -55,6 +53,12 @@ const menuItems = ref([
   },
 ])
 
+const actionsAriaLabel = computed(() => {
+  const key = 'ms3_gallery_actions'
+  const value = _(key)
+  return value && value !== key ? value : 'Gallery actions'
+})
+
 function toggleMenu(event) {
   bulkMenu.value.toggle(event)
 }
@@ -82,9 +86,9 @@ function toggleMenu(event) {
         type="button"
         icon="pi pi-ellipsis-v"
         severity="secondary"
-        text
-        rounded
-        :aria-label="_('ms3_product_options')"
+        outlined
+        class="gallery-bulk-menu-btn"
+        :aria-label="actionsAriaLabel"
         @click="toggleMenu"
       />
       <Menu ref="bulkMenu" :model="menuItems" :popup="true" />
@@ -97,8 +101,8 @@ function toggleMenu(event) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0;
-  gap: 0.5rem;
+  padding: 0;
+  gap: var(--p-modx-space-panel, 15px);
 }
 
 .gallery-toolbar-left {
@@ -112,6 +116,13 @@ function toggleMenu(event) {
   align-items: center;
 }
 
+.gallery-bulk-menu-btn {
+  width: var(--p-modx-control-height, 2.25rem);
+  height: var(--p-modx-control-height, 2.25rem);
+  min-width: var(--p-modx-control-height, 2.25rem);
+  padding: 0;
+}
+
 .gallery-source-select {
   min-width: 12rem;
 }
diff --git a/vueManager/src/components/order/OrderAddProductDialog.vue b/vueManager/src/components/order/OrderAddProductDialog.vue
index ed6bf44d7..bedf349a8 100644
--- a/vueManager/src/components/order/OrderAddProductDialog.vue
+++ b/vueManager/src/components/order/OrderAddProductDialog.vue
@@ -1,9 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import AutoComplete from 'primevue/autocomplete'
-import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
+import { AutoComplete, Button, Dialog, InputNumber } from 'primevue'
 
 const { _ } = useLexicon()
 
@@ -133,6 +130,7 @@ defineProps({
     <Button
       :label="_('save')"
       icon="pi pi-check"
+      severity="success"
       :loading="savingNewProduct"
       :disabled="!selectedProduct || !selectedProduct.id"
       @click="saveNewProduct"
diff --git a/vueManager/src/components/order/OrderAddressTab.vue b/vueManager/src/components/order/OrderAddressTab.vue
index be400f626..caf840a36 100644
--- a/vueManager/src/components/order/OrderAddressTab.vue
+++ b/vueManager/src/components/order/OrderAddressTab.vue
@@ -1,13 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import AutoComplete from 'primevue/autocomplete'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import Fieldset from 'primevue/fieldset'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
+import { AutoComplete, Button, Checkbox, Fieldset, InputNumber, InputText, Select, Textarea } from 'primevue'
 import { computed, inject } from 'vue'
 
 import { ORDER_CONTEXT_KEY } from '../../composables/orderContext.js'
@@ -137,7 +130,6 @@ const showAddressTabActions = computed(
               severity="secondary"
               text
               rounded
-              size="small"
               :title="_('ms3_order_clear_customer')"
               @click="clearCustomer"
             />
diff --git a/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue b/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
index 5316918bc..4646276ec 100644
--- a/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
+++ b/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
+import { Button, Dialog } from 'primevue'
 
 const { _ } = useLexicon()
 
diff --git a/vueManager/src/components/order/OrderEditProductDialog.vue b/vueManager/src/components/order/OrderEditProductDialog.vue
index 6021010ce..21a03cc8d 100644
--- a/vueManager/src/components/order/OrderEditProductDialog.vue
+++ b/vueManager/src/components/order/OrderEditProductDialog.vue
@@ -1,11 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
+import { Button, Dialog, InputNumber, InputText, Select, Textarea } from 'primevue'
 
 const { _ } = useLexicon()
 
@@ -104,14 +99,12 @@ defineProps({
           <Button
             :label="_('options_mode_table')"
             :severity="optionsEditMode === 'table' ? 'primary' : 'secondary'"
-            size="small"
             text
             @click="switchOptionsMode('table')"
           />
           <Button
             :label="_('options_mode_json')"
             :severity="optionsEditMode === 'json' ? 'primary' : 'secondary'"
-            size="small"
             text
             @click="switchOptionsMode('json')"
           />
@@ -198,7 +191,6 @@ defineProps({
             severity="danger"
             text
             rounded
-            size="small"
             @click="removeOptionRow(index)"
           />
         </div>
@@ -206,7 +198,6 @@ defineProps({
           :label="_('options_add_row')"
           icon="pi pi-plus"
           severity="secondary"
-          size="small"
           text
           @click="addOptionRow"
         />
@@ -237,6 +228,7 @@ defineProps({
     <Button
       :label="_('save')"
       icon="pi pi-check"
+      severity="success"
       :loading="savingProduct"
       @click="saveEditedProduct"
     />
diff --git a/vueManager/src/components/order/OrderExtraFieldsSection.vue b/vueManager/src/components/order/OrderExtraFieldsSection.vue
index 0808841f5..9fdd1c605 100644
--- a/vueManager/src/components/order/OrderExtraFieldsSection.vue
+++ b/vueManager/src/components/order/OrderExtraFieldsSection.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Fieldset from 'primevue/fieldset'
+import { Fieldset } from 'primevue'
 import { computed, inject } from 'vue'
 
 import { ORDER_CONTEXT_KEY } from '../../composables/orderContext.js'
diff --git a/vueManager/src/components/order/OrderFormActionsBar.vue b/vueManager/src/components/order/OrderFormActionsBar.vue
index 5b8714908..17ca01816 100644
--- a/vueManager/src/components/order/OrderFormActionsBar.vue
+++ b/vueManager/src/components/order/OrderFormActionsBar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
+import { Button } from 'primevue'
 
 defineProps({
   isCreateMode: { type: Boolean, required: true },
@@ -27,6 +27,7 @@ const { _ } = useLexicon()
       v-else
       :label="_('save')"
       icon="pi pi-check"
+      severity="success"
       :loading="saving"
       :disabled="recalculatingCost"
       @click="emit('save')"
diff --git a/vueManager/src/components/order/OrderHistoryTab.vue b/vueManager/src/components/order/OrderHistoryTab.vue
index 4693e67f2..f1f0c8963 100644
--- a/vueManager/src/components/order/OrderHistoryTab.vue
+++ b/vueManager/src/components/order/OrderHistoryTab.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
+import { Column, DataTable, Tag } from 'primevue'
 
 import { useOrderFormatters } from '../../composables/useOrderFormatters.js'
 import { useOrderLogFormatters } from '../../composables/useOrderLogFormatters.js'
@@ -11,26 +10,51 @@ defineProps({
 })
 
 const { formatDate, formatPrice } = useOrderFormatters()
-const { formatLogEntry } = useOrderLogFormatters({ formatPrice })
+const { formatLogEntry, formatLogAction, logActionSeverity } = useOrderLogFormatters({
+  formatPrice,
+})
 
 const { _ } = useLexicon()
 </script>
 
 <template>
   <div class="order-history-tab">
-    <DataTable :value="logs" striped-rows responsive-layout="scroll">
+    <DataTable
+      :value="logs"
+      striped-rows
+      responsive-layout="scroll"
+      data-key="id"
+    >
+      <template #empty>
+        <div class="history-empty">{{ _('log_empty') }}</div>
+      </template>
       <Column field="timestamp" :header="_('log_date')" style="width: 11.25rem">
         <template #body="{ data }">
           {{ formatDate(data.timestamp || data.createdon) }}
         </template>
       </Column>
-      <Column field="action" :header="_('log_action')" />
+      <Column field="action" :header="_('log_action')" style="width: 9.5rem">
+        <template #body="{ data }">
+          <Tag
+            :value="formatLogAction(data.action)"
+            :severity="logActionSeverity(data.action)"
+          />
+        </template>
+      </Column>
       <Column field="user_name" :header="_('log_user')" style="width: 9.375rem" />
-      <Column field="entry_formatted" :header="_('log_entry')">
+      <Column field="entry" :header="_('log_entry')">
         <template #body="{ data }">
-          {{ data.entry_formatted || formatLogEntry(data) }}
+          {{ formatLogEntry(data) }}
         </template>
       </Column>
     </DataTable>
   </div>
 </template>
+
+<style scoped>
+.history-empty {
+  padding: 1.5rem 0.625rem;
+  color: var(--ms3-text-muted, #696969);
+  text-align: center;
+}
+</style>
diff --git a/vueManager/src/components/order/OrderInfoTab.vue b/vueManager/src/components/order/OrderInfoTab.vue
index e87d8a688..607168790 100644
--- a/vueManager/src/components/order/OrderInfoTab.vue
+++ b/vueManager/src/components/order/OrderInfoTab.vue
@@ -1,14 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
-import DatePicker from 'primevue/datepicker'
-import Fieldset from 'primevue/fieldset'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
+import { Button, Checkbox, DatePicker, Fieldset, InputNumber, InputText, Message, Select, Textarea } from 'primevue'
 import { computed, inject, watch } from 'vue'
 
 import { ORDER_CONTEXT_KEY } from '../../composables/orderContext.js'
@@ -142,12 +134,11 @@ const showOrderInfoActions = computed(
           <span class="summary-value">{{ formatDate(order.createdon) }}</span>
         </div>
         <div class="summary-item summary-row-actions summary-item-wide">
-          <span class="summary-label">{{ _('order_cost_recalculate') }}</span>
           <div class="cost-recalc-controls">
             <Button
               :label="_('order_cost_recalculate')"
               icon="pi pi-sync"
-              size="small"
+              severity="success"
               class="cost-recalc-btn"
               :disabled="recalculateBlocked"
               :loading="recalculatingCost"
@@ -171,9 +162,9 @@ const showOrderInfoActions = computed(
         <Message severity="warn" :closable="false" class="mb-2">
           {{ _('order_cost_recalc_delivery_manual_hint') }}
         </Message>
-        <div class="manual-delivery-row flex gap-2 align-items-end flex-wrap">
-          <div class="manual-delivery-input">
-            <label class="block mb-1" for="manual-delivery-cost">{{ _('ms3_order_delivery_cost') }}</label>
+        <div class="manual-delivery-row">
+          <div class="manual-delivery-input field">
+            <label for="manual-delivery-cost">{{ _('ms3_order_delivery_cost') }}</label>
             <InputNumber
               v-model="manualDeliveryCost"
               input-id="manual-delivery-cost"
@@ -185,6 +176,8 @@ const showOrderInfoActions = computed(
           <Button
             :label="_('order_cost_recalc_apply_manual')"
             icon="pi pi-check"
+            severity="success"
+            class="manual-delivery-apply"
             :loading="recalculatingCost"
             type="button"
             @click="applyManualDeliveryCost()"
@@ -295,8 +288,7 @@ const showOrderInfoActions = computed(
           :label="_('ms3_order_finalize_btn')"
           icon="pi pi-check-circle"
           severity="success"
-          :loading="finalizing"
-          class="finalize-button"
+          :loading="finalizing" class="finalize-button"
           @click="confirmFinalizeOrder"
         />
       </div>
@@ -364,11 +356,13 @@ const showOrderInfoActions = computed(
 }
 
 .summary-label {
-  font-size: 0.75rem;
-  color: var(--ms3-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  display: block;
   margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ms3-text-muted);
+  text-transform: none;
+  letter-spacing: normal;
 }
 
 .summary-value {
@@ -394,12 +388,36 @@ const showOrderInfoActions = computed(
   margin-top: 0.35rem;
 }
 
+.manual-delivery-panel {
+  margin-top: 0.5rem;
+}
+
+.manual-delivery-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
 .manual-delivery-input {
   flex: 1;
   min-width: 12rem;
   max-width: 20rem;
 }
 
+.manual-delivery-row :deep(.p-inputnumber),
+.manual-delivery-row :deep(.p-inputnumber-input) {
+  width: 100%;
+  height: var(--p-modx-control-height, 2.25rem);
+  min-height: var(--p-modx-control-height, 2.25rem);
+  box-sizing: border-box;
+}
+
+.manual-delivery-apply {
+  height: var(--p-modx-control-height, 2.25rem);
+  min-height: var(--p-modx-control-height, 2.25rem);
+}
+
 .finalize-info-panel {
   border: var(--ms3-border-width) solid var(--ms3-border-accent);
   background: linear-gradient(135deg, var(--ms3-bg-accent) 0%, var(--ms3-bg-accent-alt) 100%);
diff --git a/vueManager/src/components/order/OrderProductOptionsChips.vue b/vueManager/src/components/order/OrderProductOptionsChips.vue
index ff8d04a47..b1971ec92 100644
--- a/vueManager/src/components/order/OrderProductOptionsChips.vue
+++ b/vueManager/src/components/order/OrderProductOptionsChips.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Tag from 'primevue/tag'
+import { Tag } from 'primevue'
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/vueManager/src/components/order/OrderProductsTab.vue b/vueManager/src/components/order/OrderProductsTab.vue
index ed91de6da..6c3282ed7 100644
--- a/vueManager/src/components/order/OrderProductsTab.vue
+++ b/vueManager/src/components/order/OrderProductsTab.vue
@@ -1,8 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Button from 'primevue/button'
-import Column from 'primevue/column'
-import DataTable from 'primevue/datatable'
+import { Button, Column, DataTable } from 'primevue'
 import { inject } from 'vue'
 
 import { ORDER_CONTEXT_KEY } from '../../composables/orderContext.js'
@@ -35,8 +33,7 @@ const { _ } = useLexicon()
       <Button
         :label="_('order_add_product')"
         icon="pi pi-plus"
-        severity="primary"
-        size="small"
+        severity="success"
         @click="openAddProductDialog"
       />
     </div>
@@ -151,7 +148,6 @@ const { _ } = useLexicon()
                 :severity="action.severity || 'secondary'"
                 text
                 rounded
-                size="small"
                 @click="handleProductAction(action, data)"
               />
             </div>
diff --git a/vueManager/src/components/product/ProductLinksTab.vue b/vueManager/src/components/product/ProductLinksTab.vue
index 375f24b95..fd38bd85a 100644
--- a/vueManager/src/components/product/ProductLinksTab.vue
+++ b/vueManager/src/components/product/ProductLinksTab.vue
@@ -1,14 +1,19 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import AutoComplete from 'primevue/autocomplete'
-import Button from 'primevue/button'
-import Column from 'primevue/column'
-import ConfirmDialog from 'primevue/confirmdialog'
-import DataTable from 'primevue/datatable'
-import Dialog from 'primevue/dialog'
-import Select from 'primevue/select'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import {
+  AutoComplete,
+  Button,
+  Column,
+  ConfirmDialog,
+  DataTable,
+  Dialog,
+  IconField,
+  InputIcon,
+  InputText,
+  Select,
+  useConfirm,
+  useToast,
+} from 'primevue'
 import { computed, onMounted, ref } from 'vue'
 
 import request from '../../request.js'
@@ -33,6 +38,7 @@ const rows = ref([])
 const totalRecords = ref(0)
 const first = ref(0)
 const pageRows = ref(20)
+const rowsPerPageOptions = [10, 20, 50, 100]
 const query = ref('')
 const linkTypes = ref([])
 const createVisible = ref(false)
@@ -40,6 +46,10 @@ const selectedLinkId = ref(null)
 const productSuggestions = ref([])
 const selectedSlave = ref(null)
 
+const pageReportTemplate = computed(
+  () => `${_('showing')} {first} - {last} ${_('of')} {totalRecords}`
+)
+
 const resourceUpdateUrl = computed(() => {
   if (typeof MODx !== 'undefined' && MODx?.config?.manager_url) {
     return `${MODx.config.manager_url}?a=resource/update&id=`
@@ -224,24 +234,19 @@ onMounted(async () => {
       <Button
         :label="_('ms3_btn_create')"
         icon="pi pi-plus"
-        size="small"
+        severity="success"
         :disabled="!linkTypes.length"
         @click="openCreate"
       />
-      <input
-        v-model="query"
-        type="search"
-        class="product-links-tab__search"
-        :placeholder="_('search')"
-        @keyup.enter="searchLinks"
-      />
-      <Button
-        icon="pi pi-search"
-        severity="secondary"
-        size="small"
-        text
-        @click="searchLinks"
-      />
+      <IconField class="product-links-tab__search">
+        <InputIcon><i class="pi pi-search" /></InputIcon>
+        <InputText
+          v-model="query"
+          type="search"
+          :placeholder="_('search')"
+          @keyup.enter="searchLinks"
+        />
+      </IconField>
     </div>
 
     <DataTable
@@ -250,10 +255,14 @@ onMounted(async () => {
       :lazy="true"
       :paginator="true"
       :rows="pageRows"
+      :rows-per-page-options="rowsPerPageOptions"
       :total-records="totalRecords"
       :first="first"
+      paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+      :current-page-report-template="pageReportTemplate"
       data-key="_rowKey"
       size="small"
+      striped-rows
       @page="onPage"
     >
       <Column :header="_('ms3_link_name')">
@@ -289,98 +298,138 @@ onMounted(async () => {
             severity="danger"
             text
             rounded
-            size="small"
             :aria-label="_('ms3_menu_remove')"
             @click="removeLink(data)"
           />
         </template>
       </Column>
+      <template #empty>
+        <div class="product-links-tab__empty">
+          {{ _('ms3_product_links_empty') }}
+        </div>
+      </template>
     </DataTable>
 
     <Dialog
       v-model:visible="createVisible"
       modal
+      append-to="self"
       :header="_('ms3_link')"
       :style="{ width: '32rem' }"
+      :closable="!saving"
     >
-      <div class="product-links-tab__form">
-        <label class="product-links-tab__label">{{ _('ms3_link') }}</label>
-        <Select
-          v-model="selectedLinkId"
-          :options="linkTypes"
-          option-label="name"
-          option-value="id"
-          class="w-full"
-        >
-          <template #option="{ option }">
-            {{ translateLexicon(option.name, option.name) }}
-          </template>
-          <template #value>
-            {{ selectedLinkTypeName }}
-          </template>
-        </Select>
-
-        <label class="product-links-tab__label">{{ _('ms3_product') }}</label>
-        <AutoComplete
-          v-model="selectedSlave"
-          :suggestions="productSuggestions"
-          option-label="label"
-          dropdown
-          force-selection
-          class="w-full"
-          @complete="searchProducts"
-        />
+      <div class="edit-form">
+        <div class="field">
+          <label for="product-link-type" class="product-links-tab__label">{{ _('ms3_link') }}</label>
+          <Select
+            id="product-link-type"
+            v-model="selectedLinkId"
+            :options="linkTypes"
+            option-label="name"
+            option-value="id"
+            class="w-full"
+          >
+            <template #option="{ option }">
+              {{ translateLexicon(option.name, option.name) }}
+            </template>
+            <template #value>
+              {{ selectedLinkTypeName }}
+            </template>
+          </Select>
+        </div>
+
+        <div class="field">
+          <label for="product-link-slave" class="product-links-tab__label">{{
+            _('ms3_product')
+          }}</label>
+          <AutoComplete
+            id="product-link-slave"
+            v-model="selectedSlave"
+            :suggestions="productSuggestions"
+            option-label="label"
+            dropdown
+            force-selection
+            class="w-full"
+            @complete="searchProducts"
+          />
+        </div>
       </div>
 
       <template #footer>
-        <Button :label="_('close')" severity="secondary" text @click="createVisible = false" />
+        <Button
+          :label="_('close')"
+          severity="secondary"
+          :disabled="saving"
+          @click="createVisible = false"
+        />
         <Button
           :label="_('save')"
+          severity="success"
+          outlined
           :loading="saving"
-          severity="secondary"
           @click="saveLink(false)"
         />
-        <Button :label="_('save_and_close')" :loading="saving" @click="saveLink()" />
+        <Button
+          :label="_('save_and_close')"
+          severity="success"
+          :loading="saving"
+          @click="saveLink()"
+        />
       </template>
     </Dialog>
   </div>
 </template>
 
-<style scoped>
-.product-links-tab {
+<style>
+/* Non-scoped + .vueApp: dialog teleports; keep theme rhythm with other mgr grids */
+.vueApp .product-links-tab {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--p-modx-space-panel, 15px);
   width: 100%;
   min-height: 18rem;
+  padding: 0;
 }
 
-.product-links-tab__toolbar {
+.vueApp .product-links-tab__toolbar {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.product-links-tab__search {
-  flex: 1;
-  min-width: 0;
-  padding: 0.4rem 0.6rem;
-  border: 1px solid var(--p-content-border-color, #ced4da);
-  border-radius: 0.375rem;
+.vueApp .product-links-tab__search {
+  flex: 0 1 20rem;
+  min-width: 14rem;
+  max-width: 20rem;
+  margin-inline-start: auto;
+}
+
+.vueApp .product-links-tab__empty {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--p-text-muted-color, #9ca3af);
 }
 
-.product-links-tab__form {
+.vueApp .product-links-tab .edit-form .field,
+.p-dialog .product-links-tab .edit-form .field {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
-.product-links-tab__label {
+.vueApp .product-links-tab__label,
+.p-dialog .product-links-tab__label {
+  display: block;
+  margin: 0;
   font-size: 0.875rem;
-  font-weight: 600;
+  font-weight: 500;
+  color: var(--ms3-text-primary, #333);
 }
 
-.w-full {
+.vueApp .product-links-tab .w-full,
+.p-dialog .w-full {
   width: 100%;
 }
 </style>
diff --git a/vueManager/src/components/product/ProductOptionField.vue b/vueManager/src/components/product/ProductOptionField.vue
index cf43cbf5f..ef15cf2f9 100644
--- a/vueManager/src/components/product/ProductOptionField.vue
+++ b/vueManager/src/components/product/ProductOptionField.vue
@@ -1,13 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Checkbox from 'primevue/checkbox'
-import DatePicker from 'primevue/datepicker'
-import InputChips from 'primevue/inputchips'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import MultiSelect from 'primevue/multiselect'
-import Select from 'primevue/select'
-import Textarea from 'primevue/textarea'
+import { Checkbox, DatePicker, InputChips, InputNumber, InputText, MultiSelect, Select, Textarea } from 'primevue'
 import { computed, ref, watch } from 'vue'
 
 import request from '../../request.js'
@@ -450,8 +443,8 @@ function addSuggestion(s) {
 }
 
 .combo-options-suggestion:hover {
-  background: var(--p-primary-color, #10b981);
-  border-color: var(--p-primary-color, #10b981);
+  background: var(--p-primary-color, #234368);
+  border-color: var(--p-primary-color, #234368);
   color: #fff;
 }
 </style>
diff --git a/vueManager/src/components/product/ProductOptionsTab.vue b/vueManager/src/components/product/ProductOptionsTab.vue
index 9e2ddd856..c650f710d 100644
--- a/vueManager/src/components/product/ProductOptionsTab.vue
+++ b/vueManager/src/components/product/ProductOptionsTab.vue
@@ -117,7 +117,7 @@ function onOptionChange(payload) {
 /* Non-scoped with .vueApp prefix — avoids Vite scoped-hash mismatch between chunks */
 .vueApp .product-options-tab {
   width: 100%;
-  padding: 0.5rem 0;
+  padding: 0;
 }
 
 .vueApp .product-options-tab .empty {
@@ -167,8 +167,9 @@ function onOptionChange(payload) {
 }
 
 .vueApp .product-options-tab .vtabs-nav-item.is-active {
-  color: var(--p-tabs-tab-active-color, var(--p-primary-color, #10b981));
-  border-right-color: var(--p-tabs-tab-active-border-color, var(--p-primary-color, #10b981));
+  /* Do not use tabs activeBorderColor — theme keeps it transparent for horizontal strip. */
+  color: var(--p-tabs-tab-active-color, var(--p-primary-color, #234368));
+  border-right-color: var(--p-primary-color, #234368);
   font-weight: 600;
 }
 
diff --git a/vueManager/src/components/product/ProductTabs.vue b/vueManager/src/components/product/ProductTabs.vue
index 79d14ed26..4d6861b33 100644
--- a/vueManager/src/components/product/ProductTabs.vue
+++ b/vueManager/src/components/product/ProductTabs.vue
@@ -1,12 +1,6 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import Toast from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+import { Tab, TabList, TabPanel, TabPanels, Tabs, Toast, useToast } from 'primevue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ProductGallery from '../gallery/ProductGallery.vue'
@@ -369,6 +363,18 @@ onBeforeUnmount(() => {
   min-height: 25rem;
 }
 
+/*
+ * Same inset as Utilities/Settings: theme tabpanel padding (15px).
+ * Tab bodies must not add a second horizontal pad on top of this.
+ */
+.product-tabs :deep(.p-tabpanels) {
+  padding: var(--p-tabs-tabpanel-padding, var(--p-modx-space-panel, 15px));
+}
+
+.product-tabs :deep(.p-tabpanel) {
+  padding: 0;
+}
+
 .extjs-container {
   min-height: 18.75rem;
   width: 100%;
@@ -379,9 +385,8 @@ onBeforeUnmount(() => {
   width: 100% !important;
 }
 
-/* Fix padding for ExtJS panels inside Vue tabs */
+/* Ext body sits inside themed tabpanel pad — avoid double inset */
 .extjs-container :deep(.x-panel-body) {
-  padding: 0.625rem;
+  padding: 0;
 }
-
 </style>
diff --git a/vueManager/src/composables/uiGroup.js b/vueManager/src/composables/uiGroup.js
index 9d89c33ba..ce268fe72 100644
--- a/vueManager/src/composables/uiGroup.js
+++ b/vueManager/src/composables/uiGroup.js
@@ -23,7 +23,8 @@
  *
  * @see https://github.com/modx-pro/MiniShop3/issues/539
  */
-import { useToast } from 'primevue/usetoast'
+
+import { useToast } from 'primevue'
 import { inject } from 'vue'
 
 export const MS3_UI_GROUP = Symbol('ms3UiGroup')
diff --git a/vueManager/src/composables/uiGroup.test.js b/vueManager/src/composables/uiGroup.test.js
index 5953c41b6..b97259d49 100644
--- a/vueManager/src/composables/uiGroup.test.js
+++ b/vueManager/src/composables/uiGroup.test.js
@@ -8,7 +8,7 @@ const remove = vi.fn()
 const removeGroup = vi.fn()
 const removeAllGroups = vi.fn()
 
-vi.mock('primevue/usetoast', () => ({
+vi.mock('primevue', () => ({
   useToast: () => ({
     add,
     remove,
diff --git a/vueManager/src/composables/useActions.js b/vueManager/src/composables/useActions.js
index c511a2dc1..66ff36906 100644
--- a/vueManager/src/composables/useActions.js
+++ b/vueManager/src/composables/useActions.js
@@ -4,7 +4,7 @@
  * Provides convenient interface for working with grid actions
  */
 import { useLexicon } from '@vuetools/useLexicon'
-import { useConfirm } from 'primevue/useconfirm'
+import { useConfirm } from 'primevue'
 
 import actionRegistry from '../actionRegistry.js'
 import { resolveUiGroup, toUiGroup, useGroupedToast } from './uiGroup.js'
diff --git a/vueManager/src/composables/useCrudDialog.js b/vueManager/src/composables/useCrudDialog.js
index 89c4660f3..c620ca508 100644
--- a/vueManager/src/composables/useCrudDialog.js
+++ b/vueManager/src/composables/useCrudDialog.js
@@ -1,5 +1,5 @@
 import { useLexicon } from '@vuetools/useLexicon'
-import { useToast } from 'primevue/usetoast'
+import { useToast } from 'primevue'
 import { ref } from 'vue'
 
 /**
diff --git a/vueManager/src/composables/useOrderLogFormatters.js b/vueManager/src/composables/useOrderLogFormatters.js
index 9a2c9985c..3de4a87a3 100644
--- a/vueManager/src/composables/useOrderLogFormatters.js
+++ b/vueManager/src/composables/useOrderLogFormatters.js
@@ -1,3 +1,5 @@
+import { useLexicon } from '@vuetools/useLexicon'
+
 import { useOrderFormatters } from './useOrderFormatters.js'
 
 /**
@@ -5,15 +7,36 @@ import { useOrderFormatters } from './useOrderFormatters.js'
  * Pass `formatPrice` from `useOrderFormatters()` in `options` to avoid a second composable call.
  */
 export function useOrderLogFormatters(options = {}) {
+  const { _ } = useLexicon()
   const formatPrice = options.formatPrice ?? useOrderFormatters().formatPrice
 
-  function capitalizeFirst(str) {
-    if (!str) return ''
-    return str.charAt(0).toUpperCase() + str.slice(1)
+  const ACTION_SEVERITY = {
+    status: 'info',
+    products: 'success',
+    payment: 'warn',
+    address: 'secondary',
+    field: 'secondary',
+  }
+
+  function formatLogAction(action) {
+    if (!action) return '—'
+    const key = `log_action_${action}`
+    const label = _(key)
+    return label !== key ? label : action
+  }
+
+  function logActionSeverity(action) {
+    return ACTION_SEVERITY[action] || 'secondary'
+  }
+
+  function formatProductOperation(op) {
+    const key = `log_entry_product_op_${op}`
+    const label = _(key)
+    return label !== key ? label : op
   }
 
   function formatLogEntryObject(action, entry) {
-    if (!entry) return '-'
+    if (!entry) return '—'
 
     switch (action) {
       case 'status':
@@ -21,21 +44,21 @@ export function useOrderLogFormatters(options = {}) {
           return entry.new_status_name
         }
         if (entry.status_id) {
-          return `Status ID: ${entry.status_id}`
+          return _('log_entry_status_id').replace('{id}', String(entry.status_id))
         }
         break
 
       case 'products': {
-        const op = entry.operation || 'unknown'
+        const op = formatProductOperation(entry.operation || 'unknown')
         const productName = entry.product_name || ''
         const count = entry.count ? ` (×${entry.count})` : ''
-        return `${capitalizeFirst(op)}: ${productName}${count}`
+        return `${op}: ${productName}${count}`.trim()
       }
 
       case 'field': {
         if (entry.fields) {
           const fieldNames = Object.keys(entry.fields)
-          return `Fields: ${fieldNames.join(', ')}`
+          return _('log_entry_fields').replace('{fields}', fieldNames.join(', '))
         }
         break
       }
@@ -43,15 +66,15 @@ export function useOrderLogFormatters(options = {}) {
       case 'address': {
         if (entry.fields) {
           const fieldNames = Object.keys(entry.fields)
-          return `Address: ${fieldNames.join(', ')}`
+          return _('log_entry_address').replace('{fields}', fieldNames.join(', '))
         }
         break
       }
 
       case 'payment': {
-        const payOp = entry.operation || 'unknown'
+        const payOp = formatProductOperation(entry.operation || 'unknown')
         const amount = entry.amount || 0
-        return `${capitalizeFirst(payOp)}: ${formatPrice(amount)}`
+        return `${payOp}: ${formatPrice(amount)}`
       }
 
       default: {
@@ -59,33 +82,44 @@ export function useOrderLogFormatters(options = {}) {
           .filter(([, v]) => v !== null && v !== undefined)
           .map(([k, v]) => `${k}: ${typeof v === 'object' ? JSON.stringify(v) : v}`)
           .slice(0, 3)
-        return pairs.join(', ') || '-'
+        return pairs.join(', ') || '—'
       }
     }
 
     return JSON.stringify(entry)
   }
 
+  function resolveEntryPayload(data) {
+    if (!data) return null
+    if (data.entry_data != null) return data.entry_data
+    return data.entry
+  }
+
   function formatLogEntry(data) {
-    if (!data || !data.entry) return '-'
+    if (!data) return '—'
+
+    const raw = resolveEntryPayload(data)
+    if (raw == null) return '—'
 
-    if (typeof data.entry === 'string') {
+    if (typeof raw === 'string') {
       try {
-        const parsed = JSON.parse(data.entry)
+        const parsed = JSON.parse(raw)
         return formatLogEntryObject(data.action, parsed)
       } catch {
-        return data.entry
+        return raw
       }
     }
 
-    if (typeof data.entry === 'object') {
-      return formatLogEntryObject(data.action, data.entry)
+    if (typeof raw === 'object') {
+      return formatLogEntryObject(data.action, raw)
     }
 
-    return String(data.entry)
+    return String(raw)
   }
 
   return {
+    formatLogAction,
+    logActionSeverity,
     formatLogEntry,
   }
 }
diff --git a/vueManager/src/composables/useOrderSave.js b/vueManager/src/composables/useOrderSave.js
index 69d671b85..721fbd887 100644
--- a/vueManager/src/composables/useOrderSave.js
+++ b/vueManager/src/composables/useOrderSave.js
@@ -129,6 +129,8 @@ export function useOrderSave(deps) {
       icon: 'pi pi-check-circle',
       acceptLabel: _('ms3_order_finalize_btn'),
       rejectLabel: _('cancel'),
+      acceptProps: { severity: 'success' },
+      rejectProps: { severity: 'secondary' },
       accept: () => {
         finalizeOrder()
       },
diff --git a/vueManager/src/composables/useOrderView.js b/vueManager/src/composables/useOrderView.js
index 451a68b84..0cedc13a4 100644
--- a/vueManager/src/composables/useOrderView.js
+++ b/vueManager/src/composables/useOrderView.js
@@ -7,8 +7,7 @@
  * and the return shape consumed by OrderView.vue are preserved unchanged.
  */
 import { useLexicon } from '@vuetools/useLexicon'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
+import { useConfirm, useToast } from 'primevue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { useOrderCostRecalc } from './useOrderCostRecalc.js'
diff --git a/vueManager/src/composables/useResourceList.js b/vueManager/src/composables/useResourceList.js
index 78b5c2487..42821a060 100644
--- a/vueManager/src/composables/useResourceList.js
+++ b/vueManager/src/composables/useResourceList.js
@@ -1,5 +1,5 @@
 import { useLexicon } from '@vuetools/useLexicon'
-import { useToast } from 'primevue/usetoast'
+import { useToast } from 'primevue'
 
 import { createResourceList } from './resourceListCore.js'
 
diff --git a/vueManager/src/composables/useSelection.js b/vueManager/src/composables/useSelection.js
index c751009fb..a05a6d128 100644
--- a/vueManager/src/composables/useSelection.js
+++ b/vueManager/src/composables/useSelection.js
@@ -1,5 +1,5 @@
 import { useLexicon } from '@vuetools/useLexicon'
-import { useConfirm } from 'primevue/useconfirm'
+import { useConfirm } from 'primevue'
 import { computed, ref } from 'vue'
 
 import { resolveUiGroup, toUiGroup, useGroupedToast } from './uiGroup.js'
diff --git a/vueManager/src/composables/useSortableList.js b/vueManager/src/composables/useSortableList.js
index a0c0043be..0b9423eca 100644
--- a/vueManager/src/composables/useSortableList.js
+++ b/vueManager/src/composables/useSortableList.js
@@ -1,5 +1,5 @@
 import { useLexicon } from '@vuetools/useLexicon'
-import { useToast } from 'primevue/usetoast'
+import { useToast } from 'primevue'
 import { ref } from 'vue'
 
 import request from '../request.js'
diff --git a/vueManager/src/entries/api-test.js b/vueManager/src/entries/api-test.js
index 123095537..0b990ca00 100644
--- a/vueManager/src/entries/api-test.js
+++ b/vueManager/src/entries/api-test.js
@@ -7,12 +7,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import VueApiTest from '../components/ApiTest.vue'
@@ -28,12 +25,7 @@ function createVueApp() {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/category-options.js b/vueManager/src/entries/category-options.js
index 3806632f2..f84c60e14 100644
--- a/vueManager/src/entries/category-options.js
+++ b/vueManager/src/entries/category-options.js
@@ -5,11 +5,8 @@
  * ms3-grid-category-option + ms3-window-option-add + ms3-window-copy-category.
  */
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import CategoryOptionsTab from '../components/CategoryOptionsTab.vue'
@@ -34,13 +31,7 @@ function mountApp() {
   app = createApp(CategoryOptionsTab, { categoryId })
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: '.dark-mode',
-        cssLayer: false,
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
   app.use(ToastService)
diff --git a/vueManager/src/entries/category-products.js b/vueManager/src/entries/category-products.js
index 3691df92e..7cc6ce7ae 100644
--- a/vueManager/src/entries/category-products.js
+++ b/vueManager/src/entries/category-products.js
@@ -8,12 +8,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import CategoryProductsGrid from '../components/CategoryProductsGrid.vue'
@@ -35,12 +32,7 @@ function createVueApp(categoryId) {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/customers.js b/vueManager/src/entries/customers.js
index a8ba079b0..397fbe000 100644
--- a/vueManager/src/entries/customers.js
+++ b/vueManager/src/entries/customers.js
@@ -7,12 +7,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import CustomersGrid from '../components/CustomersGrid.vue'
@@ -28,12 +25,7 @@ function createVueApp() {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/help.js b/vueManager/src/entries/help.js
index 9eec73fd1..2cc4b2ac6 100644
--- a/vueManager/src/entries/help.js
+++ b/vueManager/src/entries/help.js
@@ -5,8 +5,7 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
-import PrimeVue from 'primevue/config'
+import { ModxManagerTheme, PrimeVue } from 'primevue'
 import { createApp } from 'vue'
 
 import HelpPage from '../components/HelpPage.vue'
@@ -19,12 +18,7 @@ function createVueApp() {
   const app = createApp(HelpPage)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
   })
 
   return app
diff --git a/vueManager/src/entries/notifications.js b/vueManager/src/entries/notifications.js
index 44c0e198a..0b9c0832b 100644
--- a/vueManager/src/entries/notifications.js
+++ b/vueManager/src/entries/notifications.js
@@ -7,12 +7,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import NotificationsGrid from '../components/NotificationsGrid.vue'
@@ -28,12 +25,7 @@ function createVueApp() {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/order.js b/vueManager/src/entries/order.js
index d2dbcf045..28dfe70f6 100644
--- a/vueManager/src/entries/order.js
+++ b/vueManager/src/entries/order.js
@@ -5,12 +5,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import OrderView from '../components/OrderView.vue'
@@ -136,12 +133,7 @@ function createVueApp() {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/orders.js b/vueManager/src/entries/orders.js
index 3a19ada0e..0114f6d15 100644
--- a/vueManager/src/entries/orders.js
+++ b/vueManager/src/entries/orders.js
@@ -5,12 +5,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import OrdersGrid from '../components/OrdersGrid.vue'
@@ -25,12 +22,7 @@ function createVueApp() {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/product-tabs.js b/vueManager/src/entries/product-tabs.js
index 259dcd364..b7a5b9dfa 100644
--- a/vueManager/src/entries/product-tabs.js
+++ b/vueManager/src/entries/product-tabs.js
@@ -9,12 +9,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import ProductTabs from '../components/product/ProductTabs.vue'
@@ -130,12 +127,7 @@ function createVueApp(props) {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
 
diff --git a/vueManager/src/entries/settings.js b/vueManager/src/entries/settings.js
index 5a6f58ce0..acbd43e05 100644
--- a/vueManager/src/entries/settings.js
+++ b/vueManager/src/entries/settings.js
@@ -5,11 +5,8 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import SettingsPage from '../components/SettingsPage.vue'
@@ -19,12 +16,7 @@ function createVueApp() {
   const app = createApp(SettingsPage)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
   app.use(ConfirmationService)
diff --git a/vueManager/src/entries/utilities.js b/vueManager/src/entries/utilities.js
index db8bccda4..abed4d4b9 100644
--- a/vueManager/src/entries/utilities.js
+++ b/vueManager/src/entries/utilities.js
@@ -5,12 +5,9 @@
 import '../scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 import UtilitiesPage from '../components/UtilitiesPage.vue'
@@ -25,12 +22,7 @@ export function init(selector = '#ms3-vue-utilities') {
   const app = createApp(UtilitiesPage)
   app.use(createPinia())
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
   })
   app.use(ConfirmationService)
diff --git a/vueManager/src/main.js b/vueManager/src/main.js
index 6d82daf90..64cc064ef 100644
--- a/vueManager/src/main.js
+++ b/vueManager/src/main.js
@@ -1,12 +1,9 @@
 import './scss/primevue.scss'
 import 'primeicons/primeicons.css'
 
-import Aura from '@primeuix/themes/aura'
 import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
+import { ConfirmationService, ModxManagerTheme, PrimeVue, ToastService } from 'primevue'
 import { createApp } from 'vue'
 
 /**
@@ -40,14 +37,7 @@ export function createVueApp(rootComponent) {
   app.use(pinia)
 
   app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-        cssLayer: false,
-        prefix: 'p',
-      },
-    },
+    theme: ModxManagerTheme,
     locale: getPrimeVueLocale(),
     pt: {
       directives: {
diff --git a/vueManager/src/scss/_variables.scss b/vueManager/src/scss/_variables.scss
index ef997e9cf..3419359c5 100644
--- a/vueManager/src/scss/_variables.scss
+++ b/vueManager/src/scss/_variables.scss
@@ -64,9 +64,9 @@
   --ms3-text-info-result: #0c5460;
   --ms3-text-error-result: #721c24;
 
-  /* Colors — accents */
-  --ms3-accent-primary: #3b82f6;
-  --ms3-accent-focus: rgb(59 130 246 / 30%);
+  /* Colors — accents (alias ModxManagerTheme primary, not Tailwind blue) */
+  --ms3-accent-primary: var(--p-primary-color, #234368);
+  --ms3-accent-focus: color-mix(in srgb, var(--p-primary-color, #234368) 30%, transparent);
   --ms3-accent-teal: #32ab9a;
   --ms3-accent-green: #4caf50;
   --ms3-border-upload: #ddd;
diff --git a/vueManager/src/scss/primevue.scss b/vueManager/src/scss/primevue.scss
index 39441f63b..60ce58f57 100644
--- a/vueManager/src/scss/primevue.scss
+++ b/vueManager/src/scss/primevue.scss
@@ -73,7 +73,7 @@
 
 .vueApp .mt-3,
 .p-dialog .mt-3 {
-  margin-top: 0.75rem;
+  margin-top: var(--p-modx-space-panel, 15px);
 }
 
 .vueApp .mt-4,
@@ -108,12 +108,12 @@
 
 .vueApp .mb-2,
 .p-dialog .mb-2 {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem; /* 4px — label→control (MODX form rhythm) */
 }
 
 .vueApp .mb-3,
 .p-dialog .mb-3 {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--p-modx-space-panel, 15px);
 }
 
 .vueApp .mb-4,
@@ -334,21 +334,92 @@
   color: var(--ms3-text-muted);
 }
 
-/* Form fields in dialogs (for ModelFieldsGrid and similar) */
+/* Form fields in dialogs — MODX: 15px between fields, 4px label→control.
+ * Do not stack per-field padding on top of grid gap (was ~32px visually). */
+.p-dialog .edit-field-form,
+.p-dialog .edit-form {
+  padding: 0;
+}
+
+.p-dialog .form-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--p-modx-space-panel, 15px);
+  margin: 0;
+}
+
 .p-dialog .field {
-  margin-bottom: 1rem;
+  margin-bottom: 0;
+}
+
+.p-dialog .edit-form > .field:not(:last-child),
+.p-dialog .edit-form > .field.mb-3:not(:last-child) {
+  margin-bottom: var(--p-modx-space-panel, 15px);
+}
+
+.p-dialog .edit-field-form .field,
+.p-dialog .edit-form .field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .p-dialog .field label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
   font-weight: 500;
+  font-size: 0.875rem;
 }
 
-.p-dialog .edit-form .field label {
+.p-dialog .edit-form .field label,
+.p-dialog .edit-field-form .field label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
   font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--ms3-text-primary, #333);
+}
+
+.p-dialog .edit-field-form .field small,
+.p-dialog .edit-form .field small {
+  color: var(--ms3-text-muted, #64748b);
+  font-size: 0.75rem;
+  margin-top: 0;
+  line-height: 1.35;
+}
+
+.p-dialog .edit-field-form .w-full {
+  width: 100%;
+}
+
+.p-dialog .col-6 {
+  flex: 0 0 calc(50% - (var(--p-modx-space-panel, 15px) / 2));
+  max-width: calc(50% - (var(--p-modx-space-panel, 15px) / 2));
+}
+
+.p-dialog .col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.p-dialog .edit-field-form .checkbox-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.p-dialog .edit-field-form .checkbox-label {
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.p-dialog .edit-form .ms3-dialog-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--p-modx-space-panel, 15px);
 }
 
 .p-dialog .grid {
@@ -365,16 +436,389 @@
 
 /* ============================================ */
 
+/* Also under .vueApp — dialogs with append-to="self" stay inside the SPA root. */
+.vueApp .edit-field-form,
+.vueApp .edit-form {
+  padding: 0;
+}
+
+.vueApp .form-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--p-modx-space-panel, 15px);
+  margin: 0;
+}
+
+.vueApp .edit-field-form .field,
+.vueApp .edit-form .field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0;
+  margin-bottom: 0;
+  box-sizing: border-box;
+}
+
+.vueApp .edit-form > .field:not(:last-child) {
+  margin-bottom: var(--p-modx-space-panel, 15px);
+}
+
+.vueApp .edit-field-form .field label,
+.vueApp .edit-form .field label {
+  display: block;
+  margin-bottom: 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--ms3-text-primary, #333);
+}
+
+.vueApp .edit-field-form .field small,
+.vueApp .edit-form .field small {
+  color: var(--ms3-text-muted, #64748b);
+  font-size: 0.75rem;
+  margin-top: 0;
+  line-height: 1.35;
+}
+
+.vueApp .col-6 {
+  flex: 0 0 calc(50% - (var(--p-modx-space-panel, 15px) / 2));
+  max-width: calc(50% - (var(--p-modx-space-panel, 15px) / 2));
+}
+
+.vueApp .col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.vueApp .edit-form .ms3-dialog-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--p-modx-space-panel, 15px);
+}
+
+/*
+ * PageBuilder (resource/update) defines Bootstrap-like `.vueApp .col-N { width:% }`.
+ * MS3 product/settings grids use the same class names for 12-col CSS Grid spans —
+ * reset width/flex so cells fill their tracks (15px gap only).
+ */
+.vueApp[id^='ms3-'] .fields-grid > .field-item[class*='col-'],
+.vueApp[id^='ms3-'] .fields-grid > [class*='col-'] {
+  width: 100% !important;
+  max-width: none !important;
+  flex: none !important;
+  padding: 0 !important;
+  min-width: 0;
+}
+
+.vueApp[id^='ms3-'] .fields-grid > .field-item.field-checkbox-row {
+  width: 100% !important;
+  max-width: none !important;
+  flex: none !important;
+  padding: 0 !important;
+  grid-column: span 12;
+}
+
+.vueApp[id^='ms3-'] .fields-grid > .field-item.field-checkbox {
+  width: max-content !important;
+  max-width: none !important;
+  flex: none !important;
+  padding: 0 !important;
+  grid-column: auto;
+  justify-self: start;
+}
+
+/* Config panels (sections / fields) — same chrome as Modx Panel */
+.vueApp .ms3-config-panel.p-panel {
+  margin-bottom: var(--p-modx-space-panel, 15px);
+}
+
+.vueApp .ms3-config-panel .p-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: calc(
+    var(--p-modx-control-height, 2.25rem) + (2 * var(--p-modx-space-panel, 15px))
+  );
+  padding: var(--p-modx-space-panel, 15px);
+  background: transparent;
+}
+
+/*
+ * Section titles must outrank field labels (14px). Default inherits mgr 13px body
+ * and reads smaller than labels — “маловат” vs Modx hierarchy.
+ */
+.vueApp .ms3-config-panel .p-panel-title {
+  flex: 1 1 auto;
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: var(--p-panel-title-font-weight, 700);
+  line-height: var(--p-modx-control-height, 2.25rem);
+  color: var(--p-panel-header-color, #2a2a2a);
+}
+
+.vueApp .ms3-config-panel .p-panel-content {
+  padding: var(--p-modx-space-panel, 15px);
+}
+
+.vueApp .ms3-config-panel .p-panel-icons,
+.vueApp .ms3-config-panel .p-panel-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.vueApp .row-actions-cell {
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.vueApp .row-actions {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Shared grid action strip (ActionsColumn CSS chunk may not be linked on every page). */
+.vueApp .actions-column.row-actions,
+.vueApp .actions-column {
+  display: inline-flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.vueApp .actions-column .p-button {
+  flex-shrink: 0;
+}
+
 /* Tab Description                             */
 
 /* ============================================ */
+/* Plain muted lead — no boxed callout (matches MODX field hints). */
 .vueApp .tab-description {
-  margin: 0 0 1rem;
-  padding: 0.75rem 1rem;
-  background-color: var(--ms3-bg-muted);
-  border-left: var(--ms3-border-width-accent) solid var(--ms3-accent-primary);
-  color: var(--ms3-text-info);
+  margin: 0 0 var(--p-modx-space-panel, 15px);
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--ms3-text-muted, #64748b);
   font-size: 0.875rem;
   line-height: 1.5;
-  border-radius: 0 var(--ms3-radius-sm) var(--ms3-radius-sm) 0;
+}
+
+/*
+ * PageBuilder paints focus borders green on every `.vueApp .p-select` and
+ * restyles `.p-select-dropdown`. Its CSS loads after MS3 on resource/update.
+ * Use `.vueApp[id^=ms3-]` (same node) so postcss-prefix leave it unprefixed
+ * and the mount root matches.
+ */
+.vueApp[id^='ms3-'] .p-select:not(.p-disabled).p-focus,
+.vueApp[id^='ms3-'] .p-multiselect:not(.p-disabled).p-focus,
+.vueApp[id^='ms3-'] .p-autocomplete.p-focus .p-autocomplete-input {
+  border-color: var(--p-form-field-focus-border-color, var(--p-primary-color, #234368)) !important;
+}
+
+.vueApp[id^='ms3-'] .p-select-dropdown {
+  width: var(--p-select-dropdown-width, 1.875rem) !important;
+  min-width: var(--p-select-dropdown-width, 1.875rem) !important;
+  color: var(--p-select-dropdown-color, var(--p-form-field-icon-color, #686868));
+  background: transparent;
+  border-inline-start: 1px solid var(--p-select-border-color, #e4e4e4);
+}
+
+.vueApp[id^='ms3-'] .p-select {
+  border-color: var(--p-select-border-color, #e4e4e4);
+}
+
+/*
+ * InputChips / MultiSelect chips: Modx highlight tokens (not default/Tailwind blue).
+ * OptionsChips uses the same highlight pair in component CSS.
+ */
+.vueApp[id^='ms3-'] .p-inputchips-chip,
+.vueApp[id^='ms3-'] .p-multiselect-chip,
+.vueApp[id^='ms3-'] .p-autocomplete-chip,
+.p-dialog .p-inputchips-chip,
+.p-dialog .p-multiselect-chip,
+.p-dialog .p-autocomplete-chip {
+  background: var(--p-highlight-background, #d6e7f8);
+  color: var(--p-highlight-color, #1b3451);
+  border-radius: var(--p-autocomplete-chip-border-radius, 2px);
+}
+
+.vueApp[id^='ms3-'] .p-inputchips-chip-icon,
+.vueApp[id^='ms3-'] .p-multiselect-chip-icon,
+.vueApp[id^='ms3-'] .p-autocomplete-chip-icon,
+.p-dialog .p-inputchips-chip-icon,
+.p-dialog .p-multiselect-chip-icon,
+.p-dialog .p-autocomplete-chip-icon {
+  color: inherit;
+}
+
+/*
+ * MODX manager (`index.css`): `.ext-webkit *:focus-visible { outline: auto !important }`.
+ * Ext fields are exempt via `.x-form-focus`; Vue controls are not, so the UA dark ring
+ * sits on top of ModxManagerTheme focus (border + ring tokens).
+ * Selectors must start with `.vueApp[id^=ms3-]` or `.p-` so postcss-prefix leaves them intact.
+ */
+.vueApp[id^='ms3-'] .p-inputtext:focus-visible,
+.vueApp[id^='ms3-'] .p-textarea:focus-visible,
+.vueApp[id^='ms3-'] .p-select:focus-visible,
+.vueApp[id^='ms3-'] .p-multiselect:focus-visible,
+.vueApp[id^='ms3-'] .p-autocomplete-input:focus-visible,
+.vueApp[id^='ms3-'] .p-inputchips:focus-visible,
+.vueApp[id^='ms3-'] .p-datepicker-input:focus-visible,
+.p-select-overlay .p-inputtext:focus-visible,
+.p-multiselect-overlay .p-inputtext:focus-visible,
+.p-datepicker-panel .p-inputtext:focus-visible,
+.p-dialog .p-inputtext:focus-visible,
+.p-dialog .p-textarea:focus-visible,
+.p-dialog .p-select:focus-visible,
+.p-dialog .p-multiselect:focus-visible,
+.p-dialog .p-autocomplete-input:focus-visible {
+  outline: var(--p-form-field-focus-ring-width, 2px)
+    var(--p-form-field-focus-ring-style, solid)
+    var(
+      --p-form-field-focus-ring-color,
+      var(--p-primary-color, #234368)
+    ) !important;
+  outline-offset: var(--p-form-field-focus-ring-offset, -1px) !important;
+}
+
+/* Clear sits before the chevron; keep label clear of both icons. */
+.vueApp[id^='ms3-'] .p-select.p-inputwrapper-filled .p-select-label {
+  padding-inline-end: calc(
+    var(--p-select-dropdown-width, 1.875rem) + var(--p-icon-size, 0.875rem) + 0.75rem
+  );
+}
+
+.vueApp[id^='ms3-'] .p-select-clear-icon {
+  inset-inline-end: var(--p-select-dropdown-width, 1.875rem);
+  margin-inline-end: 0.25rem;
+}
+
+/*
+ * Overlay filter (Select/MultiSelect): Modx control height + full-width IconField.
+ * main.css used to force 90% width; overlays teleport outside .vueApp.
+ */
+.p-select-overlay .p-select-header .p-iconfield,
+.p-multiselect-overlay .p-multiselect-header .p-iconfield {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.p-select-overlay .p-select-filter,
+.p-multiselect-overlay .p-multiselect-filter {
+  width: 100% !important;
+  height: var(--p-modx-control-height, 2.25rem) !important;
+  min-height: var(--p-modx-control-height, 2.25rem) !important;
+  /* Overlays teleport outside .vueApp; theme/PageBuilder may leave content-box. */
+  box-sizing: border-box !important;
+}
+
+.p-select-overlay .p-select-header .p-iconfield,
+.p-multiselect-overlay .p-multiselect-header .p-iconfield {
+  min-height: var(--p-modx-control-height, 2.25rem);
+  height: auto;
+}
+
+/* PageBuilder forces width:100% on all .vueApp .p-select — keep paginator RPP compact.
+ * Height is set with the Modx paginator block below (match nav buttons). */
+.vueApp[id^='ms3-'] .p-paginator .p-select,
+.vueApp[id^='ms3-'] .rows-per-page-select {
+  width: auto !important;
+  min-width: 4.5rem !important;
+  max-width: 6.5rem !important;
+  flex: 0 0 auto;
+}
+
+/*
+ * Active tab label: splash color like Ext .x-tab-strip-text.
+ * No top accent bar — top-level MODX tabs are white fill only.
+ * Canonical token: VueTools ModxManagerTheme tabs.activeColor.
+ */
+.vueApp[id^='ms3-'] .p-tab-active {
+  color: var(--p-primary-color, #234368);
+}
+
+/* Kill accent strip if an older ModxManagerTheme still injects ::before. */
+.vueApp[id^='ms3-'] .p-tab-active::before {
+  content: none;
+  display: none;
+}
+
+/*
+ * Paginator: re-assert ModxManagerTheme tokens inside MS3 apps.
+ * Product/update hosts plugin Vue apps that still install Aura and overwrite
+ * :root --p-paginator-* (circles 2.5rem / 50%). Scope wins for our trees.
+ */
+.vueApp[id^='ms3-'] {
+  --p-paginator-padding: 0.375rem 0.5rem;
+  --p-paginator-gap: 0.375rem;
+  --p-paginator-nav-button-width: 1.75rem;
+  --p-paginator-nav-button-height: 1.75rem;
+  --p-paginator-nav-button-border-radius: var(--p-border-radius-sm, 3px);
+  --p-paginator-nav-button-background: var(--p-content-background, #fff);
+  --p-paginator-nav-button-selected-background: var(--p-content-background, #fff);
+  --p-paginator-nav-button-selected-color: var(--p-primary-color, #234368);
+  --p-paginator-jump-to-page-input-max-width: 2.25rem;
+}
+
+.vueApp[id^='ms3-'] .p-paginator {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
+  border-top: 1px solid var(--p-content-border-color, #e4e4e4);
+}
+
+.vueApp[id^='ms3-'] .p-paginator-content {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--p-paginator-gap);
+}
+
+.vueApp[id^='ms3-'] .p-paginator-first,
+.vueApp[id^='ms3-'] .p-paginator-prev,
+.vueApp[id^='ms3-'] .p-paginator-next,
+.vueApp[id^='ms3-'] .p-paginator-last,
+.vueApp[id^='ms3-'] .p-paginator-page {
+  box-shadow: 0 0 0 1px var(--p-content-border-color, #e4e4e4);
+  background: var(--p-paginator-nav-button-background, #fff);
+}
+
+.vueApp[id^='ms3-'] .p-paginator-page-selected {
+  background: var(--p-content-background, #fff) !important;
+  color: var(--p-primary-color, #234368) !important;
+  box-shadow: 0 0 0 1px var(--p-primary-color, #234368);
+}
+
+/* Match RPP Select height to nav buttons (override global modx.control 36px). */
+.vueApp[id^='ms3-'] .p-paginator .p-select,
+.vueApp[id^='ms3-'] .p-paginator .rows-per-page-select {
+  width: auto !important;
+  min-width: 4.5rem !important;
+  max-width: 6.5rem !important;
+  height: var(--p-paginator-nav-button-height, 1.75rem) !important;
+  min-height: var(--p-paginator-nav-button-height, 1.75rem) !important;
+  flex: 0 0 auto;
+  box-sizing: border-box !important;
+}
+
+.vueApp[id^='ms3-'] .p-paginator .p-select .p-select-label {
+  padding-block: 0;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.vueApp[id^='ms3-'] .p-paginator-current {
+  margin-inline-start: auto;
+  font-size: var(--p-modx-font-size-base, 0.8125rem);
 }
diff --git a/vueManager/src/utils/formStyles.js b/vueManager/src/utils/formStyles.js
index 55a67b1ce..937810b4a 100644
--- a/vueManager/src/utils/formStyles.js
+++ b/vueManager/src/utils/formStyles.js
@@ -1,79 +1,8 @@
 /**
- * Runtime injection переопределений для контролов PrimeVue (font-size, height и т.п.).
- *
- * Вызывать после app.mount(). PrimeVue с @primeuix/themes встраивает тему в runtime
- * после загрузки бандла, поэтому стили из SCSS (даже с !important) загружаются раньше
- * и перезаписываются. Runtime injection обеспечивает применение наших правил последними.
+ * @deprecated Control density (Normal = 36px) and form font sizes live in
+ * VueTools `ModxManagerTheme` (`modx.control.height`, preset CSS). Kept as a
+ * no-op so existing entry `injectFormStylesOverride()` calls stay harmless.
  */
-const STYLE_ID = 'ms3-form-styles-override'
-
 export function injectFormStylesOverride() {
-  if (document.getElementById(STYLE_ID)) return
-
-  const css = `
-.vueApp .p-dropdown .p-dropdown-label,
-.vueApp .p-dropdown .p-inputtext,
-.vueApp .p-select [data-pc-section="label"],
-.vueApp .p-select .p-select-label,
-.vueApp .p-select .p-inputtext,
-.vueApp .p-multiselect [data-pc-section="label"],
-.vueApp .p-multiselect .p-multiselect-label,
-.vueApp .p-inputtext,
-.vueApp .p-inputnumber .p-inputnumber-input,
-.vueApp .p-inputnumber-input,
-.vueApp .p-autocomplete .p-autocomplete-input,
-.vueApp .p-autocomplete-input,
-.vueApp .p-textarea,
-.vueApp .p-cascadeselect [data-pc-section="label"],
-.vueApp .p-treeselect [data-pc-section="label"],
-.p-dialog .p-dropdown .p-dropdown-label,
-.p-dialog .p-dropdown .p-inputtext,
-.p-dialog .p-select [data-pc-section="label"],
-.p-dialog .p-select .p-select-label,
-.p-dialog .p-select .p-inputtext,
-.p-dialog .p-multiselect [data-pc-section="label"],
-.p-dialog .p-multiselect .p-multiselect-label,
-.p-dialog .p-inputtext,
-.p-dialog .p-inputnumber .p-inputnumber-input,
-.p-dialog .p-inputnumber-input,
-.p-dialog .p-autocomplete .p-autocomplete-input,
-.p-dialog .p-autocomplete-input,
-.p-dialog .p-textarea,
-.p-dialog .p-cascadeselect [data-pc-section="label"],
-.p-dialog .p-treeselect [data-pc-section="label"] {
-  font-size: 0.875rem !important;
-}
-
-/* Компактные бейджи (Tag, status-badge, статусы) */
-.vueApp .p-tag,
-.vueApp .status-badge,
-.p-dialog .p-tag,
-.p-dialog .status-badge {
-  padding: 0.125rem 0.5rem !important;
-  font-size: 0.75rem !important;
-}
-
-/* Единая высота всех однострочных контролов */
-.vueApp .p-inputtext,
-.vueApp .p-select,
-.vueApp .p-dropdown,
-.vueApp .p-inputnumber .p-inputnumber-input,
-.vueApp .p-autocomplete .p-autocomplete-input,
-.vueApp .p-datepicker .p-datepicker-input,
-.p-dialog .p-inputtext,
-.p-dialog .p-select,
-.p-dialog .p-dropdown,
-.p-dialog .p-inputnumber .p-inputnumber-input,
-.p-dialog .p-autocomplete .p-autocomplete-input,
-.p-dialog .p-datepicker .p-datepicker-input {
-  height: 2.25rem !important;
-  min-height: 2.25rem !important;
-  box-sizing: border-box !important;
-}
-`
-
-  const el = document.createElement('style')
-  el.id = STYLE_ID
-  el.textContent = css
-  document.head.appendChild(el)
+  // no-op — see VueTools src/theme/modx/
 }
diff --git a/vueManager/vite.config.js b/vueManager/vite.config.js
index f2f7fd584..d41acfdf0 100644
--- a/vueManager/vite.config.js
+++ b/vueManager/vite.config.js
@@ -101,6 +101,23 @@ export default defineConfig(({ command }) => {
     '@vuetools/usePrimeVueLocale',
   ]
 
+  // Subpath imports (primevue/button) resolve to node_modules and ship a second
+  // @primeuix Theme copy. Theme tokens then land on the Import Map instance while
+  // components read the bundled one → missing --p-button-* / broken chrome.
+  // Always: import { Button, DataTable } from 'primevue'
+  const rejectPrimeVueSubpaths = {
+    name: 'ms3-reject-primevue-subpaths',
+    resolveId(id) {
+      if (id === 'primevue' || !id.startsWith('primevue/')) {
+        return null
+      }
+      return this.error(
+        `Import "${id}" is not allowed. Use a named import from "primevue" ` +
+          `(VueTools Import Map barrel) so theme and components share one Theme instance.`,
+      )
+    },
+  }
+
   if (command === 'serve') {
     return {
       build: {
@@ -110,7 +127,7 @@ export default defineConfig(({ command }) => {
           external: [...external, ...vuetoolsComposables],
         },
       },
-      plugins: [vue(), vueDevTools()],
+      plugins: [rejectPrimeVueSubpaths, vue(), vueDevTools()],
       resolve: {
         alias: {
           '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -133,7 +150,7 @@ export default defineConfig(({ command }) => {
         cssMinify: false, // Отключаем минификацию CSS чтобы сохранить Unicode символы в PrimeIcons
         minify: 'esbuild',
       },
-      plugins: [vue()],
+      plugins: [rejectPrimeVueSubpaths, vue()],
       resolve: {
         alias: {
           '@': fileURLToPath(new URL('./src', import.meta.url)),