diff --git a/webapp/packages/core-app/src/AppScreen/Main.m.css b/webapp/packages/core-app/src/AppScreen/Main.m.css
index c580381374..aa0db086a0 100644
--- a/webapp/packages/core-app/src/AppScreen/Main.m.css
+++ b/webapp/packages/core-app/src/AppScreen/Main.m.css
@@ -1,12 +1,26 @@
 .space {
   composes: theme-typography--body2 theme-background-primary from global;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
 }
 .pane {
   composes: theme-background-surface theme-text-on-surface from global;
   display: flex;
   position: relative;
-  overflow: hidden;
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
 }
 .loader {
   height: 100%;
 }
+.split {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+}
+
diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx
index 9ed6c2f442..b755e8aaa7 100644
--- a/webapp/packages/core-app/src/AppScreen/Main.tsx
+++ b/webapp/packages/core-app/src/AppScreen/Main.tsx
@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { getComputed, Loader, Pane, ResizerControls, s, Split, SplitStyles, useS, useSplitUserState } from '@cloudbeaver/core-blocks';
+import { getComputed, Loader, Pane, ResizerControls, s, Split, useS, useSplitUserState } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { LeftBarPanelService, SideBarPanel, SideBarPanelService } from '@cloudbeaver/core-ui';
 
