diff --git a/webapp/packages/ag-grid-plugin/src/AgGridTable/AgGridTable.tsx b/webapp/packages/ag-grid-plugin/src/AgGridTable/AgGridTable.tsx
index fe87a6cc93..f96523e298 100644
--- a/webapp/packages/ag-grid-plugin/src/AgGridTable/AgGridTable.tsx
+++ b/webapp/packages/ag-grid-plugin/src/AgGridTable/AgGridTable.tsx
@@ -31,7 +31,7 @@ export type AgGridTableProps = PropsWithChildren<
   }>
 
 async function loader() {
-  // const styles = await import('../styles/base.scss');
+  const styles = await import('../styles/base.scss');
   const { AgGridReact } = await import('ag-grid-react');
   const { AllCommunityModules } = await import('@ag-grid-community/all-modules');
 
@@ -60,7 +60,7 @@ export const AgGridTable = observer(function AgGridTable({
       {({ AgGridReact, AllCommunityModules }) => (
         <Observer>
           {() => styled(styles)(
-            <ag-grid-theme as="div" className={className}>
+            <ag-grid-theme as="div" className={`cb-ag-grid-theme ${className}`}>
               <AgGridReact
                 key={controller.refreshId}
                 columnDefs={controller.columns}
diff --git a/webapp/packages/ag-grid-plugin/src/styles/base.scss b/webapp/packages/ag-grid-plugin/src/styles/base.scss
index 6b72360d4a..d748671bf4 100644
--- a/webapp/packages/ag-grid-plugin/src/styles/base.scss
+++ b/webapp/packages/ag-grid-plugin/src/styles/base.scss
@@ -10,11 +10,9 @@
 @import "ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-mixin.scss";
 @import "ag-grid-community/src/styles/webfont/agGridAlpineFont.scss";
 
-:local(.__ag-grid-theme) {
-  composes: ag-theme-balham from global;
-}
 
-.ag-theme-balham {
+.cb-ag-grid-theme {
+
   @include ag-theme-balham();
 
   font-family: inherit;
diff --git a/webapp/packages/ag-grid-plugin/src/styles/styles.ts b/webapp/packages/ag-grid-plugin/src/styles/styles.ts
index e59098a851..3f06a46e7c 100644
--- a/webapp/packages/ag-grid-plugin/src/styles/styles.ts
+++ b/webapp/packages/ag-grid-plugin/src/styles/styles.ts
@@ -9,17 +9,16 @@
 import { ThemeSelector } from '@dbeaver/core/theming';
 
 export const agGridStyles: ThemeSelector = async (theme) => {
-  const baseStyles = await import('./base.scss');
   let styles: any;
 
   switch (theme) {
     case 'dark':
-      styles = await import('./themes/dark.scss');
+      styles = await import('./themes/dark.module.scss');
       break;
     default:
-      styles = await import('./themes/light.scss');
+      styles = await import('./themes/light.module.scss');
       break;
   }
 
-  return [baseStyles.default, styles.default];
+  return [styles.default];
 };
diff --git a/webapp/packages/ag-grid-plugin/src/styles/themes/_base-ag-grid.scss b/webapp/packages/ag-grid-plugin/src/styles/themes/_base-ag-grid.scss
index 2b3341fa8a..1b5a6dac12 100644
--- a/webapp/packages/ag-grid-plugin/src/styles/themes/_base-ag-grid.scss
+++ b/webapp/packages/ag-grid-plugin/src/styles/themes/_base-ag-grid.scss
@@ -9,54 +9,58 @@
 @import "@dbeaver/core/assets/styles/branding";
 
 @mixin base-ag-grid() {
-  .ag-theme-balham {
-    .ag-header {
-      border-bottom: 1px solid;
-      @include mdc-theme-prop(color, on-surface, false);
-      @include mdc-theme-prop(border-color, background, false);
-    }
-    .ag-header-row {
-      @include mdc-theme-prop(color, on-surface, false);
-    }
+  :global {
+    .cb-ag-grid-theme {
+      .ag-header {
+        border-bottom: 1px solid;
+        @include mdc-theme-prop(color, on-surface, false);
+        @include mdc-theme-prop(border-color, background, false);
+      }
 
-    .ag-row {
-      border-top: none;
-      border-bottom: solid 1px;
-      @include mdc-theme-prop(color, on-surface, false);
-      @include mdc-theme-prop(border-color, background, false);
-    }
+      .ag-header-row {
+        @include mdc-theme-prop(color, on-surface, false);
+      }
 
-    .ag-row-selected {
-      border-color: #03a9f4;
-      background-color: transparent;
-      @include stripes-background($mdc-theme-secondary);
-    }
+      .ag-row, .ag-row:not(.ag-row-first) {
+        border-top: none;
+        border-bottom: solid 1px;
+        @include mdc-theme-prop(color, on-surface, false);
+        @include mdc-theme-prop(border-color, background, false);
+      }
 
-    .ag-cell-range-selected-1 {
-      background-color: rgba(0, 145, 234, 0.3);
-    }
+      .ag-row-selected {
+        border-color: #03a9f4;
+        background-color: transparent;
+        @include stripes-background($mdc-theme-secondary);
+      }
 
-    .ag-row-hover {
-      background-color: transparent;
-      @include stripes-background($mdc-theme-secondary);
-      border-color: $color-positive;
-    }
+      .ag-cell-range-selected-1 {
+        background-color: rgba(0, 145, 234, 0.3);
+      }
 
-    .ag-cell.ag-cell-inline-editing {
-      border: 0 !important;
-      border-radius: 0;
-      @include mdc-theme-prop(background-color, surface, false);
-    }
+      .ag-row.ag-row-hover {
+        background-color: transparent;
+        @include stripes-background($mdc-theme-secondary);
+        border-color: $color-positive;
+      }
 
-    .ag-header-cell::after,
-    .ag-header-group-cell::after {
-      height: 100%;
-      top: 0;
-      @include mdc-theme-prop(background-color, background, false);
-    }
-    .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
-    .ag-pinned-left-header {
-      @include mdc-theme-prop(border-right-color, background, false);
+      .ag-cell.ag-cell-inline-editing {
+        border: 0 !important;
+        border-radius: 0;
+        @include mdc-theme-prop(background-color, surface, false);
+      }
+
+      .ag-header-cell::after,
+      .ag-header-group-cell::after {
+        height: 100%;
+        top: 0;
+        @include mdc-theme-prop(background-color, background, false);
+      }
+
+      .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
+      .ag-pinned-left-header {
+        @include mdc-theme-prop(border-right-color, background, false);
+      }
     }
   }
 }
diff --git a/webapp/packages/ag-grid-plugin/src/styles/themes/dark.scss b/webapp/packages/ag-grid-plugin/src/styles/themes/dark.module.scss
similarity index 93%
rename from webapp/packages/ag-grid-plugin/src/styles/themes/dark.scss
rename to webapp/packages/ag-grid-plugin/src/styles/themes/dark.module.scss
index 358356a6e0..92f9e2e018 100644
--- a/webapp/packages/ag-grid-plugin/src/styles/themes/dark.scss
+++ b/webapp/packages/ag-grid-plugin/src/styles/themes/dark.module.scss
@@ -9,6 +9,6 @@
 @import "@dbeaver/core/assets/styles/theme-dark";
 @import "base-ag-grid";
 
-.theme-dark {
+:global .theme-dark {
   @include base-ag-grid;
 }
diff --git a/webapp/packages/ag-grid-plugin/src/styles/themes/light.scss b/webapp/packages/ag-grid-plugin/src/styles/themes/light.module.scss
similarity index 92%
rename from webapp/packages/ag-grid-plugin/src/styles/themes/light.scss
rename to webapp/packages/ag-grid-plugin/src/styles/themes/light.module.scss
index 5d0c04271b..1f4f0f1b61 100644
--- a/webapp/packages/ag-grid-plugin/src/styles/themes/light.scss
+++ b/webapp/packages/ag-grid-plugin/src/styles/themes/light.module.scss
@@ -9,6 +9,6 @@
 @import '@dbeaver/core/assets/styles/theme-light';
 @import "base-ag-grid";
 
-.theme-light {
+:global .theme-light {
   @include base-ag-grid;
-}
\ No newline at end of file
+}