diff --git a/core/components/minishop3/controllers/category/update.class.php b/core/components/minishop3/controllers/category/update.class.php
index 012642e..862a673 100644
--- a/core/components/minishop3/controllers/category/update.class.php
+++ b/core/components/minishop3/controllers/category/update.class.php
@@ -90,6 +90,7 @@ public function loadCustomCssJs()
         $this->addLastJavascript($assetsUrl . 'js/mgr/category/update.js');
 
         // Vue Category Products Grid with VueTools dependency check
+        $this->addCss($assetsUrl . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($assetsUrl . 'css/mgr/vue-dist/category-products.min.css');
         $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/category-products.min.js');
 
diff --git a/core/components/minishop3/controllers/mgr/customers.class.php b/core/components/minishop3/controllers/mgr/customers.class.php
index f03ca98..11a3847 100644
--- a/core/components/minishop3/controllers/mgr/customers.class.php
+++ b/core/components/minishop3/controllers/mgr/customers.class.php
@@ -40,6 +40,7 @@ public function loadCustomCssJs()
         $config = $this->ms3->config;
         $this->addHtml('<script>Object.assign(ms3.config, ' . json_encode($config) . ');</script>');
 
+        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/customers.min.css');
         // Vue module with VueTools dependency check
         $this->addVueModule($this->ms3->config['assetsUrl'] . 'js/mgr/vue-dist/customers.min.js');
diff --git a/core/components/minishop3/controllers/mgr/help.class.php b/core/components/minishop3/controllers/mgr/help.class.php
index 509539d..053270d 100644
--- a/core/components/minishop3/controllers/mgr/help.class.php
+++ b/core/components/minishop3/controllers/mgr/help.class.php
@@ -28,6 +28,7 @@ public function getLanguageTopics()
     public function loadCustomCssJs()
     {
         // Vue CSS
+        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/help.min.css');
 
         // Vue module
diff --git a/core/components/minishop3/controllers/mgr/notifications.class.php b/core/components/minishop3/controllers/mgr/notifications.class.php
index ef36e8d..dfa8aa7 100644
--- a/core/components/minishop3/controllers/mgr/notifications.class.php
+++ b/core/components/minishop3/controllers/mgr/notifications.class.php
@@ -38,6 +38,7 @@ public function loadCustomCssJs()
         $config = $this->ms3->config;
         $this->addHtml('<script>Object.assign(ms3.config, ' . json_encode($config) . ');</script>');
 
+        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/notifications.min.css');
         // Vue module with VueTools dependency check
         $this->addVueModule($this->ms3->config['assetsUrl'] . 'js/mgr/vue-dist/notifications.min.js');
diff --git a/core/components/minishop3/controllers/mgr/order.class.php b/core/components/minishop3/controllers/mgr/order.class.php
index ce4c241..eebf969 100644
--- a/core/components/minishop3/controllers/mgr/order.class.php
+++ b/core/components/minishop3/controllers/mgr/order.class.php
@@ -41,6 +41,7 @@ public function loadCustomCssJs()
 
         $this->addHtml('<script>Object.assign(ms3.config, ' . json_encode($config) . ');</script>');
 
+        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/order.min.css');
         // Vue module with VueTools dependency check
         $this->addVueModule($this->ms3->config['assetsUrl'] . 'js/mgr/vue-dist/order.min.js');
diff --git a/core/components/minishop3/controllers/mgr/orders.class.php b/core/components/minishop3/controllers/mgr/orders.class.php
index 81295b3..04175c1 100644
--- a/core/components/minishop3/controllers/mgr/orders.class.php
+++ b/core/components/minishop3/controllers/mgr/orders.class.php
@@ -40,6 +40,7 @@ public function loadCustomCssJs()
         $config = $this->ms3->config;
         $this->addHtml('<script>Object.assign(ms3.config, ' . json_encode($config) . ');</script>');
 
+        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/orders.min.css');
         // Vue module with VueTools dependency check
         $this->addVueModule($this->ms3->config['assetsUrl'] . 'js/mgr/vue-dist/orders.min.js');
diff --git a/core/components/minishop3/controllers/mgr/settings.class.php b/core/components/minishop3/controllers/mgr/settings.class.php
index ba356c7..3ee3eb8 100644
--- a/core/components/minishop3/controllers/mgr/settings.class.php
+++ b/core/components/minishop3/controllers/mgr/settings.class.php
@@ -38,6 +38,8 @@ public function loadCustomCssJs()
         $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/misc/ms3.utils.js');
         $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/misc/ms3.combo.js');
 
+        // Vue shared CSS (variables + PrimeIcons)
+        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
         // Vue shared components CSS
         $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/FileBrowser.min.css');
 
diff --git a/core/components/minishop3/controllers/product/update.class.php b/core/components/minishop3/controllers/product/update.class.php
index 5d16c2c..4120e77 100644
--- a/core/components/minishop3/controllers/product/update.class.php
+++ b/core/components/minishop3/controllers/product/update.class.php
@@ -62,6 +62,7 @@ public function loadCustomCssJs()
         $this->addLastJavascript($assetsUrl . 'js/mgr/product/update.js');
 
         // Product Tabs Vue module (contains Properties, Gallery, Categories, Links, Options tabs)
+        $this->addCss($assetsUrl . 'css/mgr/vue-dist/primeicons.min.css');
         $this->addCss($assetsUrl . 'css/mgr/vue-dist/product-tabs.min.css');
         $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/product-tabs.min.js');
 
diff --git a/vueManager/.prettierignore b/vueManager/.prettierignore
new file mode 100644
index 0000000..e740507
--- /dev/null
+++ b/vueManager/.prettierignore
@@ -0,0 +1,6 @@
+node_modules
+dist
+coverage
+*.min.js
+*.min.css
+package-lock.json
diff --git a/vueManager/.prettierrc b/vueManager/.prettierrc
new file mode 100644
index 0000000..1a5fdd3
--- /dev/null
+++ b/vueManager/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "vueIndentScriptAndStyle": false
+}
diff --git a/vueManager/.stylelintrc.json b/vueManager/.stylelintrc.json
new file mode 100644
index 0000000..9d9fa05
--- /dev/null
+++ b/vueManager/.stylelintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "no-empty-source": null,
+    "block-no-empty": null,
+    "scss/at-rule-no-unknown": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "selector-class-pattern": null
+  }
+}
diff --git a/vueManager/eslint.config.js b/vueManager/eslint.config.js
index a074ff7..59b9775 100644
--- a/vueManager/eslint.config.js
+++ b/vueManager/eslint.config.js
@@ -1,10 +1,15 @@
 import js from '@eslint/js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import pluginVue from 'eslint-plugin-vue'
 
 export default [
   {
     name: 'app/files-to-lint',
     files: ['**/*.{js,mjs,jsx,vue}'],
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+    },
     languageOptions: {
       globals: {
         Ext: 'readonly',
@@ -15,6 +20,63 @@ export default [
     rules: {
       'quotes': ['error', 'single', { avoidEscape: true }],
       'comma-dangle': ['error', 'always-multiline'],
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'vue/multi-word-component-names': 'warn', // Warn about single-word component names
+      'vue/attributes-order': ['warn', {
+        order: [
+          'DEFINITION',
+          'LIST_RENDERING',
+          'CONDITIONALS',
+          'RENDER_MODIFIERS',
+          'GLOBAL',
+          ['UNIQUE', 'SLOT'],
+          'TWO_WAY_BINDING',
+          'OTHER_DIRECTIVES',
+          'OTHER_ATTR',
+          'EVENTS',
+          'CONTENT',
+        ],
+        alphabetical: false,
+      }],
+      'vue/order-in-components': ['warn', {
+        order: [
+          'el',
+          'name',
+          'key',
+          'parent',
+          'functional',
+          ['delimiters', 'comments'],
+          ['components', 'directives', 'filters'],
+          'extends',
+          'mixins',
+          ['provide', 'inject'],
+          'ROUTER_GUARDS',
+          'layout',
+          'middleware',
+          'validate',
+          'scrollToTop',
+          'transition',
+          'loading',
+          'inheritAttrs',
+          'model',
+          ['props', 'propsData'],
+          'emits',
+          'setup',
+          'asyncData',
+          'data',
+          'fetch',
+          'head',
+          'computed',
+          'watch',
+          'watchQuery',
+          'LIFECYCLE_HOOKS',
+          'methods',
+          ['template', 'render'],
+          'renderError',
+        ],
+      }],
     },
   },
 
@@ -24,5 +86,6 @@ export default [
   },
 
   js.configs.recommended,
-  ...pluginVue.configs['flat/essential'],
+  ...pluginVue.configs['flat/strongly-recommended'],
+  eslintConfigPrettier,
 ]
diff --git a/vueManager/package-lock.json b/vueManager/package-lock.json
index 4f6bf04..1d7ef93 100644
--- a/vueManager/package-lock.json
+++ b/vueManager/package-lock.json
@@ -8,7 +8,7 @@
       "name": "primevue4",
       "version": "0.0.0",
       "dependencies": {
-        "@primeuix/themes": "^1.0.0",
+        "@primeuix/themes": "^2.0.3",
         "@uppy/core": "^5.1.1",
         "@uppy/dashboard": "^5.0.3",
         "@uppy/drop-target": "^4.0.1",
@@ -24,9 +24,14 @@
         "@eslint/js": "^9.20.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "eslint": "^9.20.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-vue": "^9.32.0",
         "postcss-prefix-selector": "^2.1.1",
+        "prettier": "^3.8.1",
         "sass-embedded": "^1.85.1",
+        "stylelint": "^17.1.1",
+        "stylelint-config-standard-scss": "^17.0.0",
         "vite": "^6.4.1",
         "vite-plugin-vue-devtools": "^7.7.2"
       }
@@ -86,6 +91,7 @@
       "integrity": "sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -547,6 +553,154 @@
       "dev": true,
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
+    "node_modules/@cacheable/memory": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.0.7.tgz",
+      "integrity": "sha512-RbxnxAMf89Tp1dLhXMS7ceft/PGsDl1Ip7T20z5nZ+pwIAsQ1p2izPjVG69oCLv/jfQ7HDPHTWK0c9rcAWXN3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/utils": "^2.3.3",
+        "@keyv/bigmap": "^1.3.0",
+        "hookified": "^1.14.0",
+        "keyv": "^5.5.5"
+      }
+    },
+    "node_modules/@cacheable/memory/node_modules/@keyv/bigmap": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.1.tgz",
+      "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.4.0",
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/memory/node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/@cacheable/utils": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.3.4.tgz",
+      "integrity": "sha512-knwKUJEYgIfwShABS1BX6JyJJTglAFcEU7EXqzTdiGCXur4voqkiJkdgZIQtWNFhynzDWERcTYv/sETMu3uJWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.3.0",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/utils/node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.26.tgz",
+      "integrity": "sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0"
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz",
+      "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.11",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
@@ -1251,6 +1405,51 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.28",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
@@ -1280,12 +1479,33 @@
       }
     },
     "node_modules/@primeuix/themes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.0.0.tgz",
-      "integrity": "sha512-fxUgcAP9H6FeytbE8c4QvRt8aBnoyZJqvtnnVwHT8PHr1dNSnC1nYKGrXpebcx3SpNy9Hp9oVidGsl6u61+pXQ==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
       "license": "MIT",
       "dependencies": {
-        "@primeuix/styled": "^0.5.0"
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/themes/node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/themes/node_modules/@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
       }
     },
     "node_modules/@primeuix/utils": {
@@ -1722,6 +1942,7 @@
       "resolved": "https://registry.npmjs.org/@uppy/core/-/core-5.1.1.tgz",
       "integrity": "sha512-a0EDB+KBENB1+jkeY3oeZLMJfLhMSMsA1EfeAr6XUtKIN2uu2YHFhut5psQlYfLNOL7qtRWmG0jAa03ew1TvEw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@transloadit/prettier-bytes": "^0.3.4",
         "@uppy/store-default": "^5.0.0",
@@ -2132,6 +2353,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2166,6 +2388,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2189,6 +2424,16 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2223,6 +2468,19 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -2243,6 +2501,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -2279,6 +2538,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cacheable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.3.2.tgz",
+      "integrity": "sha512-w+ZuRNmex9c1TR9RcsxbfTKCjSL0rh1WA5SABbrWprIHeNBdmyQLSYonlDy9gpD+63XT8DgZ/wNh1Smvc9WnJA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memory": "^2.0.7",
+        "@cacheable/utils": "^2.3.3",
+        "hookified": "^1.15.0",
+        "keyv": "^5.5.5",
+        "qified": "^0.6.0"
+      }
+    },
+    "node_modules/cacheable/node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2353,6 +2636,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/colorjs.io": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz",
@@ -2389,6 +2679,33 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cropperjs": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz",
@@ -2410,6 +2727,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-functions-list": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.3.tgz",
+      "integrity": "sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12 || >=16"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2430,9 +2771,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2504,6 +2845,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2516,6 +2864,26 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/error-stack-parser-es": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.5.tgz",
@@ -2597,6 +2965,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2651,6 +3020,32 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz",
+      "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.32.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.32.0.tgz",
@@ -2836,6 +3231,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2850,16 +3275,53 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
       "peerDependenciesMeta": {
@@ -2897,6 +3359,19 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2975,6 +3450,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
+      "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-stream": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
@@ -3005,6 +3493,47 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -3018,6 +3547,57 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globby": {
+      "version": "16.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-16.1.0.tgz",
+      "integrity": "sha512-+A4Hq7m7Ze592k9gZRy4gJ27DrXRNnC1vPjxTt1qQxEY8RxagBkBxivkCwg7FxSTG0iLLEMaUx13oOr0R2/qcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.5",
+        "is-path-inside": "^4.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globby/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/globby/node_modules/unicorn-magic": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",
+      "integrity": "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3035,12 +3615,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/hashery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.4.0.tgz",
+      "integrity": "sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.14.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
+    "node_modules/hookified": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
+      "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/html-tags": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@@ -3098,6 +3698,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -3108,6 +3719,20 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -3134,6 +3759,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3178,6 +3813,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -3191,6 +3849,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-stream": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
@@ -3292,6 +3960,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3342,6 +4017,23 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/known-css-properties": {
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+      "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/kolorist": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
@@ -3363,6 +4055,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3392,6 +4091,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3411,6 +4117,74 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/mathml-tag-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz",
+      "integrity": "sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/meow": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-14.0.0.tgz",
+      "integrity": "sha512-JhC3R1f6dbspVtmF3vKjAWz1EVIvwFrGGPLSdU6rK79xBwHWTuHoLnRX/t1/zHS1Ch1Y2UtIrih7DAHuH9JFJA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/mime-match/-/mime-match-1.0.2.tgz",
@@ -3463,9 +4237,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "funding": [
         {
           "type": "github",
@@ -3494,6 +4268,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
@@ -3664,6 +4448,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-ms": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
@@ -3751,9 +4554,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -3769,8 +4572,9 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -3778,6 +4582,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/postcss-prefix-selector": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-2.1.1.tgz",
@@ -3788,24 +4599,92 @@
         "postcss": "^8.0.0"
       }
     },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+      "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
       "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
       "engines": {
-        "node": ">=4"
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/preact": {
-      "version": "10.28.2",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.2.tgz",
-      "integrity": "sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==",
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/preact": {
+      "version": "10.28.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.2.tgz",
+      "integrity": "sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3822,6 +4701,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-ms": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.2.0.tgz",
@@ -3870,6 +4765,50 @@
         "node": ">=6"
       }
     },
+    "node_modules/qified": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/qified/-/qified-0.6.0.tgz",
+      "integrity": "sha512-tsSGN1x3h569ZSU1u6diwhltLyfUWDp3YbFHedapTmpBl0B3P6U3+Qptg7xu+v+1io1EwhdPyyRHYbEw0KN2FA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.14.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3889,6 +4828,17 @@
         "node": ">= 4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -3901,6 +4851,7 @@
       "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -3950,6 +4901,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -4431,6 +5406,37 @@
         "node": ">=18"
       }
     },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
     "node_modules/sortablejs": {
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
@@ -4455,6 +5461,39 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.1.tgz",
+      "integrity": "sha512-KpqHIdDL9KwYk22wEOg/VIqYbrnLeSApsKT/bSj6Ez7pn3CftUiLAv2Lccpq1ALcpLV9UX1Ppn92npZWu2w/aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
@@ -4481,6 +5520,326 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylelint": {
+      "version": "17.1.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.1.1.tgz",
+      "integrity": "sha512-SBHVcLEcRF1M9OkD3oT0hT2PayDNLw2hd+aovmzfNQ2ys4Xd3oS9ZNizILWqhQvW802AqKN/vUTMwJqQYMBlWw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.25",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "@csstools/media-query-list-parser": "^5.0.0",
+        "@csstools/selector-resolve-nested": "^4.0.0",
+        "@csstools/selector-specificity": "^6.0.0",
+        "balanced-match": "^3.0.1",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.0",
+        "css-functions-list": "^3.2.3",
+        "css-tree": "^3.1.0",
+        "debug": "^4.4.3",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^11.1.2",
+        "global-modules": "^2.0.0",
+        "globby": "^16.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^5.1.0",
+        "ignore": "^7.0.5",
+        "import-meta-resolve": "^4.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.37.0",
+        "mathml-tag-names": "^4.0.0",
+        "meow": "^14.0.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.6",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.1",
+        "postcss-value-parser": "^4.2.0",
+        "string-width": "^8.1.0",
+        "supports-hyperlinks": "^4.4.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^7.0.0"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-18.0.0.tgz",
+      "integrity": "sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^17.0.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-17.0.0.tgz",
+      "integrity": "sha512-VkVD9r7jfUT/dq3mA3/I1WXXk2U71rO5wvU2yIil9PW5o1g3UM7Xc82vHmuVJHV7Y8ok5K137fmW5u3HbhtTOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-scss": "^4.0.9",
+        "stylelint-config-recommended": "^18.0.0",
+        "stylelint-scss": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "40.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-40.0.0.tgz",
+      "integrity": "sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended": "^18.0.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^17.0.0"
+      }
+    },
+    "node_modules/stylelint-config-standard-scss": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-17.0.0.tgz",
+      "integrity": "sha512-uLJS6xgOCBw5EMsDW7Ukji8l28qRoMnkRch15s0qwZpskXvWt9oPzMmcYM307m9GN4MxuWLsQh4I6hU9yI53cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended-scss": "^17.0.0",
+        "stylelint-config-standard": "^40.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-scss": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-7.0.0.tgz",
+      "integrity": "sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.1",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.37.0",
+        "mdn-data": "^2.25.0",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-selector-parser": "^7.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.8.2 || ^17.0.0"
+      }
+    },
+    "node_modules/stylelint-scss/node_modules/mdn-data": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.0.tgz",
+      "integrity": "sha512-/pUmP9UebM48q5BTqZd0yPnDjyRGhITbKh8cwa6/ZwjuDu8xq+VzmugLF7QNxpdaqqNH3J5nnv3yc8oARv096A==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint-scss/node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/selector-resolve-nested": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.0.tgz",
+      "integrity": "sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/stylelint/node_modules/@csstools/selector-specificity": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz",
+      "integrity": "sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-3.0.1.tgz",
+      "integrity": "sha512-vjtV3hiLqYDNRoiAv0zC4QaGAMPomEoq83PRmYIofPswwZurCeWR5LByXm7SyoL0Zh5+2z0+HC7jG8gSZJUh0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.2.tgz",
+      "integrity": "sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.20"
+      }
+    },
+    "node_modules/stylelint/node_modules/flat-cache": {
+      "version": "6.1.20",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.20.tgz",
+      "integrity": "sha512-AhHYqwvN62NVLp4lObVXGVluiABTHapoB57EyegZVmazN+hhGhLTn3uZbOofoTw4DSDvVCadzzyChXhOAvy8uQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^2.3.2",
+        "flatted": "^3.3.3",
+        "hookified": "^1.15.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/html-tags": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-5.1.0.tgz",
+      "integrity": "sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/stylelint/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/stylelint/node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/superjson": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
@@ -4506,6 +5865,49 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-hyperlinks": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-4.4.0.tgz",
+      "integrity": "sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^5.0.1",
+        "supports-color": "^10.2.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/has-flag": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-5.0.1.tgz",
+      "integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-hyperlinks/node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -4535,6 +5937,85 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/table/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/table/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -4552,6 +6033,19 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -4679,6 +6173,7 @@
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -4841,6 +6336,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
       "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.13",
         "@vue/compiler-sfc": "3.5.13",
@@ -4974,6 +6470,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/write-file-atomic": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-7.0.0.tgz",
+      "integrity": "sha512-YnlPC6JqnZl6aO4uRc+dx5PHguiR9S6WeoLtpxNT9wIG+BDya7ZNE1q7KOjVgaA73hKhKLpVPgJ5QA9THQ5BRg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/vueManager/package.json b/vueManager/package.json
index fa355be..04622c7 100644
--- a/vueManager/package.json
+++ b/vueManager/package.json
@@ -7,7 +7,11 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,vue,scss,css}\"",
+    "format:check": "prettier --check \"src/**/*.{js,vue,scss,css}\"",
+    "lint:all": "npm run lint && npm run format:check && npm run lint:scss",
+    "lint:scss": "stylelint \"src/**/*.scss\" --fix"
   },
   "dependencies": {
     "@primeuix/themes": "^2.0.3",
@@ -26,9 +30,14 @@
     "@eslint/js": "^9.20.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "eslint": "^9.20.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-vue": "^9.32.0",
     "postcss-prefix-selector": "^2.1.1",
+    "prettier": "^3.8.1",
     "sass-embedded": "^1.85.1",
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard-scss": "^17.0.0",
     "vite": "^6.4.1",
     "vite-plugin-vue-devtools": "^7.7.2"
   }
diff --git a/vueManager/src/actionRegistry.js b/vueManager/src/actionRegistry.js
index 5635664..e288bb9 100644
--- a/vueManager/src/actionRegistry.js
+++ b/vueManager/src/actionRegistry.js
@@ -75,7 +75,9 @@ class ActionRegistry {
     }
 
     if (this.handlers.has(name) && !options.override) {
-      console.warn(`[MS3ActionRegistry] Handler "${name}" already exists. Use override: true to replace`)
+      console.warn(
+        `[MS3ActionRegistry] Handler "${name}" already exists. Use override: true to replace`
+      )
       return false
     }
 
diff --git a/vueManager/src/components/ActionsColumn.vue b/vueManager/src/components/ActionsColumn.vue
index c10ed5a..4235fde 100644
--- a/vueManager/src/components/ActionsColumn.vue
+++ b/vueManager/src/components/ActionsColumn.vue
@@ -32,10 +32,11 @@
  *   labelOff: 'unpublish'   // Label when toggleField is true
  * }
  */
-import { computed } from 'vue'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
+import { computed } from 'vue'
+
 import { useActions } from '../composables/useActions.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 const props = defineProps({
   /**
@@ -79,19 +80,28 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['edit', 'delete', 'view', 'addresses', 'publish', 'duplicate', 'refresh', 'action'])
+const emit = defineEmits([
+  'edit',
+  'delete',
+  'view',
+  'addresses',
+  'publish',
+  'duplicate',
+  'refresh',
+  'action',
+])
 
 const { _ } = useLexicon()
 
 const { executeAction } = useActions({
   gridId: props.gridId,
   onRefresh: () => emit('refresh'),
-  onEdit: (data) => emit('edit', data),
-  onDelete: (data) => emit('delete', data),
-  onView: (data) => emit('view', data),
-  onAddresses: (data) => emit('addresses', data),
-  onPublish: (data) => emit('publish', data),
-  onDuplicate: (data) => emit('duplicate', data),
+  onEdit: data => emit('edit', data),
+  onDelete: data => emit('delete', data),
+  onView: data => emit('view', data),
+  onAddresses: data => emit('addresses', data),
+  onPublish: data => emit('publish', data),
+  onDuplicate: data => emit('duplicate', data),
   onCustomAction: (event, data) => emit('action', { name: event, data }),
 })
 
diff --git a/vueManager/src/components/ActionsEditor.vue b/vueManager/src/components/ActionsEditor.vue
index 019ed4f..775f669 100644
--- a/vueManager/src/components/ActionsEditor.vue
+++ b/vueManager/src/components/ActionsEditor.vue
@@ -4,15 +4,16 @@
  *
  * Allows adding, removing and editing actions in grid column
  */
-import { ref, computed, watch } from 'vue'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import Dropdown from 'primevue/dropdown'
 import Checkbox from 'primevue/checkbox'
-import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
-import { useLexicon } from '@vuetools/useLexicon'
+import DataTable from 'primevue/datatable'
+import Dialog from 'primevue/dialog'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import { computed, ref, watch } from 'vue'
+
 import actionRegistry from '../actionRegistry.js'
 
 const props = defineProps({
@@ -39,9 +40,13 @@ const { _ } = useLexicon()
 
 const localActions = ref([])
 
-watch(() => props.modelValue, (newVal) => {
-  localActions.value = JSON.parse(JSON.stringify(newVal || []))
-}, { immediate: true, deep: true })
+watch(
+  () => props.modelValue,
+  newVal => {
+    localActions.value = JSON.parse(JSON.stringify(newVal || []))
+  },
+  { immediate: true, deep: true }
+)
 
 const showDialog = ref(false)
 const editingAction = ref(null)
@@ -188,25 +193,25 @@ function closeDialog() {
   <div class="actions-editor">
     <!-- Current actions table -->
     <DataTable :value="localActions" size="small" class="mb-2">
-      <Column field="name" :header="_('action_name')" style="width: 150px">
+      <Column field="name" :header="_('action_name')" style="width: 9.375rem">
         <template #body="{ data }">
           <span class="font-semibold">{{ data.name }}</span>
         </template>
       </Column>
 
-      <Column field="handler" :header="_('action_handler')" style="width: 120px">
+      <Column field="handler" :header="_('action_handler')" style="width: 7.5rem">
         <template #body="{ data }">
           <span class="text-muted">{{ data.handler }}</span>
         </template>
       </Column>
 
-      <Column field="icon" :header="_('action_icon')" style="width: 80px">
+      <Column field="icon" :header="_('action_icon')" style="width: 5rem">
         <template #body="{ data }">
           <i :class="`pi ${data.icon}`"></i>
         </template>
       </Column>
 
-      <Column field="severity" :header="_('action_severity')" style="width: 100px">
+      <Column field="severity" :header="_('action_severity')" style="width: 6.25rem">
         <template #body="{ data }">
           <span :class="`p-badge p-badge-${data.severity || 'secondary'}`">
             {{ data.severity || 'default' }}
@@ -214,7 +219,7 @@ function closeDialog() {
         </template>
       </Column>
 
-      <Column :header="_('actions')" style="width: 150px">
+      <Column :header="_('actions')" style="width: 9.375rem">
         <template #body="{ data, index }">
           <Button
             icon="pi pi-arrow-up"
@@ -230,12 +235,7 @@ function closeDialog() {
             :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" size="small" text @click="openEditDialog(data, index)" />
           <Button
             icon="pi pi-trash"
             size="small"
@@ -248,20 +248,15 @@ 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" size="small" @click="openAddDialog" />
 
     <!-- Action edit dialog -->
     <Dialog
       v-model:visible="showDialog"
       :header="editingIndex !== null ? _('edit_action') : _('add_action')"
       :modal="true"
-      :style="{ width: '550px' }"
-      appendTo="self"
+      :style="{ width: '34.375rem' }"
+      append-to="self"
     >
       <div v-if="editingAction" class="action-form">
         <!-- Row 1: Name and Handler -->
@@ -279,7 +274,7 @@ function closeDialog() {
 
           <div class="form-col">
             <label for="action-handler" class="required">{{ _('action_handler') }}</label>
-            <Dropdown
+            <Select
               id="action-handler"
               v-model="editingAction.handler"
               :options="availableHandlers"
@@ -292,7 +287,7 @@ function closeDialog() {
                 <i :class="`pi ${option.icon} mr-2`"></i>
                 {{ option.label }}
               </template>
-            </Dropdown>
+            </Select>
             <small class="text-muted">{{ _('action_handler_hint') }}</small>
           </div>
         </div>
@@ -315,7 +310,7 @@ function closeDialog() {
         <div class="form-row">
           <div class="form-col">
             <label for="action-icon">{{ _('action_icon') }}</label>
-            <Dropdown
+            <Select
               id="action-icon"
               v-model="editingAction.icon"
               :options="iconOptions"
@@ -334,12 +329,12 @@ function closeDialog() {
                   {{ value }}
                 </span>
               </template>
-            </Dropdown>
+            </Select>
           </div>
 
           <div class="form-col">
             <label for="action-severity">{{ _('action_severity') }}</label>
-            <Dropdown
+            <Select
               id="action-severity"
               v-model="editingAction.severity"
               :options="severityOptions"
@@ -355,11 +350,7 @@ function closeDialog() {
         <div class="form-row">
           <div class="form-col-full">
             <div class="confirm-checkbox">
-              <Checkbox
-                id="action-confirm"
-                v-model="editingAction.confirm"
-                :binary="true"
-              />
+              <Checkbox id="action-confirm" v-model="editingAction.confirm" :binary="true" />
               <label for="action-confirm" class="ml-2">{{ _('action_requires_confirm') }}</label>
             </div>
           </div>
@@ -381,12 +372,7 @@ function closeDialog() {
       </div>
 
       <template #footer>
-        <Button
-          :label="_('cancel')"
-          icon="pi pi-times"
-          text
-          @click="closeDialog"
-        />
+        <Button :label="_('cancel')" icon="pi pi-times" text @click="closeDialog" />
         <Button
           :label="_('save')"
           icon="pi pi-check"
@@ -449,13 +435,13 @@ function closeDialog() {
 
 label.required::after {
   content: ' *';
-  color: #dc3545;
+  color: var(--ms3-text-danger-alt);
 }
 
 small.text-muted {
   display: block;
   margin-top: 0.25rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 0.75rem;
 }
 
diff --git a/vueManager/src/components/ApiTest.vue b/vueManager/src/components/ApiTest.vue
index e3c108c..0ab791b 100644
--- a/vueManager/src/components/ApiTest.vue
+++ b/vueManager/src/components/ApiTest.vue
@@ -1,83 +1,85 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { useApi } from '@vuetools/useApi';
-import { useModx } from '@vuetools/useModx';
-import { usePermission } from '@vuetools/usePermission';
-
-import Card from 'primevue/card';
-import Button from 'primevue/button';
-import Divider from 'primevue/divider';
-import Message from 'primevue/message';
-import ProgressSpinner from 'primevue/progressspinner';
-import Panel from 'primevue/panel';
-import Chip from 'primevue/chip';
-import Badge from 'primevue/badge';
-import TabView from 'primevue/tabview';
-import TabPanel from 'primevue/tabpanel';
-import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
-
-const { get, loading, error, clearError } = useApi();
-const { config, ms3Config, userName, userId, isUserAdmin, showMessage } = useModx();
-const { canCreate, canEdit, canDelete, getAvailablePermissions } = usePermission();
-
-const healthData = ref(null);
-const testResponse = ref(null);
-const activeTab = ref(0);
-
-const availablePermissions = computed(() => getAvailablePermissions());
+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 { computed, ref } from 'vue'
+
+const { get, loading, error, clearError } = useApi()
+const { config, ms3Config, userName, userId, isUserAdmin, showMessage } = useModx()
+const { canCreate, canEdit, canDelete, getAvailablePermissions } = usePermission()
+
+const healthData = ref(null)
+const testResponse = ref(null)
+const activeTab = ref('0')
+
+const availablePermissions = computed(() => getAvailablePermissions())
 
 /**
  * Test 1: Health check (without authorization)
  */
 const testHealthCheck = async () => {
-  clearError();
-  testResponse.value = null;
+  clearError()
+  testResponse.value = null
 
   try {
-    healthData.value = await get('/api/mgr/health');
-    showMessage('Health check successful', 'success');
+    healthData.value = await get('/api/mgr/health')
+    showMessage('Health check successful', 'success')
   } catch (err) {
-    showMessage(`Health check error: ${err.message}`, 'error');
+    showMessage(`Health check error: ${err.message}`, 'error')
   }
-};
+}
 
 /**
  * Test 2: Authorized request
  */
 const testAuthRequest = async () => {
-  clearError();
-  testResponse.value = null;
+  clearError()
+  testResponse.value = null
 
   try {
-    const response = await get('/api/mgr/test/info');
-    testResponse.value = response;
-    showMessage('Authorized request successful', 'success');
+    const response = await get('/api/mgr/test/info')
+    testResponse.value = response
+    showMessage('Authorized request successful', 'success')
   } catch (err) {
-    showMessage(`Error: ${err.message}`, 'error');
+    showMessage(`Error: ${err.message}`, 'error')
   }
-};
+}
 
 /**
  * Test 3: POST request with data
  */
 const testPostRequest = async () => {
-  clearError();
-  testResponse.value = null;
+  clearError()
+  testResponse.value = null
 
   try {
     const data = {
       test: 'data',
       timestamp: Date.now(),
       user: userName.value,
-    };
+    }
 
-    testResponse.value = await get('/api/mgr/test/echo', data);
-    showMessage('POST request successful', 'success');
+    testResponse.value = await get('/api/mgr/test/echo', data)
+    showMessage('POST request successful', 'success')
   } catch (err) {
-    showMessage(`Error: ${err.message}`, 'error');
+    showMessage(`Error: ${err.message}`, 'error')
   }
-};
+}
 </script>
 
 <template>
@@ -90,225 +92,235 @@ const testPostRequest = async () => {
         </div>
       </template>
 
-      <template #subtitle>
-        Testing new Vue Manager + API Router architecture
-      </template>
+      <template #subtitle> Testing new Vue Manager + API Router architecture </template>
 
       <template #content>
-        <TabView v-model:activeIndex="activeTab">
-          <!-- Tab 1: System Information -->
-          <TabPanel header="📊 System Information">
-            <div class="system-info">
-              <Panel header="MODX Configuration" :toggleable="true">
-                <div class="info-grid">
-                  <div class="info-item">
-                    <strong>User:</strong>
-                    <Chip :label="userName" icon="pi pi-user" />
+        <Tabs v-model:value="activeTab">
+          <TabList>
+            <Tab value="0">📊 System Information</Tab>
+            <Tab value="1">🚀 API Tests</Tab>
+            <Tab value="2">📖 Documentation</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel value="0">
+              <div class="system-info">
+                <Panel header="MODX Configuration" :toggleable="true">
+                  <div class="info-grid">
+                    <div class="info-item">
+                      <strong>User:</strong>
+                      <Chip :label="userName" icon="pi pi-user" />
+                    </div>
+                    <div class="info-item">
+                      <strong>User ID:</strong>
+                      <Badge :value="userId" severity="info" />
+                    </div>
+                    <div class="info-item">
+                      <strong>Administrator:</strong>
+                      <Badge
+                        :value="isUserAdmin ? 'Yes' : 'No'"
+                        :severity="isUserAdmin ? 'success' : 'warning'"
+                      />
+                    </div>
+                    <div class="info-item">
+                      <strong>Context:</strong>
+                      <Chip :label="config.context_key || 'mgr'" />
+                    </div>
                   </div>
-                  <div class="info-item">
-                    <strong>User ID:</strong>
-                    <Badge :value="userId" severity="info" />
+                </Panel>
+
+                <Divider />
+
+                <Panel header="MiniShop3 Configuration" :toggleable="true">
+                  <div class="info-grid">
+                    <div class="info-item">
+                      <strong>Connector URL:</strong>
+                      <code>{{ ms3Config.connector_url }}</code>
+                    </div>
+                    <div class="info-item">
+                      <strong>Assets URL:</strong>
+                      <code>{{ ms3Config.assetsUrl }}</code>
+                    </div>
                   </div>
-                  <div class="info-item">
-                    <strong>Administrator:</strong>
-                    <Badge
-                      :value="isUserAdmin ? 'Yes' : 'No'"
-                      :severity="isUserAdmin ? 'success' : 'warning'"
+                </Panel>
+
+                <Divider />
+
+                <Panel header="Permissions" :toggleable="true">
+                  <div class="permissions-grid">
+                    <Chip
+                      :label="`canCreate: ${canCreate()}`"
+                      :class="canCreate() ? 'bg-green-500' : 'bg-red-500'"
+                    />
+                    <Chip
+                      :label="`canEdit: ${canEdit()}`"
+                      :class="canEdit() ? 'bg-green-500' : 'bg-red-500'"
+                    />
+                    <Chip
+                      :label="`canDelete: ${canDelete()}`"
+                      :class="canDelete() ? 'bg-green-500' : 'bg-red-500'"
                     />
                   </div>
-                  <div class="info-item">
-                    <strong>Context:</strong>
-                    <Chip :label="config.context_key || 'mgr'" />
-                  </div>
-                </div>
-              </Panel>
 
-              <Divider />
+                  <Divider />
+
+                  <DataTable
+                    :value="availablePermissions.map(p => ({ permission: p }))"
+                    :paginator="true"
+                    :rows="10"
+                    size="small"
+                  >
+                    <Column field="permission" header="Available Permissions" />
+                  </DataTable>
+                </Panel>
+              </div>
+            </TabPanel>
 
-              <Panel header="MiniShop3 Configuration" :toggleable="true">
-                <div class="info-grid">
-                  <div class="info-item">
-                    <strong>Connector URL:</strong>
-                    <code>{{ ms3Config.connector_url }}</code>
-                  </div>
-                  <div class="info-item">
-                    <strong>Assets URL:</strong>
-                    <code>{{ ms3Config.assetsUrl }}</code>
-                  </div>
-                </div>
-              </Panel>
+            <!-- Tab 2: API Tests -->
+            <TabPanel value="1">
+              <div class="api-tests">
+                <Message severity="info" :closable="false">
+                  Testing Request class, composables and API Router
+                </Message>
 
-              <Divider />
+                <Divider />
 
-              <Panel header="Permissions" :toggleable="true">
-                <div class="permissions-grid">
-                  <Chip
-                    :label="`canCreate: ${canCreate()}`"
-                    :class="canCreate() ? 'bg-green-500' : 'bg-red-500'"
-                  />
-                  <Chip
-                    :label="`canEdit: ${canEdit()}`"
-                    :class="canEdit() ? 'bg-green-500' : 'bg-red-500'"
+                <!-- Test 1: Health Check -->
+                <Panel header="Test 1: Health Check" :toggleable="true">
+                  <template #icons>
+                    <Badge value="GET" severity="success" />
+                  </template>
+
+                  <p>Basic request without special authorization</p>
+                  <p><code>GET /api/mgr/health</code></p>
+
+                  <Button
+                    label="Execute Health Check"
+                    icon="pi pi-heart"
+                    :loading="loading"
+                    class="mt-3"
+                    @click="testHealthCheck"
                   />
-                  <Chip
-                    :label="`canDelete: ${canDelete()}`"
-                    :class="canDelete() ? 'bg-green-500' : 'bg-red-500'"
-                  />
-                </div>
+
+                  <div v-if="healthData" class="mt-3">
+                    <Message severity="success">
+                      <pre>{{ JSON.stringify(healthData, null, 2) }}</pre>
+                    </Message>
+                  </div>
+                </Panel>
 
                 <Divider />
 
-                <DataTable
-                  :value="availablePermissions.map(p => ({ permission: p }))"
-                  :paginator="true"
-                  :rows="10"
-                  size="small"
-                >
-                  <Column field="permission" header="Available Permissions" />
-                </DataTable>
-              </Panel>
-            </div>
-          </TabPanel>
-
-          <!-- Tab 2: API Tests -->
-          <TabPanel header="🚀 API Tests">
-            <div class="api-tests">
-              <Message severity="info" :closable="false">
-                Testing Request class, composables and API Router
-              </Message>
-
-              <Divider />
-
-              <!-- Test 1: Health Check -->
-              <Panel header="Test 1: Health Check" :toggleable="true">
-                <template #icons>
-                  <Badge value="GET" severity="success" />
-                </template>
-
-                <p>Basic request without special authorization</p>
-                <p><code>GET /api/mgr/health</code></p>
-
-                <Button
-                  label="Execute Health Check"
-                  icon="pi pi-heart"
-                  @click="testHealthCheck"
-                  :loading="loading"
-                  class="mt-3"
-                />
-
-                <div v-if="healthData" class="mt-3">
-                  <Message severity="success">
-                    <pre>{{ JSON.stringify(healthData, null, 2) }}</pre>
-                  </Message>
-                </div>
-              </Panel>
-
-              <Divider />
-
-              <!-- Test 2: Authorized Request -->
-              <Panel header="Test 2: Authorized Request" :toggleable="true">
-                <template #icons>
-                  <Badge value="GET" severity="success" />
-                </template>
-
-                <p>Request with HTTP_MODAUTH token and authorization check</p>
-                <p><code>GET /api/mgr/test/info</code></p>
-
-                <Button
-                  label="Execute Authorized Request"
-                  icon="pi pi-lock"
-                  @click="testAuthRequest"
-                  :loading="loading"
-                  class="mt-3"
-                />
-
-                <div v-if="testResponse" class="mt-3">
-                  <Message severity="success">
-                    <pre>{{ JSON.stringify(testResponse, null, 2) }}</pre>
-                  </Message>
-                </div>
-              </Panel>
-
-              <Divider />
-
-              <!-- Test 3: POST Request -->
-              <Panel header="Test 3: Echo Request with Parameters" :toggleable="true">
-                <template #icons>
-                  <Badge value="GET" severity="success" />
-                </template>
-
-                <p>Send data and get it back (echo)</p>
-                <p><code>GET /api/mgr/test/echo?test=data&amp;timestamp=...</code></p>
-
-                <Button
-                  label="Execute Echo Request"
-                  icon="pi pi-send"
-                  @click="testPostRequest"
-                  :loading="loading"
-                  class="mt-3"
-                />
-
-                <div v-if="testResponse" class="mt-3">
-                  <Message severity="success">
-                    <pre>{{ JSON.stringify(testResponse, null, 2) }}</pre>
-                  </Message>
-                </div>
-              </Panel>
-
-              <!-- Errors -->
-              <div v-if="error" class="mt-3">
-                <Message severity="error">
-                  <div>
-                    <strong>Error:</strong> {{ error.message }}<br>
-                    <strong>Code:</strong> {{ error.statusCode }}<br>
-                    <small>{{ error.data }}</small>
-                  </div>
-                </Message>
-              </div>
+                <!-- Test 2: Authorized Request -->
+                <Panel header="Test 2: Authorized Request" :toggleable="true">
+                  <template #icons>
+                    <Badge value="GET" severity="success" />
+                  </template>
+
+                  <p>Request with HTTP_MODAUTH token and authorization check</p>
+                  <p><code>GET /api/mgr/test/info</code></p>
+
+                  <Button
+                    label="Execute Authorized Request"
+                    icon="pi pi-lock"
+                    :loading="loading"
+                    class="mt-3"
+                    @click="testAuthRequest"
+                  />
 
-              <!-- Loading indicator -->
-              <div v-if="loading" class="loading-overlay">
-                <ProgressSpinner />
-                <p>Request in progress...</p>
-              </div>
-            </div>
-          </TabPanel>
-
-          <!-- Tab 3: Documentation -->
-          <TabPanel header="📖 Documentation">
-            <div class="documentation">
-              <h3>Technologies Used</h3>
-
-              <Panel header="Composables" :toggleable="true" class="mb-3">
-                <ul>
-                  <li><strong>useApi()</strong> - Reactive API requests with loading/error state</li>
-                  <li><strong>useModx()</strong> - Access to MODX configuration and lexicon</li>
-                  <li><strong>usePermission()</strong> - User access rights verification</li>
-                </ul>
-              </Panel>
-
-              <Panel header="PrimeVue Components" :toggleable="true" class="mb-3">
-                <ul>
-                  <li>Card, Panel, TabView - Containers</li>
-                  <li>Button, Chip, Badge - Interactive elements</li>
-                  <li>Message, Divider - UI elements</li>
-                  <li>DataTable, Column - Tables</li>
-                  <li>ProgressSpinner - Loading indicators</li>
-                </ul>
-              </Panel>
-
-              <Panel header="API Router" :toggleable="true" class="mb-3">
-                <p>All requests go through:</p>
-                <code>{{ ms3Config.connector_url }}?action=api&route=/api/mgr/...</code>
+                  <div v-if="testResponse" class="mt-3">
+                    <Message severity="success">
+                      <pre>{{ JSON.stringify(testResponse, null, 2) }}</pre>
+                    </Message>
+                  </div>
+                </Panel>
 
                 <Divider />
 
-                <p><strong>HTTP_MODAUTH token:</strong> Automatically added from <code>window.MODx.config.MODAUTH</code></p>
-                <p><strong>Middleware:</strong> AuthMiddleware checks authorization in mgr context</p>
-              </Panel>
+                <!-- Test 3: POST Request -->
+                <Panel header="Test 3: Echo Request with Parameters" :toggleable="true">
+                  <template #icons>
+                    <Badge value="GET" severity="success" />
+                  </template>
+
+                  <p>Send data and get it back (echo)</p>
+                  <p><code>GET /api/mgr/test/echo?test=data&amp;timestamp=...</code></p>
+
+                  <Button
+                    label="Execute Echo Request"
+                    icon="pi pi-send"
+                    :loading="loading"
+                    class="mt-3"
+                    @click="testPostRequest"
+                  />
 
-              <Panel header="Request Class" :toggleable="true">
-                <pre class="code-block">
+                  <div v-if="testResponse" class="mt-3">
+                    <Message severity="success">
+                      <pre>{{ JSON.stringify(testResponse, null, 2) }}</pre>
+                    </Message>
+                  </div>
+                </Panel>
+
+                <!-- Errors -->
+                <div v-if="error" class="mt-3">
+                  <Message severity="error">
+                    <div>
+                      <strong>Error:</strong> {{ error.message }}<br />
+                      <strong>Code:</strong> {{ error.statusCode }}<br />
+                      <small>{{ error.data }}</small>
+                    </div>
+                  </Message>
+                </div>
+
+                <!-- Loading indicator -->
+                <div v-if="loading" class="loading-overlay">
+                  <ProgressSpinner />
+                  <p>Request in progress...</p>
+                </div>
+              </div>
+            </TabPanel>
+
+            <!-- Tab 3: Documentation -->
+            <TabPanel value="2">
+              <div class="documentation">
+                <h3>Technologies Used</h3>
+
+                <Panel header="Composables" :toggleable="true" class="mb-3">
+                  <ul>
+                    <li>
+                      <strong>useApi()</strong> - Reactive API requests with loading/error state
+                    </li>
+                    <li><strong>useModx()</strong> - Access to MODX configuration and lexicon</li>
+                    <li><strong>usePermission()</strong> - User access rights verification</li>
+                  </ul>
+                </Panel>
+
+                <Panel header="PrimeVue Components" :toggleable="true" class="mb-3">
+                  <ul>
+                    <li>Card, Panel, Tabs - Containers</li>
+                    <li>Button, Chip, Badge - Interactive elements</li>
+                    <li>Message, Divider - UI elements</li>
+                    <li>DataTable, Column - Tables</li>
+                    <li>ProgressSpinner - Loading indicators</li>
+                  </ul>
+                </Panel>
+
+                <Panel header="API Router" :toggleable="true" class="mb-3">
+                  <p>All requests go through:</p>
+                  <code>{{ ms3Config.connector_url }}?action=api&route=/api/mgr/...</code>
+
+                  <Divider />
+
+                  <p>
+                    <strong>HTTP_MODAUTH token:</strong> Automatically added from
+                    <code>window.MODx.config.MODAUTH</code>
+                  </p>
+                  <p>
+                    <strong>Middleware:</strong> AuthMiddleware checks authorization in mgr context
+                  </p>
+                </Panel>
+
+                <Panel header="Request Class" :toggleable="true">
+                  <pre class="code-block">
                   import request from '@/request.js';
 
                   // GET request
@@ -327,11 +339,13 @@ const testPostRequest = async () => {
                       // Redirect to login
                     }
                   }
-                </pre>
-              </Panel>
-            </div>
-          </TabPanel>
-        </TabView>
+                </pre
+                  >
+                </Panel>
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </template>
     </Card>
   </div>
@@ -339,27 +353,27 @@ const testPostRequest = async () => {
 
 <style scoped>
 .api-test {
-  padding: 20px;
-  max-width: 1200px;
+  padding: 1.25rem;
+  max-width: 75rem;
   margin: 0 auto;
 }
 
 .system-info,
 .api-tests,
 .documentation {
-  padding: 10px 0;
+  padding: 0.625rem 0;
 }
 
 .info-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 15px;
+  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
+  gap: 0.9375rem;
 }
 
 .info-item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .info-item strong {
@@ -369,8 +383,8 @@ const testPostRequest = async () => {
 
 .info-item code {
   background: var(--surface-100);
-  padding: 4px 8px;
-  border-radius: 4px;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
   font-size: 0.85rem;
   word-break: break-all;
 }
@@ -378,7 +392,7 @@ const testPostRequest = async () => {
 .permissions-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .loading-overlay {
@@ -386,31 +400,31 @@ const testPostRequest = async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px;
-  gap: 15px;
+  padding: 2.5rem;
+  gap: 0.9375rem;
 }
 
 .code-block {
   background: var(--surface-100);
-  padding: 15px;
-  border-radius: 6px;
+  padding: 0.9375rem;
+  border-radius: 0.375rem;
   overflow-x: auto;
   font-size: 0.9rem;
   line-height: 1.5;
 }
 
 .documentation h3 {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   color: var(--primary-color);
 }
 
 .documentation ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .documentation ul li {
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
   line-height: 1.6;
 }
 
@@ -425,7 +439,7 @@ const testPostRequest = async () => {
 :deep(.p-message pre) {
   margin: 0;
   font-size: 0.85rem;
-  max-height: 300px;
+  max-height: 18.75rem;
   overflow: auto;
 }
 </style>
diff --git a/vueManager/src/components/AutocompleteCombo.vue b/vueManager/src/components/AutocompleteCombo.vue
index dc65368..60c90e9 100644
--- a/vueManager/src/components/AutocompleteCombo.vue
+++ b/vueManager/src/components/AutocompleteCombo.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="autocomplete-combo-wrapper" ref="wrapperRef">
+  <div ref="wrapperRef" class="autocomplete-combo-wrapper">
     <AutoComplete
-      :inputId="inputId"
       v-model="localValue"
+      :input-id="inputId"
       :suggestions="filteredValues"
       :placeholder="placeholder"
       :disabled="disabled"
       :loading="loading"
-      :completeOnFocus="true"
-      :forceSelection="false"
+      :complete-on-focus="true"
+      :force-selection="false"
       class="w-full"
       @complete="search"
       @change="handleChange"
@@ -17,8 +17,9 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
 import AutoComplete from 'primevue/autocomplete'
+import { onMounted, ref, watch } from 'vue'
+
 import request from '../request.js'
 
 const props = defineProps({
@@ -110,12 +111,15 @@ function handleChange() {
 }
 
 // Watch for external changes
-watch(() => props.modelValue, (newValue) => {
-  localValue.value = newValue
-})
+watch(
+  () => props.modelValue,
+  newValue => {
+    localValue.value = newValue
+  }
+)
 
 // Watch for local changes
-watch(localValue, (newValue) => {
+watch(localValue, newValue => {
   emit('update:modelValue', newValue)
 })
 
@@ -125,7 +129,7 @@ onMounted(() => {
   if (props.inputId && wrapperRef.value) {
     const label = document.querySelector(`label[for="${props.inputId}"]`)
     if (label) {
-      label.addEventListener('click', (e) => {
+      label.addEventListener('click', e => {
         const autocompleteInput = wrapperRef.value.querySelector('.p-autocomplete-input')
         if (autocompleteInput && !props.disabled) {
           e.preventDefault()
@@ -150,8 +154,8 @@ onMounted(() => {
 <style>
 /* Global styles for autocomplete panel */
 .autocomplete-combo-wrapper .p-autocomplete-panel {
-  min-width: 300px;
-  max-width: 500px;
+  min-width: 18.75rem;
+  max-width: 31.25rem;
 }
 
 .autocomplete-combo-wrapper .p-autocomplete-input {
diff --git a/vueManager/src/components/CategoryProductsGrid.vue b/vueManager/src/components/CategoryProductsGrid.vue
index 7f85bc4..42dd71b 100644
--- a/vueManager/src/components/CategoryProductsGrid.vue
+++ b/vueManager/src/components/CategoryProductsGrid.vue
@@ -1,19 +1,20 @@
 <script setup>
-import { onMounted, ref, computed, defineProps, watch } from 'vue'
-import Card from 'primevue/card'
+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 InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
-import Checkbox from 'primevue/checkbox'
 import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, defineProps, onMounted, ref, watch } from 'vue'
 import draggable from 'vuedraggable'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 
 const props = defineProps({
@@ -37,14 +38,14 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'product',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.post(`/api/mgr/categories/${props.categoryId}/products/multiple`, {
       method: 'delete',
       ids,
     })
   },
   onSuccess: () => loadProducts(),
-  getItemName: (item) => item.pagetitle || `#${item.id}`,
+  getItemName: item => item.pagetitle || `#${item.id}`,
 })
 
 const columns = ref([])
@@ -62,8 +63,10 @@ const sortOrder = ref(1)
 const selectAll = ref(false)
 
 // Default thumbnail from system settings
-// eslint-disable-next-line no-undef
-const defaultThumb = (typeof ms3 !== 'undefined' ? ms3.config?.default_thumb : null) || '/assets/components/minishop3/img/mgr/ms3_small.png'
+
+const defaultThumb =
+  (typeof ms3 !== 'undefined' ? ms3.config?.default_thumb : null) ||
+  '/assets/components/minishop3/img/mgr/ms3_small.png'
 
 /**
  * Get sorted filters list
@@ -231,14 +234,20 @@ async function deleteProduct(product) {
  * Create new product
  */
 function createProduct() {
-  MODx.loadPage('resource/create', 'class_key=MiniShop3\\Model\\msProduct&parent=' + props.categoryId + '&context_key=' + MODx.ctx)
+  MODx.loadPage(
+    'resource/create',
+    'class_key=MiniShop3\\Model\\msProduct&parent=' + props.categoryId + '&context_key=' + MODx.ctx
+  )
 }
 
 /**
  * Create new subcategory
  */
 function createCategory() {
-  MODx.loadPage('resource/create', 'class_key=MiniShop3\\Model\\msCategory&parent=' + props.categoryId + '&context_key=' + MODx.ctx)
+  MODx.loadPage(
+    'resource/create',
+    'class_key=MiniShop3\\Model\\msCategory&parent=' + props.categoryId + '&context_key=' + MODx.ctx
+  )
 }
 
 /**
@@ -398,25 +407,71 @@ async function loadGridConfig() {
  */
 function getDefaultColumns() {
   return [
-    { name: 'id', label: 'ID', visible: true, sortable: true, width: '60px', isSystem: true },
-    { name: 'thumb', label: _('product_image'), visible: true, type: 'image', width: '60px' },
-    { name: 'pagetitle', label: _('product_pagetitle'), visible: true, sortable: true, filterable: true, minWidth: '200px', type: 'template', template: '<span class="product-id">({id})</span> <a href="?a=resource/update&id={id}" target="_blank" class="product-link">{pagetitle}</a>' },
-    { name: 'article', label: _('product_article'), visible: true, sortable: true, filterable: true, width: '100px' },
-    { name: 'price', label: _('product_price'), visible: true, sortable: true, type: 'price', width: '100px' },
-    { name: 'weight', label: _('product_weight'), visible: true, sortable: true, type: 'weight', width: '80px' },
-    { name: 'published', label: _('product_published'), visible: true, sortable: true, type: 'boolean', width: '80px' },
+    { name: 'id', label: 'ID', visible: true, sortable: true, width: '3.75rem', isSystem: true },
+    { name: 'thumb', label: _('product_image'), visible: true, type: 'image', width: '3.75rem' },
+    {
+      name: 'pagetitle',
+      label: _('product_pagetitle'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      minWidth: '12.5rem',
+      type: 'template',
+      template:
+        '<span class="product-id">({id})</span> <a href="?a=resource/update&id={id}" target="_blank" class="product-link">{pagetitle}</a>',
+    },
+    {
+      name: 'article',
+      label: _('product_article'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      width: '6.25rem',
+    },
+    {
+      name: 'price',
+      label: _('product_price'),
+      visible: true,
+      sortable: true,
+      type: 'price',
+      width: '6.25rem',
+    },
+    {
+      name: 'weight',
+      label: _('product_weight'),
+      visible: true,
+      sortable: true,
+      type: 'weight',
+      width: '5rem',
+    },
+    {
+      name: 'published',
+      label: _('product_published'),
+      visible: true,
+      sortable: true,
+      type: 'boolean',
+      width: '5rem',
+    },
     {
       name: 'actions',
       label: _('actions'),
       visible: true,
       isSystem: true,
       frozen: true,
-      width: '140px',
+      width: '8.75rem',
       type: 'actions',
       actions: [
         { name: 'view', handler: 'view', icon: 'pi-eye', label: 'view' },
         { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-        { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'product_delete_confirm_message' },
+        {
+          name: 'delete',
+          handler: 'delete',
+          icon: 'pi-trash',
+          label: 'delete',
+          severity: 'danger',
+          confirm: true,
+          confirmMessage: 'product_delete_confirm_message',
+        },
       ],
     },
   ]
@@ -430,9 +485,25 @@ function getActionsConfig(column) {
     return [
       { name: 'view', handler: 'view', icon: 'pi-eye', label: 'view' },
       { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-      { name: 'publish', handler: 'publish', icon: 'pi-check', iconOff: 'pi-times', label: 'publish', labelOff: 'unpublish', toggleField: 'published' },
+      {
+        name: 'publish',
+        handler: 'publish',
+        icon: 'pi-check',
+        iconOff: 'pi-times',
+        label: 'publish',
+        labelOff: 'unpublish',
+        toggleField: 'published',
+      },
       { name: 'duplicate', handler: 'duplicate', icon: 'pi-copy', label: 'duplicate' },
-      { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'product_delete_confirm_message' },
+      {
+        name: 'delete',
+        handler: 'delete',
+        icon: 'pi-trash',
+        label: 'delete',
+        severity: 'danger',
+        confirm: true,
+        confirmMessage: 'product_delete_confirm_message',
+      },
     ]
   }
   return column.actions
@@ -551,22 +622,22 @@ function onPageNext() {
 }
 
 // Watch for category ID changes
-watch(() => props.categoryId, () => {
-  first.value = 0
-  loadProducts()
-})
+watch(
+  () => props.categoryId,
+  () => {
+    first.value = 0
+    loadProducts()
+  }
+)
 
 onMounted(async () => {
   // Initialize nested from system setting
   // Note: ms3 is a global variable (not window.ms3) because it's declared with 'let' in minishop3.js
-  // eslint-disable-next-line no-undef
+
   const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
   nested.value = ms3Config?.show_nested_products ?? false
 
-  await Promise.all([
-    loadGridConfig(),
-    loadFiltersConfig(),
-  ])
+  await Promise.all([loadGridConfig(), loadFiltersConfig()])
   await loadProducts()
 })
 </script>
@@ -574,7 +645,7 @@ onMounted(async () => {
 <template>
   <div class="category-products-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -600,7 +671,7 @@ onMounted(async () => {
             <div class="nested-checkbox">
               <Checkbox
                 v-model="nested"
-                inputId="nested"
+                input-id="nested"
                 :binary="true"
                 @change="onNestedChange"
               />
@@ -612,11 +683,19 @@ onMounted(async () => {
 
       <template #content>
         <!-- Filters form -->
-        <div v-if="sortedFilters.length > 0" class="filters-form mb-3 p-3 surface-ground" style="border-radius: 6px;">
+        <div
+          v-if="sortedFilters.length > 0"
+          class="filters-form mb-3 p-3 surface-ground"
+          style="border-radius: 0.375rem"
+        >
           <div class="filters-row">
             <template v-for="filter in sortedFilters" :key="filter.key">
               <!-- Text input filter -->
-              <div v-if="filter.type === 'text'" class="filter-item" :style="{ width: filter.width || '200px' }">
+              <div
+                v-if="filter.type === 'text'"
+                class="filter-item"
+                :style="{ width: filter.width || '12.5rem' }"
+              >
                 <label :for="`filter-${filter.key}`">{{ _(filter.label) }}</label>
                 <InputText
                   :id="`filter-${filter.key}`"
@@ -628,16 +707,20 @@ onMounted(async () => {
               </div>
 
               <!-- Select filter -->
-              <div v-else-if="filter.type === 'select'" class="filter-item" :style="{ width: filter.width || '150px' }">
+              <div
+                v-else-if="filter.type === 'select'"
+                class="filter-item"
+                :style="{ width: filter.width || '9.375rem' }"
+              >
                 <label :for="`filter-${filter.key}`">{{ _(filter.label) }}</label>
                 <Select
                   :id="`filter-${filter.key}`"
                   v-model="filterValues[filter.key]"
                   :options="filter.options || []"
-                  optionLabel="label"
-                  optionValue="value"
+                  option-label="label"
+                  option-value="value"
                   :placeholder="_(filter.placeholder || 'all')"
-                  :showClear="true"
+                  :show-clear="true"
                   class="w-full"
                   @change="applyFilters"
                 />
@@ -718,11 +801,7 @@ onMounted(async () => {
                 <tr>
                   <th v-if="canDrag" style="width: 3rem"></th>
                   <th style="width: 3rem">
-                    <Checkbox
-                      v-model="selectAll"
-                      :binary="true"
-                      @change="onSelectAllChange"
-                    />
+                    <Checkbox v-model="selectAll" :binary="true" @change="onSelectAllChange" />
                   </th>
                   <th
                     v-for="column in columns.filter(c => c.visible)"
@@ -734,7 +813,9 @@ onMounted(async () => {
                     {{ 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="
+                        sortOrder === 1 ? 'pi pi-sort-amount-up-alt' : 'pi pi-sort-amount-down'
+                      "
                       class="sort-icon"
                     ></i>
                   </th>
@@ -747,9 +828,9 @@ onMounted(async () => {
                 :handle="canDrag ? '.drag-handle' : null"
                 :disabled="!canDrag"
                 item-key="id"
-                @end="onDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onDragEnd"
               >
                 <template #item="{ element: product, index }">
                   <tr :class="{ 'p-row-odd': index % 2 === 1 }">
@@ -757,11 +838,7 @@ onMounted(async () => {
                       <i class="pi pi-bars drag-handle"></i>
                     </td>
                     <td>
-                      <Checkbox
-                        v-model="selectedItems"
-                        :value="product"
-                        :binary="false"
-                      />
+                      <Checkbox v-model="selectedItems" :value="product" :binary="false" />
                     </td>
                     <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
                       <!-- Actions column -->
@@ -807,7 +884,10 @@ onMounted(async () => {
                       </td>
 
                       <!-- Template column (renders HTML) -->
-                      <td v-else-if="column.type === 'template'" :style="{ width: column.width, minWidth: column.minWidth }">
+                      <td
+                        v-else-if="column.type === 'template'"
+                        :style="{ width: column.width, minWidth: column.minWidth }"
+                      >
                         <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>
@@ -834,14 +914,10 @@ onMounted(async () => {
           <!-- Pagination -->
           <div class="p-paginator p-component">
             <span class="p-paginator-current">
-              {{ _('showing') }} {{ first + 1 }}-{{ Math.min(first + rows, totalRecords) }} {{ _('of') }} {{ totalRecords }}
+              {{ _('showing') }} {{ first + 1 }}-{{ Math.min(first + rows, totalRecords) }}
+              {{ _('of') }} {{ totalRecords }}
             </span>
-            <Button
-              icon="pi pi-angle-left"
-              :disabled="first === 0"
-              text
-              @click="onPagePrev"
-            />
+            <Button icon="pi pi-angle-left" :disabled="first === 0" text @click="onPagePrev" />
             <Button
               icon="pi pi-angle-right"
               :disabled="first + rows >= totalRecords"
@@ -857,7 +933,7 @@ onMounted(async () => {
 
 <style scoped>
 .category-products-grid {
-  padding: 10px;
+  padding: 0.625rem;
 }
 
 .grid-header {
@@ -889,7 +965,7 @@ onMounted(async () => {
 .nested-checkbox label {
   cursor: pointer;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .w-full {
@@ -906,7 +982,7 @@ onMounted(async () => {
 .filter-item {
   display: flex;
   flex-direction: column;
-  min-width: 120px;
+  min-width: 7.5rem;
 }
 
 .filter-item label {
@@ -914,7 +990,7 @@ onMounted(async () => {
   margin-bottom: 0.5rem;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -928,9 +1004,9 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: 0.375rem;
 }
 
 .bulk-info {
@@ -938,7 +1014,7 @@ onMounted(async () => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -956,10 +1032,10 @@ onMounted(async () => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  background: #e0f2fe;
-  border-radius: 4px;
+  background: var(--ms3-bg-info);
+  border-radius: 0.25rem;
   font-size: 0.85rem;
-  color: #0369a1;
+  color: var(--ms3-text-info-dark);
 }
 
 /* Drag and drop styles */
@@ -971,14 +1047,14 @@ onMounted(async () => {
 
 .drag-handle {
   cursor: grab;
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   font-size: 1.2rem;
   padding: 0.5rem;
   user-select: none;
 }
 
 .drag-handle:hover {
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .drag-handle:active {
@@ -987,13 +1063,13 @@ onMounted(async () => {
 
 :deep(.ghost-row) {
   opacity: 0.5;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.sortable-drag) {
   opacity: 0.9;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  background: var(--ms3-bg-surface);
+  box-shadow: var(--ms3-shadow-dropdown);
 }
 
 /* Table styles */
@@ -1013,8 +1089,8 @@ onMounted(async () => {
 .p-datatable-thead th {
   text-align: left;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #dee2e6;
-  background: #f8f9fa;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+  background: var(--ms3-bg-muted);
   font-weight: 600;
 }
 
@@ -1023,27 +1099,27 @@ onMounted(async () => {
 }
 
 .sortable-header:hover {
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
 }
 
 .sort-icon {
   margin-left: 0.5rem;
   font-size: 0.8rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
 }
 
 .p-datatable-tbody td {
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color-alt);
   vertical-align: middle;
 }
 
 .p-datatable-tbody tr:hover {
-  background: #f1f5f9;
+  background: var(--ms3-bg-slate-alt);
 }
 
 .p-row-odd {
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
 }
 
 .loading-overlay {
@@ -1052,7 +1128,7 @@ onMounted(async () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255,255,255,0.7);
+  background: var(--ms3-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1065,37 +1141,37 @@ onMounted(async () => {
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem 1rem;
-  border-top: 1px solid #dee2e6;
+  border-top: var(--ms3-border-width) solid var(--ms3-border-color-alt);
   gap: 0.5rem;
 }
 
 .p-paginator-current {
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 0.9rem;
   margin-right: auto;
 }
 
 /* Product thumbnail */
 .product-thumb {
-  width: 50px;
-  height: 50px;
+  width: 3.125rem;
+  height: 3.125rem;
   object-fit: contain;
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 .no-image {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 /* Product title */
 .product-id {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   font-size: 0.85rem;
   margin-right: 0.25rem;
 }
 
 :deep(.product-link) {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
   text-decoration: none;
 }
 
@@ -1110,15 +1186,15 @@ onMounted(async () => {
 
 .product-category {
   font-size: 0.8rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .product-category a {
-  color: #64748b;
+  color: var(--ms3-text-muted);
   text-decoration: none;
 }
 
 .product-category a:hover {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
 }
 </style>
diff --git a/vueManager/src/components/CustomersGrid.vue b/vueManager/src/components/CustomersGrid.vue
index ae8e9f4..770125a 100644
--- a/vueManager/src/components/CustomersGrid.vue
+++ b/vueManager/src/components/CustomersGrid.vue
@@ -1,22 +1,23 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+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 InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
-import Checkbox from 'primevue/checkbox'
+import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 
 const toast = useToast()
@@ -33,11 +34,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'customer',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/customers/bulk', { ids })
   },
   onSuccess: () => loadCustomers(),
-  getItemName: (item) => getCustomerDisplayName(item),
+  getItemName: item => getCustomerDisplayName(item),
 })
 
 const columns = ref([])
@@ -192,7 +193,10 @@ async function saveCustomer() {
  */
 function deleteCustomer(customer) {
   confirm.require({
-    message: _('customer_delete_confirm_message').replace('{name}', getCustomerDisplayName(customer)),
+    message: _('customer_delete_confirm_message').replace(
+      '{name}',
+      getCustomerDisplayName(customer)
+    ),
     header: _('customer_delete_confirm_title'),
     icon: 'pi pi-exclamation-triangle',
     acceptLabel: _('delete'),
@@ -315,7 +319,7 @@ async function saveAddress() {
     if (editingAddress.value.id) {
       await request.put(
         `/api/mgr/customers/${customerId}/addresses/${editingAddress.value.id}`,
-        editingAddress.value,
+        editingAddress.value
       )
       toast.add({
         severity: 'success',
@@ -324,10 +328,7 @@ async function saveAddress() {
         life: 3000,
       })
     } else {
-      await request.post(
-        `/api/mgr/customers/${customerId}/addresses`,
-        editingAddress.value,
-      )
+      await request.post(`/api/mgr/customers/${customerId}/addresses`, editingAddress.value)
       toast.add({
         severity: 'success',
         summary: _('success'),
@@ -501,24 +502,82 @@ async function loadGridConfig() {
  */
 function getDefaultColumns() {
   return [
-    { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '80px', isSystem: true },
-    { name: 'customer_name', label: _('customer_name'), visible: true, sortable: false, filterable: true, type: 'template', template: '{first_name} {last_name}', minWidth: '200px' },
-    { name: 'email', label: _('customer_email'), visible: true, sortable: true, filterable: true, type: 'model', minWidth: '200px' },
-    { name: 'phone', label: _('customer_phone'), visible: true, filterable: true, type: 'model', width: '150px', minWidth: '120px' },
-    { name: 'is_active', label: _('customer_active'), visible: true, sortable: true, filterable: true, type: 'boolean', width: '100px' },
-    { name: 'created_at', label: _('created_at'), visible: true, sortable: true, type: 'model', format: 'datetime', width: '180px', minWidth: '150px' },
+    {
+      name: 'id',
+      label: 'ID',
+      visible: true,
+      sortable: true,
+      frozen: true,
+      width: '5rem',
+      isSystem: true,
+    },
+    {
+      name: 'customer_name',
+      label: _('customer_name'),
+      visible: true,
+      sortable: false,
+      filterable: true,
+      type: 'template',
+      template: '{first_name} {last_name}',
+      minWidth: '12.5rem',
+    },
+    {
+      name: 'email',
+      label: _('customer_email'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      type: 'model',
+      minWidth: '12.5rem',
+    },
+    {
+      name: 'phone',
+      label: _('customer_phone'),
+      visible: true,
+      filterable: true,
+      type: 'model',
+      width: '9.375rem',
+      minWidth: '7.5rem',
+    },
+    {
+      name: 'is_active',
+      label: _('customer_active'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      type: 'boolean',
+      width: '6.25rem',
+    },
+    {
+      name: 'created_at',
+      label: _('created_at'),
+      visible: true,
+      sortable: true,
+      type: 'model',
+      format: 'datetime',
+      width: '11.25rem',
+      minWidth: '9.375rem',
+    },
     {
       name: 'actions',
       label: _('actions'),
       visible: true,
       isSystem: true,
       frozen: true,
-      width: '150px',
+      width: '9.375rem',
       type: 'actions',
       actions: [
         { name: 'addresses', handler: 'addresses', icon: 'pi-map-marker', label: 'addresses' },
         { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-        { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'customer_delete_confirm_message' },
+        {
+          name: 'delete',
+          handler: 'delete',
+          icon: 'pi-trash',
+          label: 'delete',
+          severity: 'danger',
+          confirm: true,
+          confirmMessage: 'customer_delete_confirm_message',
+        },
       ],
     },
   ]
@@ -532,7 +591,15 @@ function getActionsConfig(column) {
     return [
       { name: 'addresses', handler: 'addresses', icon: 'pi-map-marker', label: 'addresses' },
       { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-      { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'customer_delete_confirm_message' },
+      {
+        name: 'delete',
+        handler: 'delete',
+        icon: 'pi-trash',
+        label: 'delete',
+        severity: 'danger',
+        confirm: true,
+        confirmMessage: 'customer_delete_confirm_message',
+      },
     ]
   }
   return column.actions
@@ -563,7 +630,7 @@ onMounted(async () => {
 <template>
   <div class="customers-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -578,39 +645,39 @@ onMounted(async () => {
             :placeholder="_('search_placeholder')"
             @keyup.enter="onSearch"
           />
-          <Button
-            icon="pi pi-search"
-            :label="_('search')"
-            @click="onSearch"
-          />
+          <Button icon="pi pi-search" :label="_('search')" @click="onSearch" />
         </div>
 
         <!-- Filters form -->
-        <div v-if="filterableColumns.length > 0" class="filters-form mb-3 p-3 surface-ground" style="border-radius: 6px;">
-          <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
+        <div
+          v-if="filterableColumns.length > 0"
+          class="filters-form mb-3 p-3 surface-ground"
+          style="border-radius: 0.375rem"
+        >
+          <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem">
             <div
               v-for="column in filterableColumns"
               :key="column.name"
-              style="flex: 1 1 300px; min-width: 250px;"
+              style="flex: 1 1 18.75rem; min-width: 15.625rem"
             >
               <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}`"
+                  style="display: block; margin-bottom: 0.5rem; font-weight: 500"
+                  >{{ column.label }}</label
+                >
                 <InputText
                   :id="`filter-${column.name}`"
                   v-model="filterValues[column.name]"
                   :placeholder="_('filter_by').replace('{field}', column.label)"
-                  style="width: 100%;"
+                  style="width: 100%"
                   @keyup.enter="applyFilters"
                 />
               </div>
             </div>
           </div>
-          <div style="display: flex; gap: 0.5rem;">
-            <Button
-              :label="_('apply_filters')"
-              icon="pi pi-filter"
-              @click="applyFilters"
-            />
+          <div style="display: flex; gap: 0.5rem">
+            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -653,15 +720,15 @@ onMounted(async () => {
           :loading="loading"
           :paginator="true"
           :rows="rows"
-          :totalRecords="totalRecords"
+          :total-records="totalRecords"
           :lazy="true"
+          data-key="id"
+          striped-rows
+          responsive-layout="scroll"
           @page="onPage"
-          dataKey="id"
-          stripedRows
-          responsiveLayout="scroll"
         >
           <!-- Selection checkbox column -->
-          <Column selectionMode="multiple" headerStyle="width: 3rem" frozen></Column>
+          <Column selection-mode="multiple" header-style="width: 3rem" frozen></Column>
 
           <!-- Dynamic column rendering -->
           <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
@@ -728,8 +795,8 @@ onMounted(async () => {
       :header="_('edit_customer')"
       :modal="true"
       :closable="true"
-      :style="{ width: '550px' }"
-      :appendTo="'self'"
+      :style="{ width: '34.375rem' }"
+      :append-to="'self'"
     >
       <div v-if="editingCustomer" class="customer-form">
         <!-- Row 1: First and Last Name -->
@@ -772,16 +839,16 @@ onMounted(async () => {
                 <Button
                   :icon="showPassword ? 'pi pi-eye-slash' : 'pi pi-eye'"
                   text
-                  @click="showPassword = !showPassword"
                   :title="showPassword ? _('hide_password') : _('show_password')"
+                  @click="showPassword = !showPassword"
                 />
               </InputGroupAddon>
               <InputGroupAddon>
                 <Button
                   icon="pi pi-refresh"
                   text
-                  @click="generatePassword"
                   :title="_('generate_password')"
+                  @click="generatePassword"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -792,21 +859,23 @@ onMounted(async () => {
         <!-- Row 4: Checkboxes -->
         <div class="checkboxes-row">
           <div class="checkbox-col">
-            <Checkbox inputId="is_active" v-model="editingCustomer.is_active" :binary="true" />
+            <Checkbox v-model="editingCustomer.is_active" input-id="is_active" :binary="true" />
             <label for="is_active">{{ _('customer_active') }}</label>
           </div>
           <div class="checkbox-col">
-            <Checkbox inputId="is_blocked" v-model="editingCustomer.is_blocked" :binary="true" />
+            <Checkbox v-model="editingCustomer.is_blocked" input-id="is_blocked" :binary="true" />
             <label for="is_blocked">{{ _('customer_blocked') }}</label>
           </div>
           <div class="checkbox-col">
             <Checkbox
-              inputId="email_verified"
+              input-id="email_verified"
               :model-value="Boolean(editingCustomer.email_verified_at)"
               :binary="true"
               disabled
             />
-            <label for="email_verified" class="text-muted">{{ _('customer_email_verified') }}</label>
+            <label for="email_verified" class="text-muted">{{
+              _('customer_email_verified')
+            }}</label>
           </div>
         </div>
       </div>
@@ -818,33 +887,31 @@ onMounted(async () => {
           class="p-button-text"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="saveCustomer"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveCustomer" />
       </template>
     </Dialog>
 
     <!-- Customer addresses modal window -->
     <Dialog
       v-model:visible="addressesDialogVisible"
-      :header="currentCustomerForAddresses ? _('customer_addresses_title').replace('{name}', getCustomerDisplayName(currentCustomerForAddresses)) : _('addresses')"
+      :header="
+        currentCustomerForAddresses
+          ? _('customer_addresses_title').replace(
+              '{name}',
+              getCustomerDisplayName(currentCustomerForAddresses)
+            )
+          : _('addresses')
+      "
       :modal="true"
       :closable="true"
-      :style="{ width: '800px' }"
-      :appendTo="'self'"
+      :style="{ width: '50rem' }"
+      :append-to="'self'"
     >
       <div class="addresses-content">
         <!-- Addresses list -->
         <div v-if="!addressFormVisible" class="addresses-list">
           <div class="addresses-header">
-            <Button
-              :label="_('add_address')"
-              icon="pi pi-plus"
-              @click="createAddress"
-            />
+            <Button :label="_('add_address')" icon="pi pi-plus" @click="createAddress" />
           </div>
 
           <div v-if="addressesLoading" class="addresses-loading">
@@ -866,7 +933,9 @@ onMounted(async () => {
               <div class="address-info">
                 <div class="address-name">
                   <strong>{{ address.name || _('address_unnamed') }}</strong>
-                  <span v-if="!address.active" class="address-badge inactive">{{ _('inactive') }}</span>
+                  <span v-if="!address.active" class="address-badge inactive">{{
+                    _('inactive')
+                  }}</span>
                 </div>
                 <div class="address-formatted">{{ address.formatted }}</div>
                 <div v-if="address.comment" class="address-comment">
@@ -878,15 +947,15 @@ onMounted(async () => {
                   icon="pi pi-pencil"
                   text
                   severity="secondary"
-                  @click="editAddress(address)"
                   :title="_('edit')"
+                  @click="editAddress(address)"
                 />
                 <Button
                   icon="pi pi-trash"
                   text
                   severity="danger"
-                  @click="deleteAddress(address)"
                   :title="_('delete')"
+                  @click="deleteAddress(address)"
                 />
               </div>
             </div>
@@ -898,7 +967,12 @@ onMounted(async () => {
           <div class="form-row">
             <div class="form-col-full">
               <label for="addr_name">{{ _('address_name') }}</label>
-              <InputText id="addr_name" v-model="editingAddress.name" class="w-full" :placeholder="_('address_name_placeholder')" />
+              <InputText
+                id="addr_name"
+                v-model="editingAddress.name"
+                class="w-full"
+                :placeholder="_('address_name_placeholder')"
+              />
             </div>
           </div>
 
@@ -957,13 +1031,18 @@ onMounted(async () => {
           <div class="form-row">
             <div class="form-col-full">
               <label for="addr_comment">{{ _('address_comment') }}</label>
-              <Textarea id="addr_comment" v-model="editingAddress.comment" class="w-full" rows="2" />
+              <Textarea
+                id="addr_comment"
+                v-model="editingAddress.comment"
+                class="w-full"
+                rows="2"
+              />
             </div>
           </div>
 
           <div class="form-row">
             <div class="checkbox-col">
-              <Checkbox inputId="addr_active" v-model="editingAddress.active" :binary="true" />
+              <Checkbox v-model="editingAddress.active" input-id="addr_active" :binary="true" />
               <label for="addr_active">{{ _('address_active') }}</label>
             </div>
           </div>
@@ -990,7 +1069,7 @@ onMounted(async () => {
 
 <style scoped>
 .customers-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 /* Bulk actions toolbar */
@@ -999,9 +1078,9 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: 0.375rem;
 }
 
 .bulk-info {
@@ -1009,7 +1088,7 @@ onMounted(async () => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -1022,11 +1101,11 @@ onMounted(async () => {
 }
 
 .text-success {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .text-warning {
-  color: #f59e0b;
+  color: var(--ms3-text-warning-accent);
 }
 
 /* Customer edit form grid */
@@ -1061,7 +1140,7 @@ onMounted(async () => {
 .form-col-full small.text-muted {
   display: block;
   margin-top: 0.25rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 0.75rem;
 }
 
@@ -1093,7 +1172,7 @@ onMounted(async () => {
 
 /* Styles for addresses dialog */
 .addresses-content {
-  min-height: 200px;
+  min-height: 12.5rem;
 }
 
 .addresses-header {
@@ -1104,7 +1183,7 @@ onMounted(async () => {
 .addresses-empty {
   text-align: center;
   padding: 2rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
 }
 
 .addresses-empty i {
@@ -1124,14 +1203,14 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: flex-start;
   padding: 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  background: #fff;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.375rem;
+  background: var(--ms3-bg-surface);
 }
 
 .address-card.address-inactive {
   opacity: 0.6;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 .address-info {
@@ -1148,23 +1227,23 @@ onMounted(async () => {
 .address-badge {
   font-size: 0.7rem;
   padding: 0.15rem 0.4rem;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
 }
 
 .address-badge.inactive {
-  background: #e2e8f0;
-  color: #64748b;
+  background: var(--ms3-border-color);
+  color: var(--ms3-text-muted);
 }
 
 .address-formatted {
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
 .address-comment {
   margin-top: 0.5rem;
   font-size: 0.8rem;
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   font-style: italic;
 }
 
@@ -1216,6 +1295,6 @@ onMounted(async () => {
   gap: 0.5rem;
   margin-top: 1rem;
   padding-top: 1rem;
-  border-top: 1px solid #e2e8f0;
+  border-top: var(--ms3-border-width) solid var(--ms3-border-color);
 }
 </style>
diff --git a/vueManager/src/components/DeliveriesGrid.vue b/vueManager/src/components/DeliveriesGrid.vue
index af78ae5..78f542b 100644
--- a/vueManager/src/components/DeliveriesGrid.vue
+++ b/vueManager/src/components/DeliveriesGrid.vue
@@ -1,31 +1,32 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+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 InputNumber from 'primevue/inputnumber'
-import Textarea from 'primevue/textarea'
-import Checkbox from 'primevue/checkbox'
-import ToggleSwitch from 'primevue/toggleswitch'
-import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
+import InputText from 'primevue/inputtext'
 import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
+import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
-import { useToast } from 'primevue/usetoast'
+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 { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
-import ValidationRulesEditor from './ValidationRulesEditor.vue'
 import FileBrowser from './FileBrowser.vue'
+import ValidationRulesEditor from './ValidationRulesEditor.vue'
 
 const toast = useToast()
 const confirm = useConfirm()
@@ -41,11 +42,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'delivery',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/deliveries/bulk', { ids })
   },
   onSuccess: () => loadDeliveries(),
-  getItemName: (item) => item.name,
+  getItemName: item => item.name,
 })
 
 const columns = ref([])
@@ -287,7 +288,9 @@ async function togglePayment(paymentId, newValue) {
 
   try {
     if (newValue) {
-      await request.post(`/api/mgr/deliveries/${editingDelivery.value.id}/payments`, { payment_id: paymentId })
+      await request.post(`/api/mgr/deliveries/${editingDelivery.value.id}/payments`, {
+        payment_id: paymentId,
+      })
     } else {
       await request.delete(`/api/mgr/deliveries/${editingDelivery.value.id}/payments/${paymentId}`)
     }
@@ -329,7 +332,10 @@ async function saveDelivery() {
     if (isNewDelivery.value) {
       response = await request.post('/api/mgr/deliveries', editingDelivery.value)
     } else {
-      response = await request.put(`/api/mgr/deliveries/${editingDelivery.value.id}`, editingDelivery.value)
+      response = await request.put(
+        `/api/mgr/deliveries/${editingDelivery.value.id}`,
+        editingDelivery.value
+      )
     }
 
     if (response) {
@@ -429,16 +435,62 @@ async function loadGridConfig() {
     } else {
       // Fallback default columns
       columns.value = [
-        { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '80px' },
-        { name: 'name', label: _('delivery_name'), visible: true, sortable: true, filterable: true },
-        { name: 'price', label: _('delivery_price'), visible: true, sortable: true, width: '120px' },
-        { name: 'free_delivery_amount', label: _('delivery_free_amount'), visible: true, sortable: true, width: '150px' },
-        { name: 'active', label: _('delivery_active'), visible: true, sortable: true, type: 'boolean', width: '100px' },
-        { name: 'position', label: _('delivery_position'), visible: true, sortable: true, width: '100px' },
-        { name: 'actions', label: _('actions'), visible: true, frozen: true, type: 'actions', width: '120px', actions: [
-          { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-          { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: false },
-        ]},
+        { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '5rem' },
+        {
+          name: 'name',
+          label: _('delivery_name'),
+          visible: true,
+          sortable: true,
+          filterable: true,
+        },
+        {
+          name: 'price',
+          label: _('delivery_price'),
+          visible: true,
+          sortable: true,
+          width: '7.5rem',
+        },
+        {
+          name: 'free_delivery_amount',
+          label: _('delivery_free_amount'),
+          visible: true,
+          sortable: true,
+          width: '9.375rem',
+        },
+        {
+          name: 'active',
+          label: _('delivery_active'),
+          visible: true,
+          sortable: true,
+          type: 'boolean',
+          width: '6.25rem',
+        },
+        {
+          name: 'position',
+          label: _('delivery_position'),
+          visible: true,
+          sortable: true,
+          width: '6.25rem',
+        },
+        {
+          name: 'actions',
+          label: _('actions'),
+          visible: true,
+          frozen: true,
+          type: 'actions',
+          width: '7.5rem',
+          actions: [
+            { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
+            {
+              name: 'delete',
+              handler: 'delete',
+              icon: 'pi-trash',
+              label: 'delete',
+              severity: 'danger',
+              confirm: false,
+            },
+          ],
+        },
       ]
     }
   } catch (error) {
@@ -485,7 +537,7 @@ onMounted(async () => {
 <template>
   <div class="deliveries-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -495,7 +547,9 @@ onMounted(async () => {
             <div class="grid-stats">
               <span class="stat-item">
                 <i class="pi pi-list"></i>
-                <span>{{ _('total') }}: <strong>{{ totalRecords }}</strong></span>
+                <span
+                  >{{ _('total') }}: <strong>{{ totalRecords }}</strong></span
+                >
               </span>
             </div>
           </div>
@@ -523,18 +577,11 @@ onMounted(async () => {
               </select>
             </template>
             <template v-else>
-              <InputText
-                v-model="filterValues[column.name]"
-                :placeholder="column.label"
-              />
+              <InputText v-model="filterValues[column.name]" :placeholder="column.label" />
             </template>
           </div>
           <div class="filter-buttons">
-            <Button
-              :label="_('apply_filters')"
-              icon="pi pi-filter"
-              @click="applyFilters"
-            />
+            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -577,14 +624,14 @@ onMounted(async () => {
         <table v-else class="deliveries-table">
           <thead>
             <tr>
-              <th style="width: 40px">
+              <th style="width: 2.5rem">
                 <Checkbox
-                  :modelValue="selectAll"
+                  :model-value="selectAll"
                   :binary="true"
-                  @update:modelValue="onSelectAllChange"
+                  @update:model-value="onSelectAllChange"
                 />
               </th>
-              <th style="width: 40px"></th>
+              <th style="width: 2.5rem"></th>
               <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
                 <th :style="{ width: column.width, minWidth: column.minWidth }">
                   {{ column.label }}
@@ -603,15 +650,17 @@ onMounted(async () => {
               <tr>
                 <td>
                   <Checkbox
-                    :modelValue="selectedItems.some(item => item.id === delivery.id)"
+                    :model-value="selectedItems.some(item => item.id === delivery.id)"
                     :binary="true"
-                    @update:modelValue="(val) => {
-                      if (val) {
-                        selectedItems.push(delivery)
-                      } else {
-                        selectedItems = selectedItems.filter(item => item.id !== delivery.id)
+                    @update:model-value="
+                      val => {
+                        if (val) {
+                          selectedItems.push(delivery)
+                        } else {
+                          selectedItems = selectedItems.filter(item => item.id !== delivery.id)
+                        }
                       }
-                    }"
+                    "
                   />
                 </td>
                 <td>
@@ -646,7 +695,13 @@ onMounted(async () => {
                   </td>
                   <!-- Boolean column -->
                   <td v-else-if="column.type === 'boolean'">
-                    <i :class="delivery[column.name] ? 'pi pi-check text-success' : 'pi pi-times text-danger'"></i>
+                    <i
+                      :class="
+                        delivery[column.name]
+                          ? 'pi pi-check text-success'
+                          : 'pi pi-times text-danger'
+                      "
+                    ></i>
                   </td>
                   <!-- Regular column -->
                   <td v-else>
@@ -666,8 +721,8 @@ onMounted(async () => {
       :header="isNewDelivery ? _('delivery_create') : _('delivery_edit')"
       :modal="true"
       :closable="true"
-      :style="{ width: '700px' }"
-      appendTo="self"
+      :style="{ width: '43.75rem' }"
+      append-to="self"
     >
       <div v-if="editingDelivery">
         <Tabs v-model:value="activeTab">
@@ -703,7 +758,11 @@ onMounted(async () => {
 
                 <div class="form-row">
                   <div class="checkbox-field">
-                    <Checkbox v-model="editingDelivery.active" :binary="true" inputId="delivery-active" />
+                    <Checkbox
+                      v-model="editingDelivery.active"
+                      :binary="true"
+                      input-id="delivery-active"
+                    />
                     <label for="delivery-active">{{ _('delivery_active') }}</label>
                   </div>
                 </div>
@@ -715,7 +774,11 @@ onMounted(async () => {
               <div class="edit-form">
                 <div class="form-row mb-3">
                   <label>{{ _('delivery_class') }}</label>
-                  <InputText v-model="editingDelivery.class" class="w-full" :placeholder="_('delivery_class_placeholder')" />
+                  <InputText
+                    v-model="editingDelivery.class"
+                    class="w-full"
+                    :placeholder="_('delivery_class_placeholder')"
+                  />
                 </div>
 
                 <div class="form-row mb-3">
@@ -732,7 +795,11 @@ onMounted(async () => {
 
                   <div class="form-row">
                     <label>{{ _('delivery_weight_price') }}</label>
-                    <InputNumber v-model="editingDelivery.weight_price" class="w-full" :minFractionDigits="2" />
+                    <InputNumber
+                      v-model="editingDelivery.weight_price"
+                      class="w-full"
+                      :min-fraction-digits="2"
+                    />
                     <small class="form-hint">{{ _('ms3_weight_price_help') }}</small>
                   </div>
                 </div>
@@ -740,13 +807,21 @@ onMounted(async () => {
                 <div class="form-row-group mb-3">
                   <div class="form-row">
                     <label>{{ _('delivery_free_amount') }}</label>
-                    <InputNumber v-model="editingDelivery.free_delivery_amount" class="w-full" :minFractionDigits="2" />
+                    <InputNumber
+                      v-model="editingDelivery.free_delivery_amount"
+                      class="w-full"
+                      :min-fraction-digits="2"
+                    />
                     <small class="form-hint">{{ _('ms3_free_delivery_amount_help') }}</small>
                   </div>
 
                   <div class="form-row">
                     <label>{{ _('ms3_distance_price') }}</label>
-                    <InputNumber v-model="editingDelivery.distance_price" class="w-full" :minFractionDigits="2" />
+                    <InputNumber
+                      v-model="editingDelivery.distance_price"
+                      class="w-full"
+                      :min-fraction-digits="2"
+                    />
                     <small class="form-hint">{{ _('ms3_distance_price_help') }}</small>
                   </div>
                 </div>
@@ -766,29 +841,34 @@ onMounted(async () => {
                 <DataTable
                   v-else
                   :value="payments"
-                  stripedRows
-                  responsiveLayout="scroll"
+                  striped-rows
+                  responsive-layout="scroll"
                   class="payments-table"
                 >
                   <Column field="name" :header="_('payment_name')">
                     <template #body="{ data }">
                       <div class="payment-name-cell">
-                        <img v-if="data.logo" :src="data.logo" :alt="data.name" class="payment-logo-small" />
+                        <img
+                          v-if="data.logo"
+                          :src="data.logo"
+                          :alt="data.name"
+                          class="payment-logo-small"
+                        />
                         <span>{{ getPaymentName(data.name) }}</span>
                       </div>
                     </template>
                   </Column>
-                  <Column field="price" :header="_('ms3_add_cost')" style="width: 150px">
+                  <Column field="price" :header="_('ms3_add_cost')" style="width: 9.375rem">
                     <template #body="{ data }">
                       <span v-if="data.price">{{ data.price }}</span>
                       <span v-else class="text-muted">—</span>
                     </template>
                   </Column>
-                  <Column :header="_('delivery_active')" style="width: 100px">
+                  <Column :header="_('delivery_active')" style="width: 6.25rem">
                     <template #body="{ data }">
                       <ToggleSwitch
-                        :modelValue="isPaymentEnabled(data.id)"
-                        @update:modelValue="(val) => togglePayment(data.id, val)"
+                        :model-value="isPaymentEnabled(data.id)"
+                        @update:model-value="val => togglePayment(data.id, val)"
                       />
                     </template>
                   </Column>
@@ -806,12 +886,7 @@ onMounted(async () => {
           severity="secondary"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="saveDelivery"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveDelivery" />
       </template>
     </Dialog>
   </div>
@@ -819,7 +894,7 @@ onMounted(async () => {
 
 <style scoped>
 .deliveries-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .grid-header {
@@ -840,7 +915,7 @@ onMounted(async () => {
   display: flex;
   gap: 1.5rem;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .stat-item {
@@ -850,11 +925,11 @@ onMounted(async () => {
 }
 
 .stat-item i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .stat-item strong {
-  color: #334155;
+  color: var(--ms3-text-dark);
 }
 
 .filters-row {
@@ -863,14 +938,14 @@ onMounted(async () => {
   gap: 1rem;
   margin-bottom: 1rem;
   padding: 1rem;
-  background: #f8fafc;
-  border-radius: 6px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.375rem;
 }
 
 .filter-item {
   display: flex;
   flex-direction: column;
-  min-width: 150px;
+  min-width: 9.375rem;
 }
 
 .filter-item label {
@@ -878,7 +953,7 @@ onMounted(async () => {
   margin-bottom: 0.5rem;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -893,9 +968,9 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: 0.375rem;
 }
 
 .bulk-info {
@@ -903,7 +978,7 @@ onMounted(async () => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -920,11 +995,11 @@ onMounted(async () => {
 }
 
 .text-success {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .text-danger {
-  color: #ef4444;
+  color: var(--ms3-text-danger);
 }
 
 /* Edit form styles */
@@ -945,7 +1020,7 @@ onMounted(async () => {
 
 .form-row label {
   font-weight: 500;
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 .form-row-group {
@@ -954,7 +1029,7 @@ onMounted(async () => {
   gap: 1rem;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 37.5rem) {
   .form-row-group {
     grid-template-columns: 1fr;
   }
@@ -962,7 +1037,7 @@ onMounted(async () => {
 
 /* Form hint */
 .form-hint {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
@@ -973,20 +1048,20 @@ onMounted(async () => {
 }
 
 .payments-hint {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-size: 0.9rem;
 }
 
 .loading-payments {
   text-align: center;
   padding: 2rem;
-  color: #6b7280;
+  color: var(--ms3-text-muted);
 }
 
 .no-payments {
   text-align: center;
   padding: 2rem;
-  color: #9ca3af;
+  color: var(--ms3-text-muted-light);
 }
 
 .payment-name-cell {
@@ -996,14 +1071,14 @@ onMounted(async () => {
 }
 
 .payment-logo-small {
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   object-fit: contain;
   flex-shrink: 0;
 }
 
 .text-muted {
-  color: #9ca3af;
+  color: var(--ms3-text-muted-light);
 }
 
 /* Tabs styling */
@@ -1025,28 +1100,28 @@ onMounted(async () => {
 .deliveries-table td {
   padding: 0.75rem;
   text-align: left;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
 }
 
 .deliveries-table th {
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
   font-weight: 600;
-  color: #475569;
+  color: var(--ms3-text-header);
 }
 
 .deliveries-table tbody tr:hover {
-  background: #f1f5f9;
+  background: var(--ms3-bg-slate-alt);
 }
 
 /* Drag handle */
 .drag-handle {
   cursor: grab;
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   padding: 0.25rem;
 }
 
 .drag-handle:hover {
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .drag-handle:active {
@@ -1066,10 +1141,10 @@ onMounted(async () => {
 
 /* Grid thumbnail */
 .grid-thumbnail {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   object-fit: contain;
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 /* Loading overlay */
@@ -1078,7 +1153,6 @@ onMounted(async () => {
   justify-content: center;
   align-items: center;
   padding: 3rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
-
 </style>
diff --git a/vueManager/src/components/DynamicField.vue b/vueManager/src/components/DynamicField.vue
index 1811dd2..06ce83e 100644
--- a/vueManager/src/components/DynamicField.vue
+++ b/vueManager/src/components/DynamicField.vue
@@ -4,8 +4,8 @@
     <InputText
       v-if="fieldConfig.xtype === 'textfield'"
       :id="fieldConfig.id"
-      :name="fieldConfig.name"
       v-model="localValue"
+      :name="fieldConfig.name"
       :placeholder="fieldConfig.placeholder"
       :disabled="disabled"
       :maxlength="fieldConfig.props?.maxlength"
@@ -16,15 +16,15 @@
     <InputNumber
       v-else-if="fieldConfig.xtype === 'numberfield'"
       :id="fieldConfig.id"
-      :name="fieldConfig.name"
       v-model="localValue"
+      :name="fieldConfig.name"
       :placeholder="fieldConfig.placeholder"
       :disabled="disabled"
       :min="fieldConfig.props?.min"
       :max="fieldConfig.props?.max"
-      :minFractionDigits="fieldConfig.props?.minFractionDigits ?? 0"
-      :maxFractionDigits="fieldConfig.props?.maxFractionDigits ?? 2"
-      :useGrouping="false"
+      :min-fraction-digits="fieldConfig.props?.minFractionDigits ?? 0"
+      :max-fraction-digits="fieldConfig.props?.maxFractionDigits ?? 2"
+      :use-grouping="false"
       :locale="fieldConfig.props?.locale ?? 'en-US'"
       :mode="fieldConfig.props?.mode ?? 'decimal'"
       :currency="fieldConfig.props?.currency"
@@ -36,30 +36,26 @@
     <!-- Checkbox (ExtJS xcheckbox) -->
     <div v-else-if="fieldConfig.xtype === 'xcheckbox' || fieldConfig.xtype === 'checkbox'">
       <Checkbox
-        :inputId="fieldConfig.name"
         v-model="localValue"
+        :input-id="fieldConfig.name"
         :disabled="disabled"
         :binary="true"
-        :trueValue="fieldConfig.inputValue ?? 1"
-        :falseValue="0"
+        :true-value="fieldConfig.inputValue ?? 1"
+        :false-value="0"
         @change="handleBlur"
       />
       <!-- Hidden field to pass correct value to form -->
-      <input
-        type="hidden"
-        :name="fieldConfig.name"
-        :value="localValue"
-      />
+      <input type="hidden" :name="fieldConfig.name" :value="localValue" />
     </div>
 
     <!-- Switch / Toggle -->
-    <InputSwitch
+    <ToggleSwitch
       v-else-if="fieldConfig.xtype === 'switch'"
-      :id="fieldConfig.id"
       v-model="localValue"
+      :input-id="fieldConfig.id"
       :disabled="disabled"
-      :trueValue="fieldConfig.props?.trueValue ?? true"
-      :falseValue="fieldConfig.props?.falseValue ?? false"
+      :true-value="fieldConfig.props?.trueValue ?? true"
+      :false-value="fieldConfig.props?.falseValue ?? false"
       @change="handleBlur"
     />
 
@@ -67,38 +63,38 @@
     <Textarea
       v-else-if="fieldConfig.xtype === 'textarea'"
       :id="fieldConfig.id"
-      :name="fieldConfig.name"
       v-model="localValue"
+      :name="fieldConfig.name"
       :placeholder="fieldConfig.placeholder"
       :disabled="disabled"
       :rows="fieldConfig.props?.rows ?? 3"
-      :autoResize="fieldConfig.props?.autoResize ?? false"
+      :auto-resize="fieldConfig.props?.autoResize ?? false"
       @blur="handleBlur"
     />
 
     <!-- Combobox / Select -->
-    <Dropdown
+    <Select
       v-else-if="fieldConfig.xtype === 'combobox'"
       :id="fieldConfig.id"
       v-model="localValue"
       :options="fieldConfig.props?.options ?? []"
-      :optionLabel="fieldConfig.props?.optionLabel ?? 'label'"
-      :optionValue="fieldConfig.props?.optionValue ?? 'value'"
+      :option-label="fieldConfig.props?.optionLabel ?? 'label'"
+      :option-value="fieldConfig.props?.optionValue ?? 'value'"
       :placeholder="fieldConfig.placeholder"
       :disabled="disabled"
-      :showClear="fieldConfig.props?.showClear ?? true"
+      :show-clear="fieldConfig.props?.showClear ?? true"
       @change="handleBlur"
     />
 
     <!-- Date picker -->
-    <Calendar
+    <DatePicker
       v-else-if="fieldConfig.xtype === 'datefield'"
-      :id="fieldConfig.id"
       v-model="localValue"
+      :input-id="fieldConfig.id"
       :placeholder="fieldConfig.placeholder"
       :disabled="disabled"
-      :showIcon="fieldConfig.props?.showIcon ?? true"
-      :dateFormat="fieldConfig.props?.dateFormat ?? 'dd.mm.yy'"
+      :show-icon="fieldConfig.props?.showIcon ?? true"
+      :date-format="fieldConfig.props?.dateFormat ?? 'dd.mm.yy'"
       @blur="handleBlur"
     />
 
@@ -115,44 +111,36 @@
     <!-- Vendor combo (ms3-combo-vendor) -->
     <template v-else-if="fieldConfig.xtype === 'ms3-combo-vendor'">
       <VendorCombo
-        :inputId="fieldConfig.name"
         v-model="localValue"
+        :input-id="fieldConfig.name"
         :placeholder="fieldConfig.placeholder || 'Select vendor'"
         :disabled="disabled"
         @change="handleBlur"
       />
       <!-- Hidden field to send value to ExtJS form -->
-      <input
-        type="hidden"
-        :name="fieldConfig.name"
-        :value="localValue || ''"
-      />
+      <input type="hidden" :name="fieldConfig.name" :value="localValue || ''" />
     </template>
 
     <!-- Autocomplete combo (ms3-combo-autocomplete) -->
     <template v-else-if="fieldConfig.xtype === 'ms3-combo-autocomplete'">
       <AutocompleteCombo
-        :inputId="fieldConfig.name"
-        :fieldName="fieldConfig.name"
         v-model="localValue"
+        :input-id="fieldConfig.name"
+        :field-name="fieldConfig.name"
         :placeholder="fieldConfig.placeholder || 'Start typing...'"
         :disabled="disabled"
         @change="handleBlur"
       />
       <!-- Hidden field to send value to ExtJS form -->
-      <input
-        type="hidden"
-        :name="fieldConfig.name"
-        :value="localValue || ''"
-      />
+      <input type="hidden" :name="fieldConfig.name" :value="localValue || ''" />
     </template>
 
     <!-- Options chips (ms3-combo-options) -->
     <template v-else-if="fieldConfig.xtype === 'ms3-combo-options'">
       <OptionsChips
-        :inputId="fieldConfig.name"
-        :optionKey="fieldConfig.name"
         v-model="localValue"
+        :input-id="fieldConfig.name"
+        :option-key="fieldConfig.name"
         :placeholder="fieldConfig.placeholder || 'Add options...'"
         :disabled="disabled"
         @change="handleBlur"
@@ -171,23 +159,19 @@
 
     <!-- Dropdown select (ms3-combo-select) -->
     <template v-else-if="fieldConfig.xtype === 'ms3-combo-select'">
-      <Dropdown
-        :inputId="fieldConfig.name"
+      <Select
         v-model="localValue"
+        :input-id="fieldConfig.name"
         :options="selectOptions"
-        optionLabel="label"
-        optionValue="value"
+        option-label="label"
+        option-value="value"
         :placeholder="fieldConfig.placeholder || 'Select...'"
         :disabled="disabled"
-        :showClear="true"
+        :show-clear="true"
         class="w-full"
         @change="handleBlur"
       />
-      <input
-        type="hidden"
-        :name="fieldConfig.name"
-        :value="localValue || ''"
-      />
+      <input type="hidden" :name="fieldConfig.name" :value="localValue || ''" />
     </template>
 
     <!-- Other ExtJS combo fields (ms3-combo-category, etc) -->
@@ -200,36 +184,30 @@
 
     <!-- Unknown field type -->
     <div v-else class="unknown-field">
-      <Message severity="warn">
-        Unknown field type: {{ fieldConfig.xtype }}
-      </Message>
+      <Message severity="warn"> Unknown field type: {{ fieldConfig.xtype }} </Message>
     </div>
 
     <!-- Hidden field for complex types (combobox, datefield, colorpicker, chips, multiselect) -->
     <!-- These fields require JSON serialization to pass to ExtJS form -->
-    <input
-      v-if="isComplexField"
-      type="hidden"
-      :name="fieldConfig.name"
-      :value="serializedValue"
-    />
+    <input v-if="isComplexField" type="hidden" :name="fieldConfig.name" :value="serializedValue" />
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue'
-import InputText from 'primevue/inputtext'
-import InputNumber from 'primevue/inputnumber'
 import Checkbox from 'primevue/checkbox'
-import InputSwitch from 'primevue/inputswitch'
-import Textarea from 'primevue/textarea'
-import Dropdown from 'primevue/dropdown'
-import Calendar from 'primevue/calendar'
 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 VendorCombo from './VendorCombo.vue'
+import Select from 'primevue/select'
+import Textarea from 'primevue/textarea'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, ref, watch } from 'vue'
+
 import AutocompleteCombo from './AutocompleteCombo.vue'
 import OptionsChips from './OptionsChips.vue'
+import VendorCombo from './VendorCombo.vue'
 
 const props = defineProps({
   /**
@@ -296,12 +274,12 @@ const isExtJSComboField = computed(() => {
  * depending on how the config was merged in PHP
  */
 const selectOptions = computed(() => {
-  const optionsString = props.fieldConfig.config?.select_options
-    || props.fieldConfig.select_options
-    || ''
+  const optionsString =
+    props.fieldConfig.config?.select_options || props.fieldConfig.select_options || ''
   if (!optionsString) return []
 
-  return optionsString.split('\n')
+  return optionsString
+    .split('\n')
     .filter(line => line.trim())
     .map(line => {
       const parts = line.split('==')
@@ -315,7 +293,7 @@ const selectOptions = computed(() => {
 /**
  * Get ExtJS combo field description
  */
-const getExtJSComboLabel = (xtype) => {
+const getExtJSComboLabel = xtype => {
   const labels = {
     'ms3-combo-vendor': 'Vendor selection (ExtJS combo)',
     'ms3-combo-category': 'Category selection (ExtJS combo)',
@@ -353,12 +331,15 @@ const emit = defineEmits(['update:modelValue', 'blur'])
 const localValue = ref(props.modelValue)
 
 // Watch for external changes
-watch(() => props.modelValue, (newValue) => {
-  localValue.value = newValue
-})
+watch(
+  () => props.modelValue,
+  newValue => {
+    localValue.value = newValue
+  }
+)
 
 // Watch for local changes and emit to parent
-watch(localValue, (newValue) => {
+watch(localValue, newValue => {
   emit('update:modelValue', newValue)
 })
 
diff --git a/vueManager/src/components/ExtraFieldsManager.vue b/vueManager/src/components/ExtraFieldsManager.vue
index bbd192e..57e53a5 100644
--- a/vueManager/src/components/ExtraFieldsManager.vue
+++ b/vueManager/src/components/ExtraFieldsManager.vue
@@ -1,22 +1,23 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+import Card from 'primevue/card'
+import Checkbox from 'primevue/checkbox'
 import Column from 'primevue/column'
-import Tag from 'primevue/tag'
+import ConfirmDialog from 'primevue/confirmdialog'
+import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
 import Fieldset from 'primevue/fieldset'
-import Dropdown from 'primevue/dropdown'
 import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import Tag from 'primevue/tag'
 import Textarea from 'primevue/textarea'
-import Checkbox from 'primevue/checkbox'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 const toast = useToast()
 const confirm = useConfirm()
@@ -273,8 +274,14 @@ async function createField() {
     // Convert null from string to boolean
     const payload = {
       ...fieldForm.value,
-      null: fieldForm.value.null === true || fieldForm.value.null === 'true' || fieldForm.value.null === 1,
-      active: fieldForm.value.active === true || fieldForm.value.active === 'true' || fieldForm.value.active === 1,
+      null:
+        fieldForm.value.null === true ||
+        fieldForm.value.null === 'true' ||
+        fieldForm.value.null === 1,
+      active:
+        fieldForm.value.active === true ||
+        fieldForm.value.active === 'true' ||
+        fieldForm.value.active === 1,
     }
 
     const response = await request.post('/api/mgr/extra-fields', payload)
@@ -317,8 +324,12 @@ async function updateField() {
       label: fieldForm.value.label || '',
       description: fieldForm.value.description || '',
       xtype: fieldForm.value.xtype || 'textfield',
-      active: fieldForm.value.active === true || fieldForm.value.active === 'true' || fieldForm.value.active === 1,
-      select_options: fieldForm.value.xtype === 'ms3-combo-select' ? fieldForm.value.select_options : '',
+      active:
+        fieldForm.value.active === true ||
+        fieldForm.value.active === 'true' ||
+        fieldForm.value.active === 1,
+      select_options:
+        fieldForm.value.xtype === 'ms3-combo-select' ? fieldForm.value.select_options : '',
     }
 
     const response = await request.put(`/api/mgr/extra-fields/${fieldForm.value.id}`, payload)
@@ -448,29 +459,29 @@ onMounted(() => {
 <template>
   <div class="extra-fields-manager">
     <Toast />
-    <ConfirmDialog group="extra-fields" appendTo="self" />
+    <ConfirmDialog group="extra-fields" append-to="self" />
 
     <p class="tab-description">{{ _('ms3_utilities_extra_fields_description') }}</p>
 
     <div class="flex justify-content-between align-items-center mb-3">
       <div class="flex align-items-center gap-2">
         <label for="class-filter">{{ _('ms3_vue_extra_fields_class_filter') }}</label>
-        <Dropdown
+        <Select
           id="class-filter"
           v-model="selectedClass"
           :options="classOptions"
-          optionLabel="label"
-          optionValue="value"
+          option-label="label"
+          option-value="value"
           :placeholder="_('ms3_vue_extra_fields_select_class')"
-          style="min-width: 280px;"
+          style="min-width: 17.5rem"
           @change="onClassFilterChange"
         />
       </div>
       <Button
         :label="_('ms3_vue_extra_fields_create')"
         icon="pi pi-plus"
-        @click="openCreateDialog"
         :disabled="loading"
+        @click="openCreateDialog"
       />
     </div>
 
@@ -480,16 +491,16 @@ onMounted(() => {
         <DataTable
           :value="fields"
           :loading="loading"
-          stripedRows
-          showGridlines
-          responsiveLayout="scroll"
+          striped-rows
+          show-gridlines
+          responsive-layout="scroll"
           :paginator="fields.length > 10"
           :rows="10"
-          :rowsPerPageOptions="[10, 20, 50]"
-          paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-          currentPageReportTemplate="Showing {first} - {last} of {totalRecords} fields"
+          :rows-per-page-options="[10, 20, 50]"
+          paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+          current-page-report-template="Showing {first} - {last} of {totalRecords} fields"
         >
-          <Column field="id" :header="_('ms3_vue_table_id')" style="width: 60px" sortable />
+          <Column field="id" :header="_('ms3_vue_table_id')" style="width: 3.75rem" sortable />
 
           <Column field="key" :header="_('ms3_vue_table_field_name')" sortable>
             <template #body="{ data }">
@@ -499,15 +510,15 @@ onMounted(() => {
 
           <Column field="label" :header="_('ms3_vue_table_label')" sortable />
 
-          <Column field="dbtype" :header="_('ms3_vue_table_dbtype')" sortable style="width: 120px">
+          <Column field="dbtype" :header="_('ms3_vue_table_dbtype')" sortable style="width: 7.5rem">
             <template #body="{ data }">
               <Tag :value="data.dbtype.toUpperCase()" severity="info" />
             </template>
           </Column>
 
-          <Column field="precision" :header="_('ms3_vue_table_precision')" style="width: 100px" />
+          <Column field="precision" :header="_('ms3_vue_table_precision')" style="width: 6.25rem" />
 
-          <Column field="index_type" :header="_('ms3_vue_table_index')" style="width: 120px">
+          <Column field="index_type" :header="_('ms3_vue_table_index')" style="width: 7.5rem">
             <template #body="{ data }">
               <Tag
                 v-if="data.index_type && data.index_type !== 'NONE'"
@@ -518,16 +529,24 @@ onMounted(() => {
             </template>
           </Column>
 
-          <Column field="column_exists" :header="_('ms3_vue_table_column_exists')" style="width: 140px">
+          <Column
+            field="column_exists"
+            :header="_('ms3_vue_table_column_exists')"
+            style="width: 8.75rem"
+          >
             <template #body="{ data }">
               <Tag
-                :value="data.column_exists ? _('ms3_vue_table_column_exists_yes') : _('ms3_vue_table_column_exists_no')"
+                :value="
+                  data.column_exists
+                    ? _('ms3_vue_table_column_exists_yes')
+                    : _('ms3_vue_table_column_exists_no')
+                "
                 :severity="getColumnExistsSeverity(data.column_exists)"
               />
             </template>
           </Column>
 
-          <Column field="active" :header="_('ms3_vue_table_active')" style="width: 100px">
+          <Column field="active" :header="_('ms3_vue_table_active')" style="width: 6.25rem">
             <template #body="{ data }">
               <Tag
                 :value="data.active ? _('ms3_vue_table_active_yes') : _('ms3_vue_table_active_no')"
@@ -536,24 +555,24 @@ onMounted(() => {
             </template>
           </Column>
 
-          <Column :header="_('ms3_vue_table_actions')" style="width: 150px">
+          <Column :header="_('ms3_vue_table_actions')" style="width: 9.375rem">
             <template #body="{ data }">
               <Button
+                v-tooltip.top="_('ms3_vue_extra_fields_edit')"
                 icon="pi pi-pencil"
                 severity="secondary"
                 text
                 rounded
-                @click.stop="openEditDialog(data)"
-                v-tooltip.top="_('ms3_vue_extra_fields_edit')"
                 class="mr-1"
+                @click.stop="openEditDialog(data)"
               />
               <Button
+                v-tooltip.top="_('ms3_vue_extra_fields_delete')"
                 icon="pi pi-trash"
                 severity="danger"
                 text
                 rounded
                 @click.stop="confirmDelete(data)"
-                v-tooltip.top="_('ms3_vue_extra_fields_delete')"
               />
             </template>
           </Column>
@@ -573,8 +592,8 @@ onMounted(() => {
       :header="isEditMode ? _('ms3_vue_dialog_edit_title') : _('ms3_vue_dialog_create_title')"
       :modal="true"
       :closable="!saving"
-      :style="{ width: '700px' }"
-      appendTo="self"
+      :style="{ width: '43.75rem' }"
+      append-to="self"
       @hide="saving = false"
     >
       <div class="edit-field-form">
@@ -584,12 +603,12 @@ onMounted(() => {
             <!-- Model class -->
             <div class="field col-12">
               <label for="field-class">{{ _('ms3_vue_dialog_class') }}</label>
-              <Dropdown
+              <Select
                 id="field-class"
                 v-model="fieldForm.class"
                 :options="classOptions"
-                optionLabel="label"
-                optionValue="value"
+                option-label="label"
+                option-value="value"
                 :placeholder="_('ms3_vue_extra_fields_select_class')"
                 class="w-full"
                 :disabled="isEditMode"
@@ -634,19 +653,19 @@ onMounted(() => {
             <!-- Widget type (xtype) -->
             <div class="field col-12">
               <label for="field-xtype">{{ _('ms3_vue_dialog_xtype') }}</label>
-              <Dropdown
+              <Select
                 id="field-xtype"
                 v-model="fieldForm.xtype"
                 :options="xtypeOptions"
-                optionLabel="label"
-                optionValue="value"
+                option-label="label"
+                option-value="value"
                 :placeholder="_('ms3_vue_dialog_xtype_select')"
                 class="w-full"
               />
             </div>
 
             <!-- Dropdown options (only for ms3-combo-select) -->
-            <div class="field col-12" v-if="fieldForm.xtype === 'ms3-combo-select'">
+            <div v-if="fieldForm.xtype === 'ms3-combo-select'" class="field col-12">
               <label for="field-select-options">{{ _('ms3_vue_select_options_label') }}</label>
               <Textarea
                 id="field-select-options"
@@ -663,129 +682,129 @@ onMounted(() => {
         <!-- Database parameters -->
         <Fieldset :legend="_('ms3_vue_dialog_fieldset_database')" class="mb-3">
           <div class="form-grid">
-          <!-- DB type -->
-          <div class="field col-6">
-            <label for="field-dbtype">{{ _('ms3_vue_dialog_dbtype') }}</label>
-            <Dropdown
-              id="field-dbtype"
-              v-model="fieldForm.dbtype"
-              :options="dbtypeOptions"
-              optionLabel="label"
-              optionValue="value"
-              :placeholder="_('ms3_vue_dialog_xtype_select')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-          </div>
-
-          <!-- Precision -->
-          <div class="field col-6">
-            <label for="field-precision">{{ _('ms3_vue_dialog_precision') }}</label>
-            <InputText
-              id="field-precision"
-              v-model="fieldForm.precision"
-              :placeholder="_('ms3_vue_dialog_precision_placeholder')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-          </div>
+            <!-- DB type -->
+            <div class="field col-6">
+              <label for="field-dbtype">{{ _('ms3_vue_dialog_dbtype') }}</label>
+              <Select
+                id="field-dbtype"
+                v-model="fieldForm.dbtype"
+                :options="dbtypeOptions"
+                option-label="label"
+                option-value="value"
+                :placeholder="_('ms3_vue_dialog_xtype_select')"
+                class="w-full"
+                :disabled="isEditMode"
+              />
+            </div>
 
-          <!-- PHP type -->
-          <div class="field col-6">
-            <label for="field-phptype">{{ _('ms3_vue_dialog_phptype') }}</label>
-            <Dropdown
-              id="field-phptype"
-              v-model="fieldForm.phptype"
-              :options="phptypeOptions"
-              optionLabel="label"
-              optionValue="value"
-              :placeholder="_('ms3_vue_dialog_xtype_select')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-          </div>
+            <!-- Precision -->
+            <div class="field col-6">
+              <label for="field-precision">{{ _('ms3_vue_dialog_precision') }}</label>
+              <InputText
+                id="field-precision"
+                v-model="fieldForm.precision"
+                :placeholder="_('ms3_vue_dialog_precision_placeholder')"
+                class="w-full"
+                :disabled="isEditMode"
+              />
+            </div>
 
-          <!-- Nullable -->
-          <div class="field col-6">
-            <label for="field-null">{{ _('ms3_vue_dialog_null') }}</label>
-            <div class="flex align-items-center" style="height: 42px">
-              <Checkbox
-                id="field-null"
-                v-model="fieldForm.null"
-                :binary="true"
+            <!-- PHP type -->
+            <div class="field col-6">
+              <label for="field-phptype">{{ _('ms3_vue_dialog_phptype') }}</label>
+              <Select
+                id="field-phptype"
+                v-model="fieldForm.phptype"
+                :options="phptypeOptions"
+                option-label="label"
+                option-value="value"
+                :placeholder="_('ms3_vue_dialog_xtype_select')"
+                class="w-full"
                 :disabled="isEditMode"
               />
-              <label for="field-null" class="ml-2 cursor-pointer">{{ _('ms3_vue_dialog_null_label') }}</label>
             </div>
-          </div>
 
-          <!-- Default value -->
-          <div class="field col-6">
-            <label for="field-default">{{ _('ms3_vue_dialog_default') }}</label>
-            <Dropdown
-              id="field-default"
-              v-model="fieldForm.default"
-              :options="defaultOptions"
-              optionLabel="label"
-              optionValue="value"
-              :placeholder="_('ms3_vue_dialog_xtype_select')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-          </div>
+            <!-- Nullable -->
+            <div class="field col-6">
+              <label for="field-null">{{ _('ms3_vue_dialog_null') }}</label>
+              <div class="flex align-items-center" style="height: 2.625rem">
+                <Checkbox
+                  id="field-null"
+                  v-model="fieldForm.null"
+                  :binary="true"
+                  :disabled="isEditMode"
+                />
+                <label for="field-null" class="ml-2 cursor-pointer">{{
+                  _('ms3_vue_dialog_null_label')
+                }}</label>
+              </div>
+            </div>
 
-          <!-- User-defined default value -->
-          <div class="field col-6" v-if="fieldForm.default === 'USER_DEFINED'">
-            <label for="field-default-value">{{ _('ms3_vue_dialog_default_value') }}</label>
-            <InputText
-              id="field-default-value"
-              v-model="fieldForm.default_value"
-              :placeholder="_('ms3_vue_dialog_default_value_placeholder')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-          </div>
+            <!-- Default value -->
+            <div class="field col-6">
+              <label for="field-default">{{ _('ms3_vue_dialog_default') }}</label>
+              <Select
+                id="field-default"
+                v-model="fieldForm.default"
+                :options="defaultOptions"
+                option-label="label"
+                option-value="value"
+                :placeholder="_('ms3_vue_dialog_xtype_select')"
+                class="w-full"
+                :disabled="isEditMode"
+              />
+            </div>
 
-          <!-- Attributes -->
-          <div class="field col-6">
-            <label for="field-attributes">{{ _('ms3_vue_dialog_attributes') }}</label>
-            <InputText
-              id="field-attributes"
-              v-model="fieldForm.attributes"
-              :placeholder="_('ms3_vue_dialog_attributes_placeholder')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-            <small class="text-500">{{ _('ms3_vue_dialog_attributes_help') }}</small>
-          </div>
+            <!-- User-defined default value -->
+            <div v-if="fieldForm.default === 'USER_DEFINED'" class="field col-6">
+              <label for="field-default-value">{{ _('ms3_vue_dialog_default_value') }}</label>
+              <InputText
+                id="field-default-value"
+                v-model="fieldForm.default_value"
+                :placeholder="_('ms3_vue_dialog_default_value_placeholder')"
+                class="w-full"
+                :disabled="isEditMode"
+              />
+            </div>
 
-          <!-- Index type -->
-          <div class="field col-6">
-            <label for="field-index-type">{{ _('ms3_vue_dialog_index_type') }}</label>
-            <Dropdown
-              id="field-index-type"
-              v-model="fieldForm.index_type"
-              :options="indexTypeOptions"
-              optionLabel="label"
-              optionValue="value"
-              :placeholder="_('ms3_vue_dialog_xtype_select')"
-              class="w-full"
-              :disabled="isEditMode"
-            />
-          </div>
+            <!-- Attributes -->
+            <div class="field col-6">
+              <label for="field-attributes">{{ _('ms3_vue_dialog_attributes') }}</label>
+              <InputText
+                id="field-attributes"
+                v-model="fieldForm.attributes"
+                :placeholder="_('ms3_vue_dialog_attributes_placeholder')"
+                class="w-full"
+                :disabled="isEditMode"
+              />
+              <small class="text-500">{{ _('ms3_vue_dialog_attributes_help') }}</small>
+            </div>
 
-          <!-- Active status -->
-          <div class="field col-12">
-            <label for="field-active">{{ _('ms3_vue_dialog_active') }}</label>
-            <div class="flex align-items-center" style="height: 42px">
-              <Checkbox
-                id="field-active"
-                v-model="fieldForm.active"
-                :binary="true"
+            <!-- Index type -->
+            <div class="field col-6">
+              <label for="field-index-type">{{ _('ms3_vue_dialog_index_type') }}</label>
+              <Select
+                id="field-index-type"
+                v-model="fieldForm.index_type"
+                :options="indexTypeOptions"
+                option-label="label"
+                option-value="value"
+                :placeholder="_('ms3_vue_dialog_xtype_select')"
+                class="w-full"
+                :disabled="isEditMode"
               />
-              <label for="field-active" class="ml-2 cursor-pointer">{{ _('ms3_vue_dialog_active_label') }}</label>
             </div>
-          </div>
+
+            <!-- Active status -->
+            <div class="field col-12">
+              <label for="field-active">{{ _('ms3_vue_dialog_active') }}</label>
+              <div class="flex align-items-center" style="height: 2.625rem">
+                <Checkbox id="field-active" v-model="fieldForm.active" :binary="true" />
+                <label for="field-active" class="ml-2 cursor-pointer">{{
+                  _('ms3_vue_dialog_active_label')
+                }}</label>
+              </div>
+            </div>
           </div>
         </Fieldset>
       </div>
@@ -795,14 +814,14 @@ onMounted(() => {
           :label="_('ms3_vue_dialog_cancel')"
           icon="pi pi-times"
           text
-          @click="dialogVisible = false"
           :disabled="saving"
+          @click="dialogVisible = false"
         />
         <Button
           :label="isEditMode ? _('ms3_vue_dialog_save') : _('ms3_vue_dialog_create')"
           icon="pi pi-check"
-          @click="saveField"
           :loading="saving"
+          @click="saveField"
         />
       </template>
     </Dialog>
@@ -819,38 +838,38 @@ onMounted(() => {
 /* Modal window styles - work in both .vueApp and .p-dialog */
 .vueApp .edit-field-form,
 .p-dialog .edit-field-form {
-  padding: 10px 0;
+  padding: 0.625rem 0;
 }
 
 .vueApp .form-grid,
 .p-dialog .form-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  margin: -8px;
+  gap: 1rem;
+  margin: -0.5rem;
 }
 
 .vueApp .edit-field-form .field,
 .p-dialog .edit-field-form .field {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 8px;
+  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: 14px;
-  color: #333;
+  font-size: 0.875rem;
+  color: var(--ms3-text-primary);
 }
 
 .vueApp .edit-field-form .field small,
 .p-dialog .edit-field-form .field small {
-  color: #666;
-  font-size: 12px;
-  margin-top: -2px;
+  color: var(--ms3-text-muted);
+  font-size: 0.75rem;
+  margin-top: -0.125rem;
 }
 
 .vueApp .edit-field-form .w-full,
@@ -861,21 +880,21 @@ onMounted(() => {
 /* Grid for modal window */
 .vueApp .col-6,
 .p-dialog .col-6 {
-  flex: 0 0 calc(50% - 16px);
-  max-width: calc(50% - 16px);
+  flex: 0 0 calc(50% - 1rem);
+  max-width: calc(50% - 1rem);
 }
 
 .vueApp .col-12,
 .p-dialog .col-12 {
-  flex: 0 0 calc(100% - 16px);
-  max-width: calc(100% - 16px);
+  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: 10px;
+  gap: 0.625rem;
   align-items: center;
 }
 
diff --git a/vueManager/src/components/FieldsManagement.vue b/vueManager/src/components/FieldsManagement.vue
index e46a587..a24c85d 100644
--- a/vueManager/src/components/FieldsManagement.vue
+++ b/vueManager/src/components/FieldsManagement.vue
@@ -1,10 +1,9 @@
 <script setup>
 import ProductDataConfig from './ProductDataConfig.vue'
-
 </script>
 
 <template>
-  <div style="padding: 20px;">
+  <div style="padding: 1.25rem">
     <ProductDataConfig />
   </div>
 </template>
diff --git a/vueManager/src/components/FileBrowser.vue b/vueManager/src/components/FileBrowser.vue
index f68fe06..973b0fd 100644
--- a/vueManager/src/components/FileBrowser.vue
+++ b/vueManager/src/components/FileBrowser.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed, watch } from 'vue'
-import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
   modelValue: {
@@ -31,9 +31,12 @@ const emit = defineEmits(['update:modelValue'])
 const inputValue = ref(props.modelValue)
 
 // Sync inputValue with modelValue prop
-watch(() => props.modelValue, (newValue) => {
-  inputValue.value = newValue
-})
+watch(
+  () => props.modelValue,
+  newValue => {
+    inputValue.value = newValue
+  }
+)
 
 // Update v-model when input changes
 function onInputChange(event) {
@@ -70,7 +73,7 @@ function openBrowser() {
   const browserId = Ext.id()
 
   // Create callback to handle file selection
-  const onSelectFile = (data) => {
+  const onSelectFile = data => {
     if (data && data.fullRelativeUrl) {
       inputValue.value = data.fullRelativeUrl
       emit('update:modelValue', data.fullRelativeUrl)
@@ -103,7 +106,7 @@ function openBrowser() {
   if (browser) {
     // Enable OK button when it gets disabled (MODX behavior)
     if (browser.win && browser.win.buttons && browser.win.buttons[0]) {
-      browser.win.buttons[0].on('disable', function() {
+      browser.win.buttons[0].on('disable', function () {
         this.enable()
       })
     }
@@ -201,20 +204,20 @@ function getImageUrl(path) {
 }
 
 .ms3-file-browser .file-preview {
-  width: 150px;
-  height: 150px;
+  width: 9.375rem;
+  height: 9.375rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #e2e8f0;
-  border-radius: 4px;
-  background: #f8fafc;
+  border: 0.0625rem solid var(--ms3-border-color);
+  border-radius: 0.25rem;
+  background: var(--ms3-bg-slate);
   overflow: hidden;
 }
 
 .ms3-file-browser .file-preview img {
-  max-width: 150px;
-  max-height: 150px;
+  max-width: 9.375rem;
+  max-height: 9.375rem;
   width: auto;
   height: auto;
   object-fit: contain;
diff --git a/vueManager/src/components/GridFieldsConfig.vue b/vueManager/src/components/GridFieldsConfig.vue
index 285d52f..2e1b24c 100644
--- a/vueManager/src/components/GridFieldsConfig.vue
+++ b/vueManager/src/components/GridFieldsConfig.vue
@@ -1,19 +1,20 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import Dropdown from 'primevue/dropdown'
-import InputText from 'primevue/inputtext'
+import Card from 'primevue/card'
 import Checkbox from 'primevue/checkbox'
-import Toast from 'primevue/toast'
 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 { useToast } from 'primevue/usetoast'
+import Toast from 'primevue/toast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
 import ActionsEditor from './ActionsEditor.vue'
 
 const toast = useToast()
@@ -99,7 +100,8 @@ const displayConfigTypes = ['datetime', 'price', 'weight']
 function getConfigHint(type) {
   const hints = {
     datetime: '{ "format": "dd.MM.yyyy HH:mm" }',
-    price: '{ "decimals": 2, "currency": "₽", "currency_position": "after", "thousands_separator": " " }',
+    price:
+      '{ "decimals": 2, "currency": "₽", "currency_position": "after", "thousands_separator": " " }',
     weight: '{ "decimals": 2, "unit": "кг", "unit_position": "after" }',
   }
   return hints[type] || ''
@@ -140,7 +142,9 @@ async function loadFields() {
 
   try {
     // include_hidden=1 to get all fields for configuration (including hidden relation fields)
-    const response = await request.get(`/api/mgr/grid-config/${selectedGrid.value}`, { include_hidden: '1' })
+    const response = await request.get(`/api/mgr/grid-config/${selectedGrid.value}`, {
+      include_hidden: '1',
+    })
 
     if (response && response.columns) {
       fields.value = response.columns.map((col, index) => ({
@@ -280,7 +284,10 @@ function deleteField(field, index) {
     return
   }
 
-  const confirmMessage = _('delete_field_confirm_message').replace('{name}', field.label || field.name)
+  const confirmMessage = _('delete_field_confirm_message').replace(
+    '{name}',
+    field.label || field.name
+  )
   const confirmHeader = _('delete_field_confirm_title')
   const deleteLabel = _('delete')
   const cancelLabel = _('cancel')
@@ -349,7 +356,14 @@ function openAddDialog() {
       },
       actions: [
         { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-        { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true },
+        {
+          name: 'delete',
+          handler: 'delete',
+          icon: 'pi-trash',
+          label: 'delete',
+          severity: 'danger',
+          confirm: true,
+        },
       ],
       displayConfig: '',
       badge: {
@@ -574,7 +588,14 @@ function openEditDialog(field, index) {
       computed: computedConfig,
       actions: field.actions || [
         { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-        { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true },
+        {
+          name: 'delete',
+          handler: 'delete',
+          icon: 'pi-trash',
+          label: 'delete',
+          severity: 'danger',
+          confirm: true,
+        },
       ],
       displayConfig: displayConfig,
       badge: badgeConfig,
@@ -665,7 +686,10 @@ async function saveEdit() {
         break
     }
 
-    const result = await request.put(`/api/mgr/grid-config/${selectedGrid.value}/field/${editingField.value.field_name}`, data)
+    const result = await request.put(
+      `/api/mgr/grid-config/${selectedGrid.value}/field/${editingField.value.field_name}`,
+      data
+    )
 
     if (editingFieldIndex.value !== null && result.field) {
       // Parse config from response (may be JSON string or already parsed)
@@ -737,47 +761,43 @@ onMounted(() => {
 <template>
   <div class="grid-fields-config">
     <Toast />
-    <ConfirmDialog group="grid-fields-config" appendTo="self" />
+    <ConfirmDialog group="grid-fields-config" append-to="self" />
 
     <p class="tab-description">{{ _('ms3_utilities_grid_fields_description') }}</p>
 
     <div class="flex justify-content-between align-items-center mb-3">
       <div class="flex align-items-center gap-2">
         <label for="grid-select">{{ _('select_grid') }}</label>
-        <Dropdown
+        <Select
           id="grid-select"
           v-model="selectedGrid"
           :options="gridOptions"
           option-label="label"
           option-value="value"
+          style="min-width: 12.5rem"
           @change="onGridChange"
-          style="min-width: 200px;"
         />
       </div>
-      <Button
-        :label="_('add_field')"
-        icon="pi pi-plus"
-        @click="openAddDialog"
-      />
+      <Button :label="_('add_field')" icon="pi pi-plus" @click="openAddDialog" />
     </div>
 
     <Card>
       <template #content>
         <!-- Fields table with VueDraggable -->
-        <div class="p-datatable p-component p-datatable-striped" v-if="!loading">
+        <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: 4rem"></th>
-                  <th style="width: 200px">{{ _('field_name') }}</th>
-                  <th style="min-width: 200px">{{ _('field_label') }}</th>
-                  <th style="width: 100px">{{ _('visible') }}</th>
-                  <th style="width: 100px">{{ _('sortable') }}</th>
-                  <th style="width: 100px">{{ _('filterable') }}</th>
-                  <th style="width: 100px">{{ _('frozen') }}</th>
-                  <th style="width: 120px">{{ _('width') }}</th>
-                  <th style="width: 100px">{{ _('actions') }}</th>
+                  <th style="width: 12.5rem">{{ _('field_name') }}</th>
+                  <th style="min-width: 12.5rem">{{ _('field_label') }}</th>
+                  <th style="width: 6.25rem">{{ _('visible') }}</th>
+                  <th style="width: 6.25rem">{{ _('sortable') }}</th>
+                  <th style="width: 6.25rem">{{ _('filterable') }}</th>
+                  <th style="width: 6.25rem">{{ _('frozen') }}</th>
+                  <th style="width: 7.5rem">{{ _('width') }}</th>
+                  <th style="width: 6.25rem">{{ _('actions') }}</th>
                 </tr>
               </thead>
               <draggable
@@ -786,9 +806,9 @@ onMounted(() => {
                 class="p-datatable-tbody"
                 handle=".drag-handle"
                 item-key="name"
-                @end="onDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onDragEnd"
               >
                 <template #item="{ element: field, index }">
                   <tr>
@@ -812,7 +832,7 @@ onMounted(() => {
                       <Checkbox v-model="field.frozen" :binary="true" />
                     </td>
                     <td>
-                      <InputText v-model="field.width" placeholder="150px" class="w-full" />
+                      <InputText v-model="field.width" placeholder="9.375rem" class="w-full" />
                     </td>
                     <td>
                       <Button
@@ -820,8 +840,8 @@ onMounted(() => {
                         size="small"
                         text
                         :title="_('edit')"
-                        @click="openEditDialog(field, index)"
                         class="mr-2"
+                        @click="openEditDialog(field, index)"
                       />
                       <Button
                         icon="pi pi-trash"
@@ -847,12 +867,7 @@ 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" :loading="saving" @click="saveConfig" />
         </div>
       </template>
     </Card>
@@ -863,8 +878,8 @@ onMounted(() => {
       :header="_('add_field_dialog_title')"
       :modal="true"
       :closable="true"
-      :style="{ width: '600px' }"
-      appendTo="self"
+      :style="{ width: '37.5rem' }"
+      append-to="self"
       @hide="closeAddDialog"
     >
       <div class="field mb-3">
@@ -889,7 +904,7 @@ onMounted(() => {
 
       <div class="field mb-3">
         <label for="new-field-type" class="required">{{ _('field_type') }}</label>
-        <Dropdown
+        <Select
           id="new-field-type"
           v-model="newField.type"
           :options="fieldTypeOptions"
@@ -923,7 +938,9 @@ onMounted(() => {
           />
         </div>
         <div class="field mb-2">
-          <label for="new-field-relation-fk" class="required">{{ _('relation_foreign_key') }}</label>
+          <label for="new-field-relation-fk" class="required">{{
+            _('relation_foreign_key')
+          }}</label>
           <InputText
             id="new-field-relation-fk"
             v-model="newField.config.relation.foreignKey"
@@ -932,7 +949,9 @@ onMounted(() => {
           />
         </div>
         <div class="field mb-2">
-          <label for="new-field-relation-display" class="required">{{ _('relation_display_field') }}</label>
+          <label for="new-field-relation-display" class="required">{{
+            _('relation_display_field')
+          }}</label>
           <InputText
             id="new-field-relation-display"
             v-model="newField.config.relation.displayField"
@@ -942,7 +961,7 @@ onMounted(() => {
         </div>
         <div class="field mb-2">
           <label for="new-field-relation-aggregation">{{ _('relation_aggregation') }}</label>
-          <Dropdown
+          <Select
             id="new-field-relation-aggregation"
             v-model="newField.config.relation.aggregation"
             :options="aggregationOptions"
@@ -955,7 +974,9 @@ onMounted(() => {
       </div>
 
       <div v-if="newField.type === 'computed'" class="field mb-3">
-        <label for="new-field-computed-class" class="required">{{ _('computed_class_name') }}</label>
+        <label for="new-field-computed-class" class="required">{{
+          _('computed_class_name')
+        }}</label>
         <InputText
           id="new-field-computed-class"
           v-model="newField.config.computed.className"
@@ -968,10 +989,7 @@ onMounted(() => {
       <!-- Actions configuration for actions type -->
       <div v-if="newField.type === 'actions'" class="field mb-3">
         <label class="mb-2 block font-semibold">{{ _('actions_configuration') }}</label>
-        <ActionsEditor
-          v-model="newField.config.actions"
-          :grid-id="selectedGrid"
-        />
+        <ActionsEditor v-model="newField.config.actions" :grid-id="selectedGrid" />
         <small class="text-muted">{{ _('actions_configuration_hint') }}</small>
       </div>
 
@@ -979,28 +997,28 @@ onMounted(() => {
       <div v-if="newField.type === 'badge'" class="mb-3">
         <div class="field mb-2">
           <label for="new-field-badge-source">{{ _('field_source_field') }}</label>
-          <Dropdown
+          <Select
             id="new-field-badge-source"
             v-model="newField.config.badge.source_field"
             :options="getAvailableFieldsForBadge(newField.field_name)"
             option-label="label"
             option-value="value"
             :placeholder="_('field_source_field_placeholder')"
-            :showClear="true"
+            :show-clear="true"
             class="w-full"
           />
           <small class="text-muted">{{ _('field_source_field_hint') }}</small>
         </div>
         <div class="field mb-2">
           <label for="new-field-badge-color">{{ _('field_color_field') }}</label>
-          <Dropdown
+          <Select
             id="new-field-badge-color"
             v-model="newField.config.badge.color_field"
             :options="getAvailableFieldsForBadge(newField.field_name)"
             option-label="label"
             option-value="value"
             :placeholder="_('field_color_field_placeholder')"
-            :showClear="true"
+            :show-clear="true"
             class="w-full"
           />
           <small class="text-muted">{{ _('field_color_field_hint') }}</small>
@@ -1017,7 +1035,9 @@ onMounted(() => {
           class="w-full font-mono"
           :placeholder="getConfigHint(newField.type)"
         />
-        <small class="text-muted">{{ _('field_display_config_hint') }}: {{ getConfigHint(newField.type) }}</small>
+        <small class="text-muted"
+          >{{ _('field_display_config_hint') }}: {{ getConfigHint(newField.type) }}</small
+        >
       </div>
 
       <!-- General settings -->
@@ -1027,46 +1047,48 @@ onMounted(() => {
           id="new-field-width"
           v-model="newField.width"
           class="w-full"
-          placeholder="150px"
+          placeholder="9.375rem"
         />
       </div>
 
       <div class="flex flex-wrap gap-4 mb-3">
         <div class="flex align-items-center">
-          <Checkbox
-            input-id="new-field-visible"
-            v-model="newField.visible"
-            :binary="true"
-          />
+          <Checkbox v-model="newField.visible" input-id="new-field-visible" :binary="true" />
           <label for="new-field-visible" class="ml-2 cursor-pointer">{{ _('visible') }}</label>
         </div>
 
         <div class="flex align-items-center">
           <Checkbox
-            input-id="new-field-sortable"
             v-model="newField.sortable"
+            input-id="new-field-sortable"
             :binary="true"
             :disabled="newField.type === 'actions'"
           />
-          <label for="new-field-sortable" class="ml-2 cursor-pointer" :class="{ 'opacity-50': newField.type === 'actions' }">{{ _('sortable') }}</label>
+          <label
+            for="new-field-sortable"
+            class="ml-2 cursor-pointer"
+            :class="{ 'opacity-50': newField.type === 'actions' }"
+            >{{ _('sortable') }}</label
+          >
         </div>
 
         <div class="flex align-items-center">
           <Checkbox
-            input-id="new-field-filterable"
             v-model="newField.filterable"
+            input-id="new-field-filterable"
             :binary="true"
             :disabled="newField.type === 'template' || newField.type === 'actions'"
           />
-          <label for="new-field-filterable" class="ml-2 cursor-pointer" :class="{ 'opacity-50': newField.type === 'template' || newField.type === 'actions' }">{{ _('filterable') }}</label>
+          <label
+            for="new-field-filterable"
+            class="ml-2 cursor-pointer"
+            :class="{ 'opacity-50': newField.type === 'template' || newField.type === 'actions' }"
+            >{{ _('filterable') }}</label
+          >
         </div>
 
         <div class="flex align-items-center">
-          <Checkbox
-            input-id="new-field-frozen"
-            v-model="newField.frozen"
-            :binary="true"
-          />
+          <Checkbox v-model="newField.frozen" input-id="new-field-frozen" :binary="true" />
           <label for="new-field-frozen" class="ml-2 cursor-pointer">{{ _('frozen') }}</label>
         </div>
       </div>
@@ -1075,15 +1097,15 @@ onMounted(() => {
         <Button
           :label="_('cancel')"
           icon="pi pi-times"
-          @click="closeAddDialog"
           severity="secondary"
           text
+          @click="closeAddDialog"
         />
         <Button
           :label="_('create')"
           icon="pi pi-check"
-          @click="addField"
           :disabled="!newField.field_name"
+          @click="addField"
         />
       </template>
     </Dialog>
@@ -1094,8 +1116,8 @@ onMounted(() => {
       :header="_('edit_field_dialog_title')"
       :modal="true"
       :closable="true"
-      :style="{ width: '600px' }"
-      appendTo="self"
+      :style="{ width: '37.5rem' }"
+      append-to="self"
       @hide="closeEditDialog"
     >
       <div v-if="editingField">
@@ -1122,7 +1144,7 @@ onMounted(() => {
 
         <div class="field mb-3">
           <label for="edit-field-type" class="required">{{ _('field_type') }}</label>
-          <Dropdown
+          <Select
             id="edit-field-type"
             v-model="editingField.type"
             :options="fieldTypeOptions"
@@ -1147,7 +1169,9 @@ onMounted(() => {
 
         <div v-if="editingField.type === 'relation'" class="mb-3">
           <div class="field mb-2">
-            <label for="edit-field-relation-table" class="required">{{ _('relation_table') }}</label>
+            <label for="edit-field-relation-table" class="required">{{
+              _('relation_table')
+            }}</label>
             <InputText
               id="edit-field-relation-table"
               v-model="editingField.config.relation.table"
@@ -1156,7 +1180,9 @@ onMounted(() => {
             />
           </div>
           <div class="field mb-2">
-            <label for="edit-field-relation-fk" class="required">{{ _('relation_foreign_key') }}</label>
+            <label for="edit-field-relation-fk" class="required">{{
+              _('relation_foreign_key')
+            }}</label>
             <InputText
               id="edit-field-relation-fk"
               v-model="editingField.config.relation.foreignKey"
@@ -1165,7 +1191,9 @@ onMounted(() => {
             />
           </div>
           <div class="field mb-2">
-            <label for="edit-field-relation-display" class="required">{{ _('relation_display_field') }}</label>
+            <label for="edit-field-relation-display" class="required">{{
+              _('relation_display_field')
+            }}</label>
             <InputText
               id="edit-field-relation-display"
               v-model="editingField.config.relation.displayField"
@@ -1175,7 +1203,7 @@ onMounted(() => {
           </div>
           <div class="field mb-2">
             <label for="edit-field-relation-aggregation">{{ _('relation_aggregation') }}</label>
-            <Dropdown
+            <Select
               id="edit-field-relation-aggregation"
               v-model="editingField.config.relation.aggregation"
               :options="aggregationOptions"
@@ -1188,7 +1216,9 @@ onMounted(() => {
         </div>
 
         <div v-if="editingField.type === 'computed'" class="field mb-3">
-          <label for="edit-field-computed-class" class="required">{{ _('computed_class_name') }}</label>
+          <label for="edit-field-computed-class" class="required">{{
+            _('computed_class_name')
+          }}</label>
           <InputText
             id="edit-field-computed-class"
             v-model="editingField.config.computed.className"
@@ -1201,10 +1231,7 @@ onMounted(() => {
         <!-- Actions configuration for actions type -->
         <div v-if="editingField.type === 'actions'" class="field mb-3">
           <label class="mb-2 block font-semibold">{{ _('actions_configuration') }}</label>
-          <ActionsEditor
-            v-model="editingField.config.actions"
-            :grid-id="selectedGrid"
-          />
+          <ActionsEditor v-model="editingField.config.actions" :grid-id="selectedGrid" />
           <small class="text-muted">{{ _('actions_configuration_hint') }}</small>
         </div>
 
@@ -1212,28 +1239,28 @@ onMounted(() => {
         <div v-if="editingField.type === 'badge'" class="mb-3">
           <div class="field mb-2">
             <label for="edit-field-badge-source">{{ _('field_source_field') }}</label>
-            <Dropdown
+            <Select
               id="edit-field-badge-source"
               v-model="editingField.config.badge.source_field"
               :options="getAvailableFieldsForBadge(editingField.field_name)"
               option-label="label"
               option-value="value"
               :placeholder="_('field_source_field_placeholder')"
-              :showClear="true"
+              :show-clear="true"
               class="w-full"
             />
             <small class="text-muted">{{ _('field_source_field_hint') }}</small>
           </div>
           <div class="field mb-2">
             <label for="edit-field-badge-color">{{ _('field_color_field') }}</label>
-            <Dropdown
+            <Select
               id="edit-field-badge-color"
               v-model="editingField.config.badge.color_field"
               :options="getAvailableFieldsForBadge(editingField.field_name)"
               option-label="label"
               option-value="value"
               :placeholder="_('field_color_field_placeholder')"
-              :showClear="true"
+              :show-clear="true"
               class="w-full"
             />
             <small class="text-muted">{{ _('field_color_field_hint') }}</small>
@@ -1250,7 +1277,9 @@ onMounted(() => {
             class="w-full font-mono"
             :placeholder="getConfigHint(editingField.type)"
           />
-          <small class="text-muted">{{ _('field_display_config_hint') }}: {{ getConfigHint(editingField.type) }}</small>
+          <small class="text-muted"
+            >{{ _('field_display_config_hint') }}: {{ getConfigHint(editingField.type) }}</small
+          >
         </div>
 
         <!-- General settings -->
@@ -1260,46 +1289,50 @@ onMounted(() => {
             id="edit-field-width"
             v-model="editingField.width"
             class="w-full"
-            placeholder="150px"
+            placeholder="9.375rem"
           />
         </div>
 
         <div class="flex flex-wrap gap-4 mb-3">
           <div class="flex align-items-center">
-            <Checkbox
-              input-id="edit-field-visible"
-              v-model="editingField.visible"
-              :binary="true"
-            />
+            <Checkbox v-model="editingField.visible" input-id="edit-field-visible" :binary="true" />
             <label for="edit-field-visible" class="ml-2 cursor-pointer">{{ _('visible') }}</label>
           </div>
 
           <div class="flex align-items-center">
             <Checkbox
-              input-id="edit-field-sortable"
               v-model="editingField.sortable"
+              input-id="edit-field-sortable"
               :binary="true"
               :disabled="editingField.type === 'actions'"
             />
-            <label for="edit-field-sortable" class="ml-2 cursor-pointer" :class="{ 'opacity-50': editingField.type === 'actions' }">{{ _('sortable') }}</label>
+            <label
+              for="edit-field-sortable"
+              class="ml-2 cursor-pointer"
+              :class="{ 'opacity-50': editingField.type === 'actions' }"
+              >{{ _('sortable') }}</label
+            >
           </div>
 
           <div class="flex align-items-center">
             <Checkbox
-              input-id="edit-field-filterable"
               v-model="editingField.filterable"
+              input-id="edit-field-filterable"
               :binary="true"
               :disabled="editingField.type === 'template' || editingField.type === 'actions'"
             />
-            <label for="edit-field-filterable" class="ml-2 cursor-pointer" :class="{ 'opacity-50': editingField.type === 'template' || editingField.type === 'actions' }">{{ _('filterable') }}</label>
+            <label
+              for="edit-field-filterable"
+              class="ml-2 cursor-pointer"
+              :class="{
+                'opacity-50': editingField.type === 'template' || editingField.type === 'actions',
+              }"
+              >{{ _('filterable') }}</label
+            >
           </div>
 
           <div class="flex align-items-center">
-            <Checkbox
-              input-id="edit-field-frozen"
-              v-model="editingField.frozen"
-              :binary="true"
-            />
+            <Checkbox v-model="editingField.frozen" input-id="edit-field-frozen" :binary="true" />
             <label for="edit-field-frozen" class="ml-2 cursor-pointer">{{ _('frozen') }}</label>
           </div>
         </div>
@@ -1309,15 +1342,15 @@ onMounted(() => {
         <Button
           :label="_('cancel')"
           icon="pi pi-times"
-          @click="closeEditDialog"
           severity="secondary"
           text
+          @click="closeEditDialog"
         />
         <Button
           :label="_('save')"
           icon="pi pi-check"
-          @click="saveEdit"
           :disabled="!editingField || !editingField.field_name"
+          @click="saveEdit"
         />
       </template>
     </Dialog>
@@ -1326,7 +1359,7 @@ onMounted(() => {
 
 <style scoped>
 .grid-fields-config {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .drag-handle-cell {
@@ -1337,14 +1370,14 @@ onMounted(() => {
 
 .drag-handle {
   cursor: grab;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 1.2rem;
   padding: 0.5rem;
   user-select: none;
 }
 
 .drag-handle:hover {
-  color: #495057;
+  color: var(--ms3-text-hint);
 }
 
 .drag-handle:active {
@@ -1353,12 +1386,12 @@ onMounted(() => {
 
 :deep(.ghost-row) {
   opacity: 0.5;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.sortable-drag) {
   opacity: 0.8;
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
   cursor: grabbing !important;
 }
 
@@ -1367,26 +1400,26 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   padding: 3rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
 }
 
 :deep(.p-datatable-tbody tr:nth-child(even)) {
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.p-datatable-tbody tr:hover) {
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
 }
 
 label.required::after {
   content: ' *';
-  color: #dc3545;
+  color: var(--ms3-text-danger-alt);
 }
 
 small.text-muted {
   display: block;
   margin-top: 0.25rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
diff --git a/vueManager/src/components/HelpPage.vue b/vueManager/src/components/HelpPage.vue
index f4977c9..1ec9beb 100644
--- a/vueManager/src/components/HelpPage.vue
+++ b/vueManager/src/components/HelpPage.vue
@@ -1,14 +1,12 @@
 <script setup>
-import { computed } from 'vue'
-import Card from 'primevue/card'
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
 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
-// eslint-disable-next-line no-undef
 const logo = computed(() => (typeof ms3 !== 'undefined' ? ms3.config?.defaultThumb : null) || '')
 
 // Quick links to admin sections
@@ -16,33 +14,33 @@ const quickLinks = computed(() => [
   {
     icon: 'pi pi-shopping-cart',
     href: _('ms3_orders_href'),
-    text: _('ms3_orders_text')
+    text: _('ms3_orders_text'),
   },
   {
     icon: 'pi pi-users',
     href: _('ms3_customers_href'),
-    text: _('ms3_customers_text')
+    text: _('ms3_customers_text'),
   },
   {
     icon: 'pi pi-bell',
     href: _('ms3_notifications_href'),
-    text: _('ms3_notifications_text')
+    text: _('ms3_notifications_text'),
   },
   {
     icon: 'pi pi-cog',
     href: _('ms3_settings_href'),
-    text: _('ms3_settings_text')
+    text: _('ms3_settings_text'),
   },
   {
     icon: 'pi pi-wrench',
     href: _('ms3_utilities_href'),
-    text: _('ms3_utilities_text')
+    text: _('ms3_utilities_text'),
   },
   {
     icon: 'pi pi-sliders-h',
     href: _('ms3_sys_settings_href'),
-    text: _('ms3_sys_settings_text')
-  }
+    text: _('ms3_sys_settings_text'),
+  },
 ])
 
 // Resource cards
@@ -51,32 +49,32 @@ const resourceCards = computed(() => [
     icon: 'pi pi-desktop',
     href: _('ms3_demo_href'),
     title: _('ms3_demo_title'),
-    text: _('ms3_demo_text')
+    text: _('ms3_demo_text'),
   },
   {
     icon: 'pi pi-book',
     href: _('ms3_docs_href'),
     title: _('ms3_docs_title'),
-    text: _('ms3_docs_text')
+    text: _('ms3_docs_text'),
   },
   {
     icon: 'pi pi-box',
     href: _('ms3_components_href'),
     title: _('ms3_components_title'),
-    text: _('ms3_components_text')
+    text: _('ms3_components_text'),
   },
   {
     icon: 'pi pi-comments',
     href: _('ms3_forum_href'),
     title: _('ms3_forum_title'),
-    text: _('ms3_forum_text')
+    text: _('ms3_forum_text'),
   },
   {
     icon: 'pi pi-github',
     href: _('ms3_github_href'),
     title: _('ms3_github_title'),
-    text: _('ms3_github_text')
-  }
+    text: _('ms3_github_text'),
+  },
 ])
 
 function navigateTo(href) {
@@ -100,12 +98,7 @@ function navigateTo(href) {
             <h2>{{ _('ms3_help') }}</h2>
             <p>{{ _('ms3_help_text') }}</p>
           </div>
-          <img
-            v-if="logo"
-            :src="logo"
-            alt="MiniShop3"
-            class="header-logo"
-          >
+          <img v-if="logo" :src="logo" alt="MiniShop3" class="header-logo" />
         </div>
       </template>
     </Card>
@@ -160,7 +153,7 @@ function navigateTo(href) {
 <style scoped>
 .ms3-help-page {
   padding: 1rem;
-  max-width: 1200px;
+  max-width: 75rem;
 }
 
 .ms3-help-header {
@@ -186,7 +179,7 @@ function navigateTo(href) {
 }
 
 .header-logo {
-  max-height: 80px;
+  max-height: 5rem;
   object-fit: contain;
 }
 
@@ -202,19 +195,21 @@ function navigateTo(href) {
 
 .ms3-resource-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
   gap: 1rem;
   margin-bottom: 1rem;
 }
 
 .resource-card {
   cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
 }
 
 .resource-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-0.125rem);
+  box-shadow: var(--ms3-shadow-dropdown);
 }
 
 .resource-content {
diff --git a/vueManager/src/components/ImportProducts.vue b/vueManager/src/components/ImportProducts.vue
index 0502679..87eaff6 100644
--- a/vueManager/src/components/ImportProducts.vue
+++ b/vueManager/src/components/ImportProducts.vue
@@ -1,17 +1,17 @@
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import request from '../request.js'
 import { useLexicon } from '@vuetools/useLexicon'
-
-import Select from 'primevue/select'
-import Checkbox from 'primevue/checkbox'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+import Checkbox from 'primevue/checkbox'
 import Column from 'primevue/column'
-import ProgressBar from 'primevue/progressbar'
+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 { computed, onMounted, ref, watch } from 'vue'
+
+import request from '../request.js'
 
 const { _ } = useLexicon()
 
@@ -83,7 +83,8 @@ const loadAvailableFields = async () => {
     keyFields.value = data.key_fields || []
 
     if (keyFields.value.length > 0 && !updateKey.value) {
-      updateKey.value = keyFields.value.find(k => k.value === 'article')?.value || keyFields.value[0].value
+      updateKey.value =
+        keyFields.value.find(k => k.value === 'article')?.value || keyFields.value[0].value
     }
   } catch (err) {
     console.error('Failed to load fields:', err)
@@ -127,12 +128,23 @@ const autoMapFields = () => {
     }
 
     const commonMappings = {
-      'name': 'pagetitle', 'title': 'pagetitle', 'product': 'pagetitle',
-      'category': 'parent', 'category_id': 'parent', 'parent_id': 'parent',
-      'sku': 'article', 'art': 'article',
-      'cost': 'price', 'old_cost': 'old_price', 'discount_price': 'old_price',
-      'image': 'gallery', 'photo': 'gallery', 'picture': 'gallery',
-      'brand': 'vendor', 'manufacturer': 'vendor', 'country': 'made_in',
+      name: 'pagetitle',
+      title: 'pagetitle',
+      product: 'pagetitle',
+      category: 'parent',
+      category_id: 'parent',
+      parent_id: 'parent',
+      sku: 'article',
+      art: 'article',
+      cost: 'price',
+      old_cost: 'old_price',
+      discount_price: 'old_price',
+      image: 'gallery',
+      photo: 'gallery',
+      picture: 'gallery',
+      brand: 'vendor',
+      manufacturer: 'vendor',
+      country: 'made_in',
     }
 
     for (const [key, value] of Object.entries(commonMappings)) {
@@ -174,7 +186,11 @@ const startImport = async () => {
     importId.value = response.import_id || ''
 
     if (response.scheduled) {
-      importResult.value = { success: true, message: _('ms3_import_scheduled_success'), scheduled: true }
+      importResult.value = {
+        success: true,
+        message: _('ms3_import_scheduled_success'),
+        scheduled: true,
+      }
       importCompleted.value = true
       importRunning.value = false
     } else if (!useScheduler.value) {
@@ -218,7 +234,7 @@ const triggerFileInput = () => {
   fileInputRef.value?.click()
 }
 
-const handleFileSelect = async (event) => {
+const handleFileSelect = async event => {
   const file = event.target.files?.[0]
   if (!file) return
 
@@ -245,7 +261,7 @@ const handleFileSelect = async (event) => {
   }
 }
 
-const goToStep = (step) => {
+const goToStep = step => {
   if (step === 2 && !canProceedToStep2.value) return
   if (step === 3 && !canProceedToStep3.value) return
   currentStep.value = step
@@ -265,32 +281,54 @@ onMounted(() => {
     <p class="tab-description">{{ _('ms3_utilities_import_description') }}</p>
 
     <div class="step-indicators">
-      <div class="step-indicator" :class="{ active: currentStep === 1, completed: currentStep > 1 }" @click="goToStep(1)">
+      <div
+        class="step-indicator"
+        :class="{ active: currentStep === 1, completed: currentStep > 1 }"
+        @click="goToStep(1)"
+      >
         <span class="step-number">1</span>
         <span class="step-title">{{ _('ms3_import_step_upload') }}</span>
       </div>
       <div class="step-connector" :class="{ active: currentStep > 1 }"></div>
-      <div class="step-indicator" :class="{ active: currentStep === 2, completed: currentStep > 2, disabled: !canProceedToStep2 }" @click="goToStep(2)">
+      <div
+        class="step-indicator"
+        :class="{
+          active: currentStep === 2,
+          completed: currentStep > 2,
+          disabled: !canProceedToStep2,
+        }"
+        @click="goToStep(2)"
+      >
         <span class="step-number">2</span>
         <span class="step-title">{{ _('ms3_import_step_mapping') }}</span>
       </div>
       <div class="step-connector" :class="{ active: currentStep > 2 }"></div>
-      <div class="step-indicator" :class="{ active: currentStep === 3, disabled: !canProceedToStep3 }" @click="goToStep(3)">
+      <div
+        class="step-indicator"
+        :class="{ active: currentStep === 3, disabled: !canProceedToStep3 }"
+        @click="goToStep(3)"
+      >
         <span class="step-number">3</span>
         <span class="step-title">{{ _('ms3_import_step_import') }}</span>
       </div>
     </div>
 
     <!-- Step 1: File Upload -->
-    <div class="step-content" v-show="currentStep === 1">
+    <div v-show="currentStep === 1" class="step-content">
       <h3>{{ _('ms3_import_select_file') }}</h3>
 
       <div class="upload-section">
-        <div class="upload-area" @click="triggerFileInput" :class="{ uploading: uploading }">
-          <input type="file" ref="fileInputRef" accept=".csv" @change="handleFileSelect" style="display: none" />
+        <div class="upload-area" :class="{ uploading: uploading }" @click="triggerFileInput">
+          <input
+            ref="fileInputRef"
+            type="file"
+            accept=".csv"
+            style="display: none"
+            @change="handleFileSelect"
+          />
           <div class="upload-icon">
-            <i class="pi pi-cloud-upload" v-if="!uploading"></i>
-            <i class="pi pi-spin pi-spinner" v-else></i>
+            <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>
@@ -298,10 +336,12 @@ onMounted(() => {
           </div>
           <div class="upload-hint">{{ _('ms3_import_csv_only') }}</div>
         </div>
-        <Message v-if="uploadError" severity="error" :closable="true" @close="uploadError = null">{{ uploadError }}</Message>
+        <Message v-if="uploadError" severity="error" :closable="true" @close="uploadError = null">{{
+          uploadError
+        }}</Message>
       </div>
 
-      <div class="selected-file" v-if="filePath">
+      <div v-if="filePath" class="selected-file">
         <div class="selected-file-header">
           <i class="pi pi-file"></i>
           <span class="file-name">{{ uploadedFileName || filePath }}</span>
@@ -309,40 +349,60 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="settings-section" v-if="filePath">
+      <div v-if="filePath" class="settings-section">
         <h4>{{ _('ms3_import_settings') }}</h4>
         <div class="setting-row">
           <label>{{ _('ms3_import_delimiter') }}</label>
-          <SelectButton v-model="delimiter" :options="delimiterOptions" optionLabel="label" optionValue="value" />
+          <SelectButton
+            v-model="delimiter"
+            :options="delimiterOptions"
+            option-label="label"
+            option-value="value"
+          />
         </div>
         <div class="setting-row">
-          <Checkbox v-model="skipHeader" :binary="true" inputId="skipHeader" />
+          <Checkbox v-model="skipHeader" :binary="true" input-id="skipHeader" />
           <label for="skipHeader">{{ _('ms3_import_skip_header') }}</label>
         </div>
       </div>
 
-      <div class="file-info" v-if="totalRows > 0">
+      <div v-if="totalRows > 0" class="file-info">
         <Message severity="info" :closable="false">
           {{ _('ms3_import_file_info') }}: {{ totalRows }} {{ _('ms3_import_rows') }}
-          <span v-if="detectedEncoding" class="encoding-info"> | {{ _('ms3_import_encoding') }}: {{ detectedEncoding }}</span>
+          <span v-if="detectedEncoding" class="encoding-info">
+            | {{ _('ms3_import_encoding') }}: {{ detectedEncoding }}</span
+          >
         </Message>
-        <Message v-if="detectedEncoding && detectedEncoding !== 'UTF-8'" severity="warn" :closable="false">
+        <Message
+          v-if="detectedEncoding && detectedEncoding !== 'UTF-8'"
+          severity="warn"
+          :closable="false"
+        >
           {{ _('ms3_import_encoding_converted', { from: detectedEncoding }) }}
         </Message>
-        <Message v-if="exceedsLimit && !schedulerAvailable" severity="warn" :closable="false">{{ _('ms3_import_exceeds_limit_warning') }}</Message>
+        <Message v-if="exceedsLimit && !schedulerAvailable" severity="warn" :closable="false">{{
+          _('ms3_import_exceeds_limit_warning')
+        }}</Message>
       </div>
 
       <div class="step-actions">
-        <Button :label="_('ms3_import_next')" icon="pi pi-arrow-right" iconPos="right" @click="currentStep = 2" :disabled="!canProceedToStep2" />
+        <Button
+          :label="_('ms3_import_next')"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          :disabled="!canProceedToStep2"
+          @click="currentStep = 2"
+        />
       </div>
     </div>
 
     <!-- Step 2: Field Mapping -->
-    <div class="step-content" v-show="currentStep === 2">
+    <div v-show="currentStep === 2" class="step-content">
       <h3>{{ _('ms3_import_field_mapping') }}</h3>
 
       <Message v-if="missingRequiredFields.length > 0" severity="warn" :closable="false">
-        {{ _('ms3_import_required_fields_warning') }}: <strong>{{ missingRequiredFields.join(', ') }}</strong>
+        {{ _('ms3_import_required_fields_warning') }}:
+        <strong>{{ missingRequiredFields.join(', ') }}</strong>
       </Message>
 
       <DataTable :value="csvHeaders.map((h, i) => ({ index: i, header: h }))" class="mapping-table">
@@ -359,12 +419,23 @@ onMounted(() => {
         </Column>
         <Column field="mapping" :header="_('ms3_import_product_field')">
           <template #body="{ data }">
-            <Select v-model="fieldMapping[data.index]" :options="availableFields" optionLabel="label" optionValue="value" :placeholder="_('ms3_import_select_field')" class="field-select" filter showClear />
+            <Select
+              v-model="fieldMapping[data.index]"
+              :options="availableFields"
+              option-label="label"
+              option-value="value"
+              :placeholder="_('ms3_import_select_field')"
+              class="field-select"
+              filter
+              show-clear
+            />
           </template>
         </Column>
         <Column :header="_('ms3_import_preview')">
           <template #body="{ data }">
-            <span class="preview-value" v-if="csvPreview[skipHeader ? 1 : 0]">{{ csvPreview[skipHeader ? 1 : 0][data.index] || '—' }}</span>
+            <span v-if="csvPreview[skipHeader ? 1 : 0]" class="preview-value">{{
+              csvPreview[skipHeader ? 1 : 0][data.index] || '—'
+            }}</span>
           </template>
         </Column>
       </DataTable>
@@ -372,142 +443,449 @@ onMounted(() => {
       <div class="update-settings">
         <h4>{{ _('ms3_import_update_settings') }}</h4>
         <div class="setting-row">
-          <Checkbox v-model="updateExisting" :binary="true" inputId="updateExisting" />
+          <Checkbox v-model="updateExisting" :binary="true" input-id="updateExisting" />
           <label for="updateExisting">{{ _('ms3_import_update_existing') }}</label>
         </div>
-        <div class="setting-row" v-if="updateExisting">
+        <div v-if="updateExisting" class="setting-row">
           <label>{{ _('ms3_import_update_key') }}:</label>
-          <Select v-model="updateKey" :options="keyFields" optionLabel="label" optionValue="value" class="key-select" />
+          <Select
+            v-model="updateKey"
+            :options="keyFields"
+            option-label="label"
+            option-value="value"
+            class="key-select"
+          />
         </div>
       </div>
 
       <div class="step-actions">
-        <Button :label="_('ms3_import_back')" icon="pi pi-arrow-left" severity="secondary" @click="currentStep = 1" />
-        <Button :label="_('ms3_import_next')" icon="pi pi-arrow-right" iconPos="right" @click="currentStep = 3" :disabled="!canProceedToStep3" />
+        <Button
+          :label="_('ms3_import_back')"
+          icon="pi pi-arrow-left"
+          severity="secondary"
+          @click="currentStep = 1"
+        />
+        <Button
+          :label="_('ms3_import_next')"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          :disabled="!canProceedToStep3"
+          @click="currentStep = 3"
+        />
       </div>
     </div>
 
     <!-- Step 3: Import -->
-    <div class="step-content" v-show="currentStep === 3">
+    <div v-show="currentStep === 3" class="step-content">
       <h3>{{ _('ms3_import_preview_title') }}</h3>
 
-      <div class="preview-section" v-if="!importRunning && !importCompleted">
+      <div v-if="!importRunning && !importCompleted" class="preview-section">
         <h4>{{ _('ms3_import_summary') }}</h4>
         <div class="summary-info">
-          <div class="summary-row"><span class="summary-label">{{ _('ms3_import_file') }}:</span><span class="summary-value">{{ uploadedFileName || filePath }}</span></div>
-          <div class="summary-row"><span class="summary-label">{{ _('ms3_import_total_rows') }}:</span><span class="summary-value">{{ totalRows }}</span></div>
-          <div class="summary-row"><span class="summary-label">{{ _('ms3_import_mapped_fields') }}:</span><span class="summary-value">{{ fieldMapping.filter(f => f).length }}</span></div>
+          <div class="summary-row">
+            <span class="summary-label">{{ _('ms3_import_file') }}:</span
+            ><span class="summary-value">{{ uploadedFileName || filePath }}</span>
+          </div>
+          <div class="summary-row">
+            <span class="summary-label">{{ _('ms3_import_total_rows') }}:</span
+            ><span class="summary-value">{{ totalRows }}</span>
+          </div>
+          <div class="summary-row">
+            <span class="summary-label">{{ _('ms3_import_mapped_fields') }}:</span
+            ><span class="summary-value">{{ fieldMapping.filter(f => f).length }}</span>
+          </div>
         </div>
 
         <div class="import-options">
           <h4>{{ _('ms3_import_options') }}</h4>
           <div v-if="exceedsLimit" class="import-mode-selection">
-            <Message severity="info" :closable="false">{{ _('ms3_import_large_file_info') }}</Message>
-            <div class="mode-options" v-if="schedulerAvailable">
-              <div class="mode-option"><RadioButton v-model="useScheduler" :value="false" inputId="modeSync" /><label for="modeSync">{{ _('ms3_import_mode_sync') }}</label></div>
-              <div class="mode-option"><RadioButton v-model="useScheduler" :value="true" inputId="modeAsync" /><label for="modeAsync">{{ _('ms3_import_mode_async') }}</label></div>
+            <Message severity="info" :closable="false">{{
+              _('ms3_import_large_file_info')
+            }}</Message>
+            <div v-if="schedulerAvailable" class="mode-options">
+              <div class="mode-option">
+                <RadioButton v-model="useScheduler" :value="false" input-id="modeSync" /><label
+                  for="modeSync"
+                  >{{ _('ms3_import_mode_sync') }}</label
+                >
+              </div>
+              <div class="mode-option">
+                <RadioButton v-model="useScheduler" :value="true" input-id="modeAsync" /><label
+                  for="modeAsync"
+                  >{{ _('ms3_import_mode_async') }}</label
+                >
+              </div>
             </div>
           </div>
-          <div class="setting-row"><Checkbox v-model="debugMode" :binary="true" inputId="debugMode" /><label for="debugMode">{{ _('ms3_import_debug_mode') }}</label></div>
+          <div class="setting-row">
+            <Checkbox v-model="debugMode" :binary="true" input-id="debugMode" /><label
+              for="debugMode"
+              >{{ _('ms3_import_debug_mode') }}</label
+            >
+          </div>
         </div>
 
         <div class="step-actions">
-          <Button :label="_('ms3_import_back')" icon="pi pi-arrow-left" severity="secondary" @click="currentStep = 2" />
-          <Button :label="_('ms3_import_start')" icon="pi pi-play" @click="startImport" :loading="loading" />
+          <Button
+            :label="_('ms3_import_back')"
+            icon="pi pi-arrow-left"
+            severity="secondary"
+            @click="currentStep = 2"
+          />
+          <Button
+            :label="_('ms3_import_start')"
+            icon="pi pi-play"
+            :loading="loading"
+            @click="startImport"
+          />
         </div>
       </div>
 
-      <div class="progress-section" v-if="importRunning">
+      <div v-if="importRunning" class="progress-section">
         <h4>{{ _('ms3_import_in_progress') }}</h4>
         <ProgressBar mode="indeterminate" class="import-progress-bar" />
         <p>{{ _('ms3_import_please_wait') }}</p>
       </div>
 
-      <div class="result-section" v-if="importCompleted && importResult">
+      <div v-if="importCompleted && importResult" class="result-section">
         <Message :severity="importResult.success ? 'success' : 'error'" :closable="false">
           <template v-if="importResult.scheduled">{{ importResult.message }}</template>
           <template v-else-if="importResult.success">
             <div class="result-content">
               <h4>{{ _('ms3_import_complete') }}</h4>
               <div class="result-stats">
-                <div class="result-stat"><span class="result-label">{{ _('ms3_import_total_processed') }}:</span><span class="result-value">{{ importResult.total }}</span></div>
-                <div class="result-stat"><span class="result-label">{{ _('ms3_import_created') }}:</span><span class="result-value success">{{ importResult.created }}</span></div>
-                <div class="result-stat"><span class="result-label">{{ _('ms3_import_updated') }}:</span><span class="result-value info">{{ importResult.updated }}</span></div>
-                <div class="result-stat" v-if="importResult.errors > 0"><span class="result-label">{{ _('ms3_import_errors') }}:</span><span class="result-value error">{{ importResult.errors }}</span></div>
+                <div class="result-stat">
+                  <span class="result-label">{{ _('ms3_import_total_processed') }}:</span
+                  ><span class="result-value">{{ importResult.total }}</span>
+                </div>
+                <div class="result-stat">
+                  <span class="result-label">{{ _('ms3_import_created') }}:</span
+                  ><span class="result-value success">{{ importResult.created }}</span>
+                </div>
+                <div class="result-stat">
+                  <span class="result-label">{{ _('ms3_import_updated') }}:</span
+                  ><span class="result-value info">{{ importResult.updated }}</span>
+                </div>
+                <div v-if="importResult.errors > 0" class="result-stat">
+                  <span class="result-label">{{ _('ms3_import_errors') }}:</span
+                  ><span class="result-value error">{{ importResult.errors }}</span>
+                </div>
               </div>
             </div>
           </template>
           <template v-else>{{ importResult.message }}</template>
         </Message>
-        <div class="step-actions"><Button :label="_('ms3_import_new')" icon="pi pi-plus" @click="resetImport" /></div>
+        <div class="step-actions">
+          <Button :label="_('ms3_import_new')" icon="pi pi-plus" @click="resetImport" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.import-products { padding: 20px; max-width: 1000px; }
-.step-indicators { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; padding: 20px 0; }
-.step-indicator { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; cursor: pointer; transition: all 0.2s; background: #f8f9fa; }
-.step-indicator:hover:not(.disabled) { background: #e9ecef; }
-.step-indicator.active { background: #3b82f6; color: white; }
-.step-indicator.completed { background: #22c55e; color: white; }
-.step-indicator.disabled { opacity: 0.5; cursor: not-allowed; }
-.step-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); font-weight: 600; }
-.step-indicator.active .step-number, .step-indicator.completed .step-number { background: rgba(255, 255, 255, 0.2); }
-.step-title { font-weight: 500; }
-.step-connector { width: 40px; height: 2px; background: #dee2e6; margin: 0 8px; }
-.step-connector.active { background: #22c55e; }
-.step-content { padding: 20px 0; }
-.step-content h3 { margin-bottom: 20px; font-size: 1.25rem; font-weight: 600; }
-.step-content h4 { margin: 20px 0 10px; font-size: 1rem; font-weight: 500; }
-.file-source-tabs { margin-bottom: 20px; }
-.source-tab-buttons { display: flex; gap: 8px; margin-bottom: 16px; }
-.source-tab-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid #dee2e6; background: #fff; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; }
-.source-tab-btn:hover { background: #f8f9fa; }
-.source-tab-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; }
-.source-tab-content { min-height: 150px; }
-.upload-area { border: 2px dashed #dee2e6; border-radius: 8px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fafafa; }
-.upload-area:hover { border-color: #3b82f6; background: #f0f7ff; }
-.upload-area.uploading { pointer-events: none; opacity: 0.7; }
-.upload-icon { font-size: 3rem; color: #6c757d; margin-bottom: 15px; }
-.upload-text { font-size: 1.1rem; margin-bottom: 8px; }
-.upload-hint { font-size: 0.85rem; color: #6c757d; }
-.modx-browser-section { text-align: center; padding: 40px 20px; background: #fafafa; border-radius: 8px; border: 1px solid #dee2e6; }
-.browser-hint { margin-bottom: 20px; color: #6c757d; }
-.selected-file { margin: 20px 0; padding: 12px 16px; background: #e8f5e9; border-radius: 6px; border: 1px solid #c8e6c9; }
-.selected-file-header { display: flex; align-items: center; gap: 10px; }
-.selected-file-header i { color: #2e7d32; font-size: 1.2rem; }
-.file-name { flex: 1; font-weight: 500; color: #2e7d32; }
-.settings-section, .update-settings, .import-options { background: #f8f9fa; padding: 15px; border-radius: 6px; margin: 20px 0; }
-.setting-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
-.setting-row label { cursor: pointer; }
-.file-info { margin: 20px 0; }
-.step-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid #dee2e6; }
-.mapping-table { margin: 20px 0; }
-.column-info { display: flex; gap: 8px; align-items: center; }
-.column-letter { font-weight: 600; color: #495057; }
-.column-name { color: #6c757d; }
-.mapping-arrow { color: #6c757d; }
-.field-select { width: 100%; min-width: 200px; }
-.preview-value { color: #6c757d; font-size: 0.875rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
-.key-select { min-width: 150px; }
-.summary-info { background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #dee2e6; }
-.summary-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; }
-.summary-row:last-child { border-bottom: none; }
-.summary-label { font-weight: 500; min-width: 150px; }
-.mode-options { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
-.mode-option { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border-radius: 4px; }
-.mode-option label { cursor: pointer; }
-.progress-section { text-align: center; padding: 40px 20px; }
-.import-progress-bar { height: 8px; margin: 20px 0; }
-.result-section { margin-top: 20px; }
-.result-content h4 { margin: 0 0 15px; }
-.result-stats { display: flex; gap: 20px; flex-wrap: wrap; }
-.result-stat { display: flex; gap: 5px; }
-.result-value { font-weight: 600; }
-.result-value.success { color: #155724; }
-.result-value.info { color: #0c5460; }
-.result-value.error { color: #721c24; }
-.encoding-info { font-weight: 500; }
+.import-products {
+  padding: 1.25rem;
+  max-width: 62.5rem;
+}
+.step-indicators {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.875rem;
+  padding: 1.25rem 0;
+}
+.step-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--ms3-bg-muted);
+}
+.step-indicator:hover:not(.disabled) {
+  background: var(--ms3-bg-neutral);
+}
+.step-indicator.active {
+  background: var(--ms3-accent-primary);
+  color: var(--ms3-text-on-primary);
+}
+.step-indicator.completed {
+  background: var(--ms3-text-success);
+  color: var(--ms3-text-on-primary);
+}
+.step-indicator.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.1);
+  font-weight: 600;
+}
+.step-indicator.active .step-number,
+.step-indicator.completed .step-number {
+  background: rgba(255, 255, 255, 0.2);
+}
+.step-title {
+  font-weight: 500;
+}
+.step-connector {
+  width: 2.5rem;
+  height: 0.125rem;
+  background: var(--ms3-border-color-alt);
+  margin: 0 0.5rem;
+}
+.step-connector.active {
+  background: var(--ms3-text-success);
+}
+.step-content {
+  padding: 1.25rem 0;
+}
+.step-content h3 {
+  margin-bottom: 1.25rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.step-content h4 {
+  margin: 1.25rem 0 0.625rem;
+  font-size: 1rem;
+  font-weight: 500;
+}
+.file-source-tabs {
+  margin-bottom: 1.25rem;
+}
+.source-tab-buttons {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.source-tab-btn {
+  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);
+  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);
+}
+.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.uploading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+.upload-icon {
+  font-size: 3rem;
+  color: var(--ms3-text-muted);
+  margin-bottom: 0.9375rem;
+}
+.upload-text {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+.upload-hint {
+  font-size: 0.85rem;
+  color: var(--ms3-text-muted);
+}
+.modx-browser-section {
+  text-align: center;
+  padding: 2.5rem 1.25rem;
+  background: var(--ms3-bg-gray-50);
+  border-radius: var(--ms3-radius-lg);
+  border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+}
+.browser-hint {
+  margin-bottom: 1.25rem;
+  color: var(--ms3-text-muted);
+}
+.selected-file {
+  margin: 1.25rem 0;
+  padding: 0.75rem 1rem;
+  background: var(--ms3-bg-success-light);
+  border-radius: var(--ms3-radius-md);
+  border: var(--ms3-border-width) solid var(--ms3-border-success-light);
+}
+.selected-file-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.selected-file-header i {
+  color: var(--ms3-text-success-dark);
+  font-size: 1.2rem;
+}
+.file-name {
+  flex: 1;
+  font-weight: 500;
+  color: var(--ms3-text-success-dark);
+}
+.settings-section,
+.update-settings,
+.import-options {
+  background: var(--ms3-bg-muted);
+  padding: 0.9375rem;
+  border-radius: 0.375rem;
+  margin: 1.25rem 0;
+}
+.setting-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0.625rem 0;
+}
+.setting-row label {
+  cursor: pointer;
+}
+.file-info {
+  margin: 1.25rem 0;
+}
+.step-actions {
+  display: flex;
+  gap: 0.625rem;
+  justify-content: flex-end;
+  margin-top: 1.875rem;
+  padding-top: 1.25rem;
+  border-top: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+}
+.mapping-table {
+  margin: 1.25rem 0;
+}
+.column-info {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.column-letter {
+  font-weight: 600;
+  color: var(--ms3-text-hint);
+}
+.column-name {
+  color: var(--ms3-text-muted);
+}
+.mapping-arrow {
+  color: var(--ms3-text-muted);
+}
+.field-select {
+  width: 100%;
+  min-width: 12.5rem;
+}
+.preview-value {
+  color: var(--ms3-text-muted);
+  font-size: 0.875rem;
+  max-width: 9.375rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.key-select {
+  min-width: 9.375rem;
+}
+.summary-info {
+  background: var(--ms3-bg-surface);
+  padding: 0.9375rem;
+  border-radius: var(--ms3-radius-md);
+  border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+}
+.summary-row {
+  display: flex;
+  gap: 0.625rem;
+  padding: 0.5rem 0;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-divider);
+}
+.summary-row:last-child {
+  border-bottom: none;
+}
+.summary-label {
+  font-weight: 500;
+  min-width: 9.375rem;
+}
+.mode-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  margin-top: 0.9375rem;
+}
+.mode-option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem;
+  background: var(--ms3-bg-surface);
+  border-radius: var(--ms3-radius-sm);
+}
+.mode-option label {
+  cursor: pointer;
+}
+.progress-section {
+  text-align: center;
+  padding: 2.5rem 1.25rem;
+}
+.import-progress-bar {
+  height: 0.5rem;
+  margin: 1.25rem 0;
+}
+.result-section {
+  margin-top: 1.25rem;
+}
+.result-content h4 {
+  margin: 0 0 0.9375rem;
+}
+.result-stats {
+  display: flex;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+}
+.result-stat {
+  display: flex;
+  gap: 0.3125rem;
+}
+.result-value {
+  font-weight: 600;
+}
+.result-value.success {
+  color: var(--ms3-text-success-result);
+}
+.result-value.info {
+  color: var(--ms3-text-info-result);
+}
+.result-value.error {
+  color: var(--ms3-text-error-result);
+}
+.encoding-info {
+  font-weight: 500;
+}
 </style>
diff --git a/vueManager/src/components/LinksGrid.vue b/vueManager/src/components/LinksGrid.vue
index fa24a22..d38d0de 100644
--- a/vueManager/src/components/LinksGrid.vue
+++ b/vueManager/src/components/LinksGrid.vue
@@ -1,21 +1,22 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+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 Textarea from 'primevue/textarea'
+import Paginator from 'primevue/paginator'
 import Select from 'primevue/select'
+import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Paginator from 'primevue/paginator'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 
 const toast = useToast()
@@ -32,11 +33,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'link',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/links/bulk', { ids })
   },
   onSuccess: () => loadLinks(),
-  getItemName: (item) => item.name,
+  getItemName: item => item.name,
 })
 
 const loading = ref(false)
@@ -233,7 +234,14 @@ function deleteLink(link) {
 function getActionsConfig() {
   return [
     { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: _('edit') },
-    { name: 'delete', handler: 'delete', icon: 'pi-trash', label: _('delete'), severity: 'danger', confirm: false },
+    {
+      name: 'delete',
+      handler: 'delete',
+      icon: 'pi-trash',
+      label: _('delete'),
+      severity: 'danger',
+      confirm: false,
+    },
   ]
 }
 
@@ -255,7 +263,7 @@ onMounted(() => {
 <template>
   <div class="links-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -265,17 +273,14 @@ onMounted(() => {
             <div class="grid-stats">
               <span class="stat-item">
                 <i class="pi pi-list"></i>
-                <span>{{ _('total') }}: <strong>{{ totalRecords }}</strong></span>
+                <span
+                  >{{ _('total') }}: <strong>{{ totalRecords }}</strong></span
+                >
               </span>
             </div>
           </div>
           <div class="grid-header-right">
-            <Button
-              :label="_('create')"
-              icon="pi pi-plus"
-              severity="success"
-              @click="createLink"
-            />
+            <Button :label="_('create')" icon="pi pi-plus" severity="success" @click="createLink" />
           </div>
         </div>
       </template>
@@ -312,15 +317,15 @@ onMounted(() => {
           v-model:selection="selectedItems"
           :value="links"
           :loading="loading"
-          stripedRows
-          responsiveLayout="scroll"
-          dataKey="id"
+          striped-rows
+          responsive-layout="scroll"
+          data-key="id"
         >
           <!-- Selection column -->
-          <Column selectionMode="multiple" headerStyle="width: 3rem" />
+          <Column selection-mode="multiple" header-style="width: 3rem" />
 
           <!-- ID -->
-          <Column field="id" :header="_('ms3_id')" style="width: 80px" sortable />
+          <Column field="id" :header="_('ms3_id')" style="width: 5rem" sortable />
 
           <!-- Name -->
           <Column field="name" :header="_('ms3_name')" sortable>
@@ -330,9 +335,11 @@ onMounted(() => {
           </Column>
 
           <!-- Type -->
-          <Column field="type" :header="_('ms3_type')" style="width: 200px">
+          <Column field="type" :header="_('ms3_type')" style="width: 12.5rem">
             <template #body="{ data }">
-              <span class="link-type-badge">{{ data.type_label || _('ms3_link_' + data.type) }}</span>
+              <span class="link-type-badge">{{
+                data.type_label || _('ms3_link_' + data.type)
+              }}</span>
             </template>
           </Column>
 
@@ -340,7 +347,7 @@ onMounted(() => {
           <Column field="description" :header="_('ms3_description')" />
 
           <!-- Actions -->
-          <Column :header="_('ms3_actions')" style="width: 120px">
+          <Column :header="_('ms3_actions')" style="width: 7.5rem">
             <template #body="{ data }">
               <ActionsColumn
                 :data="data"
@@ -358,8 +365,8 @@ onMounted(() => {
         <Paginator
           :first="first"
           :rows="rows"
-          :totalRecords="totalRecords"
-          :rowsPerPageOptions="[10, 20, 50, 100]"
+          :total-records="totalRecords"
+          :rows-per-page-options="[10, 20, 50, 100]"
           @page="onPage"
         />
       </template>
@@ -371,8 +378,8 @@ onMounted(() => {
       :header="isNewLink ? _('link_create') : _('link_edit')"
       :modal="true"
       :closable="true"
-      :style="{ width: '550px' }"
-      appendTo="self"
+      :style="{ width: '34.375rem' }"
+      append-to="self"
     >
       <div v-if="editingLink" class="ms3-link-form">
         <!-- Name -->
@@ -387,8 +394,8 @@ onMounted(() => {
           <Select
             v-model="editingLink.type"
             :options="linkTypes"
-            optionLabel="label"
-            optionValue="value"
+            option-label="label"
+            option-value="value"
             :disabled="!isNewLink"
             class="w-full"
             :placeholder="_('select_type')"
@@ -415,12 +422,7 @@ onMounted(() => {
           severity="secondary"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="saveLink"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveLink" />
       </template>
     </Dialog>
   </div>
@@ -442,20 +444,20 @@ onMounted(() => {
 
 .ms3-link-form .form-row label {
   font-weight: 500;
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 .ms3-link-form .type-description {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-style: italic;
   padding: 0.5rem;
-  background: #f3f4f6;
-  border-radius: 4px;
+  background: var(--ms3-bg-gray-100);
+  border-radius: 0.25rem;
   margin-top: 0.25rem;
 }
 
 .ms3-link-form .type-hint {
-  color: #9ca3af;
+  color: var(--ms3-text-muted-light);
   font-size: 0.8rem;
 }
 
@@ -466,7 +468,7 @@ onMounted(() => {
 
 <style scoped>
 .links-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .grid-header {
@@ -487,7 +489,7 @@ onMounted(() => {
   display: flex;
   gap: 1.5rem;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .stat-item {
@@ -497,11 +499,11 @@ onMounted(() => {
 }
 
 .stat-item i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .stat-item strong {
-  color: #334155;
+  color: var(--ms3-text-dark);
 }
 
 /* Bulk actions toolbar */
@@ -510,9 +512,9 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: 0.375rem;
 }
 
 .bulk-info {
@@ -520,7 +522,7 @@ onMounted(() => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -539,10 +541,10 @@ onMounted(() => {
 /* Link type badge */
 .link-type-badge {
   display: inline-block;
-  padding: 4px 10px;
-  background: #e0e7ff;
-  color: #3730a3;
-  border-radius: 4px;
+  padding: 0.25rem 0.625rem;
+  background: var(--ms3-bg-indigo);
+  color: var(--ms3-text-indigo);
+  border-radius: 0.25rem;
   font-size: 0.85rem;
   font-weight: 500;
 }
diff --git a/vueManager/src/components/ModelFieldsGrid.vue b/vueManager/src/components/ModelFieldsGrid.vue
index 2079303..360dfaa 100644
--- a/vueManager/src/components/ModelFieldsGrid.vue
+++ b/vueManager/src/components/ModelFieldsGrid.vue
@@ -1,25 +1,26 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputText from 'primevue/inputtext'
-import InputNumber from 'primevue/inputnumber'
+import Card from 'primevue/card'
 import Checkbox from 'primevue/checkbox'
-import Dropdown from 'primevue/dropdown'
-import Textarea from 'primevue/textarea'
-import Slider from 'primevue/slider'
-import Fieldset from 'primevue/fieldset'
-import Toast from 'primevue/toast'
+import Column from 'primevue/column'
 import ConfirmDialog from 'primevue/confirmdialog'
 import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
+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 { useToast } from 'primevue/usetoast'
+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 { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 const toast = useToast()
 const confirm = useConfirm()
@@ -406,7 +407,10 @@ async function saveSection() {
     if (isNewSection.value) {
       await request.post('/api/mgr/model-fields/sections', editingSection.value)
     } else {
-      await request.put(`/api/mgr/model-fields/sections/${editingSection.value.id}`, editingSection.value)
+      await request.put(
+        `/api/mgr/model-fields/sections/${editingSection.value.id}`,
+        editingSection.value
+      )
     }
 
     toast.add({
@@ -635,20 +639,20 @@ onMounted(async () => {
 <template>
   <div class="model-fields-grid">
     <Toast />
-    <ConfirmDialog group="model-fields" appendTo="self" />
+    <ConfirmDialog group="model-fields" append-to="self" />
 
     <p class="tab-description">{{ _('ms3_utilities_model_fields_description') }}</p>
 
     <!-- Model filter - top bar -->
     <div class="model-filter-bar mb-3">
-      <div style="display: flex; align-items: center; gap: 0.5rem;">
-        <label style="font-weight: 500;">{{ _('ms3_model_field_model') }}:</label>
-        <Dropdown
+      <div style="display: flex; align-items: center; gap: 0.5rem">
+        <label style="font-weight: 500">{{ _('ms3_model_field_model') }}:</label>
+        <Select
           v-model="filterModel"
           :options="models"
-          optionLabel="label"
-          optionValue="value"
-          style="width: 200px;"
+          option-label="label"
+          option-value="value"
+          style="width: 12.5rem"
           @change="onModelChange"
         />
       </div>
@@ -656,9 +660,9 @@ onMounted(async () => {
 
     <!-- Sections Panel (collapsible) -->
     <Panel
+      v-model:collapsed="sectionsPanelCollapsed"
       :header="_('ms3_model_sections_title')"
       :toggleable="true"
-      v-model:collapsed="sectionsPanelCollapsed"
       class="sections-panel mb-3"
     >
       <template #icons>
@@ -674,7 +678,7 @@ onMounted(async () => {
         :value="sections"
         :loading="sectionsLoading"
         size="small"
-        stripedRows
+        striped-rows
         class="sections-table"
       >
         <Column style="width: 3rem">
@@ -682,7 +686,7 @@ onMounted(async () => {
             <i class="pi pi-bars drag-handle"></i>
           </template>
         </Column>
-        <Column field="section_key" :header="_('ms3_model_section_key')" style="width: 150px">
+        <Column field="section_key" :header="_('ms3_model_section_key')" style="width: 9.375rem">
           <template #body="{ data }">
             <strong>{{ data.section_key }}</strong>
           </template>
@@ -692,7 +696,7 @@ onMounted(async () => {
             {{ data.label || '-' }}
           </template>
         </Column>
-        <Column :header="_('ms3_model_section_hidden')" style="width: 100px">
+        <Column :header="_('ms3_model_section_hidden')" style="width: 6.25rem">
           <template #body="{ data }">
             <Button
               :icon="data.hidden ? 'pi pi-eye-slash' : 'pi pi-eye'"
@@ -702,12 +706,14 @@ onMounted(async () => {
             />
           </template>
         </Column>
-        <Column :header="_('ms3_model_section_default')" style="width: 100px">
+        <Column :header="_('ms3_model_section_default')" style="width: 6.25rem">
           <template #body="{ data }">
-            <i :class="data.is_default ? 'pi pi-check text-green-500' : 'pi pi-minus text-gray-400'" />
+            <i
+              :class="data.is_default ? 'pi pi-check text-green-500' : 'pi pi-minus text-gray-400'"
+            />
           </template>
         </Column>
-        <Column :header="_('actions')" style="width: 120px">
+        <Column :header="_('actions')" style="width: 7.5rem">
           <template #body="{ data }">
             <Button
               icon="pi pi-pencil"
@@ -717,8 +723,8 @@ onMounted(async () => {
             <Button
               icon="pi pi-trash"
               class="p-button-sm p-button-text p-button-danger"
-              @click="deleteSection(data)"
               :disabled="data.is_default"
+              @click="deleteSection(data)"
             />
           </template>
         </Column>
@@ -731,7 +737,7 @@ onMounted(async () => {
     <!-- Fields Card -->
     <Card>
       <template #title>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="display: flex; justify-content: space-between; align-items: center">
           <span>{{ _('ms3_model_fields_title') }}</span>
           <Button
             :label="_('ms3_model_field_add')"
@@ -744,7 +750,7 @@ onMounted(async () => {
 
       <template #content>
         <!-- Fields table with VueDraggable -->
-        <div class="p-datatable p-component p-datatable-striped p-datatable-sm" v-if="!loading">
+        <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">
@@ -752,12 +758,12 @@ onMounted(async () => {
                   <th style="width: 3rem"></th>
                   <th>{{ _('ms3_model_field_name') }}</th>
                   <th>{{ _('ms3_model_field_label') }}</th>
-                  <th style="width: 120px">{{ _('ms3_model_field_section') }}</th>
-                  <th style="width: 100px">{{ _('ms3_model_field_width') }}</th>
-                  <th style="width: 120px">{{ _('ms3_model_field_xtype') }}</th>
-                  <th style="width: 80px">{{ _('ms3_model_field_visible') }}</th>
-                  <th style="width: 80px">{{ _('ms3_model_field_required') }}</th>
-                  <th style="width: 120px">{{ _('actions') }}</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
@@ -766,9 +772,9 @@ onMounted(async () => {
                 class="p-datatable-tbody"
                 handle=".drag-handle"
                 item-key="id"
-                @end="onDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onDragEnd"
               >
                 <template #item="{ element: field }">
                   <tr>
@@ -784,9 +790,7 @@ onMounted(async () => {
                     <td>
                       {{ getSectionLabel(field.section_id) }}
                     </td>
-                    <td>
-                      {{ field.width }}/12
-                    </td>
+                    <td>{{ field.width }}/12</td>
                     <td>
                       {{ getXtypeLabel(field.xtype) }}
                     </td>
@@ -799,7 +803,13 @@ onMounted(async () => {
                       />
                     </td>
                     <td>
-                      <i :class="field.required ? 'pi pi-check text-green-500' : 'pi pi-minus text-gray-400'" />
+                      <i
+                        :class="
+                          field.required
+                            ? 'pi pi-check text-green-500'
+                            : 'pi pi-minus text-gray-400'
+                        "
+                      />
                     </td>
                     <td>
                       <Button
@@ -836,22 +846,22 @@ onMounted(async () => {
       :header="isNewRecord ? _('ms3_model_field_add') : _('ms3_model_field_edit')"
       :modal="true"
       :closable="true"
-      style="width: 600px;"
-      appendTo="self"
+      style="width: 37.5rem"
+      append-to="self"
     >
       <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="grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
             <div class="field">
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_model') }} *</label>
-              <Dropdown
+              <Select
                 v-model="editingField.model"
                 :options="models"
-                optionLabel="label"
-                optionValue="value"
+                option-label="label"
+                option-value="value"
                 :disabled="!isNewRecord"
-                style="width: 100%;"
+                style="width: 100%"
               />
             </div>
 
@@ -859,7 +869,7 @@ onMounted(async () => {
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_name') }} *</label>
               <InputText
                 v-model="editingField.name"
-                style="width: 100%;"
+                style="width: 100%"
                 :placeholder="_('ms3_model_field_name_placeholder')"
               />
             </div>
@@ -869,31 +879,31 @@ onMounted(async () => {
             <label class="block mb-2 font-medium">{{ _('ms3_model_field_label') }}</label>
             <InputText
               v-model="editingField.label"
-              style="width: 100%;"
+              style="width: 100%"
               :placeholder="_('ms3_model_field_label_placeholder')"
             />
           </div>
 
-          <div class="grid mt-3" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+          <div class="grid mt-3" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
             <div class="field">
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_xtype') }}</label>
-              <Dropdown
+              <Select
                 v-model="editingField.xtype"
                 :options="xtypeOptions"
-                optionLabel="label"
-                optionValue="value"
-                style="width: 100%;"
+                option-label="label"
+                option-value="value"
+                style="width: 100%"
               />
             </div>
 
             <div class="field">
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_section') }}</label>
-              <Dropdown
+              <Select
                 v-model="editingField.section_id"
                 :options="sectionOptions"
-                optionLabel="label"
-                optionValue="id"
-                style="width: 100%;"
+                option-label="label"
+                option-value="id"
+                style="width: 100%"
               />
             </div>
           </div>
@@ -901,19 +911,17 @@ 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="grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
             <div class="field">
-              <label class="block mb-2 font-medium">{{ _('ms3_model_field_width') }} ({{ editingField.width }}/12)</label>
-              <Slider v-model="editingField.width" :min="1" :max="12" style="width: 100%;" />
+              <label class="block mb-2 font-medium"
+                >{{ _('ms3_model_field_width') }} ({{ editingField.width }}/12)</label
+              >
+              <Slider v-model="editingField.width" :min="1" :max="12" style="width: 100%" />
             </div>
 
             <div class="field">
               <label class="block mb-2 font-medium">{{ _('ms3_model_field_sort_order') }}</label>
-              <InputNumber
-                v-model="editingField.sort_order"
-                :min="0"
-                style="width: 100%;"
-              />
+              <InputNumber v-model="editingField.sort_order" :min="0" style="width: 100%" />
             </div>
           </div>
 
@@ -921,7 +929,7 @@ onMounted(async () => {
             <label class="block mb-2 font-medium">{{ _('ms3_model_field_placeholder') }}</label>
             <InputText
               v-model="editingField.placeholder"
-              style="width: 100%;"
+              style="width: 100%"
               :placeholder="_('ms3_model_field_placeholder_hint')"
             />
           </div>
@@ -930,19 +938,19 @@ onMounted(async () => {
             <label class="block mb-2 font-medium">{{ _('ms3_model_field_description') }}</label>
             <Textarea
               v-model="editingField.description"
-              style="width: 100%;"
+              style="width: 100%"
               rows="2"
               :placeholder="_('ms3_model_field_description_hint')"
             />
           </div>
 
-          <div class="field mt-3" style="display: flex; gap: 2rem;">
-            <div style="display: flex; align-items: center; gap: 0.5rem;">
-              <Checkbox v-model="editingField.visible" :binary="true" inputId="visible" />
+          <div class="field mt-3" style="display: flex; gap: 2rem">
+            <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>
             </div>
-            <div style="display: flex; align-items: center; gap: 0.5rem;">
-              <Checkbox v-model="editingField.required" :binary="true" inputId="required" />
+            <div style="display: flex; align-items: center; gap: 0.5rem">
+              <Checkbox v-model="editingField.required" :binary="true" input-id="required" />
               <label for="required">{{ _('ms3_model_field_required') }}</label>
             </div>
           </div>
@@ -958,7 +966,7 @@ onMounted(async () => {
             <label class="block mb-2 font-medium">{{ _('ms3_model_field_combo_source') }}</label>
             <Textarea
               v-model="comboSourceJson"
-              style="width: 100%; font-family: monospace; font-size: 12px;"
+              style="width: 100%; font-family: monospace; font-size: 0.75rem"
               rows="10"
               :placeholder="comboSourcePlaceholder"
               :class="{ 'p-invalid': comboSourceError }"
@@ -978,12 +986,7 @@ onMounted(async () => {
           class="p-button-text"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="saveField"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveField" />
       </template>
     </Dialog>
 
@@ -993,19 +996,19 @@ onMounted(async () => {
       :header="isNewSection ? _('ms3_model_section_add') : _('ms3_model_section_edit')"
       :modal="true"
       :closable="true"
-      style="width: 500px;"
-      appendTo="self"
+      style="width: 31.25rem"
+      append-to="self"
     >
       <div v-if="editingSection" class="edit-form">
         <div class="field mb-3">
           <label class="block mb-2 font-medium">{{ _('ms3_model_field_model') }} *</label>
-          <Dropdown
+          <Select
             v-model="editingSection.model"
             :options="models"
-            optionLabel="label"
-            optionValue="value"
+            option-label="label"
+            option-value="value"
             :disabled="!isNewSection"
-            style="width: 100%;"
+            style="width: 100%"
           />
         </div>
 
@@ -1014,7 +1017,7 @@ onMounted(async () => {
           <InputText
             v-model="editingSection.section_key"
             :disabled="!isNewSection"
-            style="width: 100%;"
+            style="width: 100%"
             :placeholder="_('ms3_model_section_key_placeholder')"
           />
           <small v-if="isNewSection" class="text-gray-500">
@@ -1026,7 +1029,7 @@ onMounted(async () => {
           <label class="block mb-2 font-medium">{{ _('ms3_model_section_label') }}</label>
           <InputText
             v-model="editingSection.label"
-            style="width: 100%;"
+            style="width: 100%"
             :placeholder="_('ms3_model_section_label_placeholder')"
           />
         </div>
@@ -1035,7 +1038,7 @@ onMounted(async () => {
           <label class="block mb-2 font-medium">{{ _('ms3_model_section_lexicon_key') }}</label>
           <InputText
             v-model="editingSection.lexicon_key"
-            style="width: 100%;"
+            style="width: 100%"
             :placeholder="_('ms3_model_section_lexicon_key_placeholder')"
           />
           <small class="text-gray-500">
@@ -1045,16 +1048,12 @@ onMounted(async () => {
 
         <div class="field mb-3">
           <label class="block mb-2 font-medium">{{ _('ms3_model_section_sort_order') }}</label>
-          <InputNumber
-            v-model="editingSection.sort_order"
-            :min="0"
-            style="width: 100%;"
-          />
+          <InputNumber v-model="editingSection.sort_order" :min="0" style="width: 100%" />
         </div>
 
         <div class="field mb-3">
-          <div style="display: flex; align-items: center; gap: 0.5rem;">
-            <Checkbox v-model="editingSection.hidden" :binary="true" inputId="section_hidden" />
+          <div style="display: flex; align-items: center; gap: 0.5rem">
+            <Checkbox v-model="editingSection.hidden" :binary="true" input-id="section_hidden" />
             <label for="section_hidden">{{ _('ms3_model_section_hidden') }}</label>
           </div>
         </div>
@@ -1067,12 +1066,7 @@ onMounted(async () => {
           class="p-button-text"
           @click="sectionDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="savingSec"
-          @click="saveSection"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="savingSec" @click="saveSection" />
       </template>
     </Dialog>
   </div>
@@ -1087,9 +1081,9 @@ onMounted(async () => {
 
 .model-filter-bar {
   padding: 0.75rem 1rem;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border: 1px solid #dee2e6;
+  background: var(--ms3-bg-muted);
+  border-radius: 0.375rem;
+  border: var(--ms3-border-width) solid var(--ms3-border-color-alt);
 }
 
 .sections-panel {
@@ -1098,7 +1092,7 @@ onMounted(async () => {
 
 .sections-panel :deep(.p-panel-header) {
   padding: 0.75rem 1rem;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 .sections-panel :deep(.p-panel-content) {
@@ -1142,14 +1136,14 @@ onMounted(async () => {
 
 .drag-handle {
   cursor: grab;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 1.2rem;
   padding: 0.5rem;
   user-select: none;
 }
 
 .drag-handle:hover {
-  color: #495057;
+  color: var(--ms3-text-hint);
 }
 
 .drag-handle:active {
@@ -1158,12 +1152,12 @@ onMounted(async () => {
 
 :deep(.ghost-row) {
   opacity: 0.5;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.sortable-drag) {
   opacity: 0.8;
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
   cursor: grabbing !important;
 }
 
@@ -1172,15 +1166,15 @@ onMounted(async () => {
   justify-content: center;
   align-items: center;
   padding: 3rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
 }
 
 :deep(.p-datatable-tbody tr:nth-child(even)) {
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.p-datatable-tbody tr:hover) {
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
 }
 
 :deep(.p-fieldset) {
diff --git a/vueManager/src/components/NotificationsGrid.vue b/vueManager/src/components/NotificationsGrid.vue
index cfbd68c..cfec621 100644
--- a/vueManager/src/components/NotificationsGrid.vue
+++ b/vueManager/src/components/NotificationsGrid.vue
@@ -1,21 +1,22 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+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 InputNumber from 'primevue/inputnumber'
-import Checkbox from 'primevue/checkbox'
-import Dropdown from 'primevue/dropdown'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
 import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 const toast = useToast()
 const confirm = useConfirm()
@@ -139,7 +140,10 @@ async function saveNotification() {
     if (isNewRecord.value) {
       await request.post('/api/mgr/notifications', editingNotification.value)
     } else {
-      await request.put(`/api/mgr/notifications/${editingNotification.value.id}`, editingNotification.value)
+      await request.put(
+        `/api/mgr/notifications/${editingNotification.value.id}`,
+        editingNotification.value
+      )
     }
 
     toast.add({
@@ -271,10 +275,7 @@ function getStatusStyle(statusId) {
 }
 
 const statusOptions = computed(() => {
-  return [
-    { id: null, name: _('ms3_notification_all_statuses') },
-    ...references.value.statuses,
-  ]
+  return [{ id: null, name: _('ms3_notification_all_statuses') }, ...references.value.statuses]
 })
 
 onMounted(async () => {
@@ -286,7 +287,7 @@ onMounted(async () => {
 <template>
   <div class="notifications-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -304,50 +305,52 @@ onMounted(async () => {
         </div>
 
         <!-- Filters -->
-        <div class="filters-form mb-3 p-3 surface-ground" style="border-radius: 6px;">
-          <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;">
-            <div style="flex: 1; min-width: 200px;">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">{{ _('ms3_notification_status') }}</label>
-              <Dropdown
+        <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"
-                optionLabel="name"
-                optionValue="id"
+                option-label="name"
+                option-value="id"
                 :placeholder="_('all')"
-                style="width: 100%;"
-                showClear
+                style="width: 100%"
+                show-clear
               />
             </div>
-            <div style="flex: 1; min-width: 150px;">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">{{ _('ms3_notification_channel') }}</label>
-              <Dropdown
+            <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"
-                optionLabel="name"
-                optionValue="id"
+                option-label="name"
+                option-value="id"
                 :placeholder="_('all')"
-                style="width: 100%;"
-                showClear
+                style="width: 100%"
+                show-clear
               />
             </div>
-            <div style="flex: 1; min-width: 150px;">
-              <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">{{ _('ms3_notification_recipient') }}</label>
-              <Dropdown
+            <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"
-                optionLabel="name"
-                optionValue="id"
+                option-label="name"
+                option-value="id"
                 :placeholder="_('all')"
-                style="width: 100%;"
-                showClear
+                style="width: 100%"
+                show-clear
               />
             </div>
-            <div style="display: flex; gap: 0.5rem;">
-              <Button
-                :label="_('apply')"
-                icon="pi pi-filter"
-                @click="applyFilters"
-              />
+            <div style="display: flex; gap: 0.5rem">
+              <Button :label="_('apply')" icon="pi pi-filter" @click="applyFilters" />
               <Button
                 :label="_('clear')"
                 icon="pi pi-filter-slash"
@@ -362,16 +365,12 @@ onMounted(async () => {
         <DataTable
           :value="notifications"
           :loading="loading"
-          stripedRows
-          responsiveLayout="scroll"
+          striped-rows
+          responsive-layout="scroll"
         >
-          <Column field="enabled" :header="_('ms3_notification_enabled')" style="width: 80px;">
+          <Column field="enabled" :header="_('ms3_notification_enabled')" style="width: 5rem">
             <template #body="{ data }">
-              <Checkbox
-                :modelValue="data.enabled"
-                :binary="true"
-                @click="toggleEnabled(data)"
-              />
+              <Checkbox :model-value="data.enabled" :binary="true" @click="toggleEnabled(data)" />
             </template>
           </Column>
 
@@ -383,10 +382,7 @@ onMounted(async () => {
 
           <Column field="status_id" :header="_('ms3_notification_status')">
             <template #body="{ data }">
-              <Tag
-                :value="getStatusName(data.status_id)"
-                :style="getStatusStyle(data.status_id)"
-              />
+              <Tag :value="getStatusName(data.status_id)" :style="getStatusStyle(data.status_id)" />
             </template>
           </Column>
 
@@ -421,22 +417,22 @@ onMounted(async () => {
             </template>
           </Column>
 
-          <Column :header="_('actions')" style="width: 120px;">
+          <Column :header="_('actions')" style="width: 7.5rem">
             <template #body="{ data }">
               <div class="actions-cell">
                 <Button
                   icon="pi pi-pencil"
                   text
                   severity="secondary"
-                  @click="editNotification(data)"
                   :title="_('edit')"
+                  @click="editNotification(data)"
                 />
                 <Button
                   icon="pi pi-trash"
                   text
                   severity="danger"
-                  @click="deleteNotification(data)"
                   :title="_('delete')"
+                  @click="deleteNotification(data)"
                 />
               </div>
             </template>
@@ -451,34 +447,34 @@ onMounted(async () => {
       :header="isNewRecord ? _('ms3_notification_add') : _('ms3_notification_edit')"
       :modal="true"
       :closable="true"
-      :style="{ width: '600px' }"
-      :appendTo="'self'"
+      :style="{ width: '37.5rem' }"
+      :append-to="'self'"
     >
       <div v-if="editingNotification" class="notification-form">
         <!-- Event -->
         <div class="form-row">
           <div class="form-col">
             <label for="event">{{ _('ms3_notification_event') }} *</label>
-            <Dropdown
+            <Select
               id="event"
               v-model="editingNotification.event"
               :options="references.events"
-              optionLabel="name"
-              optionValue="id"
+              option-label="name"
+              option-value="id"
               class="w-full"
             />
           </div>
           <div class="form-col">
             <label for="status_id">{{ _('ms3_notification_status') }}</label>
-            <Dropdown
+            <Select
               id="status_id"
               v-model="editingNotification.status_id"
               :options="statusOptions"
-              optionLabel="name"
-              optionValue="id"
+              option-label="name"
+              option-value="id"
               :placeholder="_('ms3_notification_all_statuses')"
               class="w-full"
-              showClear
+              show-clear
             />
           </div>
         </div>
@@ -487,23 +483,23 @@ onMounted(async () => {
         <div class="form-row">
           <div class="form-col">
             <label for="recipient_type">{{ _('ms3_notification_recipient') }} *</label>
-            <Dropdown
+            <Select
               id="recipient_type"
               v-model="editingNotification.recipient_type"
               :options="references.recipient_types"
-              optionLabel="name"
-              optionValue="id"
+              option-label="name"
+              option-value="id"
               class="w-full"
             />
           </div>
           <div class="form-col">
             <label for="channel">{{ _('ms3_notification_channel') }} *</label>
-            <Dropdown
+            <Select
               id="channel"
               v-model="editingNotification.channel"
               :options="references.channels"
-              optionLabel="name"
-              optionValue="id"
+              option-label="name"
+              option-value="id"
               class="w-full"
             />
           </div>
@@ -563,7 +559,7 @@ onMounted(async () => {
         <!-- Enabled -->
         <div class="form-row">
           <div class="checkbox-col">
-            <Checkbox inputId="enabled" v-model="editingNotification.enabled" :binary="true" />
+            <Checkbox v-model="editingNotification.enabled" input-id="enabled" :binary="true" />
             <label for="enabled">{{ _('ms3_notification_enabled') }}</label>
           </div>
         </div>
@@ -576,12 +572,7 @@ onMounted(async () => {
           class="p-button-text"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="saveNotification"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveNotification" />
       </template>
     </Dialog>
   </div>
@@ -589,7 +580,7 @@ onMounted(async () => {
 
 <style scoped>
 .notifications-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .toolbar {
@@ -629,7 +620,7 @@ onMounted(async () => {
 .form-col-full small.text-muted {
   display: block;
   margin-top: 0.25rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 0.75rem;
 }
 
@@ -660,7 +651,7 @@ onMounted(async () => {
 
 .text-ellipsis {
   display: block;
-  max-width: 200px;
+  max-width: 12.5rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/vueManager/src/components/OptionsChips.vue b/vueManager/src/components/OptionsChips.vue
index 85f5e94..d52b01e 100644
--- a/vueManager/src/components/OptionsChips.vue
+++ b/vueManager/src/components/OptionsChips.vue
@@ -1,25 +1,19 @@
 <template>
-  <div class="options-chips-wrapper" ref="wrapperRef">
+  <div ref="wrapperRef" class="options-chips-wrapper">
     <div class="chips-container" @click="focusInput">
       <!-- Display selected chips -->
-      <div
-        v-for="(chip, index) in localValue"
-        :key="index"
-        class="chip-item"
-      >
+      <div v-for="(chip, index) in localValue" :key="index" class="chip-item">
         <span class="chip-text">{{ chip }}</span>
-        <span
-          v-if="!disabled"
-          class="chip-remove"
-          @click.stop="removeChip(index)"
-        >×</span>
+        <span v-if="!disabled" class="chip-remove" @click.stop="removeChip(index)"
+          ><i class="pi pi-times"></i
+        ></span>
       </div>
 
       <!-- Input field for adding new values -->
       <input
+        :id="inputId"
         ref="inputRef"
         v-model="searchQuery"
-        :id="inputId"
         type="text"
         class="chip-input"
         :placeholder="localValue.length === 0 ? placeholder : ''"
@@ -33,10 +27,7 @@
     </div>
 
     <!-- Dropdown with suggestions -->
-    <div
-      v-if="showSuggestions && filteredOptions.length > 0"
-      class="suggestions-panel"
-    >
+    <div v-if="showSuggestions && filteredOptions.length > 0" class="suggestions-panel">
       <div
         v-for="(option, index) in filteredOptions"
         :key="index"
@@ -50,7 +41,8 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, nextTick } from 'vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
+
 import request from '../request.js'
 
 const props = defineProps({
@@ -220,16 +212,20 @@ function emitChange() {
 }
 
 // Watch for external changes
-watch(() => props.modelValue, (newValue) => {
-  localValue.value = [...(newValue || [])]
-}, { deep: true })
+watch(
+  () => props.modelValue,
+  newValue => {
+    localValue.value = [...(newValue || [])]
+  },
+  { deep: true }
+)
 
 // Setup label click handler on mount
 onMounted(() => {
   if (props.inputId && wrapperRef.value) {
     const label = document.querySelector(`label[for="${props.inputId}"]`)
     if (label) {
-      label.addEventListener('click', (e) => {
+      label.addEventListener('click', e => {
         e.preventDefault()
         focusInput()
       })
@@ -250,31 +246,31 @@ onMounted(() => {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem;
-  border: 1px solid #ced4da;
-  border-radius: 4px;
-  background: #ffffff;
-  min-height: 40px;
+  border: var(--ms3-border-width) solid var(--ms3-border-neutral);
+  border-radius: 0.25rem;
+  background: var(--ms3-bg-surface);
+  min-height: 2.5rem;
   cursor: text;
   transition: border-color 0.2s;
 }
 
 .chips-container:hover {
-  border-color: #94a3b8;
+  border-color: var(--ms3-text-light);
 }
 
 .chips-container:focus-within {
-  border-color: #3b82f6;
+  border-color: var(--ms3-accent-primary);
   outline: none;
-  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
+  box-shadow: 0 0 0 0.2rem var(--ms3-accent-focus);
 }
 
 .chip-item {
   display: inline-flex;
   align-items: center;
-  background: #3b82f6;
-  color: #ffffff;
+  background: var(--ms3-accent-primary);
+  color: var(--ms3-text-on-primary);
   padding: 0.25rem 0.5rem;
-  border-radius: 3px;
+  border-radius: 0.1875rem;
   font-size: 0.875rem;
   white-space: nowrap;
 }
@@ -284,8 +280,6 @@ onMounted(() => {
 }
 
 .chip-remove {
-  font-size: 1.25rem;
-  line-height: 1;
   cursor: pointer;
   margin-left: 0.375rem;
   opacity: 0.9;
@@ -293,12 +287,18 @@ onMounted(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
+  min-width: 1.125rem;
+  min-height: 1.125rem;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
-  font-weight: 700;
   user-select: none;
+  font-size: 0.65rem;
+}
+
+.chip-remove i {
+  font-size: inherit;
 }
 
 .chip-remove:hover {
@@ -313,12 +313,12 @@ onMounted(() => {
   outline: none;
   padding: 0.25rem;
   font-size: 1rem;
-  min-width: 120px;
+  min-width: 7.5rem;
   background: transparent;
 }
 
 .chip-input:disabled {
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
   cursor: not-allowed;
 }
 
@@ -328,13 +328,13 @@ onMounted(() => {
   left: 0;
   right: 0;
   z-index: 1000;
-  background: #ffffff;
-  border: 1px solid #ced4da;
-  border-radius: 4px;
+  background: var(--ms3-bg-surface);
+  border: var(--ms3-border-width) solid var(--ms3-border-neutral);
+  border-radius: 0.25rem;
   margin-top: 0.25rem;
-  max-height: 200px;
+  max-height: 12.5rem;
   overflow-y: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--ms3-shadow-dropdown);
 }
 
 .suggestion-item {
@@ -344,6 +344,6 @@ onMounted(() => {
 }
 
 .suggestion-item:hover {
-  background: #f1f5f9;
+  background: var(--ms3-bg-slate-alt);
 }
 </style>
diff --git a/vueManager/src/components/OrderView.vue b/vueManager/src/components/OrderView.vue
index c23173e..ea74087 100644
--- a/vueManager/src/components/OrderView.vue
+++ b/vueManager/src/components/OrderView.vue
@@ -1,27 +1,31 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
+import { useLexicon } from '@vuetools/useLexicon'
+import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
-import InputText from 'primevue/inputtext'
-import InputNumber from 'primevue/inputnumber'
-import Textarea from 'primevue/textarea'
-import Select from 'primevue/select'
 import Checkbox from 'primevue/checkbox'
-import DatePicker from 'primevue/datepicker'
-import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
-import Tag from 'primevue/tag'
-import Fieldset from 'primevue/fieldset'
-import TabView from 'primevue/tabview'
-import TabPanel from 'primevue/tabpanel'
-import Toast from 'primevue/toast'
 import ConfirmDialog from 'primevue/confirmdialog'
+import DataTable from 'primevue/datatable'
+import DatePicker from 'primevue/datepicker'
 import Dialog from 'primevue/dialog'
+import Fieldset from 'primevue/fieldset'
+import InputNumber from 'primevue/inputnumber'
+import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import AutoComplete from 'primevue/autocomplete'
-import { useToast } from 'primevue/usetoast'
+import Select from 'primevue/select'
+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 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 { computed, onMounted, ref } from 'vue'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 const toast = useToast()
 const confirm = useConfirm()
@@ -92,6 +96,9 @@ const customerSuggestions = ref([])
 const searchingCustomers = ref(false)
 const createCustomerFromData = ref(false)
 
+// Order tabs
+const orderActiveTab = ref('info')
+
 // Duplicate customer dialog state
 const showDuplicateDialog = ref(false)
 const duplicateCustomer = ref(null)
@@ -100,7 +107,7 @@ const pendingOrderData = ref(null)
 const orderId = computed(() => {
   // Try to get from ms3.config first
   // Note: ms3 is a global variable (not window.ms3) because it's declared with 'let'
-  // eslint-disable-next-line no-undef
+
   const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
   if (ms3Config?.order_id) {
     const configId = ms3Config.order_id
@@ -120,7 +127,6 @@ const isCreateMode = computed(() => {
 
 // Draft status ID (typically 1)
 const draftStatusId = computed(() => {
-  // eslint-disable-next-line no-undef
   const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
   return ms3Config?.status_draft || 1
 })
@@ -266,13 +272,16 @@ async function loadOrderFields() {
 
     // Populate legacy refs for backward compatibility (extract options from new format)
     if (orderComboOptions.value.status_id) {
-      statuses.value = orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
+      statuses.value =
+        orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
     }
     if (orderComboOptions.value.delivery_id) {
-      deliveries.value = orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
+      deliveries.value =
+        orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
     }
     if (orderComboOptions.value.payment_id) {
-      payments.value = orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
+      payments.value =
+        orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
     }
   } catch (error) {
     console.error('[OrderView] Error loading order fields:', error)
@@ -357,7 +366,13 @@ async function loadProductsGridConfig() {
  */
 function getDefaultProductsColumns() {
   return [
-    { name: 'name', label: _('order_product_name'), visible: true, type: 'template', template: '{name}' },
+    {
+      name: 'name',
+      label: _('order_product_name'),
+      visible: true,
+      type: 'template',
+      template: '{name}',
+    },
     { name: 'count', label: _('order_product_count'), visible: true, type: 'number' },
     { name: 'price', label: _('order_product_price'), visible: true, type: 'price' },
     { name: 'cost', label: _('order_product_cost'), visible: true, type: 'price' },
@@ -387,7 +402,7 @@ function formatOptions(options) {
     }
   }
   if (Array.isArray(options)) {
-    return options.map(opt => typeof opt === 'object' ? `${opt.key}: ${opt.value}` : opt)
+    return options.map(opt => (typeof opt === 'object' ? `${opt.key}: ${opt.value}` : opt))
   }
   if (typeof options === 'object') {
     return Object.entries(options).map(([key, value]) => `${key}: ${value}`)
@@ -501,9 +516,7 @@ async function initOptionsFromProduct(options) {
   optionsTableData.value = tableData
 
   // Store JSON text
-  optionsJsonText.value = Object.keys(parsed).length > 0
-    ? JSON.stringify(parsed, null, 2)
-    : ''
+  optionsJsonText.value = Object.keys(parsed).length > 0 ? JSON.stringify(parsed, null, 2) : ''
 }
 
 /**
@@ -614,9 +627,7 @@ function syncTableToJson() {
       }
     }
   }
-  optionsJsonText.value = Object.keys(obj).length > 0
-    ? JSON.stringify(obj, null, 2)
-    : ''
+  optionsJsonText.value = Object.keys(obj).length > 0 ? JSON.stringify(obj, null, 2) : ''
   optionsJsonError.value = ''
 }
 
@@ -724,10 +735,7 @@ async function saveEditedProduct() {
       options: getOptionsForSave(),
     }
 
-    await request.put(
-      `/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`,
-      data,
-    )
+    await request.put(`/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`, data)
 
     toast.add({
       severity: 'success',
@@ -739,10 +747,7 @@ async function saveEditedProduct() {
     editProductDialogVisible.value = false
 
     // Reload products and order to update totals
-    await Promise.all([
-      loadProducts(),
-      loadOrder(),
-    ])
+    await Promise.all([loadProducts(), loadOrder()])
   } catch (error) {
     console.error('[OrderView] Error saving product:', error)
     toast.add({
@@ -862,10 +867,7 @@ async function saveNewProduct() {
     addProductDialogVisible.value = false
 
     // Reload products and order to update totals
-    await Promise.all([
-      loadProducts(),
-      loadOrder(),
-    ])
+    await Promise.all([loadProducts(), loadOrder()])
   } catch (error) {
     console.error('[OrderView] Error adding product:', error)
     toast.add({
@@ -911,9 +913,7 @@ function deleteProduct(product) {
     acceptClass: 'p-button-danger',
     accept: async () => {
       try {
-        await request.delete(
-          `/api/mgr/orders/${orderId.value}/products/${product.id}`,
-        )
+        await request.delete(`/api/mgr/orders/${orderId.value}/products/${product.id}`)
 
         toast.add({
           severity: 'success',
@@ -923,10 +923,7 @@ function deleteProduct(product) {
         })
 
         // Reload products and order to update totals
-        await Promise.all([
-          loadProducts(),
-          loadOrder(),
-        ])
+        await Promise.all([loadProducts(), loadOrder()])
       } catch (error) {
         console.error('[OrderView] Error deleting product:', error)
         toast.add({
@@ -1079,7 +1076,15 @@ function getAddressFieldCompareField(fieldName) {
  */
 function isFieldEditable(fieldName) {
   // Read-only fields
-  const readOnlyFields = ['num', 'createdon', 'updatedon', 'cost', 'cart_cost', 'delivery_cost', 'weight']
+  const readOnlyFields = [
+    'num',
+    'createdon',
+    'updatedon',
+    'cost',
+    'cart_cost',
+    'delivery_cost',
+    'weight',
+  ]
   return !readOnlyFields.includes(fieldName)
 }
 
@@ -1750,13 +1755,13 @@ function getStatusSeverity(color) {
   const colorMap = {
     '#97b94d': 'success',
     '#81d742': 'success',
-    'green': 'success',
+    green: 'success',
     '#dd3d36': 'danger',
-    'red': 'danger',
+    red: 'danger',
     '#f0ad4e': 'warn',
-    'yellow': 'warn',
+    yellow: 'warn',
     '#5bc0de': 'info',
-    'blue': 'info',
+    blue: 'info',
   }
   return colorMap[color?.toLowerCase()] || 'secondary'
 }
@@ -1775,17 +1780,17 @@ onMounted(async () => {
 <template>
   <div class="order-view">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <!-- Edit Product Dialog -->
     <Dialog
       v-model:visible="editProductDialogVisible"
       :header="_('order_product_edit')"
-      :style="{ width: '650px' }"
+      :style="{ width: '40.625rem' }"
       :modal="true"
       :closable="!savingProduct"
-      :closeOnEscape="!savingProduct"
-      appendTo="self"
+      :close-on-escape="!savingProduct"
+      append-to="self"
     >
       <div v-if="editingProduct" class="edit-product-form">
         <!-- Product name (readonly) -->
@@ -1802,7 +1807,7 @@ onMounted(async () => {
             v-model="editProductForm.count"
             :min="1"
             :max="9999"
-            showButtons
+            show-buttons
             class="w-full"
           />
         </div>
@@ -1814,8 +1819,8 @@ onMounted(async () => {
             id="edit-price"
             v-model="editProductForm.price"
             :min="0"
-            :minFractionDigits="0"
-            :maxFractionDigits="2"
+            :min-fraction-digits="0"
+            :max-fraction-digits="2"
             class="w-full"
           />
         </div>
@@ -1827,8 +1832,8 @@ onMounted(async () => {
             id="edit-weight"
             v-model="editProductForm.weight"
             :min="0"
-            :minFractionDigits="0"
-            :maxFractionDigits="3"
+            :min-fraction-digits="0"
+            :max-fraction-digits="3"
             class="w-full"
           />
         </div>
@@ -1863,20 +1868,16 @@ onMounted(async () => {
 
           <!-- Table mode -->
           <div v-if="optionsEditMode === 'table'" class="options-table">
-            <div
-              v-for="(row, index) in optionsTableData"
-              :key="index"
-              class="options-row"
-            >
+            <div v-for="(row, index) in optionsTableData" :key="index" class="options-row">
               <!-- Type selector -->
               <Select
                 v-model="row.type"
                 :options="[
                   { value: 'field', label: _('options_type_field') },
-                  { value: 'custom', label: _('options_type_custom') }
+                  { value: 'custom', label: _('options_type_custom') },
                 ]"
-                optionLabel="label"
-                optionValue="value"
+                option-label="label"
+                option-value="value"
                 class="options-type-select"
                 @change="onOptionTypeChange(row)"
               />
@@ -1886,8 +1887,8 @@ onMounted(async () => {
                 <Select
                   v-model="row.key"
                   :options="productOptionFields"
-                  optionLabel="label"
-                  optionValue="name"
+                  option-label="label"
+                  option-value="name"
                   :placeholder="_('options_select_field')"
                   class="options-key-input"
                   @change="onFieldKeyChange(row)"
@@ -1897,8 +1898,8 @@ onMounted(async () => {
                   v-if="row.fieldValues.length > 0"
                   v-model="row.value"
                   :options="row.fieldValues"
-                  optionLabel="label"
-                  optionValue="value"
+                  option-label="label"
+                  option-value="value"
                   :placeholder="_('options_select_value')"
                   :loading="row.loadingValues"
                   editable
@@ -1978,14 +1979,14 @@ onMounted(async () => {
           :label="_('cancel')"
           icon="pi pi-times"
           severity="secondary"
-          @click="cancelEditProduct"
           :disabled="savingProduct"
+          @click="cancelEditProduct"
         />
         <Button
           :label="_('save')"
           icon="pi pi-check"
-          @click="saveEditedProduct"
           :loading="savingProduct"
+          @click="saveEditedProduct"
         />
       </template>
     </Dialog>
@@ -1994,11 +1995,11 @@ onMounted(async () => {
     <Dialog
       v-model:visible="addProductDialogVisible"
       :header="_('order_add_product_title')"
-      :style="{ width: '550px' }"
+      :style="{ width: '34.375rem' }"
       :modal="true"
       :closable="!savingNewProduct"
-      :closeOnEscape="!savingNewProduct"
-      appendTo="self"
+      :close-on-escape="!savingNewProduct"
+      append-to="self"
     >
       <div class="add-product-form">
         <!-- Product search -->
@@ -2007,13 +2008,13 @@ onMounted(async () => {
           <AutoComplete
             v-model="selectedProduct"
             :suggestions="productSuggestions"
-            @complete="searchProducts"
-            @item-select="onProductSelect"
-            optionLabel="display"
+            option-label="display"
             :placeholder="_('order_search_product')"
             :loading="searchingProducts"
             class="w-full"
-            :minLength="2"
+            :min-length="2"
+            @complete="searchProducts"
+            @item-select="onProductSelect"
           >
             <template #option="{ option }">
               <div class="ms3-product-suggestion">
@@ -2051,11 +2052,7 @@ onMounted(async () => {
             <!-- Count -->
             <div class="field mb-3">
               <label>{{ _('order_product_count') }}</label>
-              <InputNumber
-                v-model="addProductForm.count"
-                :min="1"
-                class="w-full"
-              />
+              <InputNumber v-model="addProductForm.count" :min="1" class="w-full" />
             </div>
 
             <!-- Price -->
@@ -2064,8 +2061,8 @@ onMounted(async () => {
               <InputNumber
                 v-model="addProductForm.price"
                 mode="decimal"
-                :minFractionDigits="2"
-                :maxFractionDigits="2"
+                :min-fraction-digits="2"
+                :max-fraction-digits="2"
                 class="w-full"
               />
             </div>
@@ -2076,8 +2073,8 @@ onMounted(async () => {
               <InputNumber
                 v-model="addProductForm.weight"
                 mode="decimal"
-                :minFractionDigits="3"
-                :maxFractionDigits="3"
+                :min-fraction-digits="3"
+                :max-fraction-digits="3"
                 class="w-full"
               />
             </div>
@@ -2096,15 +2093,15 @@ onMounted(async () => {
           :label="_('cancel')"
           icon="pi pi-times"
           severity="secondary"
-          @click="cancelAddProduct"
           :disabled="savingNewProduct"
+          @click="cancelAddProduct"
         />
         <Button
           :label="_('save')"
           icon="pi pi-check"
-          @click="saveNewProduct"
           :loading="savingNewProduct"
           :disabled="!selectedProduct || !selectedProduct.id"
+          @click="saveNewProduct"
         />
       </template>
     </Dialog>
@@ -2113,10 +2110,10 @@ onMounted(async () => {
     <Dialog
       v-model:visible="showDuplicateDialog"
       :header="_('ms3_customer_duplicate_found')"
-      :style="{ width: '500px' }"
+      :style="{ width: '31.25rem' }"
       :modal="true"
       :closable="true"
-      appendTo="self"
+      append-to="self"
       @hide="cancelDuplicateDialog"
     >
       <div class="duplicate-customer-dialog">
@@ -2128,7 +2125,9 @@ onMounted(async () => {
         <div v-if="duplicateCustomer" class="duplicate-customer-info">
           <div class="info-row">
             <span class="info-label">{{ _('customer_name') }}:</span>
-            <span class="info-value">{{ duplicateCustomer.first_name }} {{ duplicateCustomer.last_name }}</span>
+            <span class="info-value"
+              >{{ duplicateCustomer.first_name }} {{ duplicateCustomer.last_name }}</span
+            >
           </div>
           <div v-if="duplicateCustomer.email" class="info-row">
             <span class="info-label">Email:</span>
@@ -2186,528 +2185,583 @@ onMounted(async () => {
     </div>
 
     <template v-else-if="order">
-      <TabView>
-        <!-- Order Info Tab -->
-        <TabPanel :header="_('order_info')">
-          <!-- Static Order Summary Section (only in edit mode) -->
-          <Fieldset v-if="!isCreateMode" :legend="_('order_summary')" class="mb-3 order-summary-section" :toggleable="false">
-            <div class="order-summary-grid">
-              <!-- Order number -->
-              <div class="summary-item summary-num">
-                <span class="summary-label">{{ _('order_num') }}</span>
-                <span class="summary-value summary-value-lg">{{ order.num ? '#' + order.num : '-' }}</span>
-              </div>
-              <!-- Total cost -->
-              <div class="summary-item summary-cost">
-                <span class="summary-label">{{ _('order_cost') }}</span>
-                <span class="summary-value summary-value-lg summary-value-primary">{{ order.cost_formatted || formatPrice(order.cost) }}</span>
-              </div>
-              <!-- Cart cost -->
-              <div class="summary-item">
-                <span class="summary-label">{{ _('order_cart_cost') }}</span>
-                <span class="summary-value">{{ order.cart_cost_formatted || formatPrice(order.cart_cost) }}</span>
-              </div>
-              <!-- Delivery cost -->
-              <div class="summary-item">
-                <span class="summary-label">{{ _('order_delivery_cost') }}</span>
-                <span class="summary-value">{{ order.delivery_cost_formatted || formatPrice(order.delivery_cost) }}</span>
-              </div>
-              <!-- Weight -->
-              <div class="summary-item">
-                <span class="summary-label">{{ _('order_weight') }}</span>
-                <span class="summary-value">{{ order.weight_formatted || order.weight || '-' }}</span>
-              </div>
-              <!-- Created date -->
-              <div class="summary-item">
-                <span class="summary-label">{{ _('order_createdon') }}</span>
-                <span class="summary-value">{{ formatDate(order.createdon) }}</span>
-              </div>
-              <!-- Updated date -->
-              <div class="summary-item">
-                <span class="summary-label">{{ _('order_updatedon') }}</span>
-                <span class="summary-value">{{ formatDate(order.updatedon) }}</span>
-              </div>
-            </div>
-          </Fieldset>
-
-          <!-- Order sections with fields (dynamic from configuration) -->
-          <template v-for="section in orderFieldsBySection" :key="section.id || 'no_section'">
-            <Fieldset :legend="section.label" class="mb-3" :toggleable="true">
-              <div class="fields-grid">
-                <template v-for="field in section.fields" :key="field.id">
-                  <div :class="['field-wrapper', getFieldWidthClass(field)]">
-                    <div class="field">
-                      <label>{{ field.label_display || field.label || field.name }}</label>
-
-                      <!-- Read-only fields -->
-                      <template v-if="!isFieldEditable(field.name)">
-                        <div class="field-value">{{ getFieldDisplayValue(field, order[field.name]) }}</div>
-                      </template>
-
-                      <!-- Combo (Select) -->
-                      <template v-else-if="field.xtype === 'combo'">
-                        <Select
-                          v-model="order[getFieldCompareField(field.name)]"
-                          :options="getFieldOptions(field.name)"
-                          optionLabel="label"
-                          optionValue="value"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Textarea -->
-                      <template v-else-if="field.xtype === 'textarea'">
-                        <Textarea
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          rows="3"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Number field -->
-                      <template v-else-if="field.xtype === 'numberfield'">
-                        <InputNumber
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                          :minFractionDigits="0"
-                          :maxFractionDigits="2"
-                        />
-                      </template>
-
-                      <!-- Date field -->
-                      <template v-else-if="field.xtype === 'datefield'">
-                        <DatePicker
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                          dateFormat="dd.mm.yy"
-                          showTime
-                          hourFormat="24"
-                        />
-                      </template>
-
-                      <!-- Checkbox -->
-                      <template v-else-if="field.xtype === 'checkbox'">
-                        <div class="flex align-items-center">
-                          <Checkbox v-model="order[field.name]" :binary="true" />
-                        </div>
-                      </template>
-
-                      <!-- Text field (default) -->
-                      <template v-else>
-                        <InputText
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Description/help text -->
-                      <small v-if="field.description_display" class="field-description">
-                        {{ field.description_display }}
-                      </small>
-                    </div>
-                  </div>
-                </template>
+      <Tabs v-model:value="orderActiveTab">
+        <TabList>
+          <Tab value="info">{{ _('order_info') }}</Tab>
+          <Tab v-if="!isCreateMode" value="products">{{ _('order_products') }}</Tab>
+          <Tab value="address">{{ _('order_address') }}</Tab>
+          <Tab v-if="!isCreateMode" value="history">{{ _('order_history') }}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel value="info">
+            <!-- Static Order Summary Section (only in edit mode) -->
+            <Fieldset
+              v-if="!isCreateMode"
+              :legend="_('order_summary')"
+              class="mb-3 order-summary-section"
+              :toggleable="false"
+            >
+              <div class="order-summary-grid">
+                <!-- Order number -->
+                <div class="summary-item summary-num">
+                  <span class="summary-label">{{ _('order_num') }}</span>
+                  <span class="summary-value summary-value-lg">{{
+                    order.num ? '#' + order.num : '-'
+                  }}</span>
+                </div>
+                <!-- Total cost -->
+                <div class="summary-item summary-cost">
+                  <span class="summary-label">{{ _('order_cost') }}</span>
+                  <span class="summary-value summary-value-lg summary-value-primary">{{
+                    order.cost_formatted || formatPrice(order.cost)
+                  }}</span>
+                </div>
+                <!-- Cart cost -->
+                <div class="summary-item">
+                  <span class="summary-label">{{ _('order_cart_cost') }}</span>
+                  <span class="summary-value">{{
+                    order.cart_cost_formatted || formatPrice(order.cart_cost)
+                  }}</span>
+                </div>
+                <!-- Delivery cost -->
+                <div class="summary-item">
+                  <span class="summary-label">{{ _('order_delivery_cost') }}</span>
+                  <span class="summary-value">{{
+                    order.delivery_cost_formatted || formatPrice(order.delivery_cost)
+                  }}</span>
+                </div>
+                <!-- Weight -->
+                <div class="summary-item">
+                  <span class="summary-label">{{ _('order_weight') }}</span>
+                  <span class="summary-value">{{
+                    order.weight_formatted || order.weight || '-'
+                  }}</span>
+                </div>
+                <!-- Created date -->
+                <div class="summary-item">
+                  <span class="summary-label">{{ _('order_createdon') }}</span>
+                  <span class="summary-value">{{ formatDate(order.createdon) }}</span>
+                </div>
+                <!-- Updated date -->
+                <div class="summary-item">
+                  <span class="summary-label">{{ _('order_updatedon') }}</span>
+                  <span class="summary-value">{{ formatDate(order.updatedon) }}</span>
+                </div>
               </div>
             </Fieldset>
-          </template>
 
-          <!-- Fallback if no fields configured -->
-          <div v-if="orderFieldsBySection.length === 0" class="no-fields-message">
-            <p>{{ _('ms3_model_fields_empty') }}</p>
-          </div>
-
-          <!-- Draft order finalization panel -->
-          <Message v-if="!isCreateMode && isDraft" severity="info" :closable="false" class="finalize-info-panel mt-3">
-            <template #icon>
-              <i class="pi pi-info-circle"></i>
+            <!-- Order sections with fields (dynamic from configuration) -->
+            <template v-for="section in orderFieldsBySection" :key="section.id || 'no_section'">
+              <Fieldset :legend="section.label" class="mb-3" :toggleable="true">
+                <div class="fields-grid">
+                  <template v-for="field in section.fields" :key="field.id">
+                    <div :class="['field-wrapper', getFieldWidthClass(field)]">
+                      <div class="field">
+                        <label>{{ field.label_display || field.label || field.name }}</label>
+
+                        <!-- Read-only fields -->
+                        <template v-if="!isFieldEditable(field.name)">
+                          <div class="field-value">
+                            {{ getFieldDisplayValue(field, order[field.name]) }}
+                          </div>
+                        </template>
+
+                        <!-- Combo (Select) -->
+                        <template v-else-if="field.xtype === 'combo'">
+                          <Select
+                            v-model="order[getFieldCompareField(field.name)]"
+                            :options="getFieldOptions(field.name)"
+                            option-label="label"
+                            option-value="value"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Textarea -->
+                        <template v-else-if="field.xtype === 'textarea'">
+                          <Textarea
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            rows="3"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Number field -->
+                        <template v-else-if="field.xtype === 'numberfield'">
+                          <InputNumber
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                            :min-fraction-digits="0"
+                            :max-fraction-digits="2"
+                          />
+                        </template>
+
+                        <!-- Date field -->
+                        <template v-else-if="field.xtype === 'datefield'">
+                          <DatePicker
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                            date-format="dd.mm.yy"
+                            show-time
+                            hour-format="24"
+                          />
+                        </template>
+
+                        <!-- Checkbox -->
+                        <template v-else-if="field.xtype === 'checkbox'">
+                          <div class="flex align-items-center">
+                            <Checkbox v-model="order[field.name]" :binary="true" />
+                          </div>
+                        </template>
+
+                        <!-- Text field (default) -->
+                        <template v-else>
+                          <InputText
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Description/help text -->
+                        <small v-if="field.description_display" class="field-description">
+                          {{ field.description_display }}
+                        </small>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </Fieldset>
             </template>
-            <div class="finalize-info-content">
-              <p class="finalize-info-text">{{ _('ms3_order_finalize_info') }}</p>
+
+            <!-- Fallback if no fields configured -->
+            <div v-if="orderFieldsBySection.length === 0" class="no-fields-message">
+              <p>{{ _('ms3_model_fields_empty') }}</p>
+            </div>
+
+            <!-- Draft order finalization panel -->
+            <Message
+              v-if="!isCreateMode && isDraft"
+              severity="info"
+              :closable="false"
+              class="finalize-info-panel mt-3"
+            >
+              <template #icon>
+                <i class="pi pi-info-circle"></i>
+              </template>
+              <div class="finalize-info-content">
+                <p class="finalize-info-text">{{ _('ms3_order_finalize_info') }}</p>
+                <Button
+                  :label="_('ms3_order_finalize_btn')"
+                  icon="pi pi-check-circle"
+                  severity="success"
+                  :loading="finalizing"
+                  class="finalize-button"
+                  @click="confirmFinalizeOrder"
+                />
+              </div>
+            </Message>
+
+            <!-- Save/Create button -->
+            <div class="actions-bar mt-3">
               <Button
-                :label="_('ms3_order_finalize_btn')"
-                icon="pi pi-check-circle"
+                v-if="isCreateMode"
+                :label="_('ms3_order_create')"
+                icon="pi pi-plus"
                 severity="success"
-                :loading="finalizing"
-                @click="confirmFinalizeOrder"
-                class="finalize-button"
+                :loading="saving"
+                @click="createOrder"
+              />
+              <Button
+                v-else
+                :label="_('save')"
+                icon="pi pi-check"
+                :loading="saving"
+                @click="saveOrder"
+              />
+              <Button
+                :label="_('cancel')"
+                icon="pi pi-times"
+                severity="secondary"
+                @click="goBack"
               />
             </div>
-          </Message>
+          </TabPanel>
 
-          <!-- Save/Create button -->
-          <div class="actions-bar mt-3">
-            <Button
-              v-if="isCreateMode"
-              :label="_('ms3_order_create')"
-              icon="pi pi-plus"
-              severity="success"
-              :loading="saving"
-              @click="createOrder"
-            />
-            <Button
-              v-else
-              :label="_('save')"
-              icon="pi pi-check"
-              :loading="saving"
-              @click="saveOrder"
-            />
-            <Button
-              :label="_('cancel')"
-              icon="pi pi-times"
-              severity="secondary"
-              @click="goBack"
-            />
-          </div>
-        </TabPanel>
-
-        <!-- Products Tab (dynamic columns from grid config) - hidden in create mode -->
-        <TabPanel v-if="!isCreateMode" :header="_('order_products')">
-          <div class="products-toolbar mb-3">
-            <Button
-              :label="_('order_add_product')"
-              icon="pi pi-plus"
-              severity="primary"
-              size="small"
-              @click="openAddProductDialog"
-            />
-          </div>
-          <DataTable :value="products" stripedRows responsiveLayout="scroll">
-            <template v-for="column in productsColumns.filter(c => c.visible)" :key="column.name">
-              <!-- Image column -->
-              <Column
-                v-if="column.type === 'image'"
-                :field="column.name"
-                :header="column.label"
-                :style="{ width: column.width }"
-              >
-                <template #body="{ data }">
-                  <img
-                    v-if="data[column.name]"
-                    :src="data[column.name]"
-                    :alt="data.name"
-                    class="product-thumbnail"
-                    :style="{ width: (column.width || 50) + 'px', height: (column.height || 50) + 'px', objectFit: 'cover' }"
-                  />
-                  <span v-else class="no-image">—</span>
-                </template>
-              </Column>
-
-              <!-- Options column (chips) -->
-              <Column
-                v-else-if="column.type === 'options'"
-                :field="column.name"
-                :header="column.label"
-                :style="{ width: column.width, minWidth: column.minWidth }"
-              >
-                <template #body="{ data }">
-                  <div class="options-chips">
-                    <Tag
-                      v-for="(opt, idx) in formatOptions(data[column.name])"
-                      :key="idx"
-                      :value="opt"
-                      severity="secondary"
-                      class="mr-1 mb-1"
+          <!-- Products Tab (dynamic columns from grid config) - hidden in create mode -->
+          <TabPanel v-if="!isCreateMode" value="products">
+            <div class="products-toolbar mb-3">
+              <Button
+                :label="_('order_add_product')"
+                icon="pi pi-plus"
+                severity="primary"
+                size="small"
+                @click="openAddProductDialog"
+              />
+            </div>
+            <DataTable :value="products" striped-rows responsive-layout="scroll">
+              <template v-for="column in productsColumns.filter(c => c.visible)" :key="column.name">
+                <!-- Image column -->
+                <Column
+                  v-if="column.type === 'image'"
+                  :field="column.name"
+                  :header="column.label"
+                  :style="{ width: column.width }"
+                >
+                  <template #body="{ data }">
+                    <img
+                      v-if="data[column.name]"
+                      :src="data[column.name]"
+                      :alt="data.name"
+                      class="product-thumbnail"
+                      :style="{
+                        width: (column.width || 50) + 'px',
+                        height: (column.height || 50) + 'px',
+                        objectFit: 'cover',
+                      }"
                     />
-                    <span v-if="!formatOptions(data[column.name]).length">—</span>
-                  </div>
-                </template>
-              </Column>
-
-              <!-- Price column -->
-              <Column
-                v-else-if="column.type === 'price'"
-                :field="column.name"
-                :header="column.label"
-                :sortable="column.sortable"
-                :style="{ width: column.width, minWidth: column.minWidth }"
-              >
-                <template #body="{ data }">
-                  {{ formatPrice(data[column.name]) }}
-                </template>
-              </Column>
-
-              <!-- Number column -->
-              <Column
-                v-else-if="column.type === 'number'"
-                :field="column.name"
-                :header="column.label"
-                :sortable="column.sortable"
-                :style="{ width: column.width, minWidth: column.minWidth }"
-              >
-                <template #body="{ data }">
-                  {{ data[column.name] }}
-                </template>
-              </Column>
-
-              <!-- Weight column -->
-              <Column
-                v-else-if="column.type === 'weight'"
-                :field="column.name"
-                :header="column.label"
-                :sortable="column.sortable"
-                :style="{ width: column.width, minWidth: column.minWidth }"
-              >
-                <template #body="{ data }">
-                  {{ data[column.name + '_formatted'] || data[column.name] }}
-                </template>
-              </Column>
+                    <span v-else class="no-image">—</span>
+                  </template>
+                </Column>
+
+                <!-- Options column (chips) -->
+                <Column
+                  v-else-if="column.type === 'options'"
+                  :field="column.name"
+                  :header="column.label"
+                  :style="{ width: column.width, minWidth: column.minWidth }"
+                >
+                  <template #body="{ data }">
+                    <div class="options-chips">
+                      <Tag
+                        v-for="(opt, idx) in formatOptions(data[column.name])"
+                        :key="idx"
+                        :value="opt"
+                        severity="secondary"
+                        class="mr-1 mb-1"
+                      />
+                      <span v-if="!formatOptions(data[column.name]).length">—</span>
+                    </div>
+                  </template>
+                </Column>
+
+                <!-- Price column -->
+                <Column
+                  v-else-if="column.type === 'price'"
+                  :field="column.name"
+                  :header="column.label"
+                  :sortable="column.sortable"
+                  :style="{ width: column.width, minWidth: column.minWidth }"
+                >
+                  <template #body="{ data }">
+                    {{ formatPrice(data[column.name]) }}
+                  </template>
+                </Column>
+
+                <!-- Number column -->
+                <Column
+                  v-else-if="column.type === 'number'"
+                  :field="column.name"
+                  :header="column.label"
+                  :sortable="column.sortable"
+                  :style="{ width: column.width, minWidth: column.minWidth }"
+                >
+                  <template #body="{ data }">
+                    {{ data[column.name] }}
+                  </template>
+                </Column>
+
+                <!-- Weight column -->
+                <Column
+                  v-else-if="column.type === 'weight'"
+                  :field="column.name"
+                  :header="column.label"
+                  :sortable="column.sortable"
+                  :style="{ width: column.width, minWidth: column.minWidth }"
+                >
+                  <template #body="{ data }">
+                    {{ data[column.name + '_formatted'] || data[column.name] }}
+                  </template>
+                </Column>
+
+                <!-- Template column (name with link) -->
+                <Column
+                  v-else-if="column.type === 'template'"
+                  :field="column.name"
+                  :header="column.label"
+                  :sortable="column.sortable"
+                  :style="{ width: column.width, minWidth: column.minWidth }"
+                >
+                  <template #body="{ data }">
+                    <a
+                      v-if="getProductLink(data, column)"
+                      :href="getProductLink(data, column)"
+                      target="_blank"
+                      class="product-link"
+                    >
+                      {{ renderProductField(data, column) }}
+                    </a>
+                    <span v-else>
+                      {{ renderProductField(data, column) || '—' }}
+                    </span>
+                  </template>
+                </Column>
+
+                <!-- Actions column -->
+                <Column
+                  v-else-if="column.type === 'actions'"
+                  :header="column.label"
+                  :frozen="column.frozen"
+                  :style="{ width: column.width }"
+                >
+                  <template #body="{ data }">
+                    <div class="actions-buttons">
+                      <Button
+                        v-for="action in column.actions || []"
+                        :key="action.name"
+                        :icon="'pi ' + action.icon"
+                        :severity="action.severity || 'secondary'"
+                        text
+                        rounded
+                        size="small"
+                        @click="handleProductAction(action, data)"
+                      />
+                    </div>
+                  </template>
+                </Column>
 
-              <!-- Template column (name with link) -->
-              <Column
-                v-else-if="column.type === 'template'"
-                :field="column.name"
-                :header="column.label"
-                :sortable="column.sortable"
-                :style="{ width: column.width, minWidth: column.minWidth }"
-              >
-                <template #body="{ data }">
-                  <a
-                    v-if="getProductLink(data, column)"
-                    :href="getProductLink(data, column)"
-                    target="_blank"
-                    class="product-link"
+                <!-- Default column (text) -->
+                <Column
+                  v-else
+                  :field="column.name"
+                  :header="column.label"
+                  :sortable="column.sortable"
+                  :style="{ width: column.width, minWidth: column.minWidth }"
+                />
+              </template>
+            </DataTable>
+          </TabPanel>
+
+          <!-- Address Tab (dynamic fields grouped by sections) -->
+          <TabPanel value="address">
+            <!-- Customer Search Section (in create mode or when order is draft) -->
+            <Fieldset
+              v-if="isCreateMode || isDraft"
+              :legend="_('order_customer')"
+              class="mb-3"
+              :toggleable="true"
+            >
+              <div class="customer-search-content">
+                <div class="customer-search-field">
+                  <AutoComplete
+                    v-model="selectedCustomer"
+                    :suggestions="customerSuggestions"
+                    option-label="display"
+                    :placeholder="_('ms3_order_search_customer')"
+                    :loading="searchingCustomers"
+                    class="w-full"
+                    :min-length="2"
+                    @complete="searchCustomers"
+                    @item-select="onCustomerSelect"
                   >
-                    {{ renderProductField(data, column) }}
-                  </a>
-                  <span v-else>
-                    {{ renderProductField(data, column) || '—' }}
-                  </span>
-                </template>
-              </Column>
+                    <template #option="{ option }">
+                      <div class="customer-suggestion">
+                        <div class="customer-suggestion-info">
+                          <div class="customer-suggestion-name">
+                            {{ option.first_name }} {{ option.last_name }}
+                          </div>
+                          <div class="customer-suggestion-meta">
+                            <span v-if="option.email" class="email">{{ option.email }}</span>
+                            <span v-if="option.phone" class="phone">{{ option.phone }}</span>
+                          </div>
+                          <div class="customer-suggestion-stats">
+                            <span v-if="option.orders_count"
+                              >{{ _('orders') }}: {{ option.orders_count }}</span
+                            >
+                            <span v-if="option.total_spent"
+                              >{{ _('total') }}: {{ formatPrice(option.total_spent) }}</span
+                            >
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </AutoComplete>
+                  <small class="customer-search-hint">{{ _('ms3_order_customer_hint') }}</small>
+                </div>
 
-              <!-- Actions column -->
-              <Column
-                v-else-if="column.type === 'actions'"
-                :header="column.label"
-                :frozen="column.frozen"
-                :style="{ width: column.width }"
-              >
-                <template #body="{ data }">
-                  <div class="actions-buttons">
+                <!-- Selected customer info -->
+                <div v-if="selectedCustomer && selectedCustomer.id" class="selected-customer-info">
+                  <div class="selected-customer-badge">
+                    <i class="pi pi-user"></i>
+                    <span class="customer-name"
+                      >{{ selectedCustomer.first_name }} {{ selectedCustomer.last_name }}</span
+                    >
+                    <span v-if="selectedCustomer.email" class="customer-email">{{
+                      selectedCustomer.email
+                    }}</span>
                     <Button
-                      v-for="action in (column.actions || [])"
-                      :key="action.name"
-                      :icon="'pi ' + action.icon"
-                      :severity="action.severity || 'secondary'"
+                      icon="pi pi-times"
+                      severity="secondary"
                       text
                       rounded
                       size="small"
-                      @click="handleProductAction(action, data)"
+                      :title="_('ms3_order_clear_customer')"
+                      @click="clearCustomer"
                     />
                   </div>
-                </template>
-              </Column>
+                  <small class="text-success">{{ _('ms3_order_customer_selected') }}</small>
+                </div>
+                <div v-else class="no-customer-hint">
+                  <i class="pi pi-info-circle"></i>
+                  <span>{{ _('ms3_order_no_customer') }}</span>
+                </div>
 
-              <!-- Default column (text) -->
-              <Column
-                v-else
-                :field="column.name"
-                :header="column.label"
-                :sortable="column.sortable"
-                :style="{ width: column.width, minWidth: column.minWidth }"
-              />
-            </template>
-          </DataTable>
-        </TabPanel>
-
-        <!-- Address Tab (dynamic fields grouped by sections) -->
-        <TabPanel :header="_('order_address')">
-          <!-- Customer Search Section (in create mode or when order is draft) -->
-          <Fieldset v-if="isCreateMode || isDraft" :legend="_('order_customer')" class="mb-3" :toggleable="true">
-            <div class="customer-search-content">
-              <div class="customer-search-field">
-                <AutoComplete
-                  v-model="selectedCustomer"
-                  :suggestions="customerSuggestions"
-                  @complete="searchCustomers"
-                  @item-select="onCustomerSelect"
-                  optionLabel="display"
-                  :placeholder="_('ms3_order_search_customer')"
-                  :loading="searchingCustomers"
-                  class="w-full"
-                  :minLength="2"
-                >
-                  <template #option="{ option }">
-                    <div class="customer-suggestion">
-                      <div class="customer-suggestion-info">
-                        <div class="customer-suggestion-name">{{ option.first_name }} {{ option.last_name }}</div>
-                        <div class="customer-suggestion-meta">
-                          <span v-if="option.email" class="email">{{ option.email }}</span>
-                          <span v-if="option.phone" class="phone">{{ option.phone }}</span>
-                        </div>
-                        <div class="customer-suggestion-stats">
-                          <span v-if="option.orders_count">{{ _('orders') }}: {{ option.orders_count }}</span>
-                          <span v-if="option.total_spent">{{ _('total') }}: {{ formatPrice(option.total_spent) }}</span>
-                        </div>
+                <!-- Create customer checkbox -->
+                <div class="create-customer-checkbox mt-3">
+                  <Checkbox
+                    v-model="createCustomerFromData"
+                    input-id="createCustomer"
+                    :binary="true"
+                    :disabled="!!selectedCustomer?.id"
+                  />
+                  <label
+                    for="createCustomer"
+                    class="ml-2"
+                    :class="{ 'text-muted': !!selectedCustomer?.id }"
+                  >
+                    {{ _('ms3_order_create_customer_from_data') }}
+                  </label>
+                </div>
+              </div>
+            </Fieldset>
+
+            <template v-for="section in addressFieldsBySection" :key="section.id || 'no_section'">
+              <Fieldset :legend="section.label" class="mb-3" :toggleable="true">
+                <div class="fields-grid">
+                  <template v-for="field in section.fields" :key="field.id">
+                    <div :class="['field-wrapper', getFieldWidthClass(field)]">
+                      <div class="field">
+                        <label>{{ field.label_display || field.label || field.name }}</label>
+
+                        <!-- Combo (Select) -->
+                        <template v-if="field.xtype === 'combo'">
+                          <Select
+                            v-model="order[getAddressFieldCompareField(field.name)]"
+                            :options="getAddressFieldOptions(field.name)"
+                            option-label="label"
+                            option-value="value"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Textarea -->
+                        <template v-else-if="field.xtype === 'textarea'">
+                          <Textarea
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            rows="3"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Number field -->
+                        <template v-else-if="field.xtype === 'numberfield'">
+                          <InputNumber
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Checkbox -->
+                        <template v-else-if="field.xtype === 'checkbox'">
+                          <div class="flex align-items-center">
+                            <Checkbox v-model="order[field.name]" :binary="true" />
+                          </div>
+                        </template>
+
+                        <!-- Text field (default) -->
+                        <template v-else>
+                          <InputText
+                            v-model="order[field.name]"
+                            :placeholder="field.placeholder"
+                            class="w-full"
+                          />
+                        </template>
+
+                        <!-- Description/help text -->
+                        <small v-if="field.description_display" class="field-description">
+                          {{ field.description_display }}
+                        </small>
                       </div>
                     </div>
                   </template>
-                </AutoComplete>
-                <small class="customer-search-hint">{{ _('ms3_order_customer_hint') }}</small>
-              </div>
-
-              <!-- Selected customer info -->
-              <div v-if="selectedCustomer && selectedCustomer.id" class="selected-customer-info">
-                <div class="selected-customer-badge">
-                  <i class="pi pi-user"></i>
-                  <span class="customer-name">{{ selectedCustomer.first_name }} {{ selectedCustomer.last_name }}</span>
-                  <span v-if="selectedCustomer.email" class="customer-email">{{ selectedCustomer.email }}</span>
-                  <Button
-                    icon="pi pi-times"
-                    severity="secondary"
-                    text
-                    rounded
-                    size="small"
-                    @click="clearCustomer"
-                    :title="_('ms3_order_clear_customer')"
-                  />
                 </div>
-                <small class="text-success">{{ _('ms3_order_customer_selected') }}</small>
-              </div>
-              <div v-else class="no-customer-hint">
-                <i class="pi pi-info-circle"></i>
-                <span>{{ _('ms3_order_no_customer') }}</span>
-              </div>
+              </Fieldset>
+            </template>
 
-              <!-- Create customer checkbox -->
-              <div class="create-customer-checkbox mt-3">
-                <Checkbox
-                  v-model="createCustomerFromData"
-                  inputId="createCustomer"
-                  :binary="true"
-                  :disabled="!!selectedCustomer?.id"
-                />
-                <label for="createCustomer" class="ml-2" :class="{ 'text-muted': !!selectedCustomer?.id }">
-                  {{ _('ms3_order_create_customer_from_data') }}
-                </label>
-              </div>
+            <!-- Fallback if no fields configured -->
+            <div v-if="addressFieldsBySection.length === 0" class="no-fields-message">
+              <p>{{ _('ms3_model_fields_empty') }}</p>
             </div>
-          </Fieldset>
-
-          <template v-for="section in addressFieldsBySection" :key="section.id || 'no_section'">
-            <Fieldset :legend="section.label" class="mb-3" :toggleable="true">
-              <div class="fields-grid">
-                <template v-for="field in section.fields" :key="field.id">
-                  <div :class="['field-wrapper', getFieldWidthClass(field)]">
-                    <div class="field">
-                      <label>{{ field.label_display || field.label || field.name }}</label>
-
-                      <!-- Combo (Select) -->
-                      <template v-if="field.xtype === 'combo'">
-                        <Select
-                          v-model="order[getAddressFieldCompareField(field.name)]"
-                          :options="getAddressFieldOptions(field.name)"
-                          optionLabel="label"
-                          optionValue="value"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Textarea -->
-                      <template v-else-if="field.xtype === 'textarea'">
-                        <Textarea
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          rows="3"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Number field -->
-                      <template v-else-if="field.xtype === 'numberfield'">
-                        <InputNumber
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Checkbox -->
-                      <template v-else-if="field.xtype === 'checkbox'">
-                        <div class="flex align-items-center">
-                          <Checkbox v-model="order[field.name]" :binary="true" />
-                        </div>
-                      </template>
-
-                      <!-- Text field (default) -->
-                      <template v-else>
-                        <InputText
-                          v-model="order[field.name]"
-                          :placeholder="field.placeholder"
-                          class="w-full"
-                        />
-                      </template>
-
-                      <!-- Description/help text -->
-                      <small v-if="field.description_display" class="field-description">
-                        {{ field.description_display }}
-                      </small>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </Fieldset>
-          </template>
 
-          <!-- Fallback if no fields configured -->
-          <div v-if="addressFieldsBySection.length === 0" class="no-fields-message">
-            <p>{{ _('ms3_model_fields_empty') }}</p>
-          </div>
+            <!-- Action buttons for address tab -->
+            <div class="actions-bar mt-3">
+              <Button
+                v-if="isCreateMode"
+                :label="_('ms3_order_create')"
+                icon="pi pi-plus"
+                severity="success"
+                :loading="saving"
+                @click="createOrder"
+              />
+              <Button
+                v-else
+                :label="_('save')"
+                icon="pi pi-check"
+                :loading="saving"
+                @click="saveOrder"
+              />
+              <Button
+                :label="_('cancel')"
+                icon="pi pi-times"
+                severity="secondary"
+                @click="goBack"
+              />
+            </div>
+          </TabPanel>
 
-          <!-- Action buttons for address tab -->
-          <div class="actions-bar mt-3">
-            <Button
-              v-if="isCreateMode"
-              :label="_('ms3_order_create')"
-              icon="pi pi-plus"
-              severity="success"
-              :loading="saving"
-              @click="createOrder"
-            />
-            <Button
-              v-else
-              :label="_('save')"
-              icon="pi pi-check"
-              :loading="saving"
-              @click="saveOrder"
-            />
-            <Button
-              :label="_('cancel')"
-              icon="pi pi-times"
-              severity="secondary"
-              @click="goBack"
-            />
-          </div>
-        </TabPanel>
-
-        <!-- History Tab - hidden in create mode -->
-        <TabPanel v-if="!isCreateMode" :header="_('order_history')">
-          <DataTable :value="logs" stripedRows responsiveLayout="scroll">
-            <Column field="timestamp" :header="_('log_date')" style="width: 180px">
-              <template #body="{ data }">
-                {{ formatDate(data.timestamp || data.createdon) }}
-              </template>
-            </Column>
-            <Column field="action" :header="_('log_action')" />
-            <Column field="user_name" :header="_('log_user')" style="width: 150px" />
-            <Column field="entry_formatted" :header="_('log_entry')">
-              <template #body="{ data }">
-                <span v-html="data.entry_formatted || formatLogEntry(data)"></span>
-              </template>
-            </Column>
-          </DataTable>
-        </TabPanel>
-      </TabView>
+          <!-- History Tab - hidden in create mode -->
+          <TabPanel v-if="!isCreateMode" value="history">
+            <DataTable :value="logs" striped-rows responsive-layout="scroll">
+              <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="user_name" :header="_('log_user')" style="width: 9.375rem" />
+              <Column field="entry_formatted" :header="_('log_entry')">
+                <template #body="{ data }">
+                  <span v-html="data.entry_formatted || formatLogEntry(data)"></span>
+                </template>
+              </Column>
+            </DataTable>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </template>
 
     <div v-else class="error-state">
-      <i class="pi pi-exclamation-triangle" style="font-size: 3rem; color: #f59e0b"></i>
+      <i
+        class="pi pi-exclamation-triangle"
+        style="font-size: 3rem; color: var(--ms3-text-warning-accent)"
+      ></i>
       <p>{{ _('order_not_found') }}</p>
       <Button :label="_('back_to_orders')" @click="goBack" />
     </div>
@@ -2716,7 +2770,7 @@ onMounted(async () => {
 
 <style scoped>
 .order-view {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .order-header {
@@ -2728,7 +2782,7 @@ onMounted(async () => {
 .order-header h2 {
   margin: 0;
   font-size: 1.5rem;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .loading-state,
@@ -2754,23 +2808,57 @@ onMounted(async () => {
 }
 
 /* Width classes (12-column grid) */
-.col-1 { width: 8.333%; }
-.col-2 { width: 16.666%; }
-.col-3 { width: 25%; }
-.col-4 { width: 33.333%; }
-.col-5 { width: 41.666%; }
-.col-6 { width: 50%; }
-.col-7 { width: 58.333%; }
-.col-8 { width: 66.666%; }
-.col-9 { width: 75%; }
-.col-10 { width: 83.333%; }
-.col-11 { width: 91.666%; }
-.col-12 { width: 100%; }
+.col-1 {
+  width: 8.333%;
+}
+.col-2 {
+  width: 16.666%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-4 {
+  width: 33.333%;
+}
+.col-5 {
+  width: 41.666%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-7 {
+  width: 58.333%;
+}
+.col-8 {
+  width: 66.666%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-10 {
+  width: 83.333%;
+}
+.col-11 {
+  width: 91.666%;
+}
+.col-12 {
+  width: 100%;
+}
 
 /* Responsive: on small screens all fields become full-width */
-@media (max-width: 768px) {
-  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
-  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+@media (max-width: 48rem) {
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10,
+  .col-11,
+  .col-12 {
     width: 100%;
   }
 }
@@ -2783,13 +2871,13 @@ onMounted(async () => {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
 .field-value {
   font-size: 1rem;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
   min-height: 2.5rem;
   display: flex;
   align-items: center;
@@ -2798,7 +2886,7 @@ onMounted(async () => {
 .field-description {
   display: block;
   margin-top: 0.25rem;
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   font-size: 0.75rem;
 }
 
@@ -2808,7 +2896,7 @@ onMounted(async () => {
   gap: 1rem;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .costs-grid {
     grid-template-columns: 1fr;
   }
@@ -2816,8 +2904,8 @@ onMounted(async () => {
 
 /* Order Summary Section */
 .order-summary-section :deep(.p-fieldset-legend) {
-  background: #3b82f6;
-  color: white;
+  background: var(--ms3-accent-primary);
+  color: var(--ms3-text-on-primary);
 }
 
 .order-summary-grid {
@@ -2826,19 +2914,19 @@ onMounted(async () => {
   gap: 1rem;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 75rem) {
   .order-summary-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .order-summary-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 30rem) {
   .order-summary-grid {
     grid-template-columns: 1fr;
   }
@@ -2847,23 +2935,23 @@ onMounted(async () => {
 .summary-item {
   display: flex;
   flex-direction: column;
-  padding: 0.75rem 1rem;
-  background: #f8fafc;
-  border-radius: 8px;
-  border-left: 3px solid #e2e8f0;
+  padding: var(--ms3-spacing-3) 1rem;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.5rem;
+  border-left: var(--ms3-border-width-accent) solid var(--ms3-border-color);
 }
 
 .summary-item.summary-num {
-  border-left-color: #3b82f6;
+  border-left-color: var(--ms3-accent-primary);
 }
 
 .summary-item.summary-cost {
-  border-left-color: #22c55e;
+  border-left-color: var(--ms3-text-success);
 }
 
 .summary-label {
   font-size: 0.75rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.25rem;
@@ -2872,7 +2960,7 @@ onMounted(async () => {
 .summary-value {
   font-size: 1rem;
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .summary-value-lg {
@@ -2881,21 +2969,21 @@ onMounted(async () => {
 }
 
 .summary-value-primary {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .actions-bar {
   display: flex;
   gap: 0.5rem;
   padding: 1rem;
-  background: #f8fafc;
-  border-radius: 8px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.5rem;
 }
 
 .no-fields-message {
   padding: 1rem;
   text-align: center;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-style: italic;
 }
 
@@ -2921,15 +3009,15 @@ onMounted(async () => {
 
 /* Fieldset styles */
 :deep(.p-fieldset) {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.5rem;
 }
 
 :deep(.p-fieldset .p-fieldset-legend) {
   font-size: 0.95rem;
   padding: 0.5rem 1rem;
-  background: #f8fafc;
-  border-radius: 4px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.25rem;
 }
 
 :deep(.p-fieldset .p-fieldset-content) {
@@ -2938,16 +3026,16 @@ onMounted(async () => {
 
 /* Products table styles */
 .product-thumbnail {
-  border-radius: 4px;
+  border-radius: 0.25rem;
   object-fit: cover;
 }
 
 .no-image {
-  color: #9ca3af;
+  color: var(--ms3-text-muted-light);
 }
 
 .product-link {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
   text-decoration: none;
 }
 
@@ -2971,26 +3059,26 @@ onMounted(async () => {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
 .product-name-display {
   font-size: 1rem;
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
   padding: 0.5rem;
-  background: #f8fafc;
-  border-radius: 4px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.25rem;
 }
 
 .cost-display {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #22c55e;
+  color: var(--ms3-text-success);
   padding: 0.5rem;
-  background: #f0fdf4;
-  border-radius: 4px;
+  background: var(--ms3-bg-success);
+  border-radius: 0.25rem;
   text-align: right;
 }
 
@@ -3012,10 +3100,10 @@ onMounted(async () => {
 }
 
 .options-table {
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 0.75rem;
-  background: #f8fafc;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.375rem;
+  padding: var(--ms3-spacing-3);
+  background: var(--ms3-bg-slate);
 }
 
 .options-row {
@@ -3026,17 +3114,17 @@ onMounted(async () => {
 }
 
 .options-row:last-of-type {
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--ms3-spacing-3);
 }
 
 .options-type-select {
-  flex: 0 0 100px;
-  min-width: 100px;
+  flex: 0 0 6.25rem;
+  min-width: 6.25rem;
 }
 
 .options-key-input {
-  flex: 0 0 120px;
-  min-width: 100px;
+  flex: 0 0 7.5rem;
+  min-width: 6.25rem;
 }
 
 .options-value-input {
@@ -3045,10 +3133,10 @@ onMounted(async () => {
 }
 
 .options-json {
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.375rem;
   padding: 0.5rem;
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
 }
 
 .options-json-textarea {
@@ -3057,11 +3145,11 @@ onMounted(async () => {
 }
 
 .options-json-textarea.p-invalid {
-  border-color: #ef4444;
+  border-color: var(--ms3-text-danger);
 }
 
 .p-error {
-  color: #ef4444;
+  color: var(--ms3-text-danger);
   font-size: 0.75rem;
   margin-top: 0.25rem;
   display: block;
@@ -3072,46 +3160,46 @@ onMounted(async () => {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
 .selected-product-details {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.5rem;
   padding: 1rem;
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
 }
 
 .selected-product-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid #e2e8f0;
+  gap: var(--ms3-spacing-3);
+  padding-bottom: var(--ms3-spacing-3);
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
 }
 
 .selected-product-image {
-  width: 50px;
-  height: 50px;
+  width: 3.125rem;
+  height: 3.125rem;
   object-fit: cover;
-  border-radius: 4px;
-  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
 }
 
 .selected-product-name {
   font-weight: 600;
   font-size: 1rem;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .calculated-cost {
   font-size: 1.125rem;
   font-weight: 600;
-  color: #22c55e;
+  color: var(--ms3-text-success);
   padding: 0.5rem;
-  background: #f0fdf4;
-  border-radius: 4px;
+  background: var(--ms3-bg-success);
+  border-radius: 0.25rem;
   text-align: right;
 }
 
@@ -3134,14 +3222,14 @@ onMounted(async () => {
 }
 
 .customer-search-hint {
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.75rem;
 }
 
 .customer-suggestion {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
   padding: 0.25rem 0;
 }
 
@@ -3151,29 +3239,29 @@ onMounted(async () => {
 
 .customer-suggestion-name {
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .customer-suggestion-meta {
   font-size: 0.75rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   display: flex;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
 }
 
 .customer-suggestion-meta .email {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
 }
 
 .customer-suggestion-meta .phone {
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .customer-suggestion-stats {
   font-size: 0.7rem;
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   display: flex;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
   margin-top: 0.25rem;
 }
 
@@ -3187,23 +3275,23 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: #f0fdf4;
-  border: 1px solid #bbf7d0;
-  border-radius: 8px;
+  padding: 0.5rem var(--ms3-spacing-3);
+  background: var(--ms3-bg-success);
+  border: var(--ms3-border-width) solid var(--ms3-border-success);
+  border-radius: 0.5rem;
 }
 
 .selected-customer-badge i {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .selected-customer-badge .customer-name {
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .selected-customer-badge .customer-email {
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
@@ -3211,40 +3299,40 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: #f8fafc;
-  border: 1px dashed #e2e8f0;
-  border-radius: 8px;
-  color: #64748b;
+  padding: 0.5rem var(--ms3-spacing-3);
+  background: var(--ms3-bg-slate);
+  border: var(--ms3-border-width) dashed var(--ms3-border-color);
+  border-radius: 0.5rem;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
 }
 
 .no-customer-hint i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .text-success {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 /* Create customer checkbox */
 .create-customer-checkbox {
   display: flex;
   align-items: center;
-  padding: 0.75rem;
-  background: #fefce8;
-  border: 1px solid #fef08a;
-  border-radius: 8px;
+  padding: var(--ms3-spacing-3);
+  background: var(--ms3-bg-warning-light);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning-alt);
+  border-radius: 0.5rem;
 }
 
 .create-customer-checkbox label {
   cursor: pointer;
   font-size: 0.875rem;
-  color: #854d0e;
+  color: var(--ms3-text-warning-dark);
 }
 
 .create-customer-checkbox label.text-muted {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
   cursor: not-allowed;
 }
 
@@ -3258,21 +3346,21 @@ onMounted(async () => {
 .duplicate-warning {
   display: flex;
   align-items: flex-start;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
   padding: 1rem;
-  background: #fef3c7;
-  border-radius: 8px;
+  background: var(--ms3-bg-warning);
+  border-radius: 0.5rem;
 }
 
 .duplicate-warning i {
-  color: #f59e0b;
+  color: var(--ms3-text-warning-accent);
   font-size: 1.5rem;
   flex-shrink: 0;
 }
 
 .duplicate-warning p {
   margin: 0;
-  color: #92400e;
+  color: var(--ms3-text-warning);
   font-size: 0.875rem;
 }
 
@@ -3281,8 +3369,8 @@ onMounted(async () => {
   flex-direction: column;
   gap: 0.5rem;
   padding: 1rem;
-  background: #f8fafc;
-  border-radius: 8px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.5rem;
 }
 
 .duplicate-customer-info .info-row {
@@ -3291,22 +3379,22 @@ onMounted(async () => {
 }
 
 .duplicate-customer-info .info-label {
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
-  min-width: 100px;
+  min-width: 6.25rem;
 }
 
 .duplicate-customer-info .info-value {
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
   font-size: 0.875rem;
   font-weight: 500;
 }
 
 /* Finalize order info panel */
 .finalize-info-panel {
-  border: 1px solid #bfdbfe;
-  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-  border-radius: 8px;
+  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%);
+  border-radius: 0.5rem;
 }
 
 .finalize-info-panel :deep(.p-message-wrapper) {
@@ -3314,7 +3402,7 @@ onMounted(async () => {
 }
 
 .finalize-info-panel :deep(.p-message-icon) {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
   font-size: 1.25rem;
 }
 
@@ -3329,9 +3417,9 @@ onMounted(async () => {
 
 .finalize-info-text {
   flex: 1;
-  min-width: 200px;
+  min-width: 12.5rem;
   margin: 0;
-  color: #1e40af;
+  color: var(--ms3-text-accent-dark);
   font-size: 0.9rem;
   line-height: 1.5;
 }
@@ -3340,7 +3428,7 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 40rem) {
   .finalize-info-content {
     flex-direction: column;
     align-items: stretch;
@@ -3375,16 +3463,16 @@ onMounted(async () => {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
   padding: 0.25rem 0;
 }
 
 .ms3-product-suggestion-image {
-  width: 50px;
-  height: 50px;
+  width: 3.125rem;
+  height: 3.125rem;
   object-fit: cover;
-  border-radius: 4px;
-  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
   flex-shrink: 0;
 }
 
@@ -3395,7 +3483,7 @@ onMounted(async () => {
 
 .ms3-product-suggestion-name {
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3403,13 +3491,13 @@ onMounted(async () => {
 
 .ms3-product-suggestion-meta {
   font-size: 0.75rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   display: flex;
   gap: 0.5rem;
 }
 
 .ms3-product-suggestion-meta .article {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
 }
 
 .ms3-product-suggestion-meta .price {
diff --git a/vueManager/src/components/OrdersGrid.vue b/vueManager/src/components/OrdersGrid.vue
index ce512a5..cdb5e16 100644
--- a/vueManager/src/components/OrdersGrid.vue
+++ b/vueManager/src/components/OrdersGrid.vue
@@ -1,19 +1,20 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+import Card from 'primevue/card'
 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 DatePicker from 'primevue/datepicker'
 import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
 import { useToast } from 'primevue/usetoast'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+import { computed, onMounted, ref } from 'vue'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 
 const toast = useToast()
@@ -29,11 +30,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'order',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/orders/bulk', { ids })
   },
   onSuccess: () => loadOrders(),
-  getItemName: (item) => `#${item.num || item.id}`,
+  getItemName: item => `#${item.num || item.id}`,
 })
 
 const columns = ref([])
@@ -189,7 +190,7 @@ function formatDate(dateString, column = {}) {
   const format = column.format || 'dd.MM.yyyy HH:mm'
 
   // Simple format replacement
-  const pad = (n) => n.toString().padStart(2, '0')
+  const pad = n => n.toString().padStart(2, '0')
 
   return format
     .replace('yyyy', date.getFullYear())
@@ -211,10 +212,11 @@ function formatPrice(value, column = {}) {
 
   // Get config from column or use defaults from ms3.config
   // Note: ms3 is a global variable (not window.ms3) because it's declared with 'let'
-  // eslint-disable-next-line no-undef
+
   const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
   const decimals = column.decimals ?? ms3Config?.price_decimals ?? 2
-  const thousandsSeparator = column.thousands_separator ?? ms3Config?.price_thousands_separator ?? ' '
+  const thousandsSeparator =
+    column.thousands_separator ?? ms3Config?.price_thousands_separator ?? ' '
   const decimalSeparator = column.decimal_separator ?? ms3Config?.price_decimal_separator ?? ','
   const currency = column.currency ?? ms3Config?.price_currency ?? ''
   const currencyPosition = column.currency_position ?? ms3Config?.price_currency_position ?? 'after'
@@ -226,9 +228,8 @@ function formatPrice(value, column = {}) {
 
   // Add currency
   if (currency) {
-    formatted = currencyPosition === 'before'
-      ? `${currency}${formatted}`
-      : `${formatted} ${currency}`
+    formatted =
+      currencyPosition === 'before' ? `${currency}${formatted}` : `${formatted} ${currency}`
   }
 
   return formatted
@@ -243,7 +244,7 @@ function formatWeight(value, column = {}) {
   if (value === null || value === undefined) return '-'
 
   // Get config from column or use defaults from ms3.config
-  // eslint-disable-next-line no-undef
+
   const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
   const decimals = column.decimals ?? ms3Config?.weight_decimals ?? 2
   const unit = column.unit ?? ms3Config?.weight_unit ?? 'кг'
@@ -254,9 +255,7 @@ function formatWeight(value, column = {}) {
 
   // Add unit
   if (unit) {
-    formatted = unitPosition === 'before'
-      ? `${unit} ${formatted}`
-      : `${formatted} ${unit}`
+    formatted = unitPosition === 'before' ? `${unit} ${formatted}` : `${formatted} ${unit}`
   }
 
   return formatted
@@ -271,13 +270,13 @@ function getStatusSeverity(color) {
   const colorMap = {
     '#97b94d': 'success',
     '#81d742': 'success',
-    'green': 'success',
+    green: 'success',
     '#dd3d36': 'danger',
-    'red': 'danger',
+    red: 'danger',
     '#f0ad4e': 'warn',
-    'yellow': 'warn',
+    yellow: 'warn',
     '#5bc0de': 'info',
-    'blue': 'info',
+    blue: 'info',
   }
 
   return colorMap[color.toLowerCase()] || 'secondary'
@@ -378,25 +377,92 @@ async function loadGridConfig() {
  */
 function getDefaultColumns() {
   return [
-    { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '80px', isSystem: true },
-    { name: 'num', label: _('order_num'), visible: true, sortable: true, filterable: true, width: '100px' },
-    { name: 'customer', label: _('order_customer'), visible: true, filterable: true, type: 'template', template: '{first_name} {last_name}', minWidth: '150px' },
-    { name: 'status_name', label: _('order_status'), visible: true, sortable: true, filterable: true, type: 'badge', width: '120px' },
-    { name: 'cost', label: _('order_cost'), visible: true, sortable: true, type: 'price', width: '120px' },
-    { name: 'delivery_name', label: _('order_delivery'), visible: true, sortable: true, filterable: true, width: '150px' },
-    { name: 'payment_name', label: _('order_payment'), visible: true, sortable: true, filterable: true, width: '150px' },
-    { name: 'createdon', label: _('order_createdon'), visible: true, sortable: true, type: 'datetime', width: '150px' },
+    {
+      name: 'id',
+      label: 'ID',
+      visible: true,
+      sortable: true,
+      frozen: true,
+      width: '5rem',
+      isSystem: true,
+    },
+    {
+      name: 'num',
+      label: _('order_num'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      width: '6.25rem',
+    },
+    {
+      name: 'customer',
+      label: _('order_customer'),
+      visible: true,
+      filterable: true,
+      type: 'template',
+      template: '{first_name} {last_name}',
+      minWidth: '9.375rem',
+    },
+    {
+      name: 'status_name',
+      label: _('order_status'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      type: 'badge',
+      width: '7.5rem',
+    },
+    {
+      name: 'cost',
+      label: _('order_cost'),
+      visible: true,
+      sortable: true,
+      type: 'price',
+      width: '7.5rem',
+    },
+    {
+      name: 'delivery_name',
+      label: _('order_delivery'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      width: '9.375rem',
+    },
+    {
+      name: 'payment_name',
+      label: _('order_payment'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      width: '9.375rem',
+    },
+    {
+      name: 'createdon',
+      label: _('order_createdon'),
+      visible: true,
+      sortable: true,
+      type: 'datetime',
+      width: '9.375rem',
+    },
     {
       name: 'actions',
       label: _('actions'),
       visible: true,
       isSystem: true,
       frozen: true,
-      width: '120px',
+      width: '7.5rem',
       type: 'actions',
       actions: [
         { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-        { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'order_delete_confirm_message' },
+        {
+          name: 'delete',
+          handler: 'delete',
+          icon: 'pi-trash',
+          label: 'delete',
+          severity: 'danger',
+          confirm: true,
+          confirmMessage: 'order_delete_confirm_message',
+        },
       ],
     },
   ]
@@ -409,7 +475,15 @@ function getActionsConfig(column) {
   if (!column.actions || column.actions.length === 0) {
     return [
       { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-      { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'order_delete_confirm_message' },
+      {
+        name: 'delete',
+        handler: 'delete',
+        icon: 'pi-trash',
+        label: 'delete',
+        severity: 'danger',
+        confirm: true,
+        confirmMessage: 'order_delete_confirm_message',
+      },
     ]
   }
   return column.actions
@@ -436,10 +510,7 @@ function getCustomerLink(data) {
 }
 
 onMounted(async () => {
-  await Promise.all([
-    loadGridConfig(),
-    loadFiltersConfig(),
-  ])
+  await Promise.all([loadGridConfig(), loadFiltersConfig()])
   await loadOrders()
 })
 </script>
@@ -447,7 +518,7 @@ onMounted(async () => {
 <template>
   <div class="orders-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -477,11 +548,19 @@ onMounted(async () => {
 
       <template #content>
         <!-- Filters form -->
-        <div v-if="sortedFilters.length > 0" class="filters-form mb-3 p-3 surface-ground" style="border-radius: 6px;">
+        <div
+          v-if="sortedFilters.length > 0"
+          class="filters-form mb-3 p-3 surface-ground"
+          style="border-radius: 0.375rem"
+        >
           <div class="filters-row">
             <template v-for="filter in sortedFilters" :key="filter.key">
               <!-- Text input filter -->
-              <div v-if="filter.type === 'text'" class="filter-item" :style="{ width: filter.width || '200px' }">
+              <div
+                v-if="filter.type === 'text'"
+                class="filter-item"
+                :style="{ width: filter.width || '12.5rem' }"
+              >
                 <label :for="`filter-${filter.key}`">{{ _(filter.label) }}</label>
                 <InputText
                   :id="`filter-${filter.key}`"
@@ -493,45 +572,57 @@ onMounted(async () => {
               </div>
 
               <!-- Select filter -->
-              <div v-else-if="filter.type === 'select'" class="filter-item" :style="{ width: filter.width || '180px' }">
+              <div
+                v-else-if="filter.type === 'select'"
+                class="filter-item"
+                :style="{ width: filter.width || '11.25rem' }"
+              >
                 <label :for="`filter-${filter.key}`">{{ _(filter.label) }}</label>
                 <Select
                   :id="`filter-${filter.key}`"
                   v-model="filterValues[filter.key]"
                   :options="filter.options || []"
-                  optionLabel="label"
-                  optionValue="value"
+                  option-label="label"
+                  option-value="value"
                   :placeholder="_(filter.placeholder || 'all')"
-                  :showClear="true"
+                  :show-clear="true"
                   class="w-full"
                   @change="applyFilters"
                 />
               </div>
 
               <!-- Date picker filter -->
-              <div v-else-if="filter.type === 'datepicker'" class="filter-item" :style="{ width: filter.width || '150px' }">
+              <div
+                v-else-if="filter.type === 'datepicker'"
+                class="filter-item"
+                :style="{ width: filter.width || '9.375rem' }"
+              >
                 <label :for="`filter-${filter.key}`">{{ _(filter.label) }}</label>
                 <DatePicker
                   :id="`filter-${filter.key}`"
                   v-model="filterValues[filter.key]"
-                  dateFormat="dd.mm.yy"
-                  :showIcon="true"
-                  :showButtonBar="true"
+                  date-format="dd.mm.yy"
+                  :show-icon="true"
+                  :show-button-bar="true"
                   class="w-full"
                   @date-select="applyFilters"
                 />
               </div>
 
               <!-- Date range filter -->
-              <div v-else-if="filter.type === 'daterange'" class="filter-item" :style="{ width: filter.width || '280px' }">
+              <div
+                v-else-if="filter.type === 'daterange'"
+                class="filter-item"
+                :style="{ width: filter.width || '17.5rem' }"
+              >
                 <label :for="`filter-${filter.key}`">{{ _(filter.label) }}</label>
                 <DatePicker
                   :id="`filter-${filter.key}`"
                   v-model="filterValues[filter.key]"
-                  selectionMode="range"
-                  dateFormat="dd.mm.yy"
-                  :showIcon="true"
-                  :showButtonBar="true"
+                  selection-mode="range"
+                  date-format="dd.mm.yy"
+                  :show-icon="true"
+                  :show-button-bar="true"
                   class="w-full"
                   @date-select="applyFilters"
                 />
@@ -591,15 +682,15 @@ onMounted(async () => {
           :loading="loading"
           :paginator="true"
           :rows="rows"
-          :totalRecords="totalRecords"
+          :total-records="totalRecords"
           :lazy="true"
+          striped-rows
+          responsive-layout="scroll"
+          data-key="id"
           @page="onPage"
-          stripedRows
-          responsiveLayout="scroll"
-          dataKey="id"
         >
           <!-- Selection column -->
-          <Column selectionMode="multiple" headerStyle="width: 3rem" frozen />
+          <Column selection-mode="multiple" header-style="width: 3rem" frozen />
 
           <!-- Dynamic column rendering -->
           <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
@@ -638,7 +729,14 @@ onMounted(async () => {
                   v-if="column.type === 'badge'"
                   :value="getBadgeValue(data, column)"
                   :severity="getStatusSeverity(getBadgeColor(data, column))"
-                  :style="getBadgeColor(data, column) ? { backgroundColor: getBadgeColor(data, column), color: '#fff' } : {}"
+                  :style="
+                    getBadgeColor(data, column)
+                      ? {
+                          backgroundColor: getBadgeColor(data, column),
+                          color: 'var(--ms3-text-on-primary)',
+                        }
+                      : {}
+                  "
                 />
                 <!-- Datetime field -->
                 <span v-else-if="column.type === 'datetime'">
@@ -685,7 +783,7 @@ onMounted(async () => {
 
 <style scoped>
 .orders-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .grid-header {
@@ -706,7 +804,7 @@ onMounted(async () => {
   display: flex;
   gap: 1.5rem;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .stat-item {
@@ -716,15 +814,15 @@ onMounted(async () => {
 }
 
 .stat-item i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .stat-item strong {
-  color: #334155;
+  color: var(--ms3-text-dark);
 }
 
 .customer-link {
-  color: #3b82f6;
+  color: var(--ms3-accent-primary);
   text-decoration: none;
 }
 
@@ -746,7 +844,7 @@ onMounted(async () => {
 .filter-item {
   display: flex;
   flex-direction: column;
-  min-width: 150px;
+  min-width: 9.375rem;
 }
 
 .filter-item label {
@@ -754,7 +852,7 @@ onMounted(async () => {
   margin-bottom: 0.5rem;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -768,9 +866,9 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: 0.375rem;
 }
 
 .bulk-info {
@@ -778,7 +876,7 @@ onMounted(async () => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
diff --git a/vueManager/src/components/PaymentsGrid.vue b/vueManager/src/components/PaymentsGrid.vue
index 42781cf..b12f78f 100644
--- a/vueManager/src/components/PaymentsGrid.vue
+++ b/vueManager/src/components/PaymentsGrid.vue
@@ -1,27 +1,28 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import DataTable from 'primevue/datatable'
+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 Textarea from 'primevue/textarea'
-import Checkbox from 'primevue/checkbox'
-import ToggleSwitch from 'primevue/toggleswitch'
-import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
 import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
+import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
-import { useToast } from 'primevue/usetoast'
+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 { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 import FileBrowser from './FileBrowser.vue'
 
@@ -39,11 +40,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'payment',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/payments/bulk', { ids })
   },
   onSuccess: () => loadPayments(),
-  getItemName: (item) => item.name,
+  getItemName: item => item.name,
 })
 
 const columns = ref([])
@@ -270,7 +271,9 @@ async function toggleDelivery(deliveryId, newValue) {
 
   try {
     if (newValue) {
-      await request.post(`/api/mgr/payments/${editingPayment.value.id}/deliveries`, { delivery_id: deliveryId })
+      await request.post(`/api/mgr/payments/${editingPayment.value.id}/deliveries`, {
+        delivery_id: deliveryId,
+      })
     } else {
       await request.delete(`/api/mgr/payments/${editingPayment.value.id}/deliveries/${deliveryId}`)
     }
@@ -312,7 +315,10 @@ async function savePayment() {
     if (isNewPayment.value) {
       response = await request.post('/api/mgr/payments', editingPayment.value)
     } else {
-      response = await request.put(`/api/mgr/payments/${editingPayment.value.id}`, editingPayment.value)
+      response = await request.put(
+        `/api/mgr/payments/${editingPayment.value.id}`,
+        editingPayment.value
+      )
     }
 
     if (response) {
@@ -412,15 +418,43 @@ async function loadGridConfig() {
     } else {
       // Fallback default columns
       columns.value = [
-        { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '80px' },
+        { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '5rem' },
         { name: 'name', label: _('payment_name'), visible: true, sortable: true, filterable: true },
-        { name: 'price', label: _('ms3_add_cost'), visible: true, sortable: true, width: '120px' },
-        { name: 'active', label: _('payment_active'), visible: true, sortable: true, type: 'boolean', width: '100px' },
-        { name: 'position', label: _('payment_position'), visible: true, sortable: true, width: '100px' },
-        { name: 'actions', label: _('actions'), visible: true, frozen: true, type: 'actions', width: '120px', actions: [
-          { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-          { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: false },
-        ]},
+        { name: 'price', label: _('ms3_add_cost'), visible: true, sortable: true, width: '7.5rem' },
+        {
+          name: 'active',
+          label: _('payment_active'),
+          visible: true,
+          sortable: true,
+          type: 'boolean',
+          width: '6.25rem',
+        },
+        {
+          name: 'position',
+          label: _('payment_position'),
+          visible: true,
+          sortable: true,
+          width: '6.25rem',
+        },
+        {
+          name: 'actions',
+          label: _('actions'),
+          visible: true,
+          frozen: true,
+          type: 'actions',
+          width: '7.5rem',
+          actions: [
+            { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
+            {
+              name: 'delete',
+              handler: 'delete',
+              icon: 'pi-trash',
+              label: 'delete',
+              severity: 'danger',
+              confirm: false,
+            },
+          ],
+        },
       ]
     }
   } catch (error) {
@@ -465,7 +499,7 @@ onMounted(async () => {
 <template>
   <div class="payments-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -475,7 +509,9 @@ onMounted(async () => {
             <div class="grid-stats">
               <span class="stat-item">
                 <i class="pi pi-list"></i>
-                <span>{{ _('total') }}: <strong>{{ totalRecords }}</strong></span>
+                <span
+                  >{{ _('total') }}: <strong>{{ totalRecords }}</strong></span
+                >
               </span>
             </div>
           </div>
@@ -503,18 +539,11 @@ onMounted(async () => {
               </select>
             </template>
             <template v-else>
-              <InputText
-                v-model="filterValues[column.name]"
-                :placeholder="column.label"
-              />
+              <InputText v-model="filterValues[column.name]" :placeholder="column.label" />
             </template>
           </div>
           <div class="filter-buttons">
-            <Button
-              :label="_('apply_filters')"
-              icon="pi pi-filter"
-              @click="applyFilters"
-            />
+            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -557,14 +586,14 @@ onMounted(async () => {
         <table v-else class="payments-table">
           <thead>
             <tr>
-              <th style="width: 40px">
+              <th style="width: 2.5rem">
                 <Checkbox
-                  :modelValue="selectAll"
+                  :model-value="selectAll"
                   :binary="true"
-                  @update:modelValue="onSelectAllChange"
+                  @update:model-value="onSelectAllChange"
                 />
               </th>
-              <th style="width: 40px"></th>
+              <th style="width: 2.5rem"></th>
               <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
                 <th :style="{ width: column.width, minWidth: column.minWidth }">
                   {{ column.label }}
@@ -583,15 +612,17 @@ onMounted(async () => {
               <tr>
                 <td>
                   <Checkbox
-                    :modelValue="selectedItems.some(item => item.id === payment.id)"
+                    :model-value="selectedItems.some(item => item.id === payment.id)"
                     :binary="true"
-                    @update:modelValue="(val) => {
-                      if (val) {
-                        selectedItems.push(payment)
-                      } else {
-                        selectedItems = selectedItems.filter(item => item.id !== payment.id)
+                    @update:model-value="
+                      val => {
+                        if (val) {
+                          selectedItems.push(payment)
+                        } else {
+                          selectedItems = selectedItems.filter(item => item.id !== payment.id)
+                        }
                       }
-                    }"
+                    "
                   />
                 </td>
                 <td>
@@ -626,7 +657,13 @@ onMounted(async () => {
                   </td>
                   <!-- Boolean column -->
                   <td v-else-if="column.type === 'boolean'">
-                    <i :class="payment[column.name] ? 'pi pi-check text-success' : 'pi pi-times text-danger'"></i>
+                    <i
+                      :class="
+                        payment[column.name]
+                          ? 'pi pi-check text-success'
+                          : 'pi pi-times text-danger'
+                      "
+                    ></i>
                   </td>
                   <!-- Regular column -->
                   <td v-else>
@@ -646,8 +683,8 @@ onMounted(async () => {
       :header="isNewPayment ? _('payment_create') : _('payment_edit')"
       :modal="true"
       :closable="true"
-      :style="{ width: '600px' }"
-      appendTo="self"
+      :style="{ width: '37.5rem' }"
+      append-to="self"
     >
       <div v-if="editingPayment">
         <Tabs v-model:value="activeTab">
@@ -683,7 +720,11 @@ onMounted(async () => {
 
                 <div class="form-row">
                   <div class="checkbox-field">
-                    <Checkbox v-model="editingPayment.active" :binary="true" inputId="payment-active" />
+                    <Checkbox
+                      v-model="editingPayment.active"
+                      :binary="true"
+                      input-id="payment-active"
+                    />
                     <label for="payment-active">{{ _('payment_active') }}</label>
                   </div>
                 </div>
@@ -695,7 +736,11 @@ onMounted(async () => {
               <div class="edit-form">
                 <div class="form-row mb-3">
                   <label>{{ _('payment_class') }}</label>
-                  <InputText v-model="editingPayment.class" class="w-full" :placeholder="_('payment_class_placeholder')" />
+                  <InputText
+                    v-model="editingPayment.class"
+                    class="w-full"
+                    :placeholder="_('payment_class_placeholder')"
+                  />
                 </div>
 
                 <div class="form-row mb-3">
@@ -719,29 +764,34 @@ onMounted(async () => {
                 <DataTable
                   v-else
                   :value="deliveries"
-                  stripedRows
-                  responsiveLayout="scroll"
+                  striped-rows
+                  responsive-layout="scroll"
                   class="deliveries-table"
                 >
                   <Column field="name" :header="_('delivery_name')">
                     <template #body="{ data }">
                       <div class="delivery-name-cell">
-                        <img v-if="data.logo" :src="data.logo" :alt="data.name" class="delivery-logo-small" />
+                        <img
+                          v-if="data.logo"
+                          :src="data.logo"
+                          :alt="data.name"
+                          class="delivery-logo-small"
+                        />
                         <span>{{ getDisplayName(data.name) }}</span>
                       </div>
                     </template>
                   </Column>
-                  <Column field="price" :header="_('ms3_add_cost')" style="width: 150px">
+                  <Column field="price" :header="_('ms3_add_cost')" style="width: 9.375rem">
                     <template #body="{ data }">
                       <span v-if="data.price">{{ data.price }}</span>
                       <span v-else class="text-muted">—</span>
                     </template>
                   </Column>
-                  <Column :header="_('payment_active')" style="width: 100px">
+                  <Column :header="_('payment_active')" style="width: 6.25rem">
                     <template #body="{ data }">
                       <ToggleSwitch
-                        :modelValue="isDeliveryEnabled(data.id)"
-                        @update:modelValue="(val) => toggleDelivery(data.id, val)"
+                        :model-value="isDeliveryEnabled(data.id)"
+                        @update:model-value="val => toggleDelivery(data.id, val)"
                       />
                     </template>
                   </Column>
@@ -759,12 +809,7 @@ onMounted(async () => {
           severity="secondary"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="savePayment"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="savePayment" />
       </template>
     </Dialog>
   </div>
@@ -772,7 +817,7 @@ onMounted(async () => {
 
 <style scoped>
 .payments-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .grid-header {
@@ -793,21 +838,21 @@ onMounted(async () => {
   display: flex;
   gap: 1.5rem;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .stat-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--ms3-spacing-2);
 }
 
 .stat-item i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .stat-item strong {
-  color: #334155;
+  color: var(--ms3-text-dark);
 }
 
 .filters-row {
@@ -816,22 +861,22 @@ onMounted(async () => {
   gap: 1rem;
   margin-bottom: 1rem;
   padding: 1rem;
-  background: #f8fafc;
-  border-radius: 6px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.375rem;
 }
 
 .filter-item {
   display: flex;
   flex-direction: column;
-  min-width: 150px;
+  min-width: 9.375rem;
 }
 
 .filter-item label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--ms3-spacing-2);
   font-weight: 500;
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -845,18 +890,18 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  padding: var(--ms3-spacing-3) var(--ms3-spacing-4);
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: var(--ms3-radius-md);
 }
 
 .bulk-info {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--ms3-spacing-2);
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -873,11 +918,11 @@ onMounted(async () => {
 }
 
 .text-success {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .text-danger {
-  color: #ef4444;
+  color: var(--ms3-text-danger);
 }
 
 /* Edit form styles */
@@ -898,14 +943,14 @@ onMounted(async () => {
 
 .form-row label {
   font-weight: 500;
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 /* Form hint */
 .form-hint {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-size: 0.8rem;
-  margin-top: 0.25rem;
+  margin-top: var(--ms3-spacing-1);
 }
 
 /* Tabs styling */
@@ -923,37 +968,37 @@ onMounted(async () => {
 }
 
 .deliveries-hint {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-size: 0.9rem;
 }
 
 .loading-deliveries {
   text-align: center;
   padding: 2rem;
-  color: #6b7280;
+  color: var(--ms3-text-muted);
 }
 
 .no-deliveries {
   text-align: center;
   padding: 2rem;
-  color: #9ca3af;
+  color: var(--ms3-text-muted-light);
 }
 
 .delivery-name-cell {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
 }
 
 .delivery-logo-small {
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   object-fit: contain;
   flex-shrink: 0;
 }
 
 .text-muted {
-  color: #9ca3af;
+  color: var(--ms3-text-muted-light);
 }
 
 /* Custom table styles */
@@ -964,30 +1009,30 @@ onMounted(async () => {
 
 .payments-table th,
 .payments-table td {
-  padding: 0.75rem;
+  padding: var(--ms3-spacing-3);
   text-align: left;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
 }
 
 .payments-table th {
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
   font-weight: 600;
-  color: #475569;
+  color: var(--ms3-text-header);
 }
 
 .payments-table tbody tr:hover {
-  background: #f1f5f9;
+  background: var(--ms3-bg-slate-alt);
 }
 
 /* Drag handle */
 .drag-handle {
   cursor: grab;
-  color: #94a3b8;
-  padding: 0.25rem;
+  color: var(--ms3-text-light);
+  padding: var(--ms3-spacing-1);
 }
 
 .drag-handle:hover {
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .drag-handle:active {
@@ -1007,10 +1052,10 @@ onMounted(async () => {
 
 /* Grid thumbnail */
 .grid-thumbnail {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   object-fit: contain;
-  border-radius: 4px;
+  border-radius: 0.25rem;
 }
 
 /* Loading overlay */
@@ -1019,7 +1064,6 @@ onMounted(async () => {
   justify-content: center;
   align-items: center;
   padding: 3rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
-
 </style>
diff --git a/vueManager/src/components/ProductData.vue b/vueManager/src/components/ProductData.vue
index 0f6a93a..38716ae 100644
--- a/vueManager/src/components/ProductData.vue
+++ b/vueManager/src/components/ProductData.vue
@@ -1,17 +1,15 @@
 <script setup>
-
+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 { onMounted, ref } from 'vue'
-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';
 
-const confirm = useConfirm();
-const toast = useToast();
+const confirm = useConfirm()
+const toast = useToast()
 
-import request from '../request.js';
+import request from '../request.js'
 
 const loading = ref(false)
 const leftFields = ref([])
@@ -37,7 +35,7 @@ onMounted(async function () {
   await getXtypes()
 })
 
-async function get () {
+async function get() {
   loading.value = true
 
   if (!isDev) {
@@ -56,7 +54,7 @@ async function get () {
   }
 }
 
-async function getXtypes () {
+async function getXtypes() {
   loading.value = true
 
   if (!isDev) {
@@ -73,7 +71,7 @@ async function getXtypes () {
   }
 }
 
-async function save () {
+async function save() {
   loading.value = true
 
   if (!isDev) {
@@ -98,7 +96,7 @@ async function save () {
   }
 }
 
-const confirmRemove = (field) => {
+const confirmRemove = field => {
   confirm.require({
     message: 'Delete record?',
     header: 'Deletion',
@@ -114,36 +112,36 @@ const confirmRemove = (field) => {
     accept: () => {
       remove(field.name)
       save()
-      toast.add({ severity: 'success', summary: 'OK', detail: 'Record deleted', life: 3000 });
+      toast.add({ severity: 'success', summary: 'OK', detail: 'Record deleted', life: 3000 })
     },
-  });
+  })
 }
 
-function remove (name) {
-  const lIndex = leftFields.value.findIndex(obj => obj.name === name);
-  const rIndex = rightFields.value.findIndex(obj => obj.name === name);
+function remove(name) {
+  const lIndex = leftFields.value.findIndex(obj => obj.name === name)
+  const rIndex = rightFields.value.findIndex(obj => obj.name === name)
   if (lIndex !== -1) {
-    leftFields.value.splice(lIndex, 1);
+    leftFields.value.splice(lIndex, 1)
   }
   if (rIndex !== -1) {
-    rightFields.value.splice(rIndex, 1);
+    rightFields.value.splice(rIndex, 1)
   }
 }
 
-function showEdit (data) {
+function showEdit(data) {
   editedField.value = Object.assign({ anchor: '99%' }, data)
   editVisible.value = true
 }
 
-function closeEdit () {
+function closeEdit() {
   editedField.value = {}
   editVisible.value = false
 }
 
-function saveEdit () {
+function saveEdit() {
   const fieldForSave = Object.assign({}, editedField.value)
-  const lIndex = leftFields.value.findIndex(obj => obj.name === fieldForSave.name);
-  const rIndex = rightFields.value.findIndex(obj => obj.name === fieldForSave.name);
+  const lIndex = leftFields.value.findIndex(obj => obj.name === fieldForSave.name)
+  const rIndex = rightFields.value.findIndex(obj => obj.name === fieldForSave.name)
   if (lIndex !== -1) {
     leftFields.value[lIndex] = fieldForSave
   }
@@ -158,29 +156,29 @@ function saveEdit () {
   toast.add({ severity: 'success', summary: 'OK', detail: 'Record saved', life: 3000 })
 }
 
-const RightReorder = (event) => {
-  rightFields.value = event.value;
+const RightReorder = event => {
+  rightFields.value = event.value
   toast.add({ severity: 'success', summary: 'Sorting saved', life: 3000 })
   save()
 }
 
-const LeftReorder = (event) => {
-  leftFields.value = event.value;
+const LeftReorder = event => {
+  leftFields.value = event.value
   toast.add({ severity: 'success', summary: 'Sorting saved', life: 3000 })
   save()
 }
 
-function addField (column) {
+function addField(column) {
   createVisible.value = true
   columnForCreate.value = column
 }
 
-function closeCreate () {
+function closeCreate() {
   createdField.value = {}
   createVisible.value = false
 }
 
-function saveCreate () {
+function saveCreate() {
   const fieldForSave = Object.assign({}, createdField.value)
   if (columnForCreate.value === 'left') {
     const index = Object.keys(leftFields.value).length
@@ -198,72 +196,83 @@ function saveCreate () {
 }
 
 function getXtypeTitle(name) {
-  const type =  types.value.find(item => item.xtype === name)
+  const type = types.value.find(item => item.xtype === name)
   if (type !== undefined) {
     return type.name
   }
   return name
 }
-
-
 </script>
 
 <template>
   <h3>Here you can manage the layout and display of product properties on the product page</h3>
-  <div style="padding: 40px 0;">
-    <Card style="max-width: 840px; margin-bottom: 50px;">
+  <div style="padding: 2.5rem 0">
+    <Card style="max-width: 52.5rem; margin-bottom: 3.125rem">
       <template #title>
-        <div style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
+        <div
+          style="width: 100%; display: flex; align-items: center; justify-content: space-between"
+        >
           <span>Left Column</span>
           <Button icon="pi pi-plus"></Button>
         </div>
       </template>
       <template #content>
-        <DataTable :value="leftFields" tableStyle="min-width: 50rem" @rowReorder="LeftReorder">
-          <Column rowReorder headerStyle="width: 3rem"/>
-          <Column field="name" header="Field" style="width: 300px;"></Column>
-          <Column field="xtype" header="Type" style="width: 300px;">
+        <DataTable :value="leftFields" table-style="min-width: 50rem" @row-reorder="LeftReorder">
+          <Column row-reorder header-style="width: 3rem" />
+          <Column field="name" header="Field" style="width: 18.75rem"></Column>
+          <Column field="xtype" header="Type" style="width: 18.75rem">
             <template #body="{ data }">
               <span> {{ getXtypeTitle(data.xtype) }}</span>
             </template>
           </Column>
           <Column class="w-24">
             <template #body="{ data }">
-              <div style="display: flex; align-items: center; justify-content: flex-start; gap: 20px;">
+              <div
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                  gap: 1.25rem;
+                "
+              >
                 <Button icon="pi pi-pencil" @click="showEdit(data)"></Button>
 
-                <Button icon="pi pi-minus" class="btn-danger" @click="confirmRemove( data)"></Button>
+                <Button icon="pi pi-minus" class="btn-danger" @click="confirmRemove(data)"></Button>
               </div>
             </template>
           </Column>
         </DataTable>
-
       </template>
     </Card>
 
-
-    <Card style="max-width: 840px;">
+    <Card style="max-width: 52.5rem">
       <template #title>
-        <div style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
+        <div
+          style="width: 100%; display: flex; align-items: center; justify-content: space-between"
+        >
           <span>Right Column</span>
           <Button icon="pi pi-plus" @click="addField('right')"></Button>
         </div>
       </template>
       <template #content>
-        <DataTable :value="rightFields" tableStyle="min-width: 50rem"
-                   @rowReorder="RightReorder"
-        >
-          <Column rowReorder headerStyle="width: 3rem"/>
-          <Column field="name" header="Field" style="width: 300px;"></Column>
-          <Column field="xtype" header="Type" style="width: 300px;">
+        <DataTable :value="rightFields" table-style="min-width: 50rem" @row-reorder="RightReorder">
+          <Column row-reorder header-style="width: 3rem" />
+          <Column field="name" header="Field" style="width: 18.75rem"></Column>
+          <Column field="xtype" header="Type" style="width: 18.75rem">
             <template #body="{ data }">
               <span> {{ getXtypeTitle(data.xtype) }}</span>
             </template>
           </Column>
           <Column class="w-24">
             <template #body="{ data }">
-              <div style="display: flex; align-items: center; justify-content: flex-start; gap: 20px;">
-
+              <div
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                  gap: 1.25rem;
+                "
+              >
                 <Button icon="pi pi-pencil" @click="showEdit(data)"></Button>
 
                 <Button icon="pi pi-minus" class="btn-danger"></Button>
@@ -271,72 +280,141 @@ function getXtypeTitle(name) {
             </template>
           </Column>
         </DataTable>
-
-
       </template>
     </Card>
   </div>
 
-  <Dialog v-model:visible="editVisible" modal header="Edit Field" :style="{ width: '25rem' }"
-          v-if="Object.entries(editedField).length > 0" appendTo="self"
+  <Dialog
+    v-if="Object.entries(editedField).length > 0"
+    v-model:visible="editVisible"
+    modal
+    header="Edit Field"
+    :style="{ width: '25rem' }"
+    append-to="self"
   >
-    <div class="flex items-center gap-4 mb-4"
-         style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-      <label for="name" style="width: 50%;">Field</label>
-      <InputText id="name" autocomplete="off" disabled readonly :value="editedField.name" style="width: 50%;"/>
+    <div
+      class="flex items-center gap-4 mb-4"
+      style="display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem"
+    >
+      <label for="name" style="width: 50%">Field</label>
+      <InputText
+        id="name"
+        autocomplete="off"
+        disabled
+        readonly
+        :value="editedField.name"
+        style="width: 50%"
+      />
     </div>
 
-    <div class="flex items-center gap-4 mb-4"
-         style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-      <label for="name" style="width: 50%;">Field Type</label>
-
-      <Select v-model="editedField.xtype" :options="types" optionLabel="name" optionValue="xtype" style="width: 58%;"/>
+    <div
+      class="flex items-center gap-4 mb-4"
+      style="display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem"
+    >
+      <label for="name" style="width: 50%">Field Type</label>
+
+      <Select
+        v-model="editedField.xtype"
+        :options="types"
+        option-label="name"
+        option-value="xtype"
+        style="width: 58%"
+      />
     </div>
 
-    <div class="flex items-center gap-4 mb-4"
-         style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-      <label for="anchor" style="width: 50%;">Field Width</label>
-      <InputText inputId="anchor" name="anchor" v-model="editedField.anchor" style="width: 50%;"
-                 fluid/>
+    <div
+      class="flex items-center gap-4 mb-4"
+      style="display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem"
+    >
+      <label for="anchor" style="width: 50%">Field Width</label>
+      <InputText
+        v-model="editedField.anchor"
+        input-id="anchor"
+        name="anchor"
+        style="width: 50%"
+        fluid
+      />
     </div>
 
-
-    <div style="display:flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 40px;">
+    <div
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 1.25rem;
+        margin-top: 2.5rem;
+      "
+    >
       <Button type="button" label="Cancel" severity="secondary" @click="closeEdit()"></Button>
       <Button type="button" label="Save" @click="saveEdit()"></Button>
     </div>
   </Dialog>
 
-  <Dialog v-model:visible="createVisible" modal header="Add Field" :style="{ width: '25rem' }" appendTo="self">
-    <div class="flex items-center gap-4 mb-4"
-         style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-      <label for="name" style="width: 50%;">Field</label>
-
-      <Select v-model="createdField.name" :options="unUsedFields" optionLabel="title" optionValue="name"
-              style="width: 58%;"/>
+  <Dialog
+    v-model:visible="createVisible"
+    modal
+    header="Add Field"
+    :style="{ width: '25rem' }"
+    append-to="self"
+  >
+    <div
+      class="flex items-center gap-4 mb-4"
+      style="display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem"
+    >
+      <label for="name" style="width: 50%">Field</label>
+
+      <Select
+        v-model="createdField.name"
+        :options="unUsedFields"
+        option-label="title"
+        option-value="name"
+        style="width: 58%"
+      />
     </div>
 
-    <div class="flex items-center gap-4 mb-4"
-         style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-      <label for="name" style="width: 50%;">Field Type</label>
-
-      <Select v-model="createdField.xtype" :options="types" optionLabel="name" optionValue="xtype" style="width: 58%;"/>
+    <div
+      class="flex items-center gap-4 mb-4"
+      style="display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem"
+    >
+      <label for="name" style="width: 50%">Field Type</label>
+
+      <Select
+        v-model="createdField.xtype"
+        :options="types"
+        option-label="name"
+        option-value="xtype"
+        style="width: 58%"
+      />
     </div>
 
-    <div class="flex items-center gap-4 mb-4"
-         style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-      <label for="anchor" style="width: 50%;">Field Width</label>
-      <InputText inputId="anchor" name="anchor" v-model="createdField.anchor" style="width: 50%;"
-                 fluid/>
+    <div
+      class="flex items-center gap-4 mb-4"
+      style="display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem"
+    >
+      <label for="anchor" style="width: 50%">Field Width</label>
+      <InputText
+        v-model="createdField.anchor"
+        input-id="anchor"
+        name="anchor"
+        style="width: 50%"
+        fluid
+      />
     </div>
 
-
-    <div style="display:flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 40px;">
+    <div
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 1.25rem;
+        margin-top: 2.5rem;
+      "
+    >
       <Button type="button" label="Cancel" severity="secondary" @click="closeCreate()"></Button>
       <Button type="button" label="Add" @click="saveCreate()"></Button>
     </div>
   </Dialog>
 
-  <Toast/>
-  <ConfirmDialog appendTo="self" />
+  <Toast />
+  <ConfirmDialog append-to="self" />
 </template>
diff --git a/vueManager/src/components/ProductDataConfig.vue b/vueManager/src/components/ProductDataConfig.vue
index 54e9047..ea407a5 100644
--- a/vueManager/src/components/ProductDataConfig.vue
+++ b/vueManager/src/components/ProductDataConfig.vue
@@ -1,20 +1,21 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+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 Dropdown from 'primevue/dropdown'
+import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
 import Textarea from 'primevue/textarea'
-import InputNumber from 'primevue/inputnumber'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 const toast = useToast()
 const confirm = useConfirm()
@@ -60,7 +61,7 @@ const availableSectionOptions = computed(() => {
     .forEach(section => {
       options.push({
         label: section.label || section.key,
-        value: section.id,  // Using ID instead of key, since section in DB is FK to id
+        value: section.id, // Using ID instead of key, since section in DB is FK to id
       })
     })
 
@@ -73,7 +74,7 @@ const availableSectionOptions = computed(() => {
 function getSectionLabel(sectionId) {
   if (!sectionId) return _('ms3_vue_no_section')
   const section = sections.value.find(s => s.id === sectionId)
-  return section ? (section.label || section.key) : `ID: ${sectionId}`
+  return section ? section.label || section.key : `ID: ${sectionId}`
 }
 
 /**
@@ -171,10 +172,7 @@ async function saveSections() {
       label: section.label || null,
     }))
 
-    await request.put(
-      `/api/mgr/config/sections/${pageKey}`,
-      { sections: sectionsToSave },
-    )
+    await request.put(`/api/mgr/config/sections/${pageKey}`, { sections: sectionsToSave })
 
     toast.add({
       severity: 'success',
@@ -422,10 +420,7 @@ async function saveConfig() {
       sort_order: index,
     }))
 
-    await request.put(
-      `/api/mgr/config/page-fields/${pageKey}`,
-      { fields: fieldsToSave },
-    )
+    await request.put(`/api/mgr/config/page-fields/${pageKey}`, { fields: fieldsToSave })
 
     toast.add({
       severity: 'success',
@@ -470,9 +465,8 @@ function openEditDialog(field, index) {
     ...field,
     // Convert visible: 0/1 (number) or true/false (boolean) to boolean
     // Default true if not set
-    visible: field.visible !== undefined && field.visible !== null
-      ? Boolean(Number(field.visible))
-      : true,
+    visible:
+      field.visible !== undefined && field.visible !== null ? Boolean(Number(field.visible)) : true,
   }
   editingFieldIndex.value = index
   editDialogVisible.value = true
@@ -506,10 +500,7 @@ async function saveFieldChanges() {
         visible: field.visible !== undefined ? field.visible : true,
       }))
 
-      await request.put(
-        `/api/mgr/config/page-fields/${pageKey}`,
-        { fields: fieldsToSave },
-      )
+      await request.put(`/api/mgr/config/page-fields/${pageKey}`, { fields: fieldsToSave })
 
       toast.add({
         severity: 'success',
@@ -547,18 +538,18 @@ onMounted(() => {
     <p class="tab-description">{{ _('ms3_vue_product_fields_description') }}</p>
 
     <!-- Sections table -->
-    <Card style="margin-top: 20px;">
+    <Card style="margin-top: 1.25rem">
       <template #title>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="display: flex; justify-content: space-between; align-items: center">
           <span>{{ _('ms3_vue_sections') }}</span>
-          <div style="display: flex; gap: 10px;">
+          <div style="display: flex; gap: 0.625rem">
             <Button
               :label="_('ms3_vue_save_changes')"
               icon="pi pi-save"
               size="small"
-              @click="saveSections"
               :loading="saving"
               :disabled="loadingSections"
+              @click="saveSections"
             />
             <Button
               :label="_('ms3_vue_section_add')"
@@ -572,16 +563,16 @@ onMounted(() => {
 
       <template #content>
         <!-- Sections table with VueDraggable -->
-        <div class="p-datatable p-component p-datatable-striped" v-if="!loadingSections">
+        <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: 100px">{{ _('ms3_vue_visible') }}</th>
-                  <th style="width: 200px">{{ _('ms3_vue_section_key') }}</th>
-                  <th style="width: 250px">{{ _('ms3_vue_section_label') }}</th>
-                  <th style="width: 100px">{{ _('ms3_vue_actions') }}</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
@@ -590,9 +581,9 @@ onMounted(() => {
                 class="p-datatable-tbody"
                 handle=".drag-handle"
                 item-key="key"
-                @end="onSectionDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onSectionDragEnd"
               >
                 <template #item="{ element: section, index }">
                   <tr>
@@ -603,8 +594,8 @@ onMounted(() => {
                       <Checkbox
                         v-model="section.hidden"
                         :binary="true"
-                        :trueValue="false"
-                        :falseValue="true"
+                        :true-value="false"
+                        :false-value="true"
                       />
                     </td>
                     <td>{{ section.key }}</td>
@@ -614,16 +605,16 @@ onMounted(() => {
                         icon="pi pi-pencil"
                         size="small"
                         text
-                        @click="openEditSectionDialog(section, index)"
                         :title="_('ms3_vue_section_edit')"
+                        @click="openEditSectionDialog(section, index)"
                       />
                       <Button
                         icon="pi pi-trash"
                         size="small"
                         severity="danger"
                         text
-                        @click="deleteSection(section.key)"
                         :title="_('ms3_vue_section_delete')"
+                        @click="deleteSection(section.key)"
                       />
                     </td>
                   </tr>
@@ -641,35 +632,35 @@ onMounted(() => {
     </Card>
 
     <!-- Fields table -->
-    <Card style="margin-top: 20px;">
+    <Card style="margin-top: 1.25rem">
       <template #title>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
+        <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"
-            @click="saveConfig"
             :loading="saving"
             :disabled="loading"
+            @click="saveConfig"
           />
         </div>
       </template>
 
       <template #content>
         <!-- Fields table with VueDraggable -->
-        <div class="p-datatable p-component p-datatable-striped" v-if="!loading">
+        <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: 100px">{{ _('ms3_vue_visible_column') }}</th>
-                  <th style="width: 200px">{{ _('ms3_vue_field_column') }}</th>
-                  <th style="width: 200px">{{ _('ms3_vue_label_column') }}</th>
-                  <th style="width: 150px">{{ _('ms3_vue_type_column') }}</th>
-                  <th style="width: 150px">{{ _('ms3_vue_section_column') }}</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: 120px">{{ _('ms3_vue_actions_column') }}</th>
+                  <th style="width: 7.5rem">{{ _('ms3_vue_actions_column') }}</th>
                 </tr>
               </thead>
               <draggable
@@ -678,9 +669,9 @@ onMounted(() => {
                 class="p-datatable-tbody"
                 handle=".drag-handle"
                 item-key="name"
-                @end="onFieldsDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onFieldsDragEnd"
               >
                 <template #item="{ element: field, index }">
                   <tr>
@@ -691,8 +682,8 @@ onMounted(() => {
                       <Checkbox
                         v-model="field.visible"
                         :binary="true"
-                        :trueValue="true"
-                        :falseValue="false"
+                        :true-value="true"
+                        :false-value="false"
                       />
                     </td>
                     <td>{{ field.name }}</td>
@@ -705,8 +696,8 @@ onMounted(() => {
                         icon="pi pi-pencil"
                         size="small"
                         outlined
-                        @click="openEditDialog(field, index)"
                         :title="_('ms3_vue_edit_field_button')"
+                        @click="openEditDialog(field, index)"
                       />
                     </td>
                   </tr>
@@ -728,8 +719,8 @@ onMounted(() => {
       v-model:visible="addSectionDialogVisible"
       modal
       :header="_('ms3_vue_add_section_title')"
-      :style="{ width: '600px' }"
-      appendTo="self"
+      :style="{ width: '37.5rem' }"
+      append-to="self"
     >
       <div class="edit-field-form">
         <div class="form-grid">
@@ -771,15 +762,20 @@ onMounted(() => {
 
           <!-- Visibility -->
           <div class="field col-12">
-            <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="display: flex; align-items: center; gap: 0.5rem">
               <Checkbox
-                inputId="section-hidden"
                 v-model="newSection.hidden"
+                input-id="section-hidden"
                 :binary="true"
-                :trueValue="false"
-                :falseValue="true"
+                :true-value="false"
+                :false-value="true"
               />
-              <label for="section-hidden" style="margin: 0; cursor: pointer;" @click="newSection.hidden = !newSection.hidden">{{ _('ms3_vue_section_visible_label') }}</label>
+              <label
+                for="section-hidden"
+                style="margin: 0; cursor: pointer"
+                @click="newSection.hidden = !newSection.hidden"
+                >{{ _('ms3_vue_section_visible_label') }}</label
+              >
             </div>
             <small>{{ _('ms3_vue_section_visibility_hint') }}</small>
           </div>
@@ -793,11 +789,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" @click="addSection" />
       </template>
     </Dialog>
 
@@ -805,27 +797,28 @@ onMounted(() => {
     <Dialog
       v-model:visible="editSectionDialogVisible"
       modal
-      :header="editingSection ? `${_('ms3_vue_edit_section_title')}: ${editingSection.key}` : _('ms3_vue_edit_section_title')"
-      :style="{ width: '600px' }"
-      appendTo="self"
+      :header="
+        editingSection
+          ? `${_('ms3_vue_edit_section_title')}: ${editingSection.key}`
+          : _('ms3_vue_edit_section_title')
+      "
+      :style="{ width: '37.5rem' }"
+      append-to="self"
     >
       <div v-if="editingSection" class="edit-field-form">
         <div class="form-grid">
           <!-- Section key (readonly) -->
           <div class="field col-12">
             <label for="edit-section-key">{{ _('ms3_vue_section_key_label') }}</label>
-            <InputText
-              id="edit-section-key"
-              v-model="editingSection.key"
-              disabled
-              class="w-full"
-            />
+            <InputText id="edit-section-key" v-model="editingSection.key" disabled class="w-full" />
             <small>{{ _('ms3_vue_section_key_readonly_hint') }}</small>
           </div>
 
           <!-- Lexicon key -->
           <div class="field col-6">
-            <label for="edit-section-lexicon-key">{{ _('ms3_vue_section_lexicon_key_label') }}</label>
+            <label for="edit-section-lexicon-key">{{
+              _('ms3_vue_section_lexicon_key_label')
+            }}</label>
             <InputText
               id="edit-section-lexicon-key"
               v-model="editingSection.lexicon_key"
@@ -849,15 +842,20 @@ onMounted(() => {
 
           <!-- Visibility -->
           <div class="field col-12">
-            <div style="display: flex; align-items: center; gap: 8px;">
+            <div style="display: flex; align-items: center; gap: 0.5rem">
               <Checkbox
-                inputId="edit-section-hidden"
                 v-model="editingSection.hidden"
+                input-id="edit-section-hidden"
                 :binary="true"
-                :trueValue="false"
-                :falseValue="true"
+                :true-value="false"
+                :false-value="true"
               />
-              <label for="edit-section-hidden" style="margin: 0; cursor: pointer;" @click="editingSection.hidden = !editingSection.hidden">{{ _('ms3_vue_section_visible_label') }}</label>
+              <label
+                for="edit-section-hidden"
+                style="margin: 0; cursor: pointer"
+                @click="editingSection.hidden = !editingSection.hidden"
+                >{{ _('ms3_vue_section_visible_label') }}</label
+              >
             </div>
             <small>{{ _('ms3_vue_section_visibility_hint') }}</small>
           </div>
@@ -871,11 +869,7 @@ 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" @click="saveEditedSection" />
       </template>
     </Dialog>
 
@@ -883,35 +877,34 @@ onMounted(() => {
     <Dialog
       v-model:visible="editDialogVisible"
       modal
-      :header="editingField ? `${_('ms3_vue_field_edit_title')}: ${editingField.name}` : _('ms3_vue_field_edit_title')"
-      :style="{ width: '600px' }"
-      appendTo="self"
+      :header="
+        editingField
+          ? `${_('ms3_vue_field_edit_title')}: ${editingField.name}`
+          : _('ms3_vue_field_edit_title')
+      "
+      :style="{ width: '37.5rem' }"
+      append-to="self"
     >
       <div v-if="editingField" class="edit-field-form">
         <div class="form-grid">
           <!-- Field type (readonly) -->
           <div class="field col-6">
             <label for="field-xtype">{{ _('ms3_vue_field_xtype') }}</label>
-            <InputText
-              id="field-xtype"
-              v-model="editingField.xtype"
-              disabled
-              class="w-full"
-            />
+            <InputText id="field-xtype" v-model="editingField.xtype" disabled class="w-full" />
             <small>{{ _('ms3_vue_field_xtype_readonly') }}</small>
           </div>
 
           <!-- Section -->
           <div class="field col-6">
             <label for="field-section">{{ _('ms3_vue_field_section') }}</label>
-            <Dropdown
+            <Select
               id="field-section"
               v-model="editingField.section"
               :options="availableSectionOptions"
-              optionLabel="label"
-              optionValue="value"
+              option-label="label"
+              option-value="value"
               :placeholder="_('ms3_vue_field_section_placeholder')"
-              showClear
+              show-clear
               class="w-full"
             />
             <small>{{ _('ms3_vue_field_section_help') }}</small>
@@ -958,13 +951,17 @@ onMounted(() => {
           <div class="field col-6 field-checkbox">
             <div class="checkbox-wrapper">
               <Checkbox
-                inputId="field-visible"
                 v-model="editingField.visible"
+                input-id="field-visible"
                 :binary="true"
-                :trueValue="true"
-                :falseValue="false"
+                :true-value="true"
+                :false-value="false"
               />
-              <label for="field-visible" class="field-label checkbox-label" @click="editingField.visible = !editingField.visible">
+              <label
+                for="field-visible"
+                class="field-label checkbox-label"
+                @click="editingField.visible = !editingField.visible"
+              >
                 {{ _('ms3_vue_field_visible') }}
               </label>
             </div>
@@ -990,36 +987,36 @@ onMounted(() => {
           :label="_('ms3_vue_field_cancel')"
           icon="pi pi-times"
           severity="secondary"
-          @click="closeEditDialog"
           :disabled="saving"
+          @click="closeEditDialog"
         />
         <Button
           :label="_('ms3_vue_field_save')"
           icon="pi pi-save"
-          @click="saveFieldChanges"
           :loading="saving"
+          @click="saveFieldChanges"
         />
       </template>
     </Dialog>
 
     <Toast />
-    <ConfirmDialog group="product-data-config" appendTo="self" />
+    <ConfirmDialog group="product-data-config" append-to="self" />
   </div>
 </template>
 
 <style scoped>
 .product-data-config {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 h2 {
-  margin: 0 0 10px 0;
-  font-size: 24px;
+  margin: 0 0 0.625rem 0;
+  font-size: 1.5rem;
 }
 
 p {
-  margin: 0 0 20px 0;
-  color: #666;
+  margin: 0 0 1.25rem 0;
+  color: var(--ms3-text-muted);
 }
 
 .drag-handle-cell {
@@ -1030,14 +1027,14 @@ p {
 
 .drag-handle {
   cursor: grab;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 1.2rem;
   padding: 0.5rem;
   user-select: none;
 }
 
 .drag-handle:hover {
-  color: #495057;
+  color: var(--ms3-text-hint);
 }
 
 .drag-handle:active {
@@ -1046,12 +1043,12 @@ p {
 
 :deep(.ghost-row) {
   opacity: 0.5;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.sortable-drag) {
   opacity: 0.8;
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
   cursor: grabbing !important;
 }
 
@@ -1060,15 +1057,15 @@ p {
   justify-content: center;
   align-items: center;
   padding: 3rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
 }
 
 :deep(.p-datatable-tbody tr:nth-child(even)) {
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.p-datatable-tbody tr:hover) {
-  background: #e9ecef;
+  background: var(--ms3-bg-neutral);
 }
 </style>
 
@@ -1076,38 +1073,38 @@ p {
 /* Modal window styles - work in both .vueApp and .p-dialog */
 .vueApp .edit-field-form,
 .p-dialog .edit-field-form {
-  padding: 10px 0;
+  padding: 0.625rem 0;
 }
 
 .vueApp .form-grid,
 .p-dialog .form-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  margin: -8px;
+  gap: 1rem;
+  margin: -0.5rem;
 }
 
 .vueApp .edit-field-form .field,
 .p-dialog .edit-field-form .field {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 8px;
+  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: 14px;
-  color: #333;
+  font-size: 0.875rem;
+  color: var(--ms3-text-primary);
 }
 
 .vueApp .edit-field-form .field small,
 .p-dialog .edit-field-form .field small {
-  color: #666;
-  font-size: 12px;
-  margin-top: -2px;
+  color: var(--ms3-text-muted);
+  font-size: 0.75rem;
+  margin-top: -0.125rem;
 }
 
 .vueApp .edit-field-form .w-full,
@@ -1118,21 +1115,21 @@ p {
 /* Grid for modal window */
 .vueApp .col-6,
 .p-dialog .col-6 {
-  flex: 0 0 calc(50% - 16px);
-  max-width: calc(50% - 16px);
+  flex: 0 0 calc(50% - 1rem);
+  max-width: calc(50% - 1rem);
 }
 
 .vueApp .col-12,
 .p-dialog .col-12 {
-  flex: 0 0 calc(100% - 16px);
-  max-width: calc(100% - 16px);
+  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: 10px;
+  gap: 0.625rem;
   align-items: center;
 }
 
diff --git a/vueManager/src/components/ProductDataFields.vue b/vueManager/src/components/ProductDataFields.vue
index 138a5c5..458beb1 100644
--- a/vueManager/src/components/ProductDataFields.vue
+++ b/vueManager/src/components/ProductDataFields.vue
@@ -1,12 +1,13 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
+import { useLexicon } from '@vuetools/useLexicon'
 import Card from 'primevue/card'
-import Message from 'primevue/message'
 import Fieldset from 'primevue/fieldset'
+import Message from 'primevue/message'
 import { useToast } from 'primevue/usetoast'
-import DynamicField from './DynamicField.vue'
+import { computed, onMounted, ref } from 'vue'
+
 import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+import DynamicField from './DynamicField.vue'
 
 const props = defineProps({
   productId: {
@@ -68,7 +69,7 @@ async function loadProductData() {
       summary: _('ms3_vue_error'),
       detail: error.message || _('ms3_vue_error_loading_product_data'),
       life: 5000,
-      })
+    })
     return null
   }
 }
@@ -101,7 +102,7 @@ async function loadConfig() {
             if (typeof value === 'boolean') {
               value = value ? 1 : 0
             } else if (typeof value === 'string') {
-              value = (value === 'true' || value === '1') ? 1 : 0
+              value = value === 'true' || value === '1' ? 1 : 0
             } else {
               value = parseInt(value) || 0
             }
@@ -148,7 +149,7 @@ async function saveProductData() {
   try {
     const response = await request.put(
       `/api/mgr/product-data/${props.productId}`,
-      fieldValues.value,
+      fieldValues.value
     )
 
     if (response && response.updated) {
@@ -257,14 +258,18 @@ onMounted(() => {
               <div
                 v-for="field in section.fields"
                 :key="field.name"
-                :class="['field-item', `col-${field.width || 4}`, { 'field-checkbox': field.xtype === 'xcheckbox' || field.xtype === 'checkbox' }]"
+                :class="[
+                  'field-item',
+                  `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
-                      :field-config="field"
                       v-model="fieldValues[field.name]"
+                      :field-config="field"
                       :disabled="loading || saving"
                       @blur="handleFieldChange(field.name, $event.value)"
                     />
@@ -286,8 +291,8 @@ onMounted(() => {
                   </label>
 
                   <DynamicField
-                    :field-config="field"
                     v-model="fieldValues[field.name]"
+                    :field-config="field"
                     :disabled="loading || saving"
                     @blur="handleFieldChange(field.name, $event.value)"
                   />
@@ -307,21 +312,21 @@ onMounted(() => {
 
 <style scoped>
 .product-data-fields {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .fields-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 20px;
-  margin: -10px; /* Compensate field padding */
+  gap: 1.25rem;
+  margin: -0.625rem; /* Compensate field padding */
 }
 
 .field-item {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px;
+  gap: 0.5rem;
+  padding: 0.625rem;
   box-sizing: border-box;
 }
 
@@ -334,48 +339,87 @@ onMounted(() => {
 }
 
 /* 12-column grid system */
-.col-1 { flex: 0 0 calc(8.333% - 20px); max-width: calc(8.333% - 20px); }
-.col-2 { flex: 0 0 calc(16.666% - 20px); max-width: calc(16.666% - 20px); }
-.col-3 { flex: 0 0 calc(25% - 20px); max-width: calc(25% - 20px); }
-.col-4 { flex: 0 0 calc(33.333% - 20px); max-width: calc(33.333% - 20px); }
-.col-5 { flex: 0 0 calc(41.666% - 20px); max-width: calc(41.666% - 20px); }
-.col-6 { flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); }
-.col-7 { flex: 0 0 calc(58.333% - 20px); max-width: calc(58.333% - 20px); }
-.col-8 { flex: 0 0 calc(66.666% - 20px); max-width: calc(66.666% - 20px); }
-.col-9 { flex: 0 0 calc(75% - 20px); max-width: calc(75% - 20px); }
-.col-10 { flex: 0 0 calc(83.333% - 20px); max-width: calc(83.333% - 20px); }
-.col-11 { flex: 0 0 calc(91.666% - 20px); max-width: calc(91.666% - 20px); }
-.col-12 { flex: 0 0 calc(100% - 20px); max-width: calc(100% - 20px); }
+.col-1 {
+  flex: 0 0 calc(8.333% - 1.25rem);
+  max-width: calc(8.333% - 1.25rem);
+}
+.col-2 {
+  flex: 0 0 calc(16.666% - 1.25rem);
+  max-width: calc(16.666% - 1.25rem);
+}
+.col-3 {
+  flex: 0 0 calc(25% - 1.25rem);
+  max-width: calc(25% - 1.25rem);
+}
+.col-4 {
+  flex: 0 0 calc(33.333% - 1.25rem);
+  max-width: calc(33.333% - 1.25rem);
+}
+.col-5 {
+  flex: 0 0 calc(41.666% - 1.25rem);
+  max-width: calc(41.666% - 1.25rem);
+}
+.col-6 {
+  flex: 0 0 calc(50% - 1.25rem);
+  max-width: calc(50% - 1.25rem);
+}
+.col-7 {
+  flex: 0 0 calc(58.333% - 1.25rem);
+  max-width: calc(58.333% - 1.25rem);
+}
+.col-8 {
+  flex: 0 0 calc(66.666% - 1.25rem);
+  max-width: calc(66.666% - 1.25rem);
+}
+.col-9 {
+  flex: 0 0 calc(75% - 1.25rem);
+  max-width: calc(75% - 1.25rem);
+}
+.col-10 {
+  flex: 0 0 calc(83.333% - 1.25rem);
+  max-width: calc(83.333% - 1.25rem);
+}
+.col-11 {
+  flex: 0 0 calc(91.666% - 1.25rem);
+  max-width: calc(91.666% - 1.25rem);
+}
+.col-12 {
+  flex: 0 0 calc(100% - 1.25rem);
+  max-width: calc(100% - 1.25rem);
+}
 
 /* Responsive: on tablets col-4 becomes col-6 */
-@media (max-width: 1024px) {
-  .col-4 { flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); }
+@media (max-width: 64rem) {
+  .col-4 {
+    flex: 0 0 calc(50% - 1.25rem);
+    max-width: calc(50% - 1.25rem);
+  }
 }
 
 /* Responsive: on mobile all fields full width */
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
   .field-item {
-    flex: 0 0 calc(100% - 20px) !important;
-    max-width: calc(100% - 20px) !important;
+    flex: 0 0 calc(100% - 1.25rem) !important;
+    max-width: calc(100% - 1.25rem) !important;
   }
 }
 
 .field-label {
   font-weight: 600;
-  font-size: 14px;
-  color: #333;
+  font-size: 0.875rem;
+  color: var(--ms3-text-primary);
 }
 
 .field-label .required {
-  color: #e24c4c;
-  margin-left: 2px;
+  color: var(--ms3-text-danger-alt);
+  margin-left: 0.125rem;
 }
 
 /* Checkbox: horizontal layout */
 .checkbox-wrapper {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .checkbox-wrapper :deep(.field-wrapper) {
@@ -389,15 +433,15 @@ onMounted(() => {
 }
 
 .field-description {
-  color: #666;
-  font-size: 12px;
-  margin-top: 4px;
+  color: var(--ms3-text-muted);
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
 }
 
 .sections-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 1.25rem;
 }
 
 .section-fieldset {
diff --git a/vueManager/src/components/StatusesGrid.vue b/vueManager/src/components/StatusesGrid.vue
index 56a6654..35f4c33 100644
--- a/vueManager/src/components/StatusesGrid.vue
+++ b/vueManager/src/components/StatusesGrid.vue
@@ -1,20 +1,21 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import Card from 'primevue/card'
+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 Checkbox from 'primevue/checkbox'
-import ColorPicker from 'primevue/colorpicker'
 import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 
 const toast = useToast()
@@ -31,11 +32,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'status',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/statuses/bulk', { ids })
   },
   onSuccess: () => loadStatuses(),
-  getItemName: (item) => item.name,
+  getItemName: item => item.name,
 })
 
 const loading = ref(false)
@@ -49,11 +50,46 @@ const selectAll = ref(false)
 
 // Default color palette (similar to ExtJS)
 const colorPalette = [
-  '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
-  '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
-  'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
-  'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
-  'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF',
+  '000000',
+  '993300',
+  '333300',
+  '003300',
+  '003366',
+  '000080',
+  '333399',
+  '333333',
+  '800000',
+  'FF6600',
+  '808000',
+  '008000',
+  '008080',
+  '0000FF',
+  '666699',
+  '808080',
+  'FF0000',
+  'FF9900',
+  '99CC00',
+  '339966',
+  '33CCCC',
+  '3366FF',
+  '800080',
+  '969696',
+  'FF00FF',
+  'FFCC00',
+  'FFFF00',
+  '00FF00',
+  '00FFFF',
+  '00CCFF',
+  '993366',
+  'C0C0C0',
+  'FF99CC',
+  'FFCC99',
+  'FFFF99',
+  'CCFFCC',
+  'CCFFFF',
+  '99CCFF',
+  'CC99FF',
+  'FFFFFF',
 ]
 
 /**
@@ -131,7 +167,10 @@ async function saveStatus() {
     if (isNewStatus.value) {
       response = await request.post('/api/mgr/statuses', editingStatus.value)
     } else {
-      response = await request.put(`/api/mgr/statuses/${editingStatus.value.id}`, editingStatus.value)
+      response = await request.put(
+        `/api/mgr/statuses/${editingStatus.value.id}`,
+        editingStatus.value
+      )
     }
 
     if (response) {
@@ -243,7 +282,14 @@ function selectColor(color) {
 function getActionsConfig() {
   return [
     { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: _('edit') },
-    { name: 'delete', handler: 'delete', icon: 'pi-trash', label: _('delete'), severity: 'danger', confirm: false },
+    {
+      name: 'delete',
+      handler: 'delete',
+      icon: 'pi-trash',
+      label: _('delete'),
+      severity: 'danger',
+      confirm: false,
+    },
   ]
 }
 
@@ -279,7 +325,7 @@ onMounted(() => {
 <template>
   <div class="statuses-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -289,7 +335,9 @@ onMounted(() => {
             <div class="grid-stats">
               <span class="stat-item">
                 <i class="pi pi-list"></i>
-                <span>{{ _('total') }}: <strong>{{ totalRecords }}</strong></span>
+                <span
+                  >{{ _('total') }}: <strong>{{ totalRecords }}</strong></span
+                >
               </span>
             </div>
           </div>
@@ -339,18 +387,14 @@ onMounted(() => {
                 <tr>
                   <th style="width: 3rem"></th>
                   <th style="width: 3rem">
-                    <Checkbox
-                      v-model="selectAll"
-                      :binary="true"
-                      @change="onSelectAllChange"
-                    />
+                    <Checkbox v-model="selectAll" :binary="true" @change="onSelectAllChange" />
                   </th>
-                  <th style="width: 80px">{{ _('ms3_id') }}</th>
+                  <th style="width: 5rem">{{ _('ms3_id') }}</th>
                   <th>{{ _('ms3_name') }}</th>
-                  <th style="width: 100px">{{ _('ms3_status_final') }}</th>
-                  <th style="width: 100px">{{ _('ms3_status_fixed') }}</th>
-                  <th style="width: 100px">{{ _('ms3_active') }}</th>
-                  <th style="width: 120px">{{ _('ms3_actions') }}</th>
+                  <th style="width: 6.25rem">{{ _('ms3_status_final') }}</th>
+                  <th style="width: 6.25rem">{{ _('ms3_status_fixed') }}</th>
+                  <th style="width: 6.25rem">{{ _('ms3_active') }}</th>
+                  <th style="width: 7.5rem">{{ _('ms3_actions') }}</th>
                 </tr>
               </thead>
               <draggable
@@ -359,9 +403,9 @@ onMounted(() => {
                 class="p-datatable-tbody"
                 handle=".drag-handle"
                 item-key="id"
-                @end="onDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onDragEnd"
               >
                 <template #item="{ element: status }">
                   <tr :class="{ 'p-row-odd': statuses.indexOf(status) % 2 === 1 }">
@@ -369,29 +413,40 @@ onMounted(() => {
                       <i class="pi pi-bars drag-handle"></i>
                     </td>
                     <td>
-                      <Checkbox
-                        v-model="selectedItems"
-                        :value="status"
-                        :binary="false"
-                      />
+                      <Checkbox v-model="selectedItems" :value="status" :binary="false" />
                     </td>
                     <td>{{ status.id }}</td>
                     <td>
                       <span
                         class="status-badge"
-                        :style="{ backgroundColor: '#' + status.color, color: getContrastColor(status.color) }"
+                        :style="{
+                          backgroundColor: '#' + status.color,
+                          color: getContrastColor(status.color),
+                        }"
                       >
                         {{ getDisplayName(status.name) }}
                       </span>
                     </td>
                     <td>
-                      <i :class="status.final ? 'pi pi-check text-success' : 'pi pi-times text-muted'"></i>
+                      <i
+                        :class="
+                          status.final ? 'pi pi-check text-success' : 'pi pi-times text-muted'
+                        "
+                      ></i>
                     </td>
                     <td>
-                      <i :class="status.fixed ? 'pi pi-check text-success' : 'pi pi-times text-muted'"></i>
+                      <i
+                        :class="
+                          status.fixed ? 'pi pi-check text-success' : 'pi pi-times text-muted'
+                        "
+                      ></i>
                     </td>
                     <td>
-                      <i :class="status.active ? 'pi pi-check text-success' : 'pi pi-times text-danger'"></i>
+                      <i
+                        :class="
+                          status.active ? 'pi pi-check text-success' : 'pi pi-times text-danger'
+                        "
+                      ></i>
                     </td>
                     <td>
                       <ActionsColumn
@@ -421,8 +476,8 @@ onMounted(() => {
       :header="isNewStatus ? _('status_create') : _('status_edit')"
       :modal="true"
       :closable="true"
-      :style="{ width: '500px' }"
-      appendTo="self"
+      :style="{ width: '31.25rem' }"
+      append-to="self"
     >
       <div v-if="editingStatus" class="ms3-status-form">
         <!-- Name -->
@@ -435,7 +490,10 @@ onMounted(() => {
         <div class="form-row mb-3">
           <label>{{ _('ms3_color') }}</label>
           <div class="color-picker-wrapper">
-            <div class="color-preview" :style="{ backgroundColor: '#' + editingStatus.color }"></div>
+            <div
+              class="color-preview"
+              :style="{ backgroundColor: '#' + editingStatus.color }"
+            ></div>
             <ColorPicker v-model="editingStatus.color" />
           </div>
           <!-- Color palette -->
@@ -460,23 +518,27 @@ onMounted(() => {
         <!-- Checkboxes -->
         <div class="checkboxes-row">
           <div class="checkbox-item">
-            <Checkbox v-model="editingStatus.active" :binary="true" inputId="status-active" />
+            <Checkbox v-model="editingStatus.active" :binary="true" input-id="status-active" />
             <label for="status-active">{{ _('ms3_active') }}</label>
           </div>
           <div class="checkbox-item">
-            <Checkbox v-model="editingStatus.final" :binary="true" inputId="status-final" />
+            <Checkbox v-model="editingStatus.final" :binary="true" input-id="status-final" />
             <label for="status-final">{{ _('ms3_status_final') }}</label>
           </div>
           <div class="checkbox-item">
-            <Checkbox v-model="editingStatus.fixed" :binary="true" inputId="status-fixed" />
+            <Checkbox v-model="editingStatus.fixed" :binary="true" input-id="status-fixed" />
             <label for="status-fixed">{{ _('ms3_status_fixed') }}</label>
           </div>
         </div>
 
         <!-- Help texts -->
         <div class="help-texts">
-          <small class="help-text"><strong>{{ _('ms3_status_final') }}:</strong> {{ _('ms3_status_final_help') }}</small>
-          <small class="help-text"><strong>{{ _('ms3_status_fixed') }}:</strong> {{ _('ms3_status_fixed_help') }}</small>
+          <small class="help-text"
+            ><strong>{{ _('ms3_status_final') }}:</strong> {{ _('ms3_status_final_help') }}</small
+          >
+          <small class="help-text"
+            ><strong>{{ _('ms3_status_fixed') }}:</strong> {{ _('ms3_status_fixed_help') }}</small
+          >
         </div>
       </div>
 
@@ -487,12 +549,7 @@ onMounted(() => {
           severity="secondary"
           @click="editDialogVisible = false"
         />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="saving"
-          @click="saveStatus"
-        />
+        <Button :label="_('save')" icon="pi pi-check" :loading="saving" @click="saveStatus" />
       </template>
     </Dialog>
   </div>
@@ -502,10 +559,10 @@ onMounted(() => {
 /* Status badge styles - global because used in table */
 .status-badge {
   display: inline-block;
-  padding: 4px 12px;
-  border-radius: 4px;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--ms3-radius-sm);
   font-weight: 500;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 /* Dialog form styles - global because Dialog teleports to body */
@@ -523,35 +580,35 @@ onMounted(() => {
 
 .ms3-status-form .form-row label {
   font-weight: 500;
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 .ms3-status-form .color-picker-wrapper {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--ms3-spacing-3);
 }
 
 .ms3-status-form .color-preview {
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  border: 2px solid #e2e8f0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ms3-radius-sm);
+  border: var(--ms3-border-width-focus) solid var(--ms3-border-color);
 }
 
 .ms3-status-form .color-palette {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 0.25rem;
   margin-top: 0.5rem;
 }
 
 .ms3-status-form .color-swatch {
-  width: 20px;
-  height: 20px;
-  border-radius: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 0.125rem;
   cursor: pointer;
-  border: 1px solid #e2e8f0;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
   transition: transform 0.15s;
 }
 
@@ -560,8 +617,8 @@ onMounted(() => {
 }
 
 .ms3-status-form .color-swatch.selected {
-  border: 2px solid #3b82f6;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+  border: var(--ms3-border-width-focus) solid var(--ms3-accent-primary);
+  box-shadow: 0 0 0 var(--ms3-border-width-focus) var(--ms3-accent-focus);
 }
 
 .ms3-status-form .checkboxes-row {
@@ -585,19 +642,19 @@ onMounted(() => {
 .ms3-status-form .help-texts {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  background: #f8fafc;
-  border-radius: 4px;
+  gap: var(--ms3-spacing-2);
+  padding: var(--ms3-spacing-3);
+  background: var(--ms3-bg-slate);
+  border-radius: var(--ms3-radius-sm);
 }
 
 .ms3-status-form .help-text {
-  color: #64748b;
+  color: var(--ms3-text-muted);
   font-size: 0.8rem;
 }
 
 .ms3-status-form .help-text strong {
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 .ms3-status-form .w-full {
@@ -607,7 +664,7 @@ onMounted(() => {
 
 <style scoped>
 .statuses-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .grid-header {
@@ -628,21 +685,21 @@ onMounted(() => {
   display: flex;
   gap: 1.5rem;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .stat-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--ms3-spacing-2);
 }
 
 .stat-item i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .stat-item strong {
-  color: #334155;
+  color: var(--ms3-text-dark);
 }
 
 /* Bulk actions toolbar */
@@ -650,18 +707,18 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  padding: var(--ms3-spacing-3) var(--ms3-spacing-4);
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: var(--ms3-radius-md);
 }
 
 .bulk-info {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--ms3-spacing-2);
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -678,15 +735,15 @@ onMounted(() => {
 }
 
 .text-success {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .text-danger {
-  color: #ef4444;
+  color: var(--ms3-text-danger);
 }
 
 .text-muted {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .mb-3 {
@@ -702,14 +759,14 @@ onMounted(() => {
 
 .drag-handle {
   cursor: grab;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 1.2rem;
-  padding: 0.5rem;
+  padding: var(--ms3-spacing-2);
   user-select: none;
 }
 
 .drag-handle:hover {
-  color: #495057;
+  color: var(--ms3-text-hint);
 }
 
 .drag-handle:active {
@@ -718,13 +775,13 @@ onMounted(() => {
 
 :deep(.ghost-row) {
   opacity: 0.5;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.sortable-drag) {
   opacity: 0.9;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  background: var(--ms3-bg-surface);
+  box-shadow: var(--ms3-shadow-dropdown);
 }
 
 .loading-overlay {
@@ -733,7 +790,7 @@ onMounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255,255,255,0.7);
+  background: rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -756,22 +813,21 @@ onMounted(() => {
 .p-datatable-thead th {
   text-align: left;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #dee2e6;
-  background: #f8f9fa;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+  background: var(--ms3-bg-muted);
   font-weight: 600;
 }
 
 .p-datatable-tbody td {
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color-alt);
 }
 
 .p-datatable-tbody tr:hover {
-  background: #f1f5f9;
+  background: var(--ms3-bg-slate-alt);
 }
 
 .p-row-odd {
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
 }
-
 </style>
diff --git a/vueManager/src/components/UtilitiesGallery.vue b/vueManager/src/components/UtilitiesGallery.vue
index 5a65163..d0d94c2 100644
--- a/vueManager/src/components/UtilitiesGallery.vue
+++ b/vueManager/src/components/UtilitiesGallery.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import request from '../request.js'
 import { useLexicon } from '@vuetools/useLexicon'
-
 import Button from 'primevue/button'
-import ProgressBar from 'primevue/progressbar'
-import Message from 'primevue/message'
-import InputNumber from 'primevue/inputnumber'
 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 { computed, onMounted, ref } from 'vue'
+
+import request from '../request.js'
 
 const { _ } = useLexicon()
 
@@ -62,7 +62,7 @@ const galleryInfoHtml = computed(() => {
     sourceName.value,
     sourceId.value,
     totalProducts.value,
-    totalFiles.value,
+    totalFiles.value
   )
 })
 
@@ -114,7 +114,8 @@ const processNextBatch = async () => {
     }
   } catch (err) {
     console.error('Gallery regeneration failed:', err)
-    errorMessage.value = err.message || _('ms3_utilities_gallery_err_noproducts', 'Error regenerating thumbnails')
+    errorMessage.value =
+      err.message || _('ms3_utilities_gallery_err_noproducts', 'Error regenerating thumbnails')
     isRunning.value = false
   }
 }
@@ -146,27 +147,33 @@ onMounted(() => {
     </Card>
 
     <!-- Thumbnails Configuration -->
-    <Fieldset :legend="_('ms3_utilities_params', 'Parameters')" :toggleable="true" class="params-fieldset">
+    <Fieldset
+      :legend="_('ms3_utilities_params', 'Parameters')"
+      :toggleable="true"
+      class="params-fieldset"
+    >
       <div class="thumbnails-info" v-html="thumbnailsInfo"></div>
     </Fieldset>
 
     <!-- Settings -->
     <div class="settings-section">
       <div class="setting-row">
-        <label for="limit-input">{{ _('ms3_utilities_gallery_for_step', 'Products per step') }}</label>
+        <label for="limit-input">{{
+          _('ms3_utilities_gallery_for_step', 'Products per step')
+        }}</label>
         <InputNumber
           v-model="limit"
-          inputId="limit-input"
+          input-id="limit-input"
           :min="1"
           :max="100"
           :disabled="isRunning"
-          showButtons
-          buttonLayout="horizontal"
+          show-buttons
+          button-layout="horizontal"
           :step="5"
-          decrementButtonClass="p-button-secondary"
-          incrementButtonClass="p-button-secondary"
-          incrementButtonIcon="pi pi-plus"
-          decrementButtonIcon="pi pi-minus"
+          decrement-button-class="p-button-secondary"
+          increment-button-class="p-button-secondary"
+          increment-button-icon="pi pi-plus"
+          decrement-button-icon="pi pi-minus"
         />
       </div>
     </div>
@@ -178,28 +185,28 @@ onMounted(() => {
         icon="pi pi-refresh"
         :loading="isRunning"
         :disabled="!canStart"
-        @click="startRegeneration"
         severity="primary"
+        @click="startRegeneration"
       />
       <Button
         v-if="isCompleted"
         :label="_('ms3_utilities_gallery_reset', 'Reset')"
         icon="pi pi-times"
         severity="secondary"
-        @click="resetState"
         class="reset-btn"
+        @click="resetState"
       />
     </div>
 
     <!-- Progress Section -->
-    <div class="progress-section" v-if="isRunning || isCompleted">
+    <div v-if="isRunning || isCompleted" class="progress-section">
       <div class="progress-labels">
         <span class="progress-percent">{{ progress }}%</span>
-        <span class="progress-iteration" v-if="!isCompleted">
+        <span v-if="!isCompleted" class="progress-iteration">
           {{ currentIteration }} / {{ totalIterations }}
         </span>
       </div>
-      <ProgressBar :value="progress" :showValue="false" class="progress-bar" />
+      <ProgressBar :value="progress" :show-value="false" class="progress-bar" />
     </div>
 
     <!-- Status Messages -->
@@ -209,7 +216,13 @@ onMounted(() => {
       {{ _('ms3_utilities_gallery_done_message', `Updated ${updatedCount} products`) }}
     </Message>
 
-    <Message v-if="errorMessage" severity="error" :closable="true" @close="errorMessage = null" class="status-message">
+    <Message
+      v-if="errorMessage"
+      severity="error"
+      :closable="true"
+      class="status-message"
+      @close="errorMessage = null"
+    >
       {{ errorMessage }}
     </Message>
   </div>
@@ -217,12 +230,12 @@ onMounted(() => {
 
 <style scoped>
 .utilities-gallery {
-  padding: 20px;
-  max-width: 800px;
+  padding: 1.25rem;
+  max-width: 50rem;
 }
 
 .info-card {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .info-content {
@@ -230,48 +243,48 @@ onMounted(() => {
 }
 
 .info-content :deep(strong) {
-  color: #1e40af;
+  color: var(--ms3-text-accent-dark);
 }
 
 .params-fieldset {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .thumbnails-info {
   font-family: monospace;
   font-size: 0.9rem;
   line-height: 1.6;
-  background: #f8f9fa;
-  padding: 10px;
-  border-radius: 4px;
+  background: var(--ms3-bg-muted);
+  padding: 0.625rem;
+  border-radius: 0.25rem;
 }
 
 .thumbnails-info :deep(strong) {
-  color: #495057;
+  color: var(--ms3-text-hint);
 }
 
 .settings-section {
-  background: #f8f9fa;
-  padding: 15px 20px;
-  border-radius: 6px;
-  margin-bottom: 20px;
+  background: var(--ms3-bg-muted);
+  padding: 0.9375rem 1.25rem;
+  border-radius: 0.375rem;
+  margin-bottom: 1.25rem;
 }
 
 .setting-row {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 0.9375rem;
 }
 
 .setting-row label {
   font-weight: 500;
-  min-width: 150px;
+  min-width: 9.375rem;
 }
 
 .action-section {
   display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
+  gap: 0.625rem;
+  margin-bottom: 1.25rem;
 }
 
 .reset-btn {
@@ -279,41 +292,41 @@ onMounted(() => {
 }
 
 .progress-section {
-  background: #fff;
-  border: 1px solid #dee2e6;
-  border-radius: 6px;
-  padding: 15px;
-  margin-bottom: 20px;
+  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;
 }
 
 .progress-labels {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
   font-weight: 600;
 }
 
 .progress-percent {
-  color: #1e40af;
+  color: var(--ms3-text-accent-dark);
 }
 
 .progress-iteration {
-  color: #6c757d;
+  color: var(--ms3-text-muted);
 }
 
 .progress-bar {
-  height: 8px;
+  height: 0.5rem;
 }
 
 .progress-bar :deep(.p-progressbar-value) {
-  background: #32AB9A;
+  background: var(--ms3-accent-teal);
 }
 
 .status-message {
-  margin-top: 15px;
+  margin-top: 0.9375rem;
 }
 
 .status-message :deep(.pi-check-circle) {
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 </style>
diff --git a/vueManager/src/components/ValidationRulesEditor.vue b/vueManager/src/components/ValidationRulesEditor.vue
index 10ecc4c..e892bbb 100644
--- a/vueManager/src/components/ValidationRulesEditor.vue
+++ b/vueManager/src/components/ValidationRulesEditor.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { ref, computed, watch } from 'vue'
-import Chip from 'primevue/chip'
+import { useLexicon } from '@vuetools/useLexicon'
 import Button from 'primevue/button'
-import Select from 'primevue/select'
+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 Dialog from 'primevue/dialog'
 import ToggleSwitch from 'primevue/toggleswitch'
-import { useLexicon } from '@vuetools/useLexicon'
+import { computed, ref, watch } from 'vue'
 
 const { _ } = useLexicon()
 
@@ -108,21 +108,6 @@ const availableFields = computed(() => {
   }))
 })
 
-// Build grouped fields for Select dropdown
-const groupedFields = computed(() => {
-  const groups = {}
-  availableFields.value.forEach(field => {
-    if (!groups[field.group]) {
-      groups[field.group] = {
-        label: field.groupLabel,
-        items: [],
-      }
-    }
-    groups[field.group].items.push(field)
-  })
-  return Object.values(groups)
-})
-
 // Build available rules with localized labels
 const availableRules = computed(() => {
   return ruleDefinitions.map(rule => ({
@@ -160,10 +145,13 @@ function parseValue(value) {
 
     // Convert { fieldName: 'rule1|rule2:param' } to array format
     return Object.entries(parsed).map(([fieldName, ruleString]) => {
-      const rules = ruleString.split('|').map(rule => {
-        const [name, param] = rule.split(':')
-        return { name: name.trim(), param: param || '' }
-      }).filter(r => r.name)
+      const rules = ruleString
+        .split('|')
+        .map(rule => {
+          const [name, param] = rule.split(':')
+          return { name: name.trim(), param: param || '' }
+        })
+        .filter(r => r.name)
 
       return { field: fieldName, rules }
     })
@@ -180,9 +168,11 @@ function toJsonString(fieldRulesArray) {
   const result = {}
   fieldRulesArray.forEach(item => {
     if (item.rules && item.rules.length > 0) {
-      result[item.field] = item.rules.map(r => {
-        return r.param ? `${r.name}:${r.param}` : r.name
-      }).join('|')
+      result[item.field] = item.rules
+        .map(r => {
+          return r.param ? `${r.name}:${r.param}` : r.name
+        })
+        .join('|')
     }
   })
 
@@ -190,20 +180,24 @@ function toJsonString(fieldRulesArray) {
 }
 
 // Watch for external changes
-watch(() => props.modelValue, (newVal) => {
-  fieldRules.value = parseValue(newVal)
-  // Update JSON text for JSON mode
-  if (newVal) {
-    try {
-      const parsed = typeof newVal === 'string' ? JSON.parse(newVal) : newVal
-      jsonText.value = JSON.stringify(parsed, null, 2)
-    } catch {
-      jsonText.value = typeof newVal === 'string' ? newVal : ''
+watch(
+  () => props.modelValue,
+  newVal => {
+    fieldRules.value = parseValue(newVal)
+    // Update JSON text for JSON mode
+    if (newVal) {
+      try {
+        const parsed = typeof newVal === 'string' ? JSON.parse(newVal) : newVal
+        jsonText.value = JSON.stringify(parsed, null, 2)
+      } catch {
+        jsonText.value = typeof newVal === 'string' ? newVal : ''
+      }
+    } else {
+      jsonText.value = ''
     }
-  } else {
-    jsonText.value = ''
-  }
-}, { immediate: true })
+  },
+  { immediate: true }
+)
 
 // Emit changes
 function emitChange() {
@@ -448,7 +442,10 @@ const editingFieldName = computed(() => {
     <!-- Mode toggle -->
     <div class="mode-toggle">
       <span class="mode-label">{{ _('validation_mode_visual') }}</span>
-      <ToggleSwitch v-model="isJsonMode" @change="isJsonMode ? switchToJsonMode() : switchToVisualMode()" />
+      <ToggleSwitch
+        v-model="isJsonMode"
+        @change="isJsonMode ? switchToJsonMode() : switchToVisualMode()"
+      />
       <span class="mode-label">{{ _('validation_mode_json') }}</span>
     </div>
 
@@ -466,8 +463,8 @@ const editingFieldName = computed(() => {
         <Button
           :label="_('apply')"
           size="small"
-          @click="applyJsonChanges"
           :disabled="!!jsonError"
+          @click="applyJsonChanges"
         />
       </div>
     </div>
@@ -478,13 +475,13 @@ const editingFieldName = computed(() => {
         <div class="field-header">
           <span class="field-name">{{ getFieldLabel(fr.field) }}</span>
           <Button
+            v-tooltip="_('remove')"
             icon="pi pi-times"
             severity="danger"
             text
             rounded
             size="small"
             @click="removeField(fieldIndex)"
-            v-tooltip="_('remove')"
           />
         </div>
         <div class="rules-chips">
@@ -493,17 +490,17 @@ const editingFieldName = computed(() => {
             :key="`${fr.field}-${rule.name}-${ruleIndex}`"
             :label="getRuleLabel(rule)"
             removable
-            @remove="() => removeRule(fieldIndex, ruleIndex)"
             class="rule-chip"
+            @remove="() => removeRule(fieldIndex, ruleIndex)"
           />
           <Button
+            v-tooltip="_('ms3_add_rule')"
             icon="pi pi-plus"
             size="small"
             severity="secondary"
             text
             rounded
             @click="openAddRuleDialog(fieldIndex)"
-            v-tooltip="_('ms3_add_rule')"
           />
         </div>
       </div>
@@ -515,9 +512,9 @@ const editingFieldName = computed(() => {
         size="small"
         severity="secondary"
         outlined
-        @click="openAddFieldDialog"
         class="add-field-btn"
         :disabled="availableFieldsForAdd.length === 0"
+        @click="openAddFieldDialog"
       />
     </div>
 
@@ -526,8 +523,8 @@ const editingFieldName = computed(() => {
       v-model:visible="showAddFieldDialog"
       :header="_('ms3_add_validation_field')"
       :modal="true"
-      :style="{ width: '450px' }"
-      appendTo="self"
+      :style="{ width: '28.125rem' }"
+      append-to="self"
     >
       <div class="add-field-form">
         <div class="form-field">
@@ -535,10 +532,10 @@ const editingFieldName = computed(() => {
           <Select
             v-model="selectedField"
             :options="availableFieldsForAdd"
-            optionLabel="label"
-            optionValue="name"
-            optionGroupLabel="label"
-            optionGroupChildren="items"
+            option-label="label"
+            option-value="name"
+            option-group-label="label"
+            option-group-children="items"
             :placeholder="_('ms3_select_field_placeholder')"
             class="w-full"
             filter
@@ -547,16 +544,8 @@ const editingFieldName = computed(() => {
       </div>
 
       <template #footer>
-        <Button
-          :label="_('cancel')"
-          severity="secondary"
-          @click="showAddFieldDialog = false"
-        />
-        <Button
-          :label="_('add')"
-          :disabled="!selectedField"
-          @click="addField"
-        />
+        <Button :label="_('cancel')" severity="secondary" @click="showAddFieldDialog = false" />
+        <Button :label="_('add')" :disabled="!selectedField" @click="addField" />
       </template>
     </Dialog>
 
@@ -565,8 +554,8 @@ const editingFieldName = computed(() => {
       v-model:visible="showAddRuleDialog"
       :header="_('ms3_add_rule_to_field') + ': ' + editingFieldName"
       :modal="true"
-      :style="{ width: '450px' }"
-      appendTo="self"
+      :style="{ width: '28.125rem' }"
+      append-to="self"
       @hide="closeRuleDialog"
     >
       <div class="add-rule-form">
@@ -575,8 +564,8 @@ const editingFieldName = computed(() => {
           <Select
             v-model="selectedRule"
             :options="availableRulesForAdd"
-            optionLabel="label"
-            optionValue="name"
+            option-label="label"
+            option-value="name"
             :placeholder="_('ms3_select_rule_placeholder')"
             class="w-full"
             filter
@@ -603,11 +592,7 @@ const editingFieldName = computed(() => {
       </div>
 
       <template #footer>
-        <Button
-          :label="_('cancel')"
-          severity="secondary"
-          @click="closeRuleDialog"
-        />
+        <Button :label="_('cancel')" severity="secondary" @click="closeRuleDialog" />
         <Button
           :label="_('add')"
           :disabled="!selectedRule || (selectedRuleDef?.hasParam && !ruleParam.trim())"
@@ -632,7 +617,7 @@ const editingFieldName = computed(() => {
 
 .mode-label {
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
   line-height: 1;
 }
 
@@ -648,7 +633,7 @@ const editingFieldName = computed(() => {
 }
 
 .json-error {
-  color: #dc2626;
+  color: var(--ms3-text-danger-alt);
   font-size: 0.8rem;
 }
 
@@ -664,9 +649,9 @@ const editingFieldName = computed(() => {
 }
 
 .field-rules-item {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
+  background: var(--ms3-bg-slate);
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.375rem;
   padding: 0.75rem;
 }
 
@@ -679,7 +664,7 @@ const editingFieldName = computed(() => {
 
 .field-name {
   font-weight: 600;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .rules-chips {
@@ -690,12 +675,12 @@ const editingFieldName = computed(() => {
 }
 
 .rule-chip {
-  background: #e0f2fe;
-  color: #0369a1;
+  background: var(--ms3-bg-info);
+  color: var(--ms3-text-info-dark);
 }
 
 .rule-chip :deep(.p-chip-remove-icon) {
-  color: #0369a1;
+  color: var(--ms3-text-info-dark);
 }
 
 .add-field-btn {
@@ -717,11 +702,11 @@ const editingFieldName = computed(() => {
 
 .form-field label {
   font-weight: 500;
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 .param-hint {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-size: 0.8rem;
 }
 
@@ -734,12 +719,12 @@ const editingFieldName = computed(() => {
 
 :deep(.rule-option-name) {
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 :deep(.rule-option-desc) {
   font-size: 0.8rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .w-full {
@@ -758,11 +743,11 @@ const editingFieldName = computed(() => {
 
 .p-select-overlay .rule-option-name {
   font-weight: 500;
-  color: #1e293b;
+  color: var(--ms3-text-darkest);
 }
 
 .p-select-overlay .rule-option-desc {
   font-size: 0.8rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 </style>
diff --git a/vueManager/src/components/VendorCombo.vue b/vueManager/src/components/VendorCombo.vue
index 9567212..808a067 100644
--- a/vueManager/src/components/VendorCombo.vue
+++ b/vueManager/src/components/VendorCombo.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="vendor-combo-wrapper" ref="wrapperRef">
-    <Dropdown
-      :inputId="inputId"
+  <div ref="wrapperRef" class="vendor-combo-wrapper">
+    <Select
       v-model="localValue"
+      :input-id="inputId"
       :options="vendors"
-      optionLabel="name"
-      optionValue="id"
+      option-label="name"
+      option-value="id"
       :placeholder="placeholder"
       :disabled="disabled"
       :loading="loading"
-      :showClear="showClear"
+      :show-clear="showClear"
       :filter="enableFilter"
-      filterPlaceholder="Search vendor..."
-      :emptyMessage="emptyMessage"
-      :emptyFilterMessage="emptyFilterMessage"
+      filter-placeholder="Search vendor..."
+      :empty-message="emptyMessage"
+      :empty-filter-message="emptyFilterMessage"
       class="w-full"
       @change="handleChange"
     >
@@ -22,13 +22,14 @@
           {{ emptyMessage }}
         </div>
       </template>
-    </Dropdown>
+    </Select>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, computed } from 'vue'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
+import { computed, onMounted, ref, watch } from 'vue'
+
 import request from '../request.js'
 
 const props = defineProps({
@@ -135,12 +136,15 @@ function handleChange() {
 }
 
 // Watch for external changes
-watch(() => props.modelValue, (newValue) => {
-  localValue.value = newValue
-})
+watch(
+  () => props.modelValue,
+  newValue => {
+    localValue.value = newValue
+  }
+)
 
 // Watch for local changes
-watch(localValue, (newValue) => {
+watch(localValue, newValue => {
   emit('update:modelValue', newValue)
 })
 
@@ -153,7 +157,7 @@ onMounted(() => {
     // Find the label element
     const label = document.querySelector(`label[for="${props.inputId}"]`)
     if (label) {
-      label.addEventListener('click', (e) => {
+      label.addEventListener('click', e => {
         // Find the dropdown button inside wrapper
         const dropdownButton = wrapperRef.value.querySelector('.p-dropdown')
         if (dropdownButton && !props.disabled) {
@@ -179,14 +183,14 @@ onMounted(() => {
 <style>
 /* Global styles for dropdown empty message */
 .vendor-combo-wrapper .p-dropdown-panel {
-  min-width: 400px !important;
-  max-width: 500px !important;
+  min-width: 25rem !important;
+  max-width: 31.25rem !important;
 }
 
 .vendor-combo-wrapper .p-dropdown-empty-message,
 .p-dropdown-panel .p-dropdown-empty-message {
   padding: 0.75rem 1rem;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 0.875rem;
   white-space: normal !important;
   word-wrap: break-word !important;
diff --git a/vueManager/src/components/VendorsGrid.vue b/vueManager/src/components/VendorsGrid.vue
index 6305a66..f006882 100644
--- a/vueManager/src/components/VendorsGrid.vue
+++ b/vueManager/src/components/VendorsGrid.vue
@@ -1,26 +1,27 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue'
-import Card from 'primevue/card'
+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 InputNumber from 'primevue/inputnumber'
-import Textarea from 'primevue/textarea'
-import Toast from 'primevue/toast'
-import ConfirmDialog from 'primevue/confirmdialog'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
+import InputText from 'primevue/inputtext'
+import Paginator from 'primevue/paginator'
 import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
+import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
-import Paginator from 'primevue/paginator'
-import { useToast } from 'primevue/usetoast'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import Textarea from 'primevue/textarea'
+import Toast from 'primevue/toast'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
 import draggable from 'vuedraggable'
-import request from '../request.js'
-import { useLexicon } from '@vuetools/useLexicon'
+
 import { useSelection } from '../composables/useSelection.js'
+import request from '../request.js'
 import ActionsColumn from './ActionsColumn.vue'
 import FileBrowser from './FileBrowser.vue'
 
@@ -38,11 +39,11 @@ const {
   confirmBulkDelete,
 } = useSelection({
   entityName: 'vendor',
-  deleteBulk: async (ids) => {
+  deleteBulk: async ids => {
     await request.delete('/api/mgr/vendors/bulk', { ids })
   },
   onSuccess: () => loadVendors(),
-  getItemName: (item) => item.name,
+  getItemName: item => item.name,
 })
 
 const columns = ref([])
@@ -284,7 +285,10 @@ async function saveVendor() {
     if (isNewVendor.value) {
       response = await request.post('/api/mgr/vendors', editingVendor.value)
     } else {
-      response = await request.put(`/api/mgr/vendors/${editingVendor.value.id}`, editingVendor.value)
+      response = await request.put(
+        `/api/mgr/vendors/${editingVendor.value.id}`,
+        editingVendor.value
+      )
     }
 
     if (response) {
@@ -408,7 +412,15 @@ function getActionsConfig(column) {
   if (!column.actions || column.actions.length === 0) {
     return [
       { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: _('edit') },
-      { name: 'delete', handler: 'delete', icon: 'pi-trash', label: _('delete'), severity: 'danger', confirm: true, confirmMessage: 'vendor_delete_confirm_message' },
+      {
+        name: 'delete',
+        handler: 'delete',
+        icon: 'pi-trash',
+        label: _('delete'),
+        severity: 'danger',
+        confirm: true,
+        confirmMessage: 'vendor_delete_confirm_message',
+      },
     ]
   }
 
@@ -436,22 +448,59 @@ async function loadGridConfig() {
  */
 function getDefaultColumns() {
   return [
-    { name: 'id', label: 'ID', visible: true, sortable: true, frozen: true, width: '80px', isSystem: true },
-    { name: 'name', label: _('vendor_name'), visible: true, sortable: true, filterable: true, minWidth: '200px' },
-    { name: 'country', label: _('vendor_country'), visible: true, sortable: true, filterable: true, width: '150px' },
-    { name: 'email', label: _('vendor_email'), visible: true, sortable: true, filterable: true, width: '200px' },
-    { name: 'phone', label: _('vendor_phone'), visible: true, sortable: true, width: '150px' },
+    {
+      name: 'id',
+      label: 'ID',
+      visible: true,
+      sortable: true,
+      frozen: true,
+      width: '5rem',
+      isSystem: true,
+    },
+    {
+      name: 'name',
+      label: _('vendor_name'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      minWidth: '12.5rem',
+    },
+    {
+      name: 'country',
+      label: _('vendor_country'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      width: '9.375rem',
+    },
+    {
+      name: 'email',
+      label: _('vendor_email'),
+      visible: true,
+      sortable: true,
+      filterable: true,
+      width: '12.5rem',
+    },
+    { name: 'phone', label: _('vendor_phone'), visible: true, sortable: true, width: '9.375rem' },
     {
       name: 'actions',
       label: _('actions'),
       visible: true,
       isSystem: true,
       frozen: true,
-      width: '120px',
+      width: '7.5rem',
       type: 'actions',
       actions: [
         { name: 'edit', handler: 'edit', icon: 'pi-pencil', label: 'edit' },
-        { name: 'delete', handler: 'delete', icon: 'pi-trash', label: 'delete', severity: 'danger', confirm: true, confirmMessage: 'vendor_delete_confirm_message' },
+        {
+          name: 'delete',
+          handler: 'delete',
+          icon: 'pi-trash',
+          label: 'delete',
+          severity: 'danger',
+          confirm: true,
+          confirmMessage: 'vendor_delete_confirm_message',
+        },
       ],
     },
   ]
@@ -501,10 +550,7 @@ function isFieldRequired(field) {
 }
 
 onMounted(async () => {
-  await Promise.all([
-    loadFieldsConfig(),
-    loadGridConfig(),
-  ])
+  await Promise.all([loadFieldsConfig(), loadGridConfig()])
   await loadVendors()
 })
 </script>
@@ -512,7 +558,7 @@ onMounted(async () => {
 <template>
   <div class="vendors-grid">
     <Toast />
-    <ConfirmDialog appendTo="self" />
+    <ConfirmDialog append-to="self" />
 
     <Card>
       <template #title>
@@ -522,7 +568,9 @@ onMounted(async () => {
             <div class="grid-stats">
               <span class="stat-item">
                 <i class="pi pi-list"></i>
-                <span>{{ _('total') }}: <strong>{{ totalRecords }}</strong></span>
+                <span
+                  >{{ _('total') }}: <strong>{{ totalRecords }}</strong></span
+                >
               </span>
             </div>
           </div>
@@ -550,18 +598,11 @@ onMounted(async () => {
               </select>
             </template>
             <template v-else>
-              <InputText
-                v-model="filterValues[column.name]"
-                :placeholder="column.label"
-              />
+              <InputText v-model="filterValues[column.name]" :placeholder="column.label" />
             </template>
           </div>
           <div class="filter-buttons">
-            <Button
-              :label="_('apply_filters')"
-              icon="pi pi-filter"
-              @click="applyFilters"
-            />
+            <Button :label="_('apply_filters')" icon="pi pi-filter" @click="applyFilters" />
             <Button
               :label="_('clear_filters')"
               icon="pi pi-filter-slash"
@@ -605,11 +646,7 @@ onMounted(async () => {
                 <tr>
                   <th style="width: 3rem"></th>
                   <th style="width: 3rem">
-                    <Checkbox
-                      v-model="selectAll"
-                      :binary="true"
-                      @change="onSelectAllChange"
-                    />
+                    <Checkbox v-model="selectAll" :binary="true" @change="onSelectAllChange" />
                   </th>
                   <th
                     v-for="column in columns.filter(c => c.visible)"
@@ -626,9 +663,9 @@ onMounted(async () => {
                 class="p-datatable-tbody"
                 handle=".drag-handle"
                 item-key="id"
-                @end="onDragEnd"
                 :animation="200"
                 ghost-class="ghost-row"
+                @end="onDragEnd"
               >
                 <template #item="{ element: vendor }">
                   <tr :class="{ 'p-row-odd': vendors.indexOf(vendor) % 2 === 1 }">
@@ -636,11 +673,7 @@ onMounted(async () => {
                       <i class="pi pi-bars drag-handle"></i>
                     </td>
                     <td>
-                      <Checkbox
-                        v-model="selectedItems"
-                        :value="vendor"
-                        :binary="false"
-                      />
+                      <Checkbox v-model="selectedItems" :value="vendor" :binary="false" />
                     </td>
                     <template v-for="column in columns.filter(c => c.visible)" :key="column.name">
                       <!-- Actions column -->
@@ -669,7 +702,11 @@ onMounted(async () => {
                       <!-- Boolean column -->
                       <td v-else-if="column.type === 'boolean'" :style="{ width: column.width }">
                         <i
-                          :class="vendor[column.name] ? 'pi pi-check text-success' : 'pi pi-times text-danger'"
+                          :class="
+                            vendor[column.name]
+                              ? 'pi pi-check text-success'
+                              : 'pi pi-times text-danger'
+                          "
                         ></i>
                       </td>
 
@@ -686,14 +723,14 @@ onMounted(async () => {
           <div v-if="loading" class="loading-overlay">
             <i class="pi pi-spinner pi-spin"></i>
           </div>
-        <!-- Pagination -->
-        <Paginator
-          :first="first"
-          :rows="rows"
-          :totalRecords="totalRecords"
-          :rowsPerPageOptions="[10, 20, 50, 100]"
-          @page="onPage"
-        />
+          <!-- Pagination -->
+          <Paginator
+            :first="first"
+            :rows="rows"
+            :total-records="totalRecords"
+            :rows-per-page-options="[10, 20, 50, 100]"
+            @page="onPage"
+          />
         </div>
       </template>
     </Card>
@@ -704,8 +741,8 @@ onMounted(async () => {
       :header="isNewVendor ? _('vendor_create') : _('vendor_edit')"
       :modal="true"
       :closable="true"
-      :style="{ width: '700px' }"
-      appendTo="self"
+      :style="{ width: '43.75rem' }"
+      append-to="self"
     >
       <div v-if="editingVendor">
         <!-- Dynamic form based on sections config -->
@@ -849,7 +886,12 @@ onMounted(async () => {
 
                   <div class="form-row mb-3">
                     <label>{{ _('vendor_resource') }}</label>
-                    <InputText v-model="editingVendor.resource_id" class="w-full" type="number" :placeholder="_('vendor_resource_placeholder')" />
+                    <InputText
+                      v-model="editingVendor.resource_id"
+                      class="w-full"
+                      type="number"
+                      :placeholder="_('vendor_resource_placeholder')"
+                    />
                     <small class="form-hint">{{ _('vendor_resource_help') }}</small>
                   </div>
                 </div>
@@ -866,12 +908,7 @@ 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" :loading="saving" @click="saveVendor" />
       </template>
     </Dialog>
   </div>
@@ -879,7 +916,7 @@ onMounted(async () => {
 
 <style scoped>
 .vendors-grid {
-  padding: 20px;
+  padding: 1.25rem;
 }
 
 .grid-header {
@@ -900,7 +937,7 @@ onMounted(async () => {
   display: flex;
   gap: 1.5rem;
   font-size: 0.9rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .stat-item {
@@ -910,11 +947,11 @@ onMounted(async () => {
 }
 
 .stat-item i {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 .stat-item strong {
-  color: #334155;
+  color: var(--ms3-text-dark);
 }
 
 .filters-row {
@@ -923,14 +960,14 @@ onMounted(async () => {
   gap: 1rem;
   margin-bottom: 1rem;
   padding: 1rem;
-  background: #f8fafc;
-  border-radius: 6px;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.375rem;
 }
 
 .filter-item {
   display: flex;
   flex-direction: column;
-  min-width: 150px;
+  min-width: 9.375rem;
 }
 
 .filter-item label {
@@ -938,7 +975,7 @@ onMounted(async () => {
   margin-bottom: 0.5rem;
   font-weight: 500;
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--ms3-text-muted);
 }
 
 .filter-buttons {
@@ -953,9 +990,9 @@ onMounted(async () => {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
-  border-radius: 6px;
+  background: var(--ms3-bg-warning);
+  border: var(--ms3-border-width) solid var(--ms3-border-warning);
+  border-radius: 0.375rem;
 }
 
 .bulk-info {
@@ -963,7 +1000,7 @@ onMounted(async () => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
-  color: #92400e;
+  color: var(--ms3-text-warning);
 }
 
 .bulk-info i {
@@ -980,24 +1017,24 @@ onMounted(async () => {
 }
 
 .text-success {
-  color: #22c55e;
+  color: var(--ms3-text-success);
 }
 
 .text-danger {
-  color: #ef4444;
+  color: var(--ms3-text-danger);
 }
 
 /* Image column thumbnail */
 .column-thumbnail {
-  width: 40px;
-  height: 40px;
+  width: 2.5rem;
+  height: 2.5rem;
   object-fit: cover;
-  border-radius: 4px;
-  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
 }
 
 .no-image {
-  color: #94a3b8;
+  color: var(--ms3-text-light);
 }
 
 /* Edit form styles */
@@ -1025,11 +1062,11 @@ onMounted(async () => {
 
 .form-row label {
   font-weight: 500;
-  color: #374151;
+  color: var(--ms3-text-primary);
 }
 
 .form-row label .required {
-  color: #ef4444;
+  color: var(--ms3-text-danger);
   margin-left: 0.25rem;
 }
 
@@ -1039,7 +1076,7 @@ onMounted(async () => {
   gap: 1rem;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 37.5rem) {
   .form-row-group {
     grid-template-columns: 1fr;
   }
@@ -1055,7 +1092,7 @@ onMounted(async () => {
 
 /* Form hint */
 .form-hint {
-  color: #6b7280;
+  color: var(--ms3-text-muted);
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
@@ -1078,14 +1115,14 @@ onMounted(async () => {
 
 .drag-handle {
   cursor: grab;
-  color: #6c757d;
+  color: var(--ms3-text-muted);
   font-size: 1.2rem;
   padding: 0.5rem;
   user-select: none;
 }
 
 .drag-handle:hover {
-  color: #495057;
+  color: var(--ms3-text-hint);
 }
 
 .drag-handle:active {
@@ -1094,13 +1131,13 @@ onMounted(async () => {
 
 :deep(.ghost-row) {
   opacity: 0.5;
-  background: #f8f9fa;
+  background: var(--ms3-bg-muted);
 }
 
 :deep(.sortable-drag) {
   opacity: 0.9;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  background: var(--ms3-bg-surface);
+  box-shadow: var(--ms3-shadow-dropdown);
 }
 
 .loading-overlay {
@@ -1109,7 +1146,7 @@ onMounted(async () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255,255,255,0.7);
+  background: var(--ms3-bg-overlay);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1132,22 +1169,21 @@ onMounted(async () => {
 .p-datatable-thead th {
   text-align: left;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #dee2e6;
-  background: #f8f9fa;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color-alt);
+  background: var(--ms3-bg-muted);
   font-weight: 600;
 }
 
 .p-datatable-tbody td {
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color-alt);
 }
 
 .p-datatable-tbody tr:hover {
-  background: #f1f5f9;
+  background: var(--ms3-bg-slate-alt);
 }
 
 .p-row-odd {
-  background: #f8fafc;
+  background: var(--ms3-bg-slate);
 }
-
 </style>
diff --git a/vueManager/src/components/gallery/GalleryUploader.vue b/vueManager/src/components/gallery/GalleryUploader.vue
index 0854843..63adc5d 100644
--- a/vueManager/src/components/gallery/GalleryUploader.vue
+++ b/vueManager/src/components/gallery/GalleryUploader.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeUnmount } from 'vue'
 import Uppy from '@uppy/core'
 import Dashboard from '@uppy/dashboard'
-import XHRUpload from '@uppy/xhr-upload'
 import ImageEditor from '@uppy/image-editor'
+import XHRUpload from '@uppy/xhr-upload'
+import { onBeforeUnmount, onMounted } from 'vue'
 
 const props = defineProps({
   productId: {
@@ -38,7 +38,14 @@ const props = defineProps({
   },
   allowedFileTypes: {
     type: Array,
-    default: () => ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/avif', 'image/heic'],
+    default: () => [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'image/avif',
+      'image/heic',
+    ],
   },
 })
 
@@ -114,12 +121,12 @@ const initUppy = () => {
     fieldName: 'file',
     timeout: 60000, // 60 seconds
     headers: {
-      'Accept': 'application/json',
+      Accept: 'application/json',
     },
   })
 
   uppy.on('upload-success', (file, response) => {
-    console.log('File uploaded:', file.name, response)
+    // File uploaded successfully
     emit('upload-success', { file, response })
   })
 
@@ -128,8 +135,8 @@ const initUppy = () => {
     emit('upload-error', { file, error, response })
   })
 
-  uppy.on('complete', (result) => {
-    console.log('Upload complete:', result)
+  uppy.on('complete', result => {
+    // Upload complete
     emit('upload-complete', result)
 
     setTimeout(() => {
@@ -165,13 +172,13 @@ const formatBytes = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
-const updateSettings = (newSettings) => {
+const updateSettings = newSettings => {
   if (uppy) {
     uppy.setOptions(newSettings)
   }
 }
 
-const addFiles = (files) => {
+const addFiles = files => {
   if (uppy) {
     files.forEach(file => {
       uppy.addFile(file)
@@ -196,12 +203,12 @@ defineExpose({
 }
 
 .uppy-container {
-  border: 2px dashed #ddd;
-  border-radius: 8px;
+  border: var(--ms3-border-width-focus) dashed var(--ms3-border-upload);
+  border-radius: 0.5rem;
   overflow: hidden;
 }
 
 .uppy-container :deep(.uppy-Dashboard--isDraggingOver) {
-  border-color: #4CAF50;
+  border-color: var(--ms3-accent-green);
 }
 </style>
diff --git a/vueManager/src/components/product/ProductTabs.vue b/vueManager/src/components/product/ProductTabs.vue
index 345a474..fbdada7 100644
--- a/vueManager/src/components/product/ProductTabs.vue
+++ b/vueManager/src/components/product/ProductTabs.vue
@@ -1,10 +1,14 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'
-import TabView from 'primevue/tabview'
+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 { useLexicon } from '@vuetools/useLexicon'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
 import ProductDataFields from '../ProductDataFields.vue'
 
 const props = defineProps({
@@ -25,8 +29,8 @@ const props = defineProps({
 const { _ } = useLexicon()
 useToast() // Required for Toast component to work
 
-// Active tab index
-const activeTab = ref(0)
+// Active tab value (index as string for Tabs v4)
+const activeTab = ref('0')
 
 // Track mounted ExtJS components
 const mountedExtComponents = ref({})
@@ -159,7 +163,7 @@ function mountExtJS(tabKey, tabData) {
 
   const containerId = `ms3-product-tab-${tabKey}`
 
-  waitForElement(containerId, (container) => {
+  waitForElement(containerId, container => {
     try {
       // Check if Ext is available
       if (typeof Ext === 'undefined') {
@@ -185,14 +189,20 @@ function mountExtJS(tabKey, tabData) {
           // Fix source combo - set value after store loads
           const sourceCombo = Ext.getCmp('ms3-resource-source')
           if (sourceCombo && tabData.extConfig.record) {
-            const sourceValue = tabData.extConfig.record.source || tabData.extConfig.record.source_id
+            const sourceValue =
+              tabData.extConfig.record.source || tabData.extConfig.record.source_id
             if (sourceValue && sourceCombo.store) {
               if (sourceCombo.store.getCount() > 0) {
                 sourceCombo.setValue(sourceValue)
               } else {
-                sourceCombo.store.on('load', function() {
-                  sourceCombo.setValue(sourceValue)
-                }, null, { single: true })
+                sourceCombo.store.on(
+                  'load',
+                  function () {
+                    sourceCombo.setValue(sourceValue)
+                  },
+                  null,
+                  { single: true }
+                )
                 if (!sourceCombo.store.isLoading) {
                   sourceCombo.store.load()
                 }
@@ -217,7 +227,7 @@ function mountOptionsTab() {
 
   const containerId = 'ms3-product-tab-options'
 
-  waitForElement(containerId, (container) => {
+  waitForElement(containerId, container => {
     try {
       if (typeof Ext === 'undefined') {
         console.error('[ProductTabs] Ext is not defined')
@@ -234,7 +244,7 @@ function mountOptionsTab() {
           { record: props.record, mode: 'update' },
           option.key,
           option,
-          'extra-field',
+          'extra-field'
         )
 
         if (!field) continue
@@ -286,13 +296,12 @@ function mountOptionsTab() {
 /**
  * Handle tab change - mount ExtJS components lazily
  */
-function onTabChange(event) {
-  const newIndex = event.index
+function onTabChange(newValue) {
+  const newIndex = parseInt(newValue, 10)
   const currentTab = tabConfig.value[newIndex]
 
   if (!currentTab) return
 
-  // Use nextTick to ensure Vue has rendered the tab content
   nextTick(() => {
     if (currentTab.type === 'extjs' && !mountedExtComponents.value[currentTab.key]) {
       mountExtJS(currentTab.key, currentTab)
@@ -302,6 +311,8 @@ function onTabChange(event) {
   })
 }
 
+watch(activeTab, onTabChange)
+
 /**
  * Destroy all mounted ExtJS components
  */
@@ -353,7 +364,7 @@ function registerPluginTab(tabData) {
 // Expose register method for plugin registry
 defineExpose({
   registerPluginTab,
-  getActiveTab: () => activeTab.value,
+  getActiveTab: () => parseInt(activeTab.value, 10),
 })
 
 onMounted(() => {
@@ -380,75 +391,62 @@ onBeforeUnmount(() => {
   <div class="product-tabs">
     <Toast />
 
-    <TabView
-      v-if="tabsReady"
-      v-model:activeIndex="activeTab"
-      @tab-change="onTabChange"
-    >
-      <TabPanel
-        v-for="tab in tabConfig"
-        :key="tab.key"
-        :header="tab.title"
-      >
-        <!-- Vue component: ProductDataFields -->
-        <template v-if="tab.type === 'vue' && tab.component === 'ProductDataFields'">
-          <ProductDataFields
-            :product-id="productId"
-            :product-data="record"
-          />
-        </template>
-
-        <!-- ExtJS component container -->
-        <template v-else-if="tab.type === 'extjs'">
-          <div
-            :id="`ms3-product-tab-${tab.key}`"
-            class="extjs-container"
-          ></div>
-        </template>
-
-        <!-- ExtJS Options with vtabs -->
-        <template v-else-if="tab.type === 'extjs-options'">
-          <div
-            id="ms3-product-tab-options"
-            class="extjs-container extjs-options-container"
-          ></div>
-        </template>
-
-        <!-- Plugin Vue component -->
-        <template v-else-if="tab.type === 'vue' && tab.component">
-          <component
-            :is="tab.component"
-            v-bind="tab.props"
-            :product-id="productId"
-            :record="record"
-          />
-        </template>
-
-        <!-- Plugin ExtJS component -->
-        <template v-else-if="tab.type === 'plugin-extjs'">
-          <div
-            :id="`ms3-product-tab-${tab.key}`"
-            class="extjs-container"
-          ></div>
-        </template>
-      </TabPanel>
-    </TabView>
+    <Tabs v-if="tabsReady" v-model:value="activeTab">
+      <TabList>
+        <Tab v-for="(tab, idx) in tabConfig" :key="tab.key" :value="String(idx)">{{
+          tab.title
+        }}</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel v-for="(tab, idx) in tabConfig" :key="tab.key" :value="String(idx)">
+          <!-- Vue component: ProductDataFields -->
+          <template v-if="tab.type === 'vue' && tab.component === 'ProductDataFields'">
+            <ProductDataFields :product-id="productId" :product-data="record" />
+          </template>
+
+          <!-- ExtJS component container -->
+          <template v-else-if="tab.type === 'extjs'">
+            <div :id="`ms3-product-tab-${tab.key}`" class="extjs-container"></div>
+          </template>
+
+          <!-- ExtJS Options with vtabs -->
+          <template v-else-if="tab.type === 'extjs-options'">
+            <div id="ms3-product-tab-options" class="extjs-container extjs-options-container"></div>
+          </template>
+
+          <!-- Plugin Vue component -->
+          <template v-else-if="tab.type === 'vue' && tab.component">
+            <component
+              :is="tab.component"
+              v-bind="tab.props"
+              :product-id="productId"
+              :record="record"
+            />
+          </template>
+
+          <!-- Plugin ExtJS component -->
+          <template v-else-if="tab.type === 'plugin-extjs'">
+            <div :id="`ms3-product-tab-${tab.key}`" class="extjs-container"></div>
+          </template>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   </div>
 </template>
 
 <style scoped>
 .product-tabs {
   width: 100%;
-  min-height: 400px;
+  min-height: 25rem;
 }
 
 .extjs-container {
-  min-height: 300px;
+  min-height: 18.75rem;
   width: 100%;
 }
 
 .extjs-options-container {
-  min-height: 400px;
+  min-height: 25rem;
 }
 
 /* Ensure ExtJS components fill their containers */
@@ -458,7 +456,7 @@ onBeforeUnmount(() => {
 
 /* Fix padding for ExtJS panels inside Vue tabs */
 .extjs-container :deep(.x-panel-body) {
-  padding: 10px;
+  padding: 0.625rem;
 }
 
 /* Gallery specific styles */
@@ -468,11 +466,11 @@ onBeforeUnmount(() => {
 
 /* Categories tree styles */
 #ms3-product-tab-categories :deep(.x-tree-view) {
-  min-height: 300px;
+  min-height: 18.75rem;
 }
 
 /* Links grid styles */
 #ms3-product-tab-links :deep(.x-grid-view) {
-  min-height: 200px;
+  min-height: 12.5rem;
 }
 </style>
diff --git a/vueManager/src/composables/useActions.js b/vueManager/src/composables/useActions.js
index 3028aa1..bae39fe 100644
--- a/vueManager/src/composables/useActions.js
+++ b/vueManager/src/composables/useActions.js
@@ -3,10 +3,11 @@
  *
  * Provides convenient interface for working with grid actions
  */
-import { useToast } from 'primevue/usetoast'
+import { useLexicon } from '@vuetools/useLexicon'
 import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+
 import actionRegistry from '../actionRegistry.js'
-import { useLexicon } from '@vuetools/useLexicon'
 
 /**
  * Composable for working with grid actions
@@ -89,7 +90,7 @@ export function useActions(options = {}) {
     const context = createContext()
 
     if (actionConfig.confirm) {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         let message = actionConfig.confirmMessage
           ? _(actionConfig.confirmMessage)
           : _('action_confirm_message')
diff --git a/vueManager/src/composables/useSelection.js b/vueManager/src/composables/useSelection.js
index 9566929..d112b3d 100644
--- a/vueManager/src/composables/useSelection.js
+++ b/vueManager/src/composables/useSelection.js
@@ -1,7 +1,7 @@
-import { ref, computed } from 'vue'
+import { useLexicon } from '@vuetools/useLexicon'
 import { useConfirm } from 'primevue/useconfirm'
 import { useToast } from 'primevue/usetoast'
-import { useLexicon } from '@vuetools/useLexicon'
+import { computed, ref } from 'vue'
 
 /**
  * Universal composable for managing row selection in DataTables
@@ -23,12 +23,10 @@ import { useLexicon } from '@vuetools/useLexicon'
  */
 export function useSelection(options = {}) {
   const {
-    entityName = 'item',
     deleteOne = null,
     deleteBulk = null,
     onSuccess = null,
-    getItemId = (item) => item.id,
-    getItemName = (item) => item.name || item.id,
+    getItemId = item => item.id,
   } = options
 
   const confirm = useConfirm()
diff --git a/vueManager/src/entries/api-test.js b/vueManager/src/entries/api-test.js
index ddcb9a3..1230955 100644
--- a/vueManager/src/entries/api-test.js
+++ b/vueManager/src/entries/api-test.js
@@ -4,27 +4,28 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import VueApiTest from '../components/ApiTest.vue';
+import VueApiTest from '../components/ApiTest.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(VueApiTest);
+  const app = createApp(VueApiTest)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -34,12 +35,12 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -47,24 +48,24 @@ function createVueApp() {
  * Called externally when switching to the tab
  */
 export function init(selector = '#vue-api-test') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    console.warn(`[API Test] Element ${selector} not found`);
-    return null;
+    console.warn(`[API Test] Element ${selector} not found`)
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    console.info('[API Test] Already mounted');
-    return null;
+    // Already mounted
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  console.info('[API Test] Mounted successfully');
-  return app;
+  return app
 }
 
 /**
@@ -72,8 +73,8 @@ export function init(selector = '#vue-api-test') {
  */
 if (import.meta.env.DEV) {
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => init());
+    document.addEventListener('DOMContentLoaded', () => init())
   } else {
-    init();
+    init()
   }
 }
diff --git a/vueManager/src/entries/category-products.js b/vueManager/src/entries/category-products.js
index f1a240c..e684c15 100644
--- a/vueManager/src/entries/category-products.js
+++ b/vueManager/src/entries/category-products.js
@@ -5,20 +5,21 @@
  * in category update page within ExtJS tab
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import CategoryProductsGrid from '../components/CategoryProductsGrid.vue';
+import CategoryProductsGrid from '../components/CategoryProductsGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
-let appInstance = null;
+let appInstance = null
 
 /**
  * Creates and configures Vue application
@@ -27,10 +28,10 @@ let appInstance = null;
 function createVueApp(categoryId) {
   const app = createApp(CategoryProductsGrid, {
     categoryId: categoryId,
-  });
+  })
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -40,12 +41,12 @@ function createVueApp(categoryId) {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -55,28 +56,29 @@ function createVueApp(categoryId) {
  * @param {number} categoryId - Category ID
  */
 export function init(selector = '#ms3-vue-category-products', categoryId = 0) {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    console.warn('[CategoryProducts] Mount element not found:', selector);
-    return null;
+    console.warn('[CategoryProducts] Mount element not found:', selector)
+    return null
   }
 
   // Already mounted
   if ($el.dataset.vApp === 'true') {
-    return appInstance;
+    return appInstance
   }
 
   if (!categoryId) {
-    console.error('[CategoryProducts] categoryId is required');
-    return null;
+    console.error('[CategoryProducts] categoryId is required')
+    return null
   }
 
-  appInstance = createVueApp(categoryId);
-  appInstance.mount(selector);
-  $el.dataset.vApp = 'true';
+  appInstance = createVueApp(categoryId)
+  appInstance.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return appInstance;
+  return appInstance
 }
 
 /**
@@ -84,13 +86,13 @@ export function init(selector = '#ms3-vue-category-products', categoryId = 0) {
  */
 export function destroy() {
   if (appInstance) {
-    appInstance.unmount();
-    appInstance = null;
+    appInstance.unmount()
+    appInstance = null
   }
 
-  const $el = document.querySelector('#ms3-vue-category-products');
+  const $el = document.querySelector('#ms3-vue-category-products')
   if ($el) {
-    $el.dataset.vApp = 'false';
+    $el.dataset.vApp = 'false'
   }
 }
 
@@ -98,8 +100,8 @@ export function destroy() {
  * Check if app is mounted
  */
 export function isMounted() {
-  const $el = document.querySelector('#ms3-vue-category-products');
-  return $el && $el.dataset.vApp === 'true';
+  const $el = document.querySelector('#ms3-vue-category-products')
+  return $el && $el.dataset.vApp === 'true'
 }
 
 // Export for global access
@@ -107,4 +109,4 @@ window.MS3CategoryProducts = {
   init,
   destroy,
   isMounted,
-};
+}
diff --git a/vueManager/src/entries/customers.js b/vueManager/src/entries/customers.js
index 2634ce4..aa81bc4 100644
--- a/vueManager/src/entries/customers.js
+++ b/vueManager/src/entries/customers.js
@@ -4,27 +4,28 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import CustomersGrid from '../components/CustomersGrid.vue';
+import CustomersGrid from '../components/CustomersGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(CustomersGrid);
+  const app = createApp(CustomersGrid)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -34,12 +35,12 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -47,21 +48,22 @@ function createVueApp() {
  * Called when customer management page loads
  */
 export function init(selector = '#ms3-customers-vue-wrapper') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    return null;
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
@@ -69,25 +71,25 @@ export function init(selector = '#ms3-customers-vue-wrapper') {
  * Uses MutationObserver to track element appearance
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
@@ -95,8 +97,8 @@ function waitForElement(selector, callback) {
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-customers-vue-wrapper', () => init());
-  });
+    waitForElement('#ms3-customers-vue-wrapper', () => init())
+  })
 } else {
-  waitForElement('#ms3-customers-vue-wrapper', () => init());
+  waitForElement('#ms3-customers-vue-wrapper', () => init())
 }
diff --git a/vueManager/src/entries/deliveries.js b/vueManager/src/entries/deliveries.js
index 1130e1e..c2264ad 100644
--- a/vueManager/src/entries/deliveries.js
+++ b/vueManager/src/entries/deliveries.js
@@ -5,16 +5,17 @@
  */
 
 import '../scss/primevue.scss'
-import { createApp } from 'vue'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
 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 { createApp } from 'vue'
 
 import DeliveriesGrid from '../components/DeliveriesGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
@@ -30,7 +31,7 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ConfirmationService)
   app.use(ToastService)
@@ -56,6 +57,7 @@ export function init(selector = '#ms3-vue-deliveries') {
 
   const app = createVueApp()
   app.mount(selector)
+  injectFormStylesOverride()
   $el.dataset.vApp = 'true'
 
   return app
diff --git a/vueManager/src/entries/extra-fields.js b/vueManager/src/entries/extra-fields.js
index f1ab5c7..b8b9af7 100644
--- a/vueManager/src/entries/extra-fields.js
+++ b/vueManager/src/entries/extra-fields.js
@@ -4,28 +4,29 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
-import Tooltip from 'primevue/tooltip';
+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 Tooltip from 'primevue/tooltip'
+import { createApp } from 'vue'
 
-import VueExtraFieldsManager from '../components/ExtraFieldsManager.vue';
+import VueExtraFieldsManager from '../components/ExtraFieldsManager.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(VueExtraFieldsManager);
+  const app = createApp(VueExtraFieldsManager)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -35,14 +36,14 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  app.directive('tooltip', Tooltip);
+  app.directive('tooltip', Tooltip)
 
-  return app;
+  return app
 }
 
 /**
@@ -50,65 +51,64 @@ function createVueApp() {
  * Called externally when switching to the tab
  */
 export function init(selector = '#ms3-vue-extra-fields') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    console.warn(`[ExtraFields] Element ${selector} not found`);
-    return null;
+    console.warn(`[ExtraFields] Element ${selector} not found`)
+    return null
   }
 
-
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
-
 /**
  * Wait for ExtJS to create DOM element
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
  * Listen for mount event from ExtJS
  */
-document.addEventListener('ms3:mountVueExtraFields', (e) => {
-  const targetId = e.detail?.targetId || '#ms3-vue-extra-fields';
-  init(targetId);
-});
+document.addEventListener('ms3:mountVueExtraFields', e => {
+  const targetId = e.detail?.targetId || '#ms3-vue-extra-fields'
+  init(targetId)
+})
 
 /**
  * Automatic initialization - wait for element to appear
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-extra-fields', () => init('#ms3-vue-extra-fields'));
-  });
+    waitForElement('#ms3-vue-extra-fields', () => init('#ms3-vue-extra-fields'))
+  })
 } else {
-  waitForElement('#ms3-vue-extra-fields', () => init('#ms3-vue-extra-fields'));
+  waitForElement('#ms3-vue-extra-fields', () => init('#ms3-vue-extra-fields'))
 }
diff --git a/vueManager/src/entries/fields-management.js b/vueManager/src/entries/fields-management.js
index 0d204be..a920272 100644
--- a/vueManager/src/entries/fields-management.js
+++ b/vueManager/src/entries/fields-management.js
@@ -4,27 +4,28 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import VueFieldsManagement from '../components/FieldsManagement.vue';
+import VueFieldsManagement from '../components/FieldsManagement.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(VueFieldsManagement);
+  const app = createApp(VueFieldsManagement)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -34,12 +35,12 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -47,64 +48,65 @@ function createVueApp() {
  * Called externally when switching to the tab
  */
 export function init(selector = '#vue-fields-management') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    console.warn(`[Fields Management] Element ${selector} not found`);
-    return null;
+    console.warn(`[Fields Management] Element ${selector} not found`)
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    console.info('[Fields Management] Already mounted');
-    return null;
+    // Already mounted
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
  * Wait for ExtJS to create DOM element
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
  * Listen for mount event from ExtJS
  */
-document.addEventListener('ms3:mountVueFieldsManagement', (e) => {
-  const targetId = e.detail?.targetId || '#ms3-vue-fields-management';
-  init(targetId);
-});
+document.addEventListener('ms3:mountVueFieldsManagement', e => {
+  const targetId = e.detail?.targetId || '#ms3-vue-fields-management'
+  init(targetId)
+})
 
 /**
  * Automatic initialization - wait for element to appear
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-fields-management', () => init('#ms3-vue-fields-management'));
-  });
+    waitForElement('#ms3-vue-fields-management', () => init('#ms3-vue-fields-management'))
+  })
 } else {
-  waitForElement('#ms3-vue-fields-management', () => init('#ms3-vue-fields-management'));
+  waitForElement('#ms3-vue-fields-management', () => init('#ms3-vue-fields-management'))
 }
diff --git a/vueManager/src/entries/gallery-uploader.js b/vueManager/src/entries/gallery-uploader.js
index b77bc44..11fee41 100644
--- a/vueManager/src/entries/gallery-uploader.js
+++ b/vueManager/src/entries/gallery-uploader.js
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
+
 import GalleryUploader from '../components/gallery/GalleryUploader.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Gallery Uploader Entry Point
@@ -8,7 +10,7 @@ import GalleryUploader from '../components/gallery/GalleryUploader.vue'
  * Integrates into ExtJS panel via DOM mounting
  */
 
-window.MS3_initGalleryUploader = function(config) {
+window.MS3_initGalleryUploader = function (config) {
   const {
     containerId = 'ms3-gallery-uploader',
     productId,
@@ -17,7 +19,14 @@ window.MS3_initGalleryUploader = function(config) {
     maxFileSize = 10485760,
     maxWidth = 1920,
     maxHeight = 1080,
-    allowedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/avif', 'image/heic'],
+    allowedFileTypes = [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/webp',
+      'image/avif',
+      'image/heic',
+    ],
     onUploadSuccess,
     onUploadError,
     onUploadComplete,
@@ -43,6 +52,7 @@ window.MS3_initGalleryUploader = function(config) {
   })
 
   const instance = app.mount(container)
+  injectFormStylesOverride()
 
   container.__vueApp__ = app
   container.__vueInstance__ = instance
@@ -58,7 +68,7 @@ window.MS3_initGalleryUploader = function(config) {
   }
 }
 
-window.MS3_destroyGalleryUploader = function(containerId = 'ms3-gallery-uploader') {
+window.MS3_destroyGalleryUploader = function (containerId = 'ms3-gallery-uploader') {
   const container = document.getElementById(containerId)
   if (container && container.__vueApp__) {
     container.__vueApp__.unmount()
diff --git a/vueManager/src/entries/grid-fields-config.js b/vueManager/src/entries/grid-fields-config.js
index 6081535..ee2fe56 100644
--- a/vueManager/src/entries/grid-fields-config.js
+++ b/vueManager/src/entries/grid-fields-config.js
@@ -5,23 +5,24 @@
  */
 
 import '../scss/primevue.scss'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
 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 { createApp } from 'vue'
 
 import GridFieldsConfig from '../components/GridFieldsConfig.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(GridFieldsConfig);
+  const app = createApp(GridFieldsConfig)
 
   const pinia = createPinia()
   app.use(pinia)
@@ -34,7 +35,7 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ConfirmationService)
   app.use(ToastService)
@@ -59,6 +60,7 @@ export function init(selector = '#ms3-grid-fields-config-vue-wrapper') {
 
   const app = createVueApp()
   app.mount(selector)
+  injectFormStylesOverride()
   $el.dataset.vApp = 'true'
 
   return app
@@ -92,7 +94,7 @@ function waitForElement(selector, callback) {
  * Listen for custom event from ExtJS panel
  * Mount application when tab is rendered
  */
-document.addEventListener('ms3:mountVueGridFieldsConfig', (event) => {
+document.addEventListener('ms3:mountVueGridFieldsConfig', event => {
   const targetId = event.detail?.targetId || '#ms3-grid-fields-config-vue-wrapper'
   init(targetId)
 })
@@ -102,8 +104,12 @@ document.addEventListener('ms3:mountVueGridFieldsConfig', (event) => {
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-grid-fields-config-vue-wrapper', () => init('#ms3-grid-fields-config-vue-wrapper'))
+    waitForElement('#ms3-grid-fields-config-vue-wrapper', () =>
+      init('#ms3-grid-fields-config-vue-wrapper')
+    )
   })
 } else {
-  waitForElement('#ms3-grid-fields-config-vue-wrapper', () => init('#ms3-grid-fields-config-vue-wrapper'))
+  waitForElement('#ms3-grid-fields-config-vue-wrapper', () =>
+    init('#ms3-grid-fields-config-vue-wrapper')
+  )
 }
diff --git a/vueManager/src/entries/help.js b/vueManager/src/entries/help.js
index 422a114..9eec73f 100644
--- a/vueManager/src/entries/help.js
+++ b/vueManager/src/entries/help.js
@@ -3,12 +3,14 @@
  */
 
 import '../scss/primevue.scss'
-import { createApp } from 'vue'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
 import 'primeicons/primeicons.css'
 
+import Aura from '@primeuix/themes/aura'
+import PrimeVue from 'primevue/config'
+import { createApp } from 'vue'
+
 import HelpPage from '../components/HelpPage.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
@@ -20,9 +22,9 @@ function createVueApp() {
     theme: {
       preset: Aura,
       options: {
-        darkModeSelector: 'none'
-      }
-    }
+        darkModeSelector: 'none',
+      },
+    },
   })
 
   return app
@@ -45,6 +47,7 @@ export function init(selector = '#ms3-vue-help') {
 
   const app = createVueApp()
   app.mount(selector)
+  injectFormStylesOverride()
   $el.dataset.vApp = 'true'
 
   return app
diff --git a/vueManager/src/entries/import.js b/vueManager/src/entries/import.js
index 4654afe..f4cf178 100644
--- a/vueManager/src/entries/import.js
+++ b/vueManager/src/entries/import.js
@@ -4,25 +4,26 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import ImportProducts from '../components/ImportProducts.vue';
+import ImportProducts from '../components/ImportProducts.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
-let app = null;
+let app = null
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const vueApp = createApp(ImportProducts);
+  const vueApp = createApp(ImportProducts)
 
   vueApp.use(PrimeVue, {
     theme: {
@@ -34,40 +35,40 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  vueApp.use(ConfirmationService);
-  vueApp.use(ToastService);
+  vueApp.use(ConfirmationService)
+  vueApp.use(ToastService)
 
-  return vueApp;
+  return vueApp
 }
 
 /**
  * Widget initialization
  */
 export function init(selector = '#ms3-vue-import') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    console.warn(`[MS3 Import] Target element not found: ${selector}`);
-    return null;
+    console.warn(`[MS3 Import] Target element not found: ${selector}`)
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
   // Unmount existing app if any
   if (app) {
-    app.unmount();
+    app.unmount()
   }
 
-  app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-
-  return app;
+  return app
 }
 
 /**
@@ -75,8 +76,8 @@ export function init(selector = '#ms3-vue-import') {
  */
 export function unmount() {
   if (app) {
-    app.unmount();
-    app = null;
+    app.unmount()
+    app = null
   }
 }
 
@@ -84,43 +85,43 @@ export function unmount() {
  * Wait for ExtJS to create DOM element
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 // Listen for mount event from ExtJS
-document.addEventListener('ms3:mountVueImport', (event) => {
-  const targetId = event.detail?.targetId || '#ms3-vue-import';
-  init(targetId);
-});
+document.addEventListener('ms3:mountVueImport', event => {
+  const targetId = event.detail?.targetId || '#ms3-vue-import'
+  init(targetId)
+})
 
 /**
  * Automatic initialization on DOM load
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-import', () => init());
-  });
+    waitForElement('#ms3-vue-import', () => init())
+  })
 } else {
-  waitForElement('#ms3-vue-import', () => init());
+  waitForElement('#ms3-vue-import', () => init())
 }
 
 // Export for programmatic usage
-export default { init, unmount };
+export default { init, unmount }
diff --git a/vueManager/src/entries/links.js b/vueManager/src/entries/links.js
index 6e02c17..069c0d8 100644
--- a/vueManager/src/entries/links.js
+++ b/vueManager/src/entries/links.js
@@ -4,13 +4,15 @@
  * Vue application for managing product link types in admin panel
  */
 
-import { createApp } from 'vue'
-import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
-import ToastService from 'primevue/toastservice'
+import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
+import PrimeVue from 'primevue/config'
 import ConfirmationService from 'primevue/confirmationservice'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
+import ToastService from 'primevue/toastservice'
+import { createApp } from 'vue'
+
 import LinksGrid from '../components/LinksGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 // Mount point ID
 const MOUNT_ID = 'ms3-vue-links'
@@ -44,12 +46,13 @@ function mountApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ToastService)
   app.use(ConfirmationService)
 
   app.mount(container)
+  injectFormStylesOverride()
 
   return true
 }
@@ -73,7 +76,7 @@ if (document.readyState === 'loading') {
 
 // Listen for ExtJS tab activation
 if (typeof Ext !== 'undefined') {
-  Ext.onReady(function() {
+  Ext.onReady(function () {
     // Try to mount on Ext ready
     mountApp()
 
diff --git a/vueManager/src/entries/model-fields.js b/vueManager/src/entries/model-fields.js
index 5d19778..81ac20c 100644
--- a/vueManager/src/entries/model-fields.js
+++ b/vueManager/src/entries/model-fields.js
@@ -4,27 +4,28 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import ModelFieldsGrid from '../components/ModelFieldsGrid.vue';
+import ModelFieldsGrid from '../components/ModelFieldsGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(ModelFieldsGrid);
-  const pinia = createPinia();
+  const app = createApp(ModelFieldsGrid)
+  const pinia = createPinia()
 
-  app.use(pinia);
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -34,12 +35,12 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -47,21 +48,22 @@ function createVueApp() {
  * Called when Model Fields page loads
  */
 export function init(selector = '#ms3-model-fields-vue-wrapper') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    return null;
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
@@ -69,25 +71,25 @@ export function init(selector = '#ms3-model-fields-vue-wrapper') {
  * Uses MutationObserver to track element appearance
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
@@ -95,8 +97,8 @@ function waitForElement(selector, callback) {
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-model-fields-vue-wrapper', () => init());
-  });
+    waitForElement('#ms3-model-fields-vue-wrapper', () => init())
+  })
 } else {
-  waitForElement('#ms3-model-fields-vue-wrapper', () => init());
+  waitForElement('#ms3-model-fields-vue-wrapper', () => init())
 }
diff --git a/vueManager/src/entries/notifications.js b/vueManager/src/entries/notifications.js
index 0f5ed23..70cf8ae 100644
--- a/vueManager/src/entries/notifications.js
+++ b/vueManager/src/entries/notifications.js
@@ -4,27 +4,28 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import NotificationsGrid from '../components/NotificationsGrid.vue';
+import NotificationsGrid from '../components/NotificationsGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(NotificationsGrid);
+  const app = createApp(NotificationsGrid)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -34,12 +35,12 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -47,21 +48,22 @@ function createVueApp() {
  * Called when Notification Center page loads
  */
 export function init(selector = '#ms3-notifications-vue-wrapper') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    return null;
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
@@ -69,25 +71,25 @@ export function init(selector = '#ms3-notifications-vue-wrapper') {
  * Uses MutationObserver to track element appearance
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
@@ -95,8 +97,8 @@ function waitForElement(selector, callback) {
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-notifications-vue-wrapper', () => init());
-  });
+    waitForElement('#ms3-notifications-vue-wrapper', () => init())
+  })
 } else {
-  waitForElement('#ms3-notifications-vue-wrapper', () => init());
+  waitForElement('#ms3-notifications-vue-wrapper', () => init())
 }
diff --git a/vueManager/src/entries/order.js b/vueManager/src/entries/order.js
index c4a07b5..a892a3f 100644
--- a/vueManager/src/entries/order.js
+++ b/vueManager/src/entries/order.js
@@ -4,26 +4,27 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import OrderView from '../components/OrderView.vue';
+import OrderView from '../components/OrderView.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(OrderView);
-  const pinia = createPinia();
-  app.use(pinia);
+  const app = createApp(OrderView)
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -33,58 +34,59 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
  * Widget initialization
  */
 export function init(selector = '#ms3-order-vue-wrapper') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    return null;
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
  * Wait for ExtJS to create DOM element
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
@@ -92,8 +94,8 @@ function waitForElement(selector, callback) {
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-order-vue-wrapper', () => init());
-  });
+    waitForElement('#ms3-order-vue-wrapper', () => init())
+  })
 } else {
-  waitForElement('#ms3-order-vue-wrapper', () => init());
+  waitForElement('#ms3-order-vue-wrapper', () => init())
 }
diff --git a/vueManager/src/entries/orders.js b/vueManager/src/entries/orders.js
index 7b86d04..67157b9 100644
--- a/vueManager/src/entries/orders.js
+++ b/vueManager/src/entries/orders.js
@@ -4,27 +4,28 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
-import OrdersGrid from '../components/OrdersGrid.vue';
+import OrdersGrid from '../components/OrdersGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(OrdersGrid);
+  const app = createApp(OrdersGrid)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -34,12 +35,12 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
 
 /**
@@ -47,21 +48,22 @@ function createVueApp() {
  * Called when orders management page loads
  */
 export function init(selector = '#ms3-orders-vue-wrapper') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    return null;
+    return null
   }
 
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
-  const app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  const app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
@@ -69,25 +71,25 @@ export function init(selector = '#ms3-orders-vue-wrapper') {
  * Uses MutationObserver to track element appearance
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 /**
@@ -95,8 +97,8 @@ function waitForElement(selector, callback) {
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-orders-vue-wrapper', () => init());
-  });
+    waitForElement('#ms3-orders-vue-wrapper', () => init())
+  })
 } else {
-  waitForElement('#ms3-orders-vue-wrapper', () => init());
+  waitForElement('#ms3-orders-vue-wrapper', () => init())
 }
diff --git a/vueManager/src/entries/payments.js b/vueManager/src/entries/payments.js
index 2b34a8d..3fb4cb8 100644
--- a/vueManager/src/entries/payments.js
+++ b/vueManager/src/entries/payments.js
@@ -5,22 +5,23 @@
  */
 
 import '../scss/primevue.scss'
-import { createApp } from 'vue'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
 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 { createApp } from 'vue'
 
 import PaymentsGrid from '../components/PaymentsGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp() {
-  const app = createApp(PaymentsGrid);
+  const app = createApp(PaymentsGrid)
   app.use(PrimeVue, {
     theme: {
       preset: Aura,
@@ -29,7 +30,7 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ConfirmationService)
   app.use(ToastService)
@@ -55,6 +56,7 @@ export function init(selector = '#ms3-vue-payments') {
 
   const app = createVueApp()
   app.mount(selector)
+  injectFormStylesOverride()
   $el.dataset.vApp = 'true'
 
   return app
diff --git a/vueManager/src/entries/product-tabs.js b/vueManager/src/entries/product-tabs.js
index ef769cb..5c3c41c 100644
--- a/vueManager/src/entries/product-tabs.js
+++ b/vueManager/src/entries/product-tabs.js
@@ -7,15 +7,17 @@
  */
 
 import '../scss/primevue.scss'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
 import 'primeicons/primeicons.css'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
 
+import Aura from '@primeuix/themes/aura'
+import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
+import { createApp } from 'vue'
+
 import ProductTabs from '../components/product/ProductTabs.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Plugin Registry for third-party tabs
@@ -121,7 +123,7 @@ window.MS3ProductTabsRegistry = window.MS3ProductTabsRegistry || new ProductTabs
  * @returns {Object} Vue app instance
  */
 function createVueApp(props) {
-  const app = createApp(ProductTabs, props);
+  const app = createApp(ProductTabs, props)
 
   const pinia = createPinia()
   app.use(pinia)
@@ -134,7 +136,7 @@ function createVueApp(props) {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ToastService)
 
@@ -151,13 +153,8 @@ function createVueApp(props) {
  * @param {Object} [config.config={}] - Additional configuration (show_gallery, etc.)
  * @returns {Object|null} - App instance and control methods, or null if failed
  */
-window.MS3_initProductTabs = function(config) {
-  const {
-    containerId = 'ms3-vue-product-tabs',
-    productId,
-    record,
-    config: appConfig = {},
-  } = config
+window.MS3_initProductTabs = function (config) {
+  const { containerId = 'ms3-vue-product-tabs', productId, record, config: appConfig = {} } = config
 
   if (!productId) {
     console.error('[ProductTabs] productId is required')
@@ -177,7 +174,7 @@ window.MS3_initProductTabs = function(config) {
 
   // Check if already mounted
   if (container.__vueApp__) {
-    console.info('[ProductTabs] Already mounted, returning existing instance')
+    // Already mounted, return existing instance
     return {
       app: container.__vueApp__,
       instance: container.__vueInstance__,
@@ -192,7 +189,7 @@ window.MS3_initProductTabs = function(config) {
 
   // Merge config from ms3.config if available
   // Note: ms3 is a global variable (not window.ms3) because it's declared with 'let'
-  // eslint-disable-next-line no-undef
+
   const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : {}
   const mergedConfig = {
     show_gallery: true,
@@ -201,7 +198,7 @@ window.MS3_initProductTabs = function(config) {
     show_options: true,
     option_fields: [],
     ...ms3Config,
-    ...appConfig
+    ...appConfig,
   }
 
   const props = {
@@ -212,6 +209,7 @@ window.MS3_initProductTabs = function(config) {
 
   const app = createVueApp(props)
   const instance = app.mount(container)
+  injectFormStylesOverride()
 
   // Store references
   container.__vueApp__ = app
@@ -237,7 +235,7 @@ window.MS3_initProductTabs = function(config) {
  *
  * @param {string} [containerId='ms3-vue-product-tabs'] - Container element ID
  */
-window.MS3_destroyProductTabs = function(containerId = 'ms3-vue-product-tabs') {
+window.MS3_destroyProductTabs = function (containerId = 'ms3-vue-product-tabs') {
   const container = document.getElementById(containerId)
   if (container && container.__vueApp__) {
     container.__vueApp__.unmount()
@@ -284,13 +282,8 @@ function waitForElement(selector, callback, timeout = 10000) {
  * Listen for mount event from ExtJS
  * ExtJS dispatches this event when the product tab panel is rendered
  */
-document.addEventListener('ms3:mountProductTabs', (e) => {
-  const {
-    targetId = 'ms3-vue-product-tabs',
-    productId,
-    record,
-    config,
-  } = e.detail || {}
+document.addEventListener('ms3:mountProductTabs', e => {
+  const { targetId = 'ms3-vue-product-tabs', productId, record, config } = e.detail || {}
 
   if (!productId || !record) {
     console.error('[ProductTabs] Event missing required data:', e.detail)
diff --git a/vueManager/src/entries/statuses.js b/vueManager/src/entries/statuses.js
index 335e29f..b644f79 100644
--- a/vueManager/src/entries/statuses.js
+++ b/vueManager/src/entries/statuses.js
@@ -4,13 +4,15 @@
  * Vue application for managing order statuses in admin panel
  */
 
-import { createApp } from 'vue'
-import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
-import ToastService from 'primevue/toastservice'
+import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
+import PrimeVue from 'primevue/config'
 import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import { createApp } from 'vue'
+
 import StatusesGrid from '../components/StatusesGrid.vue'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 // Mount point ID
 const MOUNT_ID = 'ms3-vue-statuses'
@@ -44,12 +46,13 @@ function mountApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ToastService)
   app.use(ConfirmationService)
 
   app.mount(container)
+  injectFormStylesOverride()
 
   return true
 }
@@ -73,7 +76,7 @@ if (document.readyState === 'loading') {
 
 // Listen for ExtJS tab activation
 if (typeof Ext !== 'undefined') {
-  Ext.onReady(function() {
+  Ext.onReady(function () {
     // Try to mount on Ext ready
     mountApp()
 
diff --git a/vueManager/src/entries/utilities-gallery.js b/vueManager/src/entries/utilities-gallery.js
index 96f6384..56cf577 100644
--- a/vueManager/src/entries/utilities-gallery.js
+++ b/vueManager/src/entries/utilities-gallery.js
@@ -4,24 +4,25 @@
  * Exports initialization function for mounting Vue application
  */
 
-import '../scss/primevue.scss';
-import { createApp } from 'vue';
-import PrimeVue from 'primevue/config';
-import Aura from '@primeuix/themes/aura';
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
-import 'primeicons/primeicons.css';
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
 
-import ToastService from 'primevue/toastservice';
+import Aura from '@primeuix/themes/aura'
+import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
+import PrimeVue from 'primevue/config'
+import ToastService from 'primevue/toastservice'
+import { createApp } from 'vue'
 
-import UtilitiesGallery from '../components/UtilitiesGallery.vue';
+import UtilitiesGallery from '../components/UtilitiesGallery.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
-let app = null;
+let app = null
 
 /**
  * Creates and configures Vue application
  */
 function createVueApp(props = {}) {
-  const vueApp = createApp(UtilitiesGallery, props);
+  const vueApp = createApp(UtilitiesGallery, props)
   vueApp.use(PrimeVue, {
     theme: {
       preset: Aura,
@@ -32,40 +33,40 @@ function createVueApp(props = {}) {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
-  vueApp.use(ToastService);
+  vueApp.use(ToastService)
 
-  return vueApp;
+  return vueApp
 }
 
 /**
  * Widget initialization
  */
 export function init(selector = '#ms3-vue-utilities-gallery') {
-  const $el = document.querySelector(selector);
+  const $el = document.querySelector(selector)
 
   if (!$el) {
-    console.warn('[Gallery] Element not found:', selector);
-    return null;
+    console.warn('[Gallery] Element not found:', selector)
+    return null
   }
 
-
   if ($el.dataset.vApp === 'true') {
-    return null;
+    return null
   }
 
   // Unmount existing app if any
   if (app) {
-    app.unmount();
+    app.unmount()
   }
 
   // Component reads config from data-attributes set by ExtJS
-  app = createVueApp();
-  app.mount(selector);
-  $el.dataset.vApp = 'true';
+  app = createVueApp()
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
 
-  return app;
+  return app
 }
 
 /**
@@ -73,53 +74,52 @@ export function init(selector = '#ms3-vue-utilities-gallery') {
  */
 export function unmount() {
   if (app) {
-    app.unmount();
-    app = null;
+    app.unmount()
+    app = null
   }
 }
 
-
 /**
  * Wait for ExtJS to create DOM element
  */
 function waitForElement(selector, callback) {
-  const element = document.querySelector(selector);
+  const element = document.querySelector(selector)
 
   if (element) {
-    callback(element);
-    return;
+    callback(element)
+    return
   }
 
   const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector);
+    const element = document.querySelector(selector)
     if (element) {
-      observer.disconnect();
-      callback(element);
+      observer.disconnect()
+      callback(element)
     }
-  });
+  })
 
   observer.observe(document.body, {
     childList: true,
     subtree: true,
-  });
+  })
 }
 
 // Listen for mount event from ExtJS
-document.addEventListener('ms3:mountVueUtilitiesGallery', (event) => {
-  const targetId = event.detail?.targetId || '#ms3-vue-utilities-gallery';
-  init(targetId);
-});
+document.addEventListener('ms3:mountVueUtilitiesGallery', event => {
+  const targetId = event.detail?.targetId || '#ms3-vue-utilities-gallery'
+  init(targetId)
+})
 
 /**
  * Automatic initialization on DOM load
  */
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-utilities-gallery', () => init());
-  });
+    waitForElement('#ms3-vue-utilities-gallery', () => init())
+  })
 } else {
-  waitForElement('#ms3-vue-utilities-gallery', () => init());
+  waitForElement('#ms3-vue-utilities-gallery', () => init())
 }
 
 // Export for programmatic usage
-export default { init, unmount };
+export default { init, unmount }
diff --git a/vueManager/src/entries/vendors.js b/vueManager/src/entries/vendors.js
index f4ec2a0..9b1a841 100644
--- a/vueManager/src/entries/vendors.js
+++ b/vueManager/src/entries/vendors.js
@@ -5,16 +5,17 @@
  */
 
 import '../scss/primevue.scss'
-import { createApp } from 'vue'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale';
 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 { createApp } from 'vue'
 
 import VendorsGrid from '../components/VendorsGrid.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
 
 /**
  * Creates and configures Vue application
@@ -30,7 +31,7 @@ function createVueApp() {
       },
     },
     locale: getPrimeVueLocale(),
-  });
+  })
 
   app.use(ConfirmationService)
   app.use(ToastService)
@@ -56,6 +57,7 @@ export function init(selector = '#ms3-vue-vendors') {
 
   const app = createVueApp()
   app.mount(selector)
+  injectFormStylesOverride()
   $el.dataset.vApp = 'true'
 
   return app
diff --git a/vueManager/src/main.js b/vueManager/src/main.js
index c7dd755..6d82daf 100644
--- a/vueManager/src/main.js
+++ b/vueManager/src/main.js
@@ -1,13 +1,13 @@
 import './scss/primevue.scss'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
 import 'primeicons/primeicons.css'
 
-import ConfirmationService from 'primevue/confirmationservice';
-import ToastService from 'primevue/toastservice';
+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 { createApp } from 'vue'
 
 /**
  * MiniShop3 Vue Manager
@@ -33,11 +33,11 @@ import ToastService from 'primevue/toastservice';
  * @param {Object} rootComponent - Root component
  * @returns {Object} - Vue application instance
  */
-function createVueApp(rootComponent) {
-  const app = createApp(rootComponent);
+export function createVueApp(rootComponent) {
+  const app = createApp(rootComponent)
 
-  const pinia = createPinia();
-  app.use(pinia);
+  const pinia = createPinia()
+  app.use(pinia)
 
   app.use(PrimeVue, {
     theme: {
@@ -56,10 +56,10 @@ function createVueApp(rootComponent) {
         },
       },
     },
-  });
+  })
 
-  app.use(ConfirmationService);
-  app.use(ToastService);
+  app.use(ConfirmationService)
+  app.use(ToastService)
 
-  return app;
+  return app
 }
diff --git a/vueManager/src/request.js b/vueManager/src/request.js
index 92af7b3..f2f1036 100644
--- a/vueManager/src/request.js
+++ b/vueManager/src/request.js
@@ -9,15 +9,15 @@
  */
 class Request {
   constructor() {
-    this.headers = {};
-    this.init();
+    this.headers = {}
+    this.init()
   }
 
   /**
    * Initialize: get configuration from MODX
    */
   init() {
-    this.setHeaders();
+    this.setHeaders()
   }
 
   /**
@@ -25,9 +25,9 @@ class Request {
    */
   getConnectorUrl() {
     if (typeof ms3 !== 'undefined' && ms3?.config?.connector_url) {
-      return ms3.config.connector_url;
+      return ms3.config.connector_url
     }
-    return '/assets/components/minishop3/connector.php';
+    return '/assets/components/minishop3/connector.php'
   }
 
   /**
@@ -35,9 +35,9 @@ class Request {
    */
   getModAuthToken() {
     if (typeof MODx !== 'undefined' && MODx?.siteId) {
-      return MODx.siteId;
+      return MODx.siteId
     }
-    return null;
+    return null
   }
 
   /**
@@ -45,9 +45,9 @@ class Request {
    */
   setHeaders() {
     this.headers = {
-      'Accept': 'application/json',
+      Accept: 'application/json',
       'Content-Type': 'application/json',
-    };
+    }
   }
 
   /**
@@ -58,23 +58,23 @@ class Request {
    * @returns {string} - Full URL
    */
   buildUrl(route, params = {}) {
-    const url = new URL(this.getConnectorUrl(), window.location.origin);
+    const url = new URL(this.getConnectorUrl(), window.location.origin)
 
-    url.searchParams.set('action', 'MiniShop3\\Processors\\Api\\Index');
-    url.searchParams.set('route', route);
+    url.searchParams.set('action', 'MiniShop3\\Processors\\Api\\Index')
+    url.searchParams.set('route', route)
 
-    const modAuthToken = this.getModAuthToken();
+    const modAuthToken = this.getModAuthToken()
     if (modAuthToken) {
-      url.searchParams.set('HTTP_MODAUTH', modAuthToken);
+      url.searchParams.set('HTTP_MODAUTH', modAuthToken)
     }
 
     Object.entries(params).forEach(([key, value]) => {
       if (value !== null && value !== undefined) {
-        url.searchParams.set(key, value);
+        url.searchParams.set(key, value)
       }
-    });
+    })
 
-    return url.toString();
+    return url.toString()
   }
 
   /**
@@ -92,60 +92,59 @@ class Request {
         method,
         headers: { ...this.headers, ...options.headers },
         credentials: 'same-origin',
-      };
+      }
 
-      let url;
+      let url
 
       if (method === 'GET' && data) {
-        url = this.buildUrl(route, data);
+        url = this.buildUrl(route, data)
       } else {
-        url = this.buildUrl(route);
+        url = this.buildUrl(route)
 
         if (data) {
-          fetchOptions.body = JSON.stringify(data);
+          fetchOptions.body = JSON.stringify(data)
         }
       }
 
-      const response = await fetch(url, fetchOptions);
+      const response = await fetch(url, fetchOptions)
 
-      const responseData = await response.json();
+      const responseData = await response.json()
 
       if (responseData.success === false) {
         throw new RequestError(
           responseData.message || 'Request failed',
           response.status,
-          responseData,
-        );
+          responseData
+        )
       }
 
       if (!response.ok) {
         throw new RequestError(
           responseData.message || `HTTP error! status: ${response.status}`,
           response.status,
-          responseData,
-        );
+          responseData
+        )
       }
 
       if (responseData.object && Object.keys(responseData.object).length > 0) {
-        return responseData.object;
-      } else if (responseData.data && Array.isArray(responseData.data) && responseData.data.length > 0) {
-        return responseData.data;
+        return responseData.object
+      } else if (
+        responseData.data &&
+        Array.isArray(responseData.data) &&
+        responseData.data.length > 0
+      ) {
+        return responseData.data
       } else if (responseData.data && !Array.isArray(responseData.data)) {
-        return responseData.data;
+        return responseData.data
       }
 
-      return responseData;
-
+      return responseData
     } catch (error) {
       if (error instanceof RequestError) {
-        throw error;
+        throw error
       }
 
-      throw new RequestError(
-        error.message || 'Network error',
-        0,
-        { originalError: error },
-      );
+      throw new RequestError(error.message || 'Network error', 0, { originalError: error })
     }
   }
 
@@ -153,35 +152,35 @@ class Request {
    * GET request
    */
   async get(route, params = null, options = {}) {
-    return this.request('GET', route, params, options);
+    return this.request('GET', route, params, options)
   }
 
   /**
    * POST request
    */
   async post(route, data = null, options = {}) {
-    return this.request('POST', route, data, options);
+    return this.request('POST', route, data, options)
   }
 
   /**
    * PUT request
    */
   async put(route, data = null, options = {}) {
-    return this.request('PUT', route, data, options);
+    return this.request('PUT', route, data, options)
   }
 
   /**
    * DELETE request
    */
   async delete(route, data = null, options = {}) {
-    return this.request('DELETE', route, data, options);
+    return this.request('DELETE', route, data, options)
   }
 
   /**
    * PATCH request
    */
   async patch(route, data = null, options = {}) {
-    return this.request('PATCH', route, data, options);
+    return this.request('PATCH', route, data, options)
   }
 
   /**
@@ -195,17 +194,17 @@ class Request {
    */
   async upload(route, file, additionalData = {}, options = {}) {
     try {
-      const formData = new FormData();
-      formData.append('file', file);
+      const formData = new FormData()
+      formData.append('file', file)
 
       // Add additional data to FormData
       Object.entries(additionalData).forEach(([key, value]) => {
         if (value !== null && value !== undefined) {
-          formData.append(key, value);
+          formData.append(key, value)
         }
-      });
+      })
 
-      const url = this.buildUrl(route);
+      const url = this.buildUrl(route)
 
       const fetchOptions = {
         method: 'POST',
@@ -213,48 +212,43 @@ class Request {
         credentials: 'same-origin',
         // Don't set Content-Type header - browser will set it with boundary
         headers: {
-          'Accept': 'application/json',
+          Accept: 'application/json',
           ...options.headers,
         },
-      };
+      }
 
-      const response = await fetch(url, fetchOptions);
-      const responseData = await response.json();
+      const response = await fetch(url, fetchOptions)
+      const responseData = await response.json()
 
       if (responseData.success === false) {
         throw new RequestError(
           responseData.message || 'Upload failed',
           response.status,
-          responseData,
-        );
+          responseData
+        )
       }
 
       if (!response.ok) {
         throw new RequestError(
           responseData.message || `HTTP error! status: ${response.status}`,
           response.status,
-          responseData,
-        );
+          responseData
+        )
       }
 
       if (responseData.object && Object.keys(responseData.object).length > 0) {
-        return responseData.object;
+        return responseData.object
       } else if (responseData.data) {
-        return responseData.data;
+        return responseData.data
       }
 
-      return responseData;
-
+      return responseData
     } catch (error) {
       if (error instanceof RequestError) {
-        throw error;
+        throw error
       }
 
-      throw new RequestError(
-        error.message || 'Upload error',
-        0,
-        { originalError: error },
-      );
+      throw new RequestError(error.message || 'Upload error', 0, { originalError: error })
     }
   }
 }
@@ -264,34 +258,34 @@ class Request {
  */
 class RequestError extends Error {
   constructor(message, statusCode, data = {}) {
-    super(message);
-    this.name = 'RequestError';
-    this.statusCode = statusCode;
-    this.data = data;
+    super(message)
+    this.name = 'RequestError'
+    this.statusCode = statusCode
+    this.data = data
   }
 
   /**
    * Check if error is unauthorized
    */
   isUnauthorized() {
-    return this.statusCode === 401;
+    return this.statusCode === 401
   }
 
   /**
    * Check if error is forbidden
    */
   isForbidden() {
-    return this.statusCode === 403;
+    return this.statusCode === 403
   }
 
   /**
    * Check if error is validation error
    */
   isValidationError() {
-    return this.statusCode === 422;
+    return this.statusCode === 422
   }
 }
-const request = new Request();
+const request = new Request()
 
-export default request;
-export { Request, RequestError };
+export default request
+export { Request, RequestError }
diff --git a/vueManager/src/scss/_variables.scss b/vueManager/src/scss/_variables.scss
new file mode 100644
index 0000000..d8d06f5
--- /dev/null
+++ b/vueManager/src/scss/_variables.scss
@@ -0,0 +1,91 @@
+/**
+ * MiniShop3 Vue Manager — Design Tokens
+ * Повторяющиеся значения вынесены в переменные
+ */
+
+/* Переменные доступны в .vueApp и .p-dialog (Dialog teleport в body) */
+.vueApp,
+.p-dialog,
+.p-confirm-dialog {
+  /* Colors — backgrounds */
+  --ms3-bg-surface: #fff;
+  --ms3-bg-muted: #f8f9fa;
+  --ms3-bg-slate: #f8fafc;
+  --ms3-bg-slate-alt: #f1f5f9;
+  --ms3-bg-warning: #fef3c7;
+  --ms3-bg-warning-light: #fefce8;
+  --ms3-bg-success: #f0fdf4;
+  --ms3-bg-success-light: #e8f5e9;
+  --ms3-bg-info: #e0f2fe;
+  --ms3-bg-accent: #eff6ff;
+  --ms3-bg-accent-alt: #dbeafe;
+  --ms3-bg-indigo: #e0e7ff;
+  --ms3-bg-neutral: #e9ecef;
+  --ms3-bg-gray-100: #f3f4f6;
+  --ms3-bg-gray-50: #fafafa;
+  --ms3-bg-drag: #f8f9fa;
+  --ms3-bg-overlay: rgb(255 255 255 / 70%);
+
+  /* Colors — borders */
+  --ms3-border-color: #e2e8f0;
+  --ms3-border-color-alt: #dee2e6;
+  --ms3-border-warning: #fbbf24;
+  --ms3-border-success: #bbf7d0;
+  --ms3-border-success-light: #c8e6c9;
+  --ms3-border-warning-alt: #fef08a;
+  --ms3-border-accent: #bfdbfe;
+  --ms3-border-neutral: #ced4da;
+  --ms3-border-divider: #eee;
+
+  /* Colors — text */
+  --ms3-text-primary: #374151;
+  /* Объединённые muted/secondary (ранее были #6c757d, #6b7280, #64748b) */
+  --ms3-text-muted: #64748b;
+  --ms3-text-light: #94a3b8;
+  --ms3-text-dark: #334155;
+  --ms3-text-hint: #495057;
+  --ms3-text-info: #4b5563;
+  --ms3-text-header: #475569;
+  --ms3-text-warning: #92400e;
+  --ms3-text-warning-accent: #f59e0b;
+  --ms3-text-warning-dark: #854d0e;
+  --ms3-text-success: #22c55e;
+  --ms3-text-success-dark: #2e7d32;
+  --ms3-text-danger: #ef4444;
+  --ms3-text-danger-alt: #dc2626;
+  --ms3-text-darkest: #1e293b;
+  --ms3-text-muted-light: #9ca3af;
+  --ms3-text-accent-dark: #1e40af;
+  --ms3-text-info-dark: #0369a1;
+  --ms3-text-indigo: #3730a3;
+  --ms3-text-on-primary: #fff;
+  --ms3-text-success-result: #155724;
+  --ms3-text-info-result: #0c5460;
+  --ms3-text-error-result: #721c24;
+
+  /* Colors — accents */
+  --ms3-accent-primary: #3b82f6;
+  --ms3-accent-focus: rgb(59 130 246 / 30%);
+  --ms3-accent-teal: #32ab9a;
+  --ms3-accent-green: #4caf50;
+  --ms3-border-upload: #ddd;
+
+  /* Spacing (margins, paddings, gaps) */
+  --ms3-spacing-1: 0.25rem;
+  --ms3-spacing-2: 0.5rem;
+  --ms3-spacing-3: 0.75rem;
+  --ms3-spacing-4: 1rem;
+
+  /* Radius */
+  --ms3-radius-sm: 0.25rem;
+  --ms3-radius-md: 0.375rem;
+  --ms3-radius-lg: 0.5rem;
+
+  /* Border */
+  --ms3-border-width: 0.0625rem;
+  --ms3-border-width-focus: 0.125rem;
+  --ms3-border-width-accent: 0.1875rem;
+
+  /* Shadow */
+  --ms3-shadow-dropdown: 0 0.25rem 0.75rem rgb(0 0 0 / 15%);
+}
diff --git a/vueManager/src/scss/primevue.scss b/vueManager/src/scss/primevue.scss
index 0debdc9..39441f6 100644
--- a/vueManager/src/scss/primevue.scss
+++ b/vueManager/src/scss/primevue.scss
@@ -1,8 +1,12 @@
 // Глобальные правила box-sizing и переопределение для Vue находятся в main.css
 // Этот файл больше не содержит правил box-sizing
 
+@use 'variables' as *;
+
 /* ============================================ */
+
 /* Utility классы (аналог PrimeFlex)           */
+
 /* ============================================ */
 
 /* Flex Layout */
@@ -308,7 +312,7 @@
 .p-select-overlay .rule-option-desc,
 .p-dialog .rule-option-desc {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--ms3-text-muted);
 }
 
 /* Validation Field Option in Select dropdown */
@@ -327,7 +331,7 @@
 .p-select-overlay .field-option-group,
 .p-dialog .field-option-group {
   font-size: 0.75rem;
-  color: #6b7280;
+  color: var(--ms3-text-muted);
 }
 
 /* Form fields in dialogs (for ModelFieldsGrid and similar) */
@@ -360,15 +364,17 @@
 }
 
 /* ============================================ */
+
 /* Tab Description                             */
+
 /* ============================================ */
 .vueApp .tab-description {
-  margin: 0 0 1rem 0;
+  margin: 0 0 1rem;
   padding: 0.75rem 1rem;
-  background-color: #f8f9fa;
-  border-left: 3px solid #3b82f6;
-  color: #4b5563;
+  background-color: var(--ms3-bg-muted);
+  border-left: var(--ms3-border-width-accent) solid var(--ms3-accent-primary);
+  color: var(--ms3-text-info);
   font-size: 0.875rem;
   line-height: 1.5;
-  border-radius: 0 4px 4px 0;
-}
\ No newline at end of file
+  border-radius: 0 var(--ms3-radius-sm) var(--ms3-radius-sm) 0;
+}
diff --git a/vueManager/src/stores/useProductStore.js b/vueManager/src/stores/useProductStore.js
index 188f47b..2846d2e 100644
--- a/vueManager/src/stores/useProductStore.js
+++ b/vueManager/src/stores/useProductStore.js
@@ -18,8 +18,8 @@
  * ```
  */
 
-import { defineStore } from 'pinia';
-import { useApi } from '@vuetools/useApi';
+import { useApi } from '@vuetools/useApi'
+import { defineStore } from 'pinia'
 
 export const useProductStore = defineStore('product', {
   state: () => ({
@@ -34,19 +34,19 @@ export const useProductStore = defineStore('product', {
     /**
      * Get product by ID from state
      */
-    getProductById: (state) => (id) => {
-      return state.products.find(product => product.id === id);
+    getProductById: state => id => {
+      return state.products.find(product => product.id === id)
     },
 
     /**
      * Check if products are loaded
      */
-    hasProducts: (state) => state.products.length > 0,
+    hasProducts: state => state.products.length > 0,
 
     /**
      * Check if current product is loaded
      */
-    hasCurrentProduct: (state) => state.currentProduct !== null,
+    hasCurrentProduct: state => state.currentProduct !== null,
   },
 
   actions: {
@@ -57,30 +57,29 @@ export const useProductStore = defineStore('product', {
      * @returns {Promise<void>}
      */
     async fetchProducts(params = {}) {
-      this.loading = true;
-      this.error = null;
+      this.loading = true
+      this.error = null
 
       try {
-        const { get } = useApi();
-        const response = await get('/api/mgr/products', params);
+        const { get } = useApi()
+        const response = await get('/api/mgr/products', params)
 
         if (response.results) {
-          this.products = response.results;
-          this.total = response.total || response.results.length;
+          this.products = response.results
+          this.total = response.total || response.results.length
         } else if (Array.isArray(response)) {
-          this.products = response;
-          this.total = response.length;
+          this.products = response
+          this.total = response.length
         } else {
-          this.products = [];
-          this.total = 0;
+          this.products = []
+          this.total = 0
         }
-
       } catch (error) {
-        this.error = error;
-        console.error('[ProductStore] Failed to fetch products:', error);
-        throw error;
+        this.error = error
+        console.error('[ProductStore] Failed to fetch products:', error)
+        throw error
       } finally {
-        this.loading = false;
+        this.loading = false
       }
     },
 
@@ -91,28 +90,27 @@ export const useProductStore = defineStore('product', {
      * @returns {Promise<void>}
      */
     async fetchProduct(id) {
-      this.loading = true;
-      this.error = null;
+      this.loading = true
+      this.error = null
 
       try {
-        const { get } = useApi();
-        const response = await get(`/api/mgr/products/${id}`);
+        const { get } = useApi()
+        const response = await get(`/api/mgr/products/${id}`)
 
-        this.currentProduct = response;
+        this.currentProduct = response
 
-        const index = this.products.findIndex(p => p.id === id);
+        const index = this.products.findIndex(p => p.id === id)
         if (index !== -1) {
-          this.products[index] = response;
+          this.products[index] = response
         } else {
-          this.products.push(response);
+          this.products.push(response)
         }
-
       } catch (error) {
-        this.error = error;
-        console.error('[ProductStore] Failed to fetch product:', error);
-        throw error;
+        this.error = error
+        console.error('[ProductStore] Failed to fetch product:', error)
+        throw error
       } finally {
-        this.loading = false;
+        this.loading = false
       }
     },
 
@@ -123,26 +121,25 @@ export const useProductStore = defineStore('product', {
      * @returns {Promise<Object>} - Created product
      */
     async createProduct(data) {
-      this.loading = true;
-      this.error = null;
+      this.loading = true
+      this.error = null
 
       try {
-        const { post } = useApi();
-        const response = await post('/api/mgr/products', data);
+        const { post } = useApi()
+        const response = await post('/api/mgr/products', data)
 
         if (response.id) {
-          this.products.unshift(response);
-          this.total++;
+          this.products.unshift(response)
+          this.total++
         }
 
-        return response;
-
+        return response
       } catch (error) {
-        this.error = error;
-        console.error('[ProductStore] Failed to create product:', error);
-        throw error;
+        this.error = error
+        console.error('[ProductStore] Failed to create product:', error)
+        throw error
       } finally {
-        this.loading = false;
+        this.loading = false
       }
     },
 
@@ -154,30 +151,29 @@ export const useProductStore = defineStore('product', {
      * @returns {Promise<Object>} - Updated product
      */
     async updateProduct(id, data) {
-      this.loading = true;
-      this.error = null;
+      this.loading = true
+      this.error = null
 
       try {
-        const { put } = useApi();
-        const response = await put(`/api/mgr/products/${id}`, data);
+        const { put } = useApi()
+        const response = await put(`/api/mgr/products/${id}`, data)
 
-        const index = this.products.findIndex(p => p.id === id);
+        const index = this.products.findIndex(p => p.id === id)
         if (index !== -1) {
-          this.products[index] = response;
+          this.products[index] = response
         }
 
         if (this.currentProduct?.id === id) {
-          this.currentProduct = response;
+          this.currentProduct = response
         }
 
-        return response;
-
+        return response
       } catch (error) {
-        this.error = error;
-        console.error('[ProductStore] Failed to update product:', error);
-        throw error;
+        this.error = error
+        console.error('[ProductStore] Failed to update product:', error)
+        throw error
       } finally {
-        this.loading = false;
+        this.loading = false
       }
     },
 
@@ -188,29 +184,28 @@ export const useProductStore = defineStore('product', {
      * @returns {Promise<void>}
      */
     async deleteProduct(id) {
-      this.loading = true;
-      this.error = null;
+      this.loading = true
+      this.error = null
 
       try {
-        const { delete: del } = useApi();
-        await del(`/api/mgr/products/${id}`);
+        const { delete: del } = useApi()
+        await del(`/api/mgr/products/${id}`)
 
-        const index = this.products.findIndex(p => p.id === id);
+        const index = this.products.findIndex(p => p.id === id)
         if (index !== -1) {
-          this.products.splice(index, 1);
-          this.total--;
+          this.products.splice(index, 1)
+          this.total--
         }
 
         if (this.currentProduct?.id === id) {
-          this.currentProduct = null;
+          this.currentProduct = null
         }
-
       } catch (error) {
-        this.error = error;
-        console.error('[ProductStore] Failed to delete product:', error);
-        throw error;
+        this.error = error
+        console.error('[ProductStore] Failed to delete product:', error)
+        throw error
       } finally {
-        this.loading = false;
+        this.loading = false
       }
     },
 
@@ -218,25 +213,25 @@ export const useProductStore = defineStore('product', {
      * Clear current product
      */
     clearCurrentProduct() {
-      this.currentProduct = null;
+      this.currentProduct = null
     },
 
     /**
      * Clear errors
      */
     clearError() {
-      this.error = null;
+      this.error = null
     },
 
     /**
      * Reset entire state
      */
     $reset() {
-      this.products = [];
-      this.total = 0;
-      this.currentProduct = null;
-      this.loading = false;
-      this.error = null;
+      this.products = []
+      this.total = 0
+      this.currentProduct = null
+      this.loading = false
+      this.error = null
     },
   },
-});
+})
diff --git a/vueManager/src/utils/formStyles.js b/vueManager/src/utils/formStyles.js
new file mode 100644
index 0000000..55a67b1
--- /dev/null
+++ b/vueManager/src/utils/formStyles.js
@@ -0,0 +1,79 @@
+/**
+ * Runtime injection переопределений для контролов PrimeVue (font-size, height и т.п.).
+ *
+ * Вызывать после app.mount(). PrimeVue с @primeuix/themes встраивает тему в runtime
+ * после загрузки бандла, поэтому стили из SCSS (даже с !important) загружаются раньше
+ * и перезаписываются. Runtime injection обеспечивает применение наших правил последними.
+ */
+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)
+}
diff --git a/vueManager/src/utils/modx.js b/vueManager/src/utils/modx.js
index dc3a7ac..e905d3f 100644
--- a/vueManager/src/utils/modx.js
+++ b/vueManager/src/utils/modx.js
@@ -10,7 +10,6 @@
  * @returns {Object|null} - ms3.config object or null
  */
 export function getMs3Config() {
-  // eslint-disable-next-line no-undef
   return typeof ms3 !== 'undefined' ? ms3.config : null
 }
 
@@ -28,18 +27,16 @@ export function formatPrice(price, options = {}) {
     decPoint = '.',
     thousandsSep = ' ',
     currency = ms3Config?.price_format_currency || 'USD',
-    currencyPosition = ms3Config?.price_format_currency_position || 'right'
-  } = options;
+    currencyPosition = ms3Config?.price_format_currency_position || 'right',
+  } = options
 
-  const numPrice = parseFloat(price) || 0;
+  const numPrice = parseFloat(price) || 0
 
-  const parts = numPrice.toFixed(decimals).split('.');
-  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
-  const formatted = parts.join(decPoint);
+  const parts = numPrice.toFixed(decimals).split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep)
+  const formatted = parts.join(decPoint)
 
-  return currencyPosition === 'left'
-    ? `${currency} ${formatted}`
-    : `${formatted} ${currency}`;
+  return currencyPosition === 'left' ? `${currency} ${formatted}` : `${formatted} ${currency}`
 }
 
 /**
@@ -50,22 +47,22 @@ export function formatPrice(price, options = {}) {
  * @returns {string} - Formatted date
  */
 export function formatDate(date, format = 'datetime') {
-  if (!date) return '';
+  if (!date) return ''
 
-  const d = date instanceof Date ? date : new Date(date);
+  const d = date instanceof Date ? date : new Date(date)
 
-  if (isNaN(d.getTime())) return '';
+  if (isNaN(d.getTime())) return ''
 
   const formats = {
     date: 'd.m.Y',
     datetime: 'd.m.Y H:i',
     time: 'H:i',
     full: 'd.m.Y H:i:s',
-  };
+  }
 
-  const formatString = formats[format] || format;
+  const formatString = formats[format] || format
 
-  const pad = (num) => String(num).padStart(2, '0');
+  const pad = num => String(num).padStart(2, '0')
 
   return formatString
     .replace('d', pad(d.getDate()))
@@ -73,7 +70,7 @@ export function formatDate(date, format = 'datetime') {
     .replace('Y', d.getFullYear())
     .replace('H', pad(d.getHours()))
     .replace('i', pad(d.getMinutes()))
-    .replace('s', pad(d.getSeconds()));
+    .replace('s', pad(d.getSeconds()))
 }
 
 /**
@@ -84,13 +81,13 @@ export function formatDate(date, format = 'datetime') {
  * @returns {Array} - Array of values
  */
 export function parseTvValue(value, separator = '||') {
-  if (!value) return [];
-  if (Array.isArray(value)) return value;
+  if (!value) return []
+  if (Array.isArray(value)) return value
 
   return String(value)
     .split(separator)
     .map(v => v.trim())
-    .filter(v => v.length > 0);
+    .filter(v => v.length > 0)
 }
 
 /**
@@ -100,12 +97,12 @@ export function parseTvValue(value, separator = '||') {
  * @returns {Date|null} - Date object or null
  */
 export function timestampToDate(timestamp) {
-  if (!timestamp) return null;
+  if (!timestamp) return null
 
-  const num = Number(timestamp);
-  if (isNaN(num)) return null;
+  const num = Number(timestamp)
+  if (isNaN(num)) return null
 
-  return new Date(num * 1000);
+  return new Date(num * 1000)
 }
 
 /**
@@ -115,9 +112,9 @@ export function timestampToDate(timestamp) {
  * @returns {string} - CSS icon class
  */
 export function getFileIcon(filename) {
-  if (!filename) return 'pi pi-file';
+  if (!filename) return 'pi pi-file'
 
-  const ext = filename.split('.').pop().toLowerCase();
+  const ext = filename.split('.').pop().toLowerCase()
 
   const icons = {
     jpg: 'pi pi-image',
@@ -141,9 +138,9 @@ export function getFileIcon(filename) {
     avi: 'pi pi-video',
     mov: 'pi pi-video',
     wmv: 'pi pi-video',
-  };
+  }
 
-  return icons[ext] || 'pi pi-file';
+  return icons[ext] || 'pi pi-file'
 }
 
 /**
@@ -154,10 +151,10 @@ export function getFileIcon(filename) {
  */
 export function isJsonString(str) {
   try {
-    JSON.parse(str);
-    return true;
+    JSON.parse(str)
+    return true
   } catch {
-    return false;
+    return false
   }
 }
 
@@ -170,9 +167,9 @@ export function isJsonString(str) {
  */
 export function safeJsonParse(str, defaultValue = null) {
   try {
-    return JSON.parse(str);
+    return JSON.parse(str)
   } catch {
-    return defaultValue;
+    return defaultValue
   }
 }
 
@@ -183,17 +180,43 @@ export function safeJsonParse(str, defaultValue = null) {
  * @returns {string} - Alias
  */
 export function generateAlias(str) {
-  if (!str) return '';
+  if (!str) return ''
 
   const translitMap = {
-    'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd',
-    'е': 'e', 'ё': 'yo', 'ж': 'zh', 'з': 'z', 'и': 'i',
-    'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n',
-    'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't',
-    'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'ts', 'ч': 'ch',
-    'ш': 'sh', 'щ': 'sch', 'ъ': '', 'ы': 'y', 'ь': '',
-    'э': 'e', 'ю': 'yu', 'я': 'ya',
-  };
+    а: 'a',
+    б: 'b',
+    в: 'v',
+    г: 'g',
+    д: 'd',
+    е: 'e',
+    ё: 'yo',
+    ж: 'zh',
+    з: 'z',
+    и: 'i',
+    й: 'y',
+    к: 'k',
+    л: 'l',
+    м: 'm',
+    н: 'n',
+    о: 'o',
+    п: 'p',
+    р: 'r',
+    с: 's',
+    т: 't',
+    у: 'u',
+    ф: 'f',
+    х: 'h',
+    ц: 'ts',
+    ч: 'ch',
+    ш: 'sh',
+    щ: 'sch',
+    ъ: '',
+    ы: 'y',
+    ь: '',
+    э: 'e',
+    ю: 'yu',
+    я: 'ya',
+  }
 
   return str
     .toLowerCase()
@@ -201,7 +224,7 @@ export function generateAlias(str) {
     .map(char => translitMap[char] || char)
     .join('')
     .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
+    .replace(/^-+|-+$/g, '')
 }
 
 /**
@@ -212,8 +235,8 @@ export function generateAlias(str) {
  * @returns {string} - Truncated string
  */
 export function truncate(str, maxLength = 50) {
-  if (!str || str.length <= maxLength) return str;
-  return str.substring(0, maxLength) + '...';
+  if (!str || str.length <= maxLength) return str
+  return str.substring(0, maxLength) + '...'
 }
 
 /**
@@ -223,7 +246,7 @@ export function truncate(str, maxLength = 50) {
  * @returns {string} - Escaped string
  */
 export function escapeHtml(str) {
-  if (!str) return '';
+  if (!str) return ''
 
   const map = {
     '&': '&amp;',
@@ -231,9 +254,9 @@ export function escapeHtml(str) {
     '>': '&gt;',
     '"': '&quot;',
     "'": '&#039;',
-  };
+  }
 
-  return String(str).replace(/[&<>"']/g, m => map[m]);
+  return String(str).replace(/[&<>"']/g, m => map[m])
 }
 
 /**
@@ -244,13 +267,13 @@ export function escapeHtml(str) {
  * @returns {Function} - Wrapped function
  */
 export function debounce(func, wait = 300) {
-  let timeout;
+  let timeout
   return function executedFunction(...args) {
     const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
 }
diff --git a/vueManager/src/utils/validation.js b/vueManager/src/utils/validation.js
index cd4c5dd..b7c1e09 100644
--- a/vueManager/src/utils/validation.js
+++ b/vueManager/src/utils/validation.js
@@ -11,11 +11,11 @@
  * @returns {boolean} - Check result
  */
 export function isEmpty(value) {
-  if (value === null || value === undefined) return true;
-  if (typeof value === 'string') return value.trim().length === 0;
-  if (Array.isArray(value)) return value.length === 0;
-  if (typeof value === 'object') return Object.keys(value).length === 0;
-  return false;
+  if (value === null || value === undefined) return true
+  if (typeof value === 'string') return value.trim().length === 0
+  if (Array.isArray(value)) return value.length === 0
+  if (typeof value === 'object') return Object.keys(value).length === 0
+  return false
 }
 
 /**
@@ -25,7 +25,7 @@ export function isEmpty(value) {
  * @returns {boolean|string} - true if valid, error string if not
  */
 export function required(value) {
-  return !isEmpty(value) || 'This field is required';
+  return !isEmpty(value) || 'This field is required'
 }
 
 /**
@@ -35,10 +35,10 @@ export function required(value) {
  * @returns {Function} - Validation function
  */
 export function minLength(min) {
-  return (value) => {
-    if (isEmpty(value)) return true;
-    return value.length >= min || `Minimum length ${min} characters`;
-  };
+  return value => {
+    if (isEmpty(value)) return true
+    return value.length >= min || `Minimum length ${min} characters`
+  }
 }
 
 /**
@@ -48,10 +48,10 @@ export function minLength(min) {
  * @returns {Function} - Validation function
  */
 export function maxLength(max) {
-  return (value) => {
-    if (isEmpty(value)) return true;
-    return value.length <= max || `Maximum length ${max} characters`;
-  };
+  return value => {
+    if (isEmpty(value)) return true
+    return value.length <= max || `Maximum length ${max} characters`
+  }
 }
 
 /**
@@ -61,10 +61,10 @@ export function maxLength(max) {
  * @returns {boolean|string} - Validation result
  */
 export function email(value) {
-  if (isEmpty(value)) return true;
+  if (isEmpty(value)) return true
 
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  return emailRegex.test(value) || 'Invalid email address';
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(value) || 'Invalid email address'
 }
 
 /**
@@ -74,8 +74,8 @@ export function email(value) {
  * @returns {boolean|string} - Validation result
  */
 export function numeric(value) {
-  if (isEmpty(value)) return true;
-  return !isNaN(Number(value)) || 'Value must be a number';
+  if (isEmpty(value)) return true
+  return !isNaN(Number(value)) || 'Value must be a number'
 }
 
 /**
@@ -85,8 +85,8 @@ export function numeric(value) {
  * @returns {boolean|string} - Validation result
  */
 export function integer(value) {
-  if (isEmpty(value)) return true;
-  return Number.isInteger(Number(value)) || 'Value must be an integer';
+  if (isEmpty(value)) return true
+  return Number.isInteger(Number(value)) || 'Value must be an integer'
 }
 
 /**
@@ -96,10 +96,10 @@ export function integer(value) {
  * @returns {Function} - Validation function
  */
 export function minValue(min) {
-  return (value) => {
-    if (isEmpty(value)) return true;
-    return Number(value) >= min || `Minimum value ${min}`;
-  };
+  return value => {
+    if (isEmpty(value)) return true
+    return Number(value) >= min || `Minimum value ${min}`
+  }
 }
 
 /**
@@ -109,10 +109,10 @@ export function minValue(min) {
  * @returns {Function} - Validation function
  */
 export function maxValue(max) {
-  return (value) => {
-    if (isEmpty(value)) return true;
-    return Number(value) <= max || `Maximum value ${max}`;
-  };
+  return value => {
+    if (isEmpty(value)) return true
+    return Number(value) <= max || `Maximum value ${max}`
+  }
 }
 
 /**
@@ -122,8 +122,8 @@ export function maxValue(max) {
  * @returns {boolean|string} - Validation result
  */
 export function positive(value) {
-  if (isEmpty(value)) return true;
-  return Number(value) > 0 || 'Value must be positive';
+  if (isEmpty(value)) return true
+  return Number(value) > 0 || 'Value must be positive'
 }
 
 /**
@@ -133,13 +133,13 @@ export function positive(value) {
  * @returns {boolean|string} - Validation result
  */
 export function url(value) {
-  if (isEmpty(value)) return true;
+  if (isEmpty(value)) return true
 
   try {
-    new URL(value);
-    return true;
+    new URL(value)
+    return true
   } catch {
-    return 'Invalid URL';
+    return 'Invalid URL'
   }
 }
 
@@ -150,10 +150,10 @@ export function url(value) {
  * @returns {boolean|string} - Validation result
  */
 export function alias(value) {
-  if (isEmpty(value)) return true;
+  if (isEmpty(value)) return true
 
-  const aliasRegex = /^[a-z0-9-]+$/;
-  return aliasRegex.test(value) || 'Alias can only contain latin letters, digits and hyphen';
+  const aliasRegex = /^[a-z0-9-]+$/
+  return aliasRegex.test(value) || 'Alias can only contain latin letters, digits and hyphen'
 }
 
 /**
@@ -163,10 +163,12 @@ export function alias(value) {
  * @returns {boolean|string} - Validation result
  */
 export function article(value) {
-  if (isEmpty(value)) return true;
+  if (isEmpty(value)) return true
 
-  const articleRegex = /^[a-zA-Z0-9_-]+$/;
-  return articleRegex.test(value) || 'Article can only contain letters, digits, hyphen and underscore';
+  const articleRegex = /^[a-zA-Z0-9_-]+$/
+  return (
+    articleRegex.test(value) || 'Article can only contain letters, digits, hyphen and underscore'
+  )
 }
 
 /**
@@ -177,17 +179,17 @@ export function article(value) {
  * @returns {Function} - Validation function
  */
 export function unique(checkFunction, errorMessage = 'Value already in use') {
-  return async (value) => {
-    if (isEmpty(value)) return true;
+  return async value => {
+    if (isEmpty(value)) return true
 
     try {
-      const isUnique = await checkFunction(value);
-      return isUnique || errorMessage;
+      const isUnique = await checkFunction(value)
+      return isUnique || errorMessage
     } catch (error) {
-      console.error('[Validation] Unique check failed:', error);
-      return 'Uniqueness check error';
+      console.error('[Validation] Unique check failed:', error)
+      return 'Uniqueness check error'
     }
-  };
+  }
 }
 
 /**
@@ -198,10 +200,10 @@ export function unique(checkFunction, errorMessage = 'Value already in use') {
  * @returns {Function} - Validation function
  */
 export function matches(regex, errorMessage = 'Invalid format') {
-  return (value) => {
-    if (isEmpty(value)) return true;
-    return regex.test(value) || errorMessage;
-  };
+  return value => {
+    if (isEmpty(value)) return true
+    return regex.test(value) || errorMessage
+  }
 }
 
 /**
@@ -212,9 +214,9 @@ export function matches(regex, errorMessage = 'Invalid format') {
  * @returns {Function} - Validation function
  */
 export function sameAs(otherValue, fieldName = 'other field') {
-  return (value) => {
-    return value === otherValue || `Value must match ${fieldName}`;
-  };
+  return value => {
+    return value === otherValue || `Value must match ${fieldName}`
+  }
 }
 
 /**
@@ -224,15 +226,15 @@ export function sameAs(otherValue, fieldName = 'other field') {
  * @returns {Function} - Validation function
  */
 export function validate(...rules) {
-  return async (value) => {
+  return async value => {
     for (const rule of rules) {
-      const result = await rule(value);
+      const result = await rule(value)
       if (result !== true) {
-        return result;
+        return result
       }
     }
-    return true;
-  };
+    return true
+  }
 }
 
 /**
@@ -242,13 +244,13 @@ export function validate(...rules) {
  * @returns {Object} - Rules for PrimeVue
  */
 export function createValidationRules(rulesConfig) {
-  const rules = {};
+  const rules = {}
 
   for (const [field, fieldRules] of Object.entries(rulesConfig)) {
-    rules[field] = validate(...fieldRules);
+    rules[field] = validate(...fieldRules)
   }
 
-  return rules;
+  return rules
 }
 export default {
   isEmpty,
@@ -269,4 +271,4 @@ export default {
   sameAs,
   validate,
   createValidationRules,
-};
+}
diff --git a/vueManager/vite.config.js b/vueManager/vite.config.js
index a409b80..af4d160 100644
--- a/vueManager/vite.config.js
+++ b/vueManager/vite.config.js
@@ -1,9 +1,9 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
 import prefixSelector from 'postcss-prefix-selector'
+import { defineConfig } from 'vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 const output = {
   dir: '../',