@@ -15,7 +15,7 @@ import style from './Main.m.css';
 import { RightArea } from './RightArea';
 
 export const Main = observer(function Main() {
-  const styles = useS(SplitStyles, style);
+  const styles = useS(style);
   const sideBarPanelService = useService(SideBarPanelService);
   const leftBarPanelService = useService(LeftBarPanelService);
 
@@ -40,7 +40,7 @@ export const Main = observer(function Main() {
               <SideBarPanel container={leftBarPanelService.tabsContainer} />
             </Loader>
           </Pane>
-          <ResizerControls className={s(styles, { resizerControls: true })} />
+          <ResizerControls />
           <Pane className={s(styles, { pane: true })}>
             <Split
               className={s(styles, { split: true })}
@@ -52,7 +52,7 @@ export const Main = observer(function Main() {
               <Pane className={s(styles, { pane: true })}>
                 <RightArea />
               </Pane>
-              <ResizerControls className={s(styles, { resizerControls: true })} />
+              <ResizerControls />
               <Pane basis="250px" main className={s(styles, { pane: true })}>
                 <Loader suspense className={s(styles, { loader: true })}>
                   <SideBarPanel container={sideBarPanelService.tabsContainer} />
diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.m.css b/webapp/packages/core-app/src/AppScreen/RightArea.m.css
index 4ee4ea3312..4e6be92991 100644
--- a/webapp/packages/core-app/src/AppScreen/RightArea.m.css
+++ b/webapp/packages/core-app/src/AppScreen/RightArea.m.css
@@ -9,3 +9,23 @@
 .slideBox {
   flex: 1;
 }
+.space {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+}
+.split {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+}
+.pane {
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+}
diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.tsx b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
index c47fa2e19d..0acd8922f3 100644
--- a/webapp/packages/core-app/src/AppScreen/RightArea.tsx
+++ b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
@@ -17,8 +17,6 @@ import {
   SlideElement,
   SlideOverlay,
   Split,
-  SplitHorizontalStyles,
-  SplitStyles,
   useS,
   useSplitUserState,
 } from '@cloudbeaver/core-blocks';
@@ -34,7 +32,7 @@ interface Props {
 }
 
 export const RightArea = observer<Props>(function RightArea({ className }) {
-  const styles = useS(SplitStyles, SplitHorizontalStyles, SlideBoxStyles, style);
+  const styles = useS(SlideBoxStyles, style);
   const toolsPanelService = useService(ToolsPanelService);
   const optionsPanelService = useService(OptionsPanelService);
   const splitState = useSplitUserState('right-area');
@@ -66,7 +64,7 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
               <NavigationTabsBar />
             </Loader>
           </Pane>
-          <ResizerControls className={s(styles, { resizerControls: true })} />
+          <ResizerControls />
           <Pane className={s(styles, { pane: true })} basis="30%" main>
             <Loader className={s(styles, { loader: true })} suspense>
               <ToolsPanel container={toolsPanelService.tabsContainer} />
diff --git a/webapp/packages/core-blocks/src/Split/ResizeControls.m.css b/webapp/packages/core-blocks/src/Split/ResizeControls.m.css
new file mode 100644
index 0000000000..57ce16b931
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Split/ResizeControls.m.css
@@ -0,0 +1,42 @@
+.resizerControls {
+  composes: theme-background-background theme-text-on-secondary from global;
+  position: relative;
+  flex: 0 1 auto;
+  cursor: ew-resize;
+  user-select: none;
+  z-index: 1;
+  transition: background-color 0.3s ease-in-out;
+
+  &:before {
+    content: ' ';
+    position: absolute;
+    width: 4px;
+    height: 100%;
+    top: 0;
+    left: -1px;
+    cursor: ew-resize;
+    box-sizing: border-box;
+  }
+
+  &.vertical {
+    width: 2px;
+  }
+
+  &.horizontal {
+    cursor: ns-resize;
+    height: 2px;
+    width: initial;
+
+    &:before {
+      height: 4px;
+      width: 100%;
+      top: -1px;
+      left: 0;
+      cursor: ns-resize;
+    }
+  }
+}
+
+div.resizerControls:hover {
+  background-color: var(--theme-primary);
+}
diff --git a/webapp/packages/core-blocks/src/Split/ResizerControls.tsx b/webapp/packages/core-blocks/src/Split/ResizerControls.tsx
index d87a27bb34..e3917994e4 100644
--- a/webapp/packages/core-blocks/src/Split/ResizerControls.tsx
+++ b/webapp/packages/core-blocks/src/Split/ResizerControls.tsx
@@ -6,17 +6,28 @@
  * you may not use this file except in compliance with the License.
  */
 import { Resizer } from 'go-split';
+import { observer } from 'mobx-react-lite';
 
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './ResizeControls.m.css';
 import { SplitControls } from './SplitControls';
+import { useSplit } from './useSplit';
 
 interface ResizerControlsProps {
   className?: string;
 }
 
-export function ResizerControls({ className }: ResizerControlsProps) {
+export const ResizerControls = observer<ResizerControlsProps>(function ResizerControls({ className }: ResizerControlsProps) {
+  const styles = useS(style);
+  const split = useSplit();
+
+  const vertical = split.state.split === 'vertical';
+  const horizontal = split.state.split === 'horizontal';
+
   return (
-    <Resizer className={className}>
+    <Resizer className={s(styles, { resizerControls: true, vertical, horizontal }, className)}>
       <SplitControls />
     </Resizer>
   );
-}
+});
diff --git a/webapp/packages/core-blocks/src/Split/Split.m.css b/webapp/packages/core-blocks/src/Split/Split.m.css
deleted file mode 100644
index 6530d507b7..0000000000
--- a/webapp/packages/core-blocks/src/Split/Split.m.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.space {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    overflow: hidden;
-}
-.split {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    overflow: hidden;
-    z-index: 0;
-}
-.pane {
-    flex: 1 1 0%;
-    overflow: auto;
-    z-index: 0;
-}
-
-.resizerControls {
-    composes: theme-background-background theme-text-on-secondary from global;
-    position: relative;
-    flex: 0 1 auto;
-    width: 2px;
-    cursor: ew-resize;
-    user-select: none;
-    z-index: 1;
-    transition: background-color 0.3s ease-in-out;
-
-    &:hover {
-        background-color: var(--theme-primary);
-    }
-}
-
-.resizerControls:before {
-    content: ' ';
-    position: absolute;
-    width: 4px;
-    height: 100%;
-    top: 0;
-    left: -1px;
-    cursor: ew-resize;
-    box-sizing: border-box;
-}
diff --git a/webapp/packages/core-blocks/src/Split/SplitHorizontal.m.css b/webapp/packages/core-blocks/src/Split/SplitHorizontal.m.css
deleted file mode 100644
index 7d5eba167b..0000000000
--- a/webapp/packages/core-blocks/src/Split/SplitHorizontal.m.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.space {
-    height: 100%;
-}
-.split {
-    flex-direction: column;
-    height: 100%;
-}
-
-.resizerControls {
-    position: relative;
-    cursor: ns-resize;
-    height: 2px;
-    width: initial;
-}
-
-.resizerControls:before {
-    height: 4px;
-    width: 100%;
-    top: -1px;
-    left: 0;
-    cursor: ns-resize;
-}
diff --git a/webapp/packages/core-blocks/src/Split/styles.ts b/webapp/packages/core-blocks/src/Split/styles.ts
index 27276d2b4d..fc9bf92b22 100644
--- a/webapp/packages/core-blocks/src/Split/styles.ts
+++ b/webapp/packages/core-blocks/src/Split/styles.ts
@@ -53,28 +53,3 @@ export const splitStyles = css`
     box-sizing: border-box;
   }
 `;
-
-export const splitHorizontalStyles = css`
-  space {
-    height: 100%;
-  }
-  Split {
-    flex-direction: column;
-    height: 100%;
-  }
-
-  ResizerControls {
-    position: relative;
-    cursor: ns-resize;
-    height: 2px;
-    width: initial;
-  }
-
-  ResizerControls:before {
-    height: 4px;
-    width: 100%;
-    top: -1px;
-    left: 0;
-    cursor: ns-resize;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index ce6a9734c1..9afc20209b 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -72,8 +72,6 @@ export * from './Split/ResizerControls';
 export * from './Split/Split';
 export * from './Split/useSplit';
 export * from './Split/useSplitUserState';
-export { default as SplitStyles } from './Split/Split.m.css';
-export { default as SplitHorizontalStyles } from './Split/SplitHorizontal.m.css';
 
 export * from './Table/EventTableItemExpandFlag';
 export * from './Table/EventTableItemSelectionFlag';
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.m.css b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.m.css
new file mode 100644
index 0000000000..4ece1ca91c
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.m.css
@@ -0,0 +1,67 @@
+.split {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+}
+.pane {
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+}
+
+.paneContent {
+  composes: theme-background-surface theme-text-on-surface from global;
+
+  &.grid {
+    border-radius: var(--theme-group-element-radius);
+  }
+}
+.tableViewer {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tableContent {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+.tableData {
+  gap: 8px;
+}
+.tableData,
+.pane,
+.paneContent {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.split:not(.disabled) {
+  gap: 8px;
+}
+.pane {
+  &:first-child {
+    position: relative;
+  }
+}
+.tablePresentationBar {
+  margin-top: 36px;
+  &:first-child {
+    margin-right: 4px;
+  }
+  &:last-child {
+    margin-left: 4px;
+  }
+}
+.loader {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
index d16c21b5fd..c17b614645 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx
@@ -8,18 +8,18 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useEffect } from 'react';
-import styled, { css, use } from 'reshadow';
 
 import {
   getComputed,
   Loader,
   Pane,
   ResizerControls,
+  s,
   Split,
-  splitStyles,
   TextPlaceholder,
   useObjectRef,
   useObservableRef,
+  useS,
   useSplitUserState,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -35,65 +35,9 @@ import { TableGrid } from './TableGrid';
 import { TableHeader } from './TableHeader/TableHeader';
 import { TablePresentationBar } from './TablePresentationBar/TablePresentationBar';
 import { TableToolsPanel } from './TableToolsPanel';
+import style from './TableViewer.m.css';
 import { TableViewerStorageService } from './TableViewerStorageService';
 
-const viewerStyles = css`
-  pane-content {
-    composes: theme-background-surface theme-text-on-surface from global;
-
-    &[|grid] {
-      border-radius: var(--theme-group-element-radius);
-    }
-  }
-  table-viewer {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  table-content {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-  }
-  table-data {
-    gap: 8px;
-  }
-  table-data,
-  Pane,
-  pane-content {
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  Split:not([disable]) {
-    gap: 8px;
-  }
-  Pane {
-    &:first-child {
-      position: relative;
-    }
-  }
-  TablePresentationBar {
-    margin-top: 36px;
-    &:first-child {
-      margin-right: 4px;
-    }
-    &:last-child {
-      margin-left: 4px;
-    }
-  }
-  Loader {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
 interface Props {
   tableId: string;
   resultIndex: number | undefined;
@@ -121,6 +65,7 @@ export const TableViewer = observer<Props, HTMLDivElement>(
     },
     ref,
   ) {
+    const styles = useS(style);
     const dataPresentationService = useService(DataPresentationService);
     const tableViewerStorageService = useService(TableViewerStorageService);
     const dataModel = tableViewerStorageService.get(tableId);
@@ -254,13 +199,11 @@ export const TableViewer = observer<Props, HTMLDivElement>(
       resultExist &&
       !simple;
 
-    return styled(
-      viewerStyles,
-      splitStyles,
-    )(
-      <table-viewer ref={ref} className={className}>
-        <table-content>
+    return (
+      <div ref={ref} className={s(styles, { tableViewer: true }, className)}>
+        <div className={s(styles, { tableContent: true })}>
           <TablePresentationBar
+            className={s(styles, { tablePresentationBar: true })}
             type={DataPresentationType.main}
             presentationId={presentation.id}
             dataFormat={dataFormat}
@@ -269,12 +212,19 @@ export const TableViewer = observer<Props, HTMLDivElement>(
             resultIndex={resultIndex}
             onPresentationChange={dataTableActions.setPresentation}
           />
-          <table-data>
+          <div className={s(styles, { tableData: true })}>
             <TableHeader model={dataModel} resultIndex={resultIndex} simple={simple} />
-            <Split {...splitState} sticky={30} mode={valuePanelDisplayed ? splitState.mode : 'minimize'} disable={!valuePanelDisplayed} keepRatio>
-              <Pane>
-                <pane-content {...use({ grid: true })}>
-                  <Loader suspense>
+            <Split
+              className={s(styles, { split: true, disabled: !valuePanelDisplayed })}
+              {...splitState}
+              sticky={30}
+              mode={valuePanelDisplayed ? splitState.mode : 'minimize'}
+              disable={!valuePanelDisplayed}
+              keepRatio
+            >
+              <Pane className={s(styles, { pane: true })}>
+                <div className={s(styles, { paneContent: true, grid: true })}>
+                  <Loader className={s(styles, { loader: true })} suspense>
                     <TableGrid
                       model={dataModel}
                       actions={dataTableActions}
@@ -291,12 +241,12 @@ export const TableViewer = observer<Props, HTMLDivElement>(
                     overlay={overlay}
                     onCancel={() => dataModel.source.cancel()}
                   />
-                </pane-content>
+                </div>
               </Pane>
               <ResizerControls />
-              <Pane basis="30%" main>
-                <Loader suspense>
-                  <pane-content>
+              <Pane className={s(styles, { pane: true })} basis="30%" main>
+                <Loader className={s(styles, { loader: true })} suspense>
+                  <div className={s(styles, { paneContent: true })}>
                     {resultExist && (
                       <TableToolsPanel
                         model={dataModel}
@@ -307,11 +257,11 @@ export const TableViewer = observer<Props, HTMLDivElement>(
                         simple={simple}
                       />
                     )}
-                  </pane-content>
+                  </div>
                 </Loader>
               </Pane>
             </Split>
-          </table-data>
+          </div>
           {!simple && (
             <TablePresentationBar
               type={DataPresentationType.toolsPanel}
@@ -324,9 +274,9 @@ export const TableViewer = observer<Props, HTMLDivElement>(
               onClose={dataTableActions.closeValuePresentation}
             />
           )}
-        </table-content>
+        </div>
         <TableFooter model={dataModel} resultIndex={resultIndex} simple={simple} context={context} />
-      </table-viewer>,
+      </div>
     );
   }),
 );
diff --git a/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.m.css b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.m.css
new file mode 100644
index 0000000000..a2f8ff1e22
--- /dev/null
+++ b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.m.css
@@ -0,0 +1,19 @@
+.split {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+}
+.pane {
+  composes: theme-background-surface theme-text-on-surface from global;
+}
+.logViewWrapper,
+.pane {
+  z-index: 0;
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
diff --git a/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.tsx b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.tsx
index 467a7cdca7..ac32352738 100644
--- a/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.tsx
+++ b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.tsx
@@ -7,30 +7,16 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Pane, ResizerControls, Split, splitStyles, TextPlaceholder, useSplitUserState, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Pane, ResizerControls, s, Split, TextPlaceholder, useS, useSplitUserState, useTranslate } from '@cloudbeaver/core-blocks';
 
+import style from './LogViewer.m.css';
 import { LogViewerInfoPanel } from './LogViewerInfoPanel';
 import { LogViewerTable } from './LogViewerTable';
 import { useLogViewer } from './useLogViewer';
 
-const styles = css`
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-  }
-  log-view-wrapper,
-  Pane {
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    overflow: hidden;
-  }
-`;
-
 export const LogViewer = observer(function LogViewer() {
-  const style = useStyles(styles, splitStyles);
+  const styles = useS(style);
   const translate = useTranslate();
   const logViewerState = useLogViewer();
   const splitState = useSplitUserState('log-viewer');
@@ -47,10 +33,16 @@ export const LogViewer = observer(function LogViewer() {
     return <TextPlaceholder>{translate('plugin_log_viewer_placeholder')}</TextPlaceholder>;
   }
 
-  return styled(style)(
-    <log-view-wrapper>
-      <Split {...splitState} mode={logViewerState.selectedItem ? splitState.mode : 'minimize'} disable={!logViewerState.selectedItem} keepRatio>
-        <Pane>
+  return (
+    <div className={s(styles, { logViewWrapper: true })}>
+      <Split
+        className={s(styles, { split: true })}
+        {...splitState}
+        mode={logViewerState.selectedItem ? splitState.mode : 'minimize'}
+        disable={!logViewerState.selectedItem}
+        keepRatio
+      >
+        <Pane className={s(styles, { pane: true })}>
           <LogViewerTable
             items={logViewerState.logItems}
             selectedItem={logViewerState.selectedItem}
@@ -59,10 +51,10 @@ export const LogViewer = observer(function LogViewer() {
           />
         </Pane>
         <ResizerControls />
-        <Pane basis="40%" main>
+        <Pane className={s(styles, { pane: true })} basis="40%" main>
           {logViewerState.selectedItem && <LogViewerInfoPanel selectedItem={logViewerState.selectedItem} onClose={closeInfoPanel} />}
         </Pane>
       </Split>
-    </log-view-wrapper>,
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor.m.css b/webapp/packages/plugin-sql-editor/src/SqlEditor.m.css
new file mode 100644
index 0000000000..ed409064ad
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor.m.css
@@ -0,0 +1,25 @@
+.split {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+  flex-direction: column;
+  height: 100%;
+}
+.captureView {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+  position: relative;
+}
+.pane {
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+  composes: theme-typography--body2 from global;
+  display: flex;
+  position: relative;
+}
+.pane:first-child {
+  flex-direction: column;
+}
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor.tsx b/webapp/packages/plugin-sql-editor/src/SqlEditor.tsx
index 4d00012187..7cf4edd786 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlEditor.tsx
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor.tsx
@@ -6,60 +6,42 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Loader, Pane, ResizerControls, Split, splitHorizontalStyles, splitStyles, useSplitUserState, useStyles } from '@cloudbeaver/core-blocks';
+import { Loader, Pane, ResizerControls, s, Split, useS, useSplitUserState, useStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { CaptureView } from '@cloudbeaver/core-view';
 
 import type { ISqlEditorTabState } from './ISqlEditorTabState';
 import { SqlDataSourceService } from './SqlDataSource/SqlDataSourceService';
+import style from './SqlEditor.m.css';
 import { SqlEditorLoader } from './SqlEditor/SqlEditorLoader';
 import { SqlEditorOverlay } from './SqlEditorOverlay';
 import { SqlEditorStatusBar } from './SqlEditorStatusBar';
 import { SqlEditorView } from './SqlEditorView';
 import { SqlResultTabs } from './SqlResultTabs/SqlResultTabs';
 import { useDataSource } from './useDataSource';
-
-const viewerStyles = css`
-  CaptureView {
-    flex: 1;
-    display: flex;
-    overflow: auto;
-    position: relative;
-  }
-  Pane {
-    composes: theme-typography--body2 from global;
-    display: flex;
-    position: relative;
-  }
-  Pane:first-child {
-    flex-direction: column;
-  }
-`;
-
 interface Props {
   state: ISqlEditorTabState;
 }
 
 export const SqlEditor = observer<Props>(function SqlEditor({ state }) {
+  const styles = useS(style);
   const sqlEditorView = useService(SqlEditorView);
   const sqlDataSourceService = useService(SqlDataSourceService);
-  const styles = useStyles(splitStyles, splitHorizontalStyles, viewerStyles);
   const dataSource = sqlDataSourceService.get(state.editorId);
 
   useDataSource(dataSource);
   const splitState = useSplitUserState(`sql-editor-${dataSource?.sourceKey ?? 'default'}`);
 
-  return styled(styles)(
+  return (
     <Loader suspense>
-      <CaptureView view={sqlEditorView}>
-        <Split {...splitState} split="horizontal" sticky={30}>
-          <Pane>
+      <CaptureView className={s(styles, { captureView: true })} view={sqlEditorView}>
+        <Split className={s(styles, { split: true })} {...splitState} split="horizontal" sticky={30}>
+          <Pane className={s(styles, { pane: true })}>
             <SqlEditorLoader state={state} />
           </Pane>
           <ResizerControls />
-          <Pane basis="50%" main>
+          <Pane className={s(styles, { pane: true })} basis="50%" main>
             <Loader suspense>
               <SqlResultTabs state={state} />
             </Loader>
@@ -68,6 +50,6 @@ export const SqlEditor = observer<Props>(function SqlEditor({ state }) {
         <SqlEditorOverlay state={state} />
         <SqlEditorStatusBar dataSource={dataSource} />
       </CaptureView>
-    </Loader>,
+    </Loader>
   );
 });
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.m.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.m.css
new file mode 100644
index 0000000000..b9db3227db
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.m.css
@@ -0,0 +1,17 @@
+.pane {
+  composes: theme-background-surface theme-text-on-surface from global;
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+}
+.split {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+  height: 100%;
+  flex-direction: column;
+}
+.textarea > :global(textarea) {
+  border: none !important;
+}
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.tsx
index f691fbfe5c..75d9783c30 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.tsx
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.tsx
@@ -6,44 +6,28 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import {
   Pane,
   ResizerControls,
+  s,
   Split,
-  splitStyles,
   Table,
   TableBody,
   TableColumnHeader,
   TableHeader,
   Textarea,
   TextPlaceholder,
+  useS,
   useSplitUserState,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import type { SqlExecutionPlanNode } from '@cloudbeaver/core-sdk';
 
+import style from './ExecutionPlanTreeBlock.m.css';
 import { NestedNode } from './NestedNode';
 import { useExecutionPlanTreeState } from './useExecutionPlanTreeState';
 
-const styles = css`
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-  }
-  Split {
-    height: 100%;
-    flex-direction: column;
-  }
-  ResizerControls {
-    width: 100%;
-    height: 2px;
-  }
-  Textarea > :global(textarea) {
-    border: none !important;
-  }
-`;
-
 interface Props {
   nodeList: SqlExecutionPlanNode[];
   query: string;
@@ -52,16 +36,14 @@ interface Props {
 }
 
 export const ExecutionPlanTreeBlock = observer<Props>(function ExecutionPlanTreeBlock({ nodeList, query, onNodeSelect, className }) {
+  const styles = useS(style);
   const translate = useTranslate();
   const splitState = useSplitUserState('execution-plan-block');
   const state = useExecutionPlanTreeState(nodeList, onNodeSelect);
 
-  return styled(
-    styles,
-    splitStyles,
-  )(
-    <Split {...splitState} className={className} sticky={30} split="horizontal" keepRatio>
-      <Pane>
+  return (
+    <Split {...splitState} className={s(styles, { split: true }, className)} sticky={30} split="horizontal" keepRatio>
+      <Pane className={s(styles, { pane: true })}>
         {state.nodes.length && state.columns.length ? (
           <Table selectedItems={state.selectedNodes} onSelect={state.selectNode}>
             <TableHeader fixed>
@@ -87,8 +69,8 @@ export const ExecutionPlanTreeBlock = observer<Props>(function ExecutionPlanTree
       </Pane>
       <ResizerControls />
       <Pane basis="30%" main>
-        <Textarea className={className} name="value" rows={3} value={query} readOnly embedded />
+        <Textarea className={s(styles, { textarea: true }, className)} name="value" rows={3} value={query} readOnly embedded />
       </Pane>
-    </Split>,
+    </Split>
   );
 });
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.m.css b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.m.css
new file mode 100644
index 0000000000..1c5c950b29
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.m.css
@@ -0,0 +1,17 @@
+.pane {
+  composes: theme-background-surface theme-text-on-surface from global;
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+
+  &:first-child {
+    overflow: hidden;
+  }
+}
+.split {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+}
diff --git a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx
index b548e6596b..47bc8dc15a 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.tsx
@@ -7,30 +7,22 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Loader, Pane, ResizerControls, Split, splitStyles, useSplitUserState } from '@cloudbeaver/core-blocks';
+import { Loader, Pane, ResizerControls, s, Split, useS, useSplitUserState } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import type { IExecutionPlanTab } from '../../ISqlEditorTabState';
 import { ExecutionPlanTreeBlock } from './ExecutionPlanTreeBlock';
 import { PropertiesPanel } from './PropertiesPanel/PropertiesPanel';
+import style from './SqlExecutionPlanPanel.m.css';
 import { SqlExecutionPlanService } from './SqlExecutionPlanService';
 
-const styles = css`
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-  }
-  Pane:first-child {
-    overflow: hidden;
-  }
-`;
-
 interface Props {
   executionPlanTab: IExecutionPlanTab;
 }
 
 export const SqlExecutionPlanPanel = observer<Props>(function SqlExecutionPlanPanel({ executionPlanTab }) {
+  const styles = useS(style);
   const sqlExecutionPlanService = useService(SqlExecutionPlanService);
   const data = sqlExecutionPlanService.data.get(executionPlanTab.tabId);
   const [selectedNode, setSelectedNode] = useState<string | null>(null);
@@ -40,18 +32,21 @@ export const SqlExecutionPlanPanel = observer<Props>(function SqlExecutionPlanPa
     return <Loader cancelDisabled={!data?.task.cancellable} onCancel={() => data?.task.cancel()} />;
   }
 
-  return styled(
-    styles,
-    splitStyles,
-  )(
-    <Split {...splitState} mode={selectedNode ? splitState.mode : 'minimize'} disable={!selectedNode} sticky={30}>
-      <Pane>
+  return (
+    <Split
+      className={s(styles, { split: true })}
+      {...splitState}
+      mode={selectedNode ? splitState.mode : 'minimize'}
+      disable={!selectedNode}
+      sticky={30}
+    >
+      <Pane className={s(styles, { pane: true })}>
         <ExecutionPlanTreeBlock nodeList={data.executionPlan.nodes} query={data.executionPlan.query} onNodeSelect={setSelectedNode} />
       </Pane>
       <ResizerControls />
-      <Pane basis="30%" main>
+      <Pane className={s(styles, { pane: true })} basis="30%" main>
         {selectedNode && <PropertiesPanel selectedNode={selectedNode} nodeList={data.executionPlan.nodes} />}
       </Pane>
-    </Split>,
+    </Split>
   );
 });