diff --git a/redisinsight/ui/src/packages/vite.config.mjs b/redisinsight/ui/src/packages/vite.config.mjs
index 6374f7455b..4463176f5e 100644
--- a/redisinsight/ui/src/packages/vite.config.mjs
+++ b/redisinsight/ui/src/packages/vite.config.mjs
@@ -4,8 +4,8 @@ import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { resolve } from 'path';
-import { fileURLToPath } from 'url';
+import path, { resolve } from 'path'
+import { fileURLToPath } from 'url'
 
 const riPlugins = [
   { name: 'redisearch', entry: 'src/main.tsx' },
@@ -83,6 +83,32 @@ export default defineConfig({
       this: 'window',
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // add @layer app for css ordering. Styles without layer have the highest priority
+        // https://github.com/vitejs/vite/issues/3924
+        additionalData: (source, filename) => {
+          if (path.extname(filename) === '.scss') {
+            const skipFiles = [
+              '/main.scss',
+              '/App.scss',
+              '/packages/clients-list/src/styles/styles.scss',
+              '/packages/redisearch/src/styles/styles.scss'
+            ];
+            if (skipFiles.every((file) => !filename.endsWith(file))) {
+              return `
+                @use "uiSrc/styles/mixins/_eui.scss";
+                @use "uiSrc/styles/mixins/_global.scss";
+                @layer app { ${source} }
+              `;
+            }
+          }
+          return source;
+        },
+      },
+    },
+  },
   define: {
     global: 'globalThis',
     'process.env': {},