diff --git a/webapp/packages/core-app/src/AppScreen/Main.m.css b/webapp/packages/core-app/src/AppScreen/Main.m.css
new file mode 100644
index 0000000000..112e12bdde
--- /dev/null
+++ b/webapp/packages/core-app/src/AppScreen/Main.m.css
@@ -0,0 +1,15 @@
+.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;
+}
+.loader {
+  height: 100%;
+}
diff --git a/webapp/packages/core-app/src/AppScreen/Main.tsx b/webapp/packages/core-app/src/AppScreen/Main.tsx
index 5f7f3dff4b..d22b1173c9 100644
--- a/webapp/packages/core-app/src/AppScreen/Main.tsx
+++ b/webapp/packages/core-app/src/AppScreen/Main.tsx
@@ -6,45 +6,35 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { getComputed, Loader, Pane, ResizerControls, Split, splitStyles, useSplitUserState, useStyles } 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';
 
+import style from './Main.m.css';
 import { RightArea } from './RightArea';
 
-const mainStyles = css`
-  space {
-    composes: theme-typography--body2 theme-background-primary from global;
-  }
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-  }
-  Loader {
-    height: 100%;
-  }
-`;
-
 export const Main = observer(function Main() {
+  const styles = useS(style);
   const sideBarPanelService = useService(SideBarPanelService);
   const leftBarPanelService = useService(LeftBarPanelService);
 
-  const styles = useStyles(mainStyles, splitStyles);
   const splitMainState = useSplitUserState('main');
   const splitRightState = useSplitUserState('main-right');
 
   const sideBarDisabled = getComputed(() => sideBarPanelService.tabsContainer.getDisplayed().length === 0);
   const leftBarDisabled = getComputed(() => leftBarPanelService.tabsContainer.getDisplayed().length === 0);
 
-  return styled(styles)(
-    <Loader suspense>
-      <space as="main">
-        <Split {...splitMainState} sticky={30} mode={leftBarDisabled ? 'minimize' : splitMainState.mode} disable={leftBarDisabled}>
-          <Pane basis="250px" main>
+  return (
+    <Loader className={s(styles, { loader: true })} suspense>
+      <main className={s(styles, { space: true })}>
+        <Split
+          {...splitMainState}
+          sticky={30}
+          mode={leftBarDisabled ? 'minimize' : splitMainState.mode}
+          disable={leftBarDisabled}
+        >
+          <Pane  basis="250px" main>
             <Loader suspense>
               <SideBarPanel container={leftBarPanelService.tabsContainer} />
             </Loader>
@@ -52,19 +42,19 @@ export const Main = observer(function Main() {
           <ResizerControls />
           <Pane>
             <Split {...splitRightState} mode={sideBarDisabled ? 'minimize' : splitRightState.mode} disable={sideBarDisabled} sticky={30}>
-              <Pane>
+              <Pane className={s(styles, { pane: true })}>
                 <RightArea />
               </Pane>
               <ResizerControls />
-              <Pane basis="250px" main>
-                <Loader suspense>
+              <Pane basis="250px" main >
+                <Loader suspense className={s(styles, { loader: true })}>
                   <SideBarPanel container={sideBarPanelService.tabsContainer} />
                 </Loader>
               </Pane>
             </Split>
           </Pane>
         </Split>
-      </space>
-    </Loader>,
+      </main>
+    </Loader>
   );
 });
diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.m.css b/webapp/packages/core-app/src/AppScreen/RightArea.m.css
new file mode 100644
index 0000000000..0ea8e73fb2
--- /dev/null
+++ b/webapp/packages/core-app/src/AppScreen/RightArea.m.css
@@ -0,0 +1,6 @@
+.loader {
+  height: 100%;
+}
+.slideBox {
+  flex: 1;
+}
diff --git a/webapp/packages/core-app/src/AppScreen/RightArea.tsx b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
index 6937e68bc6..105104905b 100644
--- a/webapp/packages/core-app/src/AppScreen/RightArea.tsx
+++ b/webapp/packages/core-app/src/AppScreen/RightArea.tsx
@@ -6,46 +6,21 @@
  * 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,
-  SlideBox,
-  slideBoxStyles,
-  SlideElement,
-  SlideOverlay,
-  Split,
-  splitHorizontalStyles,
-  splitStyles,
-  useSplitUserState,
-  useStyles,
-} from '@cloudbeaver/core-blocks';
+import { Loader, Pane, ResizerControls, s, SlideBox, SlideElement, SlideOverlay, Split, useS, useSplitUserState } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { OptionsPanelService } from '@cloudbeaver/core-ui';
 import { NavigationTabsBar } from '@cloudbeaver/plugin-navigation-tabs';
 import { ToolsPanel, ToolsPanelService } from '@cloudbeaver/plugin-tools-panel';
 
-const styles = css`
-  Pane {
-    composes: theme-background-surface theme-text-on-surface from global;
-    display: flex;
-    overflow: auto;
-  }
-  Loader {
-    height: 100%;
-  }
-  SlideBox {
-    flex: 1;
-  }
-`;
+import style from './RightArea.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const RightArea = observer<Props>(function RightArea({ className }) {
+  const styles = useS(style);
   const toolsPanelService = useService(ToolsPanelService);
   const optionsPanelService = useService(OptionsPanelService);
   const splitState = useSplitUserState('right-area');
@@ -55,29 +30,29 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
 
   const toolsDisabled = activeTools.length === 0 || toolsPanelService.disabled;
 
-  return styled(useStyles(styles, splitStyles, splitHorizontalStyles, slideBoxStyles))(
-    <SlideBox open={optionsPanelService.active} className={className}>
+  return (
+    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true }, className)}>
       <SlideElement>
-        <Loader suspense>
+        <Loader className={s(styles, { loader: true })} suspense>
           <OptionsPanel />
         </Loader>
       </SlideElement>
       <SlideElement>
         <Split {...splitState} sticky={30} split="horizontal" mode={toolsDisabled ? 'minimize' : splitState.mode} disable={toolsDisabled} keepRatio>
           <Pane>
-            <Loader suspense>
+            <Loader className={s(styles, { loader: true })} suspense>
               <NavigationTabsBar />
             </Loader>
           </Pane>
           <ResizerControls />
           <Pane basis="30%" main>
-            <Loader suspense>
+            <Loader className={s(styles, { loader: true })} suspense>
               <ToolsPanel container={toolsPanelService.tabsContainer} />
             </Loader>
           </Pane>
         </Split>
         <SlideOverlay onClick={() => optionsPanelService.close()} />
       </SlideElement>
-    </SlideBox>,
+    </SlideBox>
   );
 });
diff --git a/webapp/packages/core-app/src/Body.m.css b/webapp/packages/core-app/src/Body.m.css
new file mode 100644
index 0000000000..60f9ce527a
--- /dev/null
+++ b/webapp/packages/core-app/src/Body.m.css
@@ -0,0 +1,8 @@
+.bodyContent {
+    composes: theme-background-surface theme-text-on-surface theme-typography from global;
+    height: 100vh;
+    display: flex;
+    padding: 0 !important;
+    flex-direction: column;
+    overflow: hidden;
+}
diff --git a/webapp/packages/core-app/src/Body.tsx b/webapp/packages/core-app/src/Body.tsx
index a4b52dde4d..6b8edd8dba 100644
--- a/webapp/packages/core-app/src/Body.tsx
+++ b/webapp/packages/core-app/src/Body.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useLayoutEffect, useRef } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Loader, useResource, useStyles } from '@cloudbeaver/core-blocks';
+import { Loader, s, useResource, useS, useStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { DialogsPortal } from '@cloudbeaver/core-dialogs';
 import { Notifications } from '@cloudbeaver/core-notifications';
@@ -21,24 +20,12 @@ import { ThemeService } from '@cloudbeaver/core-theming';
 import { DNDProvider } from '@cloudbeaver/core-ui';
 import { useAppVersion } from '@cloudbeaver/plugin-version';
 
-const bodyStyles = css`
-  theme {
-    composes: theme-background-surface theme-text-on-surface theme-typography from global;
-    height: 100vh;
-    display: flex;
-    padding: 0 !important; /* fix additional padding with modal reakit menu */
-    flex-direction: column;
-    overflow: hidden;
-  }
-  Loader {
-    height: 100vh;
-  }
-`;
+import style from './Body.m.css';
 
 export const Body = observer(function Body() {
   // const serverConfigLoader = useResource(Body, ServerConfigResource, undefined);
+  const styles = useS(style);
   const themeService = useService(ThemeService);
-  const style = useStyles(bodyStyles);
   const ref = useRef<HTMLDivElement>(null);
   useResource(Body, SessionPermissionsResource, undefined);
   const screenService = useService(ScreenService);
@@ -56,15 +43,15 @@ export const Body = observer(function Body() {
     document.documentElement.dataset.backendVersion = backendVersion;
   });
 
-  return styled(style)(
+  return (
     <DNDProvider>
       <Loader suspense>
-        <theme ref={ref} className={`theme-${themeService.currentTheme.id}`}>
+        <div ref={ref} className={s(styles, { bodyContent: true }, `theme-${themeService.currentTheme.id}`)}>
           <Loader suspense>{Screen && <Screen {...screenService.routerService.params} />}</Loader>
           <DialogsPortal />
           <Notifications />
-        </theme>
+        </div>
       </Loader>
-    </DNDProvider>,
+    </DNDProvider>
   );
 });
diff --git a/webapp/packages/core-blocks/src/AppRefreshButton.m.css b/webapp/packages/core-blocks/src/AppRefreshButton.m.css
new file mode 100644
index 0000000000..5e08d0eeb3
--- /dev/null
+++ b/webapp/packages/core-blocks/src/AppRefreshButton.m.css
@@ -0,0 +1,20 @@
+.button {
+  color: white;
+  font-weight: 500;
+  background-color: #2a7cb4;
+  padding: 5px 16px;
+  border-radius: 4px;
+  letter-spacing: 0.08929em;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
+  &:active {
+    opacity: 0.5;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/AppRefreshButton.tsx b/webapp/packages/core-blocks/src/AppRefreshButton.tsx
index a9d7849d86..59bd28501d 100644
--- a/webapp/packages/core-blocks/src/AppRefreshButton.tsx
+++ b/webapp/packages/core-blocks/src/AppRefreshButton.tsx
@@ -6,32 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 import type React from 'react';
-import styled, { css } from 'reshadow';
 
 import { App, useService } from '@cloudbeaver/core-di';
+import { clsx } from '@cloudbeaver/core-utils';
 
-const style = css`
-  button {
-    color: white;
-    font-weight: 500;
-    background-color: #2a7cb4;
-    padding: 5px 16px;
-    border-radius: 4px;
-    letter-spacing: 0.08929em;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    cursor: pointer;
-    outline: none;
-    border: none;
-    &:hover,
-    &:focus {
-      opacity: 0.8;
-    }
-    &:active {
-      opacity: 0.5;
-    }
-  }
-`;
+import style from './AppRefreshButton.m.css';
 
 interface IProps {
   className?: string;
@@ -44,9 +23,9 @@ export const AppRefreshButton: React.FC<IProps> = function AppRefreshButton({ cl
     app.start();
   }
 
-  return styled(style)(
-    <button className={className} onClick={refresh}>
+  return (
+    <button className={clsx(style.button, className)} onClick={refresh}>
       Refresh
-    </button>,
+    </button>
   );
 };
diff --git a/webapp/packages/core-blocks/src/Button.m.css b/webapp/packages/core-blocks/src/Button.m.css
new file mode 100644
index 0000000000..73d5a3c61d
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Button.m.css
@@ -0,0 +1,62 @@
+.buttonLabel {
+  composes: theme-button__label from global;
+}
+.buttonIcon {
+  composes: theme-button__icon from global;
+}
+.ripple {
+  composes: theme-button_ripple from global;
+}
+
+.button {
+  composes: theme-button from global;
+  display: flex;
+
+  & .buttonLabel {
+    line-height: 1;
+    opacity: 1;
+  }
+
+  & .buttonIcon {
+    & > * {
+      width: 100%;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  & .loader,
+  & .buttonLabel {
+    transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  }
+
+  & .loader {
+    position: absolute;
+    opacity: 0 !important;
+  }
+
+  &.loading {
+    & .loader {
+      opacity: 1 !important;
+    }
+
+    & .buttonLabel {
+      opacity: 0;
+    }
+  }
+}
+
+.raised {
+  composes: theme-button_raised from global;
+}
+.unelevated {
+  composes: theme-button_unelevated from global;
+}
+.outlined {
+  composes: theme-button_outlined from global;
+}
+.secondary {
+  composes: theme-button_secondary from global;
+}
diff --git a/webapp/packages/core-blocks/src/Button.tsx b/webapp/packages/core-blocks/src/Button.tsx
index 6bcfab94dd..ff9944ef14 100644
--- a/webapp/packages/core-blocks/src/Button.tsx
+++ b/webapp/packages/core-blocks/src/Button.tsx
@@ -7,91 +7,16 @@
  */
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import styled, { css, use } from 'reshadow';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
+import style from './Button.m.css';
 import { IconOrImage } from './IconOrImage';
 import { Loader } from './Loader/Loader';
+import { s } from './s';
 import { useObjectRef } from './useObjectRef';
 import { useObservableRef } from './useObservableRef';
-import { useStyles } from './useStyles';
-
-const buttonStyles = css`
-  button-label {
-    composes: theme-button__label from global;
-  }
-  button-icon {
-    composes: theme-button__icon from global;
-  }
-  ripple {
-    composes: theme-button_ripple from global;
-  }
-  Button {
-    composes: theme-button from global;
-    display: flex;
-
-    & IconOrImage {
-      width: 100%;
-    }
-
-    &[disabled] IconOrImage {
-      opacity: 0.5;
-    }
-
-    & Loader,
-    & button-label {
-      transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
-    }
+import { useS } from './useS';
 
-    & Loader {
-      position: absolute;
-      opacity: 0 !important;
-    }
-
-    & button-label {
-      line-height: 1;
-      opacity: 1;
-    }
-
-    &[|loading] {
-      & Loader {
-        opacity: 1 !important;
-      }
-
-      & button-label {
-        opacity: 0;
-      }
-    }
-
-    &[href] {
-      text-decoration: none !important;
-    }
-  }
-`;
-
-const buttonMod = {
-  raised: css`
-    Button {
-      composes: theme-button_raised from global;
-    }
-  `,
-  unelevated: css`
-    Button {
-      composes: theme-button_unelevated from global;
-    }
-  `,
-  outlined: css`
-    Button {
-      composes: theme-button_outlined from global;
-    }
-  `,
-  secondary: css`
-    Button {
-      composes: theme-button_secondary from global;
-    }
-  `,
-};
+type ButtonMod = Array<'raised' | 'unelevated' | 'outlined' | 'secondary'>;
 
 type ButtonProps = (React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> &
   React.LinkHTMLAttributes<HTMLLinkElement | HTMLButtonElement> &
@@ -99,8 +24,7 @@ type ButtonProps = (React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorEle
   loading?: boolean;
   icon?: string;
   viewBox?: string;
-  styles?: ComponentStyle;
-  mod?: Array<keyof typeof buttonMod>;
+  mod?: ButtonMod;
   tag?: 'button' | 'a' | 'div';
   href?: string;
   target?: '_blank' | '_self' | '_parent' | '_top';
@@ -114,7 +38,6 @@ export const Button = observer<ButtonProps>(function Button({
   icon,
   viewBox,
   mod,
-  styles,
   tag = 'button',
   type = 'button',
   disabled = false,
@@ -124,6 +47,7 @@ export const Button = observer<ButtonProps>(function Button({
   className,
   ...rest
 }) {
+  const styles = useS(style);
   const handlersRef = useObjectRef({ onClick });
   const state = useObservableRef(
     () => ({
@@ -155,16 +79,33 @@ export const Button = observer<ButtonProps>(function Button({
   }
 
   const Button = tag;
-  return styled(useStyles(styles, buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))(
-    <Button {...rest} type={type} disabled={disabled} {...use({ loading })} className={className} onClick={state.click}>
-      <ripple />
+  return (
+    <Button
+      {...rest}
+      type={type}
+      disabled={disabled}
+      className={s(
+        styles,
+        {
+          button: true,
+          raised: mod?.includes('raised'),
+          outlined: mod?.includes('outlined'),
+          secondary: mod?.includes('secondary'),
+          unelevated: mod?.includes('unelevated'),
+          loading,
+        },
+        className,
+      )}
+      onClick={state.click}
+    >
+      <div className={s(styles, { ripple: true })} />
       {icon && (
-        <button-icon>
+        <div className={s(styles, { buttonIcon: true, disabled }, className)}>
           <IconOrImage icon={icon} viewBox={viewBox} />
-        </button-icon>
+        </div>
       )}
-      <button-label as="span">{children}</button-label>
-      <Loader small />
-    </Button>,
+      <span className={s(styles, { buttonLabel: true }, className)}>{children}</span>
+      <Loader className={s(styles, { loader: true })} small />
+    </Button>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Cell.m.css b/webapp/packages/core-blocks/src/Cell.m.css
new file mode 100644
index 0000000000..34a58ddfbd
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Cell.m.css
@@ -0,0 +1,32 @@
+.main {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
+.before {
+  margin-right: 16px;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.after {
+  margin-left: 16px;
+  flex-shrink: 0;
+}
+.info {
+  composes: theme-typography--body2 from global;
+  flex: 1;
+  line-height: 1.4;
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+}
+.description {
+  composes: theme-typography--caption from global;
+  line-height: 1.2;
+}
+
+.ripple {
+  composes: theme-ripple from global;
+}
diff --git a/webapp/packages/core-blocks/src/Cell.tsx b/webapp/packages/core-blocks/src/Cell.tsx
index 9c1e5b1dd4..c3cd42ee51 100644
--- a/webapp/packages/core-blocks/src/Cell.tsx
+++ b/webapp/packages/core-blocks/src/Cell.tsx
@@ -5,77 +5,34 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
+import { observer } from 'mobx-react-lite';
 
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
-
-import { useStyles } from './useStyles';
+import style from './Cell.m.css';
+import { s } from './s';
+import { useS } from './useS';
 
 interface Props {
   description?: React.ReactElement | string;
   before?: React.ReactElement;
   after?: React.ReactElement;
-  style?: ComponentStyle;
   ripple?: boolean;
   className?: string;
+  children?: React.ReactNode;
 }
 
-const styles = css`
-  main {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 8px;
-  }
-  before {
-    margin-right: 16px;
-    width: 24px;
-    height: 24px;
-    flex-shrink: 0;
-  }
-  after {
-    margin-left: 16px;
-    flex-shrink: 0;
-  }
-  info {
-    composes: theme-typography--body2 from global;
-    flex: 1;
-    line-height: 1.4;
-    display: flex;
-    flex-direction: column;
-    font-weight: 500;
-  }
-  description {
-    composes: theme-typography--caption from global;
-    line-height: 1.2;
-  }
-`;
-
-const RIPPLE_STYLES = css`
-  cell {
-    composes: theme-ripple from global;
-  }
-`;
+export const Cell = observer<Props>(function Cell({ before, after, description, className, ripple = true, children }) {
+  const styles = useS(style);
 
-export const Cell: React.FC<React.PropsWithChildren<Props>> = function Cell({
-  before,
-  after,
-  description,
-  style,
-  className,
-  ripple = true,
-  children,
-}) {
-  return styled(useStyles(styles, style, ripple && RIPPLE_STYLES))(
-    <cell className={className}>
-      <main>
-        <before>{before}</before>
-        <info>
+  return (
+    <div className={s(styles, { ripple }, className)}>
+      <main className={s(styles, { main: true })}>
+        <div className={s(styles, { before: true })}>{before}</div>
+        <div className={s(styles, { info: true })}>
           {children}
-          {description && <description>{description}</description>}
-        </info>
-        <after>{after}</after>
+          {description && <div className={s(styles, { description: true })}>{description}</div>}
+        </div>
+        <div className={s(styles, { after: true })}>{after}</div>
       </main>
-    </cell>,
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Code.m.css b/webapp/packages/core-blocks/src/Code.m.css
new file mode 100644
index 0000000000..72d27418eb
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Code.m.css
@@ -0,0 +1,5 @@
+.codeContainer {
+    composes: theme-background-secondary theme-text-on-secondary from global;
+    padding: 16px;
+    border-radius: var(--theme-group-element-radius);
+}
diff --git a/webapp/packages/core-blocks/src/Code.tsx b/webapp/packages/core-blocks/src/Code.tsx
index 78067153c6..5ddd3097e5 100644
--- a/webapp/packages/core-blocks/src/Code.tsx
+++ b/webapp/packages/core-blocks/src/Code.tsx
@@ -5,24 +5,22 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
+import style from './Code.m.css';
+import { s } from './s';
+import { useS } from './useS';
+import {observer} from "mobx-react-lite";
 
 interface Props {
   className?: string;
+  children?: React.ReactNode;
 }
 
-const styles = css`
-  code-container {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    padding: 16px;
-    border-radius: var(--theme-group-element-radius);
-  }
-`;
+export const Code = observer<Props>(function Code({ children, className }) {
+  const styles = useS(style);
 
-export const Code: React.FC<React.PropsWithChildren<Props>> = function Code({ children, className }) {
-  return styled(styles)(
-    <code-container className={className}>
+  return (
+    <div className={s(styles, { codeContainer: true }, className)}>
       <code>{children}</code>
-    </code-container>,
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
index 22d0a349ee..7c4620acc6 100644
--- a/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
+++ b/webapp/packages/core-blocks/src/ConnectionImageWithMask/ConnectionMark.tsx
@@ -16,7 +16,8 @@ interface Props {
   className?: string;
 }
 
-export const ConnectionMark: React.FC<Props> = observer(function ConnectionMark({ connected, className }) {
+export const ConnectionMark = observer<Props>(function ConnectionMark({ connected, className }) {
   const styles = useS(style);
+
   return <div className={s(styles, { status: true, connected }, className)} />;
 });
diff --git a/webapp/packages/core-blocks/src/DisplayError.m.css b/webapp/packages/core-blocks/src/DisplayError.m.css
new file mode 100644
index 0000000000..a9dca10b17
--- /dev/null
+++ b/webapp/packages/core-blocks/src/DisplayError.m.css
@@ -0,0 +1,25 @@
+.error {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+
+  &.root {
+    height: 100vh;
+  }
+}
+.errorInnerBlock {
+  display: flex;
+  margin: auto;
+  padding: 16px 24px;
+  flex-direction: column;
+  align-items: center;
+}
+.notificationMark {
+  width: 40px;
+  height: 40px;
+}
+.details {
+  padding: 8px 16px;
+  white-space: pre-wrap;
+}
diff --git a/webapp/packages/core-blocks/src/DisplayError.tsx b/webapp/packages/core-blocks/src/DisplayError.tsx
index f3d130246c..401bbac9ef 100644
--- a/webapp/packages/core-blocks/src/DisplayError.tsx
+++ b/webapp/packages/core-blocks/src/DisplayError.tsx
@@ -5,69 +5,44 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
 import type React from 'react';
-import styled, { css, use } from 'reshadow';
 
 import { ENotificationType } from '@cloudbeaver/core-events';
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { AppRefreshButton } from './AppRefreshButton';
+import style from './DisplayError.m.css';
+import { s } from './s';
 import { NotificationMark } from './Snackbars/NotificationMark';
-import { useStyles } from './useStyles';
-
-const style = css`
-  error {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    overflow: auto;
-
-    &[|root] {
-      height: 100vh;
-    }
-  }
-  error-inner-block {
-    display: flex;
-    margin: auto;
-    padding: 16px 24px;
-    flex-direction: column;
-    align-items: center;
-  }
-  NotificationMark {
-    width: 40px;
-    height: 40px;
-  }
-  details {
-    padding: 8px 16px;
-  }
-`;
+import { useS } from './useS';
 
 interface Props {
   root?: boolean;
   error?: Error;
   errorInfo?: React.ErrorInfo;
   className?: string;
-  styles?: ComponentStyle;
+  children?: React.ReactNode;
 }
 
-export const DisplayError: React.FC<React.PropsWithChildren<Props>> = function DisplayError({ root, children, error, errorInfo, className, styles }) {
+export const DisplayError = observer<Props>(function DisplayError({ root, children, error, errorInfo, className }) {
+  const styles = useS(style);
   const stack = errorInfo?.componentStack || error?.stack;
 
-  return styled(useStyles(style, styles))(
-    <error className={className} {...use({ root })}>
-      <error-inner-block>
-        <NotificationMark type={ENotificationType.Error} />
+  return (
+    <div className={s(styles, { error: true, root }, className)}>
+      <div className={s(styles, { errorInnerBlock: true })}>
+        <NotificationMark className={s(styles, { notificationMark: true })} type={ENotificationType.Error} />
         <p>Something went wrong.</p>
         {root && <AppRefreshButton />}
         {children}
         {error && (
-          <details style={{ whiteSpace: 'pre-wrap' }}>
+          <div className={s(styles, { details: true })}>
             {error.toString()}
             {stack && <br />}
             {stack}
-          </details>
+          </div>
         )}
-      </error-inner-block>
-    </error>,
+      </div>
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/ErrorBoundary.m.css b/webapp/packages/core-blocks/src/ErrorBoundary.m.css
new file mode 100644
index 0000000000..0db5ac2ab6
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ErrorBoundary.m.css
@@ -0,0 +1,3 @@
+.action {
+  padding: 8px 16px;
+}
diff --git a/webapp/packages/core-blocks/src/ErrorBoundary.tsx b/webapp/packages/core-blocks/src/ErrorBoundary.tsx
index 907e9b1eb6..95e042db91 100644
--- a/webapp/packages/core-blocks/src/ErrorBoundary.tsx
+++ b/webapp/packages/core-blocks/src/ErrorBoundary.tsx
@@ -6,29 +6,21 @@
  * you may not use this file except in compliance with the License.
  */
 import React, { ErrorInfo } from 'react';
-import styled, { css } from 'reshadow';
 
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { errorOf, LoadingError } from '@cloudbeaver/core-utils';
 
 import { Button } from './Button';
 import { DisplayError } from './DisplayError';
+import style from './ErrorBoundary.m.css';
 import { ErrorContext, IExceptionContext } from './ErrorContext';
 import { ExceptionMessage } from './ExceptionMessage';
 
-const style = css`
-  action {
-    padding: 8px 16px;
-  }
-`;
-
 interface Props {
   icon?: boolean;
   root?: boolean;
   inline?: boolean;
   remount?: boolean;
   className?: string;
-  styles?: ComponentStyle;
   onClose?: () => any;
   onRefresh?: () => any;
 }
@@ -48,6 +40,7 @@ export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props
   }
   constructor(props: Props) {
     super(props);
+
     this.state = { exceptions: [] };
 
     this.refresh = this.refresh.bind(this);
@@ -75,23 +68,23 @@ export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props
   }
 
   render(): React.ReactNode {
-    const { root, inline, icon, children, styles, className, onClose } = this.props;
+    const { root, inline, icon, children, className, onClose } = this.props;
 
     for (const errorData of this.state.exceptions) {
       if (root) {
-        return styled(style)(
-          <DisplayError className={className} root={root} error={errorData.error} styles={styles} errorInfo={errorData.errorInfo}>
+        return (
+          <DisplayError className={className} root={root} error={errorData.error} errorInfo={errorData.errorInfo}>
             {onClose && (
-              <action>
+              <div className={style.action}>
                 <Button onClick={onClose}>Close</Button>
-              </action>
+              </div>
             )}
             {this.canRefresh && (
-              <action>
+              <div className={style.action}>
                 <Button onClick={this.refresh}>Refresh</Button>
-              </action>
+              </div>
             )}
-          </DisplayError>,
+          </DisplayError>
         );
       } else {
         return (
@@ -100,7 +93,6 @@ export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props
             icon={icon}
             className={className}
             exception={errorData.error}
-            styles={styles}
             onRetry={this.canRefresh ? this.refresh : undefined}
             onClose={onClose}
           />
diff --git a/webapp/packages/core-blocks/src/ExceptionMessage.m.css b/webapp/packages/core-blocks/src/ExceptionMessage.m.css
new file mode 100644
index 0000000000..6001353799
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ExceptionMessage.m.css
@@ -0,0 +1,107 @@
+.errorName {
+  composes: theme-typography--headline6 from global;
+}
+
+.error {
+  flex: 1;
+  display: flex;
+  padding: 24px;
+
+  &.icon {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    max-height: 24px;
+    max-width: 24px;
+
+    & .errorIcon {
+      display: flex;
+      align-items: center;
+      align-content: center;
+
+      & .iconOrImage {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  & .errorData {
+    padding: 0 16px;
+
+    & .errorName {
+      height: 40px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      margin: 0;
+
+      & span {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+      }
+    }
+
+    .errorMessage {
+      flex: 1;
+      overflow: auto;
+      white-space: pre-wrap;
+    }
+
+    .errorActions {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      margin-top: 16px;
+      gap: 16px;
+    }
+  }
+
+  &.inline {
+    align-items: center;
+    height: 38px;
+    padding: 0;
+
+    & .errorData {
+      display: flex;
+      align-items: center;
+      padding: 0;
+    }
+
+    & .errorIcon {
+      display: flex;
+      align-items: center;
+      align-content: center;
+
+      & .iconOrImage {
+        height: 24px;
+        width: 24px;
+      }
+    }
+
+    & .errorMessage {
+      line-height: 1.2;
+      -webkit-line-clamp: 2;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      padding: 0 16px;
+    }
+    & .errorName {
+      display: none;
+    }
+    & .errorActions {
+      margin-top: 0;
+    }
+  }
+
+  .errorActionClose {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+}
+
+
diff --git a/webapp/packages/core-blocks/src/ExceptionMessage.tsx b/webapp/packages/core-blocks/src/ExceptionMessage.tsx
index 1b1a847d11..c0361409da 100644
--- a/webapp/packages/core-blocks/src/ExceptionMessage.tsx
+++ b/webapp/packages/core-blocks/src/ExceptionMessage.tsx
@@ -6,129 +6,27 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css, use } from 'reshadow';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Button } from './Button';
+import style from './ExceptionMessage.m.css';
 import { Icon } from './Icon';
 import { IconOrImage } from './IconOrImage';
 import { useTranslate } from './localization/useTranslate';
+import { s } from './s';
 import { useErrorDetails } from './useErrorDetails';
-import { useStyles } from './useStyles';
-
-const style = css`
-  error {
-    flex: 1;
-    display: flex;
-    padding: 24px;
-  }
-
-  error-name {
-    composes: theme-typography--headline6 from global;
-    height: 40px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    margin: 0;
-
-    & span {
-      display: inline-block;
-      vertical-align: middle;
-      line-height: normal;
-    }
-  }
-
-  error-data {
-    padding: 0 16px;
-  }
-
-  error-message {
-    flex: 1;
-    overflow: auto;
-    white-space: pre-wrap;
-  }
-
-  error-actions {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    margin-top: 16px;
-    gap: 16px;
-  }
-
-  error[|inline] {
-    align-items: center;
-    height: 38px;
-    padding: 0;
-
-    & error-data {
-      display: flex;
-      align-items: center;
-      padding: 0;
-    }
-    & error-icon {
-      display: flex;
-      align-items: center;
-      align-content: center;
-
-      & IconOrImage {
-        height: 24px;
-        width: 24px;
-      }
-    }
-    & error-message {
-      line-height: 1.2;
-      -webkit-line-clamp: 2;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      padding: 0 16px;
-    }
-    & error-name {
-      display: none;
-    }
-    & error-actions {
-      margin-top: 0;
-    }
-  }
-  error[|icon] {
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    max-height: 24px;
-    max-width: 24px;
-
-    & error-icon {
-      display: flex;
-      align-items: center;
-      align-content: center;
-
-      & IconOrImage {
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
-  error-action-close {
-    cursor: pointer;
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-  }
-`;
+import { useS } from './useS';
 
 interface Props {
   exception?: Error;
   icon?: boolean;
   inline?: boolean;
   className?: string;
-  styles?: ComponentStyle;
   onRetry?: () => void;
   onClose?: () => void;
 }
 
-export const ExceptionMessage = observer<Props>(function ExceptionMessage({ exception = null, icon, inline, className, styles, onRetry, onClose }) {
+export const ExceptionMessage = observer<Props>(function ExceptionMessage({ exception = null, icon, inline, className, onRetry, onClose }) {
+  const styles = useS(style);
   const translate = useTranslate();
   const error = useErrorDetails(exception);
 
@@ -141,21 +39,21 @@ export const ExceptionMessage = observer<Props>(function ExceptionMessage({ exce
     };
   }
 
-  return styled(useStyles(style, styles))(
-    <error {...use({ inline, icon })} className={className}>
-      <error-icon title={error.message}>
-        <IconOrImage icon={inline || icon ? '/icons/error_icon_sm.svg' : '/icons/error_icon.svg'} />
-      </error-icon>
+  return (
+    <div className={s(styles, { error: true, icon, inline }, className)}>
+      <div className={s(styles, { errorIcon: true })} title={error.message}>
+        <IconOrImage className={s(styles, { iconOrImage: true })} icon={inline || icon ? '/icons/error_icon_sm.svg' : '/icons/error_icon.svg'} />
+      </div>
       {!icon && (
         <>
-          <error-data>
-            <error-name as="h2">
+          <div className={s(styles, { errorData: true })}>
+            <h2 className={s(styles, { errorName: true })}>
               <span>{translate('core_blocks_exception_message_error_title')}</span>
-            </error-name>
-            <error-message>
+            </h2>
+            <div className={s(styles, { errorMessage: true })}>
               {translate('core_blocks_exception_message_error_message')} {onRetry && translate('ui_please_retry')}
-            </error-message>
-            <error-actions>
+            </div>
+            <div className={s(styles, { errorActions: true })}>
               <Button type="button" mod={['outlined']} disabled={error.isOpen} onClick={error.open}>
                 {translate('ui_errors_details')}
               </Button>
@@ -164,15 +62,15 @@ export const ExceptionMessage = observer<Props>(function ExceptionMessage({ exce
                   {translate('ui_processing_retry')}
                 </Button>
               )}
-            </error-actions>
-          </error-data>
+            </div>
+          </div>
           {onClose && (
-            <error-action-close>
+            <div className={s(styles, { errorActionClose: true })}>
               <Icon name="cross" viewBox="0 0 16 16" onClick={onClose} />
-            </error-action-close>
+            </div>
           )}
         </>
       )}
-    </error>,
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts b/webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts
deleted file mode 100644
index 8876bd2e9b..0000000000
--- a/webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-import { css } from 'reshadow';
-
-export const EXPANDABLE_FORM_STYLES = css`
-  expand-label {
-    composes: theme-typography--body2 from global;
-    font-weight: 400;
-    margin: 0;
-    text-transform: uppercase;
-    opacity: 0.9;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/Expand/Expandable.m.css b/webapp/packages/core-blocks/src/Expand/Expandable.m.css
new file mode 100644
index 0000000000..7388b9f07b
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Expand/Expandable.m.css
@@ -0,0 +1,38 @@
+.disclosure {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  max-width: max-content;
+}
+.expandIcon {
+  display: flex;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  opacity: 0.5;
+  width: 16px;
+  height: 16px;
+  transform: rotate(-90deg);
+  margin-right: 8px;
+
+  &.expanded {
+    transform: rotate(0deg);
+  }
+}
+.iconOrImage {
+  width: 100%;
+  height: 100%;
+}
+.expandLabel {
+  composes: theme-typography--body2 from global;
+  font-weight: 400;
+  margin: 0;
+  text-transform: uppercase;
+  opacity: 0.9;
+}
diff --git a/webapp/packages/core-blocks/src/Expand/Expandable.tsx b/webapp/packages/core-blocks/src/Expand/Expandable.tsx
index 8d393d024b..f28fe867f3 100644
--- a/webapp/packages/core-blocks/src/Expand/Expandable.tsx
+++ b/webapp/packages/core-blocks/src/Expand/Expandable.tsx
@@ -8,12 +8,11 @@
 import { observer } from 'mobx-react-lite';
 import { forwardRef, ReactNode, useImperativeHandle } from 'react';
 import { Disclosure, DisclosureContent, DisclosureStateReturn, useDisclosureState } from 'reakit';
-import styled, { css, use } from 'reshadow';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { IconOrImage } from '../IconOrImage';
-import { useStyles } from '../useStyles';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './Expandable.m.css';
 
 export type ExpandableState = Pick<DisclosureStateReturn, 'setVisible' | 'show' | 'hide' | 'toggle' | 'visible'>;
 
@@ -22,61 +21,27 @@ interface Props {
   children: ReactNode;
   defaultExpanded?: boolean;
   disabled?: boolean;
-  style?: ComponentStyle;
 }
 
-const styles = css`
-  Disclosure {
-    border: none;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    outline: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    max-width: max-content;
-  }
-  expand-icon {
-    display: flex;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    opacity: 0.5;
-    width: 16px;
-    height: 16px;
-    transform: rotate(-90deg);
-    margin-right: 8px;
-
-    &[|expanded] {
-      transform: rotate(0deg);
-    }
-  }
-  IconOrImage {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
 export const Expandable = observer<Props, ExpandableState>(
-  forwardRef(function Expandable({ label, defaultExpanded, disabled, children, style }, ref) {
+  forwardRef(function Expandable({ label, defaultExpanded, disabled, children }, ref) {
+    const styles = useS(style);
     const disclosure = useDisclosureState({ visible: defaultExpanded ?? false });
 
     useImperativeHandle(ref, () => disclosure);
 
-    return styled(useStyles(styles, style))(
+    return (
       <>
-        <Disclosure {...disclosure} disabled={disabled}>
-          <expand-icon {...use({ expanded: disclosure.visible })}>
-            <IconOrImage icon="arrow" />
-          </expand-icon>
-          <expand-label as="h2">{label}</expand-label>
+        <Disclosure className={s(styles, { disclosure: true })} {...disclosure} disabled={disabled}>
+          <div className={s(styles, { expandIcon: true, expanded: disclosure.visible })}>
+            <IconOrImage className={s(styles, { iconOrImage: true })} icon="arrow" />
+          </div>
+          <h2 className={s(styles, { expandLabel: true })}>{label}</h2>
         </Disclosure>
         <DisclosureContent {...disclosure}>
           <>{children}</>
         </DisclosureContent>
-      </>,
+      </>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/Iframe.m.css b/webapp/packages/core-blocks/src/Iframe.m.css
new file mode 100644
index 0000000000..856823a939
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Iframe.m.css
@@ -0,0 +1,4 @@
+.iframe {
+  composes: theme-border-color-background from global;
+  border: 1px solid;
+}
diff --git a/webapp/packages/core-blocks/src/Iframe.tsx b/webapp/packages/core-blocks/src/Iframe.tsx
index e29cff1f53..84f31cc5d7 100644
--- a/webapp/packages/core-blocks/src/Iframe.tsx
+++ b/webapp/packages/core-blocks/src/Iframe.tsx
@@ -5,18 +5,15 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
 import type { DetailedHTMLProps, IframeHTMLAttributes } from 'react';
-import styled, { css } from 'reshadow';
 
-import { useStyles } from './useStyles';
+import style from './Iframe.m.css';
+import { s } from './s';
+import { useS } from './useS';
 
-const styles = css`
-  iframe {
-    composes: theme-border-color-background from global;
-    border: 1px solid;
-  }
-`;
+export const Iframe = observer<DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>>(function Iframe(props) {
+  const styles = useS(style);
 
-export const Iframe: React.FC<DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>> = function Iframe(props) {
-  return styled(useStyles(styles))(<iframe {...props} />);
-};
+  return <iframe className={s(styles, { iframe: true })} {...props} />;
+});
diff --git a/webapp/packages/core-blocks/src/InfoItem.m.css b/webapp/packages/core-blocks/src/InfoItem.m.css
new file mode 100644
index 0000000000..b81efe3490
--- /dev/null
+++ b/webapp/packages/core-blocks/src/InfoItem.m.css
@@ -0,0 +1,10 @@
+.infoItem {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+.iconOrImage {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+}
diff --git a/webapp/packages/core-blocks/src/InfoItem.tsx b/webapp/packages/core-blocks/src/InfoItem.tsx
index e4f31ec551..0bbda9b9b7 100644
--- a/webapp/packages/core-blocks/src/InfoItem.tsx
+++ b/webapp/packages/core-blocks/src/InfoItem.tsx
@@ -6,12 +6,14 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import type { TLocalizationToken } from '@cloudbeaver/core-localization';
 
 import { IconOrImage } from './IconOrImage';
+import style from './InfoItem.m.css';
 import { useTranslate } from './localization/useTranslate';
+import { s } from './s';
+import { useS } from './useS';
 
 export interface IInfoItem {
   info: TLocalizationToken;
@@ -22,25 +24,14 @@ interface Props extends IInfoItem {
   className?: string;
 }
 
-const styles = css`
-  info-item {
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
-  }
-  IconOrImage {
-    width: 24px;
-    height: 24px;
-    margin-right: 16px;
-  }
-`;
-
 export const InfoItem = observer<Props>(function InfoItem({ info, icon = '/icons/info_icon.svg', className }) {
+  const styles = useS(style);
+
   const translate = useTranslate();
-  return styled(styles)(
-    <info-item className={className}>
-      <IconOrImage icon={icon} />
+  return (
+    <div className={s(styles, { infoItem: true }, className)}>
+      <IconOrImage className={s(styles, { iconOrImage: true })} icon={icon} />
       {translate(info)}
-    </info-item>,
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Link.m.css b/webapp/packages/core-blocks/src/Link.m.css
new file mode 100644
index 0000000000..71050be8b4
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Link.m.css
@@ -0,0 +1,25 @@
+.linkContainer {
+  &.inline {
+    display: inline;
+  }
+
+  & a {
+    position: relative;
+    cursor: pointer;
+  }
+}
+.link.wrapper {
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    color: inherit;
+    text-decoration: none !important;
+    outline: none;
+  }
+}
+.iconOrImage {
+  position: absolute;
+  width: 8px;
+  left: calc(100% + 4px);
+}
diff --git a/webapp/packages/core-blocks/src/Link.tsx b/webapp/packages/core-blocks/src/Link.tsx
index cb4ae51c0f..fb7ccef3f4 100644
--- a/webapp/packages/core-blocks/src/Link.tsx
+++ b/webapp/packages/core-blocks/src/Link.tsx
@@ -5,48 +5,29 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css, use } from 'reshadow';
+import { observer } from 'mobx-react-lite';
 
 import { IconOrImage } from './IconOrImage';
+import style from './Link.m.css';
+import { s } from './s';
+import { useS } from './useS';
 
 interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   wrapper?: boolean;
   indicator?: boolean;
   inline?: boolean;
+  children?: React.ReactNode;
 }
 
-const styles = css`
-  div[|inline] {
-    display: inline;
-  }
-  a {
-    position: relative;
-    cursor: pointer;
-  }
-  a[|wrapper] {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: inherit;
-      text-decoration: none !important;
-      outline: none;
-    }
-  }
-  IconOrImage {
-    position: absolute;
-    width: 8px;
-    left: calc(100% + 4px);
-  }
-`;
+export const Link = observer<Props>(function Link({ inline, wrapper, indicator, className, children, ...rest }) {
+  const styles = useS(style);
 
-export const Link: React.FC<Props> = function Link({ inline, wrapper, indicator, className, children, ...rest }) {
-  return styled(styles)(
-    <div className={className} {...use({ inline })}>
-      <a {...use({ wrapper })} {...rest}>
-        {indicator && <IconOrImage icon="external-link" />}
+  return (
+    <div className={s(styles, { linkContainer: true, inline }, className)}>
+      <a className={s(styles, { link: true, wrapper })} {...rest}>
+        {indicator && <IconOrImage className={s(styles, { iconOrImage: true })} icon="external-link" />}
         {children}
       </a>
-    </div>,
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
index a25ee89a7d..9319dae9cd 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
@@ -11,12 +11,15 @@ import { useCallback, useMemo, useState } from 'react';
 import styled from 'reshadow';
 
 import { Button } from '../Button';
+import ButtonStyles from '../Button.m.css';
 import { Filter } from '../FormControls/Filter';
 import { useTranslate } from '../localization/useTranslate';
+import { SContext, StyleRegistry } from '../SContext';
 import { useObjectRef } from '../useObjectRef';
 import type { IProperty } from './IProperty';
+import PropertiesTableAddButtonStyles from './PropertiesTableAddButtonStyles.m.css';
 import { PropertyItem } from './PropertyItem';
-import { PROPERTIES_FILTER_STYLES, PROPERTIES_TABLE_ADD_STYLES, PROPERTIES_TABLE_STYLES } from './styles';
+import { PROPERTIES_FILTER_STYLES, PROPERTIES_TABLE_STYLES } from './styles';
 
 type PropertiesState = Record<string, string | null>;
 
@@ -32,6 +35,16 @@ interface Props {
   filterable?: boolean;
 }
 
+const registry: StyleRegistry = [
+  [
+    ButtonStyles,
+    {
+      mode: 'append',
+      styles: [PropertiesTableAddButtonStyles],
+    },
+  ],
+];
+
 export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
   const { className, onAdd, readOnly, propertiesState } = props;
   const translate = useTranslate();
@@ -133,11 +146,13 @@ export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
       </properties-header>
       <properties-list>
         {onAdd && !readOnly && (
-          <properties-header-add>
-            <Button icon="add_sm" viewBox="0 0 18 18" type="button" styles={PROPERTIES_TABLE_ADD_STYLES} onClick={() => onAdd()}>
-              {translate('core_block_properties_table_add')}
-            </Button>
-          </properties-header-add>
+          <SContext registry={registry}>
+            <properties-header-add>
+              <Button icon="add_sm" viewBox="0 0 18 18" type="button" onClick={() => onAdd()}>
+                {translate('core_block_properties_table_add')}
+              </Button>
+            </properties-header-add>
+          </SContext>
         )}
         {sortedProperties.get().map(property => (
           <PropertyItem
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTableAddButtonStyles.m.css b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTableAddButtonStyles.m.css
new file mode 100644
index 0000000000..b22f18246e
--- /dev/null
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTableAddButtonStyles.m.css
@@ -0,0 +1,8 @@
+.buttonIcon {
+  margin-right: 0px !important;
+}
+.buttonLabel {
+  composes: theme-typography--caption from global;
+  text-transform: initial;
+  font-weight: 600;
+}
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/styles.ts b/webapp/packages/core-blocks/src/PropertiesTable/styles.ts
index 477dcd11ef..425b89222d 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/styles.ts
+++ b/webapp/packages/core-blocks/src/PropertiesTable/styles.ts
@@ -91,14 +91,3 @@ export const PROPERTIES_FILTER_STYLES = css`
     }
   }
 `;
-
-export const PROPERTIES_TABLE_ADD_STYLES = css`
-  button-icon {
-    margin-right: 0px !important;
-  }
-  button-label {
-    composes: theme-typography--caption from global;
-    text-transform: initial;
-    font-weight: 600;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/Slide/SlideBox.m.css b/webapp/packages/core-blocks/src/Slide/SlideBox.m.css
new file mode 100644
index 0000000000..71404faac8
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Slide/SlideBox.m.css
@@ -0,0 +1,4 @@
+.slideBox {
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/webapp/packages/core-blocks/src/Slide/SlideBox.tsx b/webapp/packages/core-blocks/src/Slide/SlideBox.tsx
index 471a614215..926d5ff85f 100644
--- a/webapp/packages/core-blocks/src/Slide/SlideBox.tsx
+++ b/webapp/packages/core-blocks/src/Slide/SlideBox.tsx
@@ -5,14 +5,24 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
 import { useEffect, useRef } from 'react';
 
+import { s, useS } from '../index';
+import SlideBoxStyles from './SlideBox.m.css';
+import SlideBoxElementStyles from './SlideElement.m.css';
+import SlideBoxOverlayStyles from './SlideOverlay.m.css';
+
 interface Props {
-  open?: boolean;
   className?: string;
+  children?: React.ReactNode;
+  open?: boolean;
 }
 
-export const SlideBox: React.FC<React.PropsWithChildren<Props>> = function SlideBox({ children, className }) {
+export const SlideBox = observer<Props>(function SlideBox({ children, open, className }) {
+  const slideBoxStyles = useS(SlideBoxStyles);
+  const slideBoxElementStyles = useS(SlideBoxElementStyles);
+  const slideBoxOverlayStyles = useS(SlideBoxOverlayStyles);
   const divRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -37,8 +47,11 @@ export const SlideBox: React.FC<React.PropsWithChildren<Props>> = function Slide
   }, []);
 
   return (
-    <div ref={divRef} className={className}>
+    <div
+      ref={divRef}
+      className={s(slideBoxStyles, { slideBox: true}, s(slideBoxElementStyles, { open }), s(slideBoxOverlayStyles, { open }), className)}
+    >
       {children}
     </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Slide/SlideElement.m.css b/webapp/packages/core-blocks/src/Slide/SlideElement.m.css
new file mode 100644
index 0000000000..8e8bf031b8
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Slide/SlideElement.m.css
@@ -0,0 +1,22 @@
+.slideElement {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+  transform: translateX(-100%);
+
+  &:first-child {
+    transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+    width: 100%;
+  }
+}
+
+.open .slideElement {
+  transform: translateX(0%);
+
+  &:first-child {
+    width: calc(100% - 120px);
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Slide/SlideElement.tsx b/webapp/packages/core-blocks/src/Slide/SlideElement.tsx
index d25a30fe04..1232635cf9 100644
--- a/webapp/packages/core-blocks/src/Slide/SlideElement.tsx
+++ b/webapp/packages/core-blocks/src/Slide/SlideElement.tsx
@@ -5,11 +5,20 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './SlideElement.m.css';
 
 interface Props {
   className?: string;
+  children?: React.ReactNode;
+  open?: boolean;
 }
 
-export const SlideElement: React.FC<React.PropsWithChildren<Props>> = function SlideElement({ children, className }) {
-  return <div className={className}>{children}</div>;
-};
+export const SlideElement = observer<Props>(function SlideElement({ children, className }) {
+  const styles = useS(style);
+
+  return <div className={s(styles, { slideElement: true }, className)}>{children}</div>;
+});
diff --git a/webapp/packages/core-blocks/src/Slide/SlideOverlay.m.css b/webapp/packages/core-blocks/src/Slide/SlideOverlay.m.css
new file mode 100644
index 0000000000..24fe671718
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Slide/SlideOverlay.m.css
@@ -0,0 +1,40 @@
+.slideOverlay {
+  z-index: 1;
+  position: absolute;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 0;
+  background: rgb(0 0 0 / 0%);
+  transition: background cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+}
+
+.iconBtn {
+  composes: theme-background-surface theme-text-on-surface theme-ripple from global;
+  box-sizing: border-box;
+  margin-left: 36px;
+  width: 48px;
+  height: 48px;
+  padding: 16px;
+  border-radius: 50%;
+  display: none;
+  overflow: hidden;
+  align-items: center;
+  transform: rotate(90deg);
+}
+.icon {
+  width: 100%;
+}
+
+.open .slideOverlay {
+  width: 100%;
+  height: 100%;
+  background: rgb(0 0 0 / 35%);
+
+  & > div {
+    display: flex;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Slide/SlideOverlay.tsx b/webapp/packages/core-blocks/src/Slide/SlideOverlay.tsx
index 32a5b01b12..e3c01e15b9 100644
--- a/webapp/packages/core-blocks/src/Slide/SlideOverlay.tsx
+++ b/webapp/packages/core-blocks/src/Slide/SlideOverlay.tsx
@@ -5,43 +5,28 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
 
 import { Icon } from '../Icon';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './SlideOverlay.m.css';
 
 interface Props {
   className?: string;
   onClick?: () => void;
+  open?: boolean;
 }
 
-const styles = css`
-  div {
-    z-index: 1;
-  }
-  icon-btn {
-    composes: theme-background-surface theme-text-on-surface theme-ripple from global;
-    box-sizing: border-box;
-    margin-left: 36px;
-    width: 48px;
-    height: 48px;
-    padding: 16px;
-    border-radius: 50%;
-    display: none;
-    overflow: hidden;
-    align-items: center;
-    transform: rotate(90deg);
-  }
-  Icon {
-    width: 100%;
-  }
-`;
+export const SlideOverlay = observer<Props>(function SlideOverlay({ className, onClick }) {
+  const styles = useS(style);
 
-export const SlideOverlay: React.FC<Props> = function SlideOverlay({ className, onClick }) {
-  return styled(styles)(
-    <div className={className} onClick={onClick}>
-      <icon-btn>
-        <Icon name="angle" viewBox="0 0 15 8" />
-      </icon-btn>
-    </div>,
+  return (
+    <div className={s(styles, { slideOverlay: true }, className)} onClick={onClick}>
+      <div className={s(styles, { iconBtn: true })}>
+        <Icon className={s(styles, { icon: true })} name="angle" viewBox="0 0 15 8" />
+      </div>
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/Split/Pane.m.css b/webapp/packages/core-blocks/src/Split/Pane.m.css
new file mode 100644
index 0000000000..c568a40f92
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Split/Pane.m.css
@@ -0,0 +1,6 @@
+.pane {
+  flex: 1 1 0%;
+  overflow: auto;
+  z-index: 0;
+  display: flex;
+}
diff --git a/webapp/packages/core-blocks/src/Split/Pane.tsx b/webapp/packages/core-blocks/src/Split/Pane.tsx
index 3db678268b..ebde075b93 100644
--- a/webapp/packages/core-blocks/src/Split/Pane.tsx
+++ b/webapp/packages/core-blocks/src/Split/Pane.tsx
@@ -6,7 +6,14 @@
  * you may not use this file except in compliance with the License.
  */
 import { Pane as BasePane, PaneProps } from 'go-split';
+import { observer } from 'mobx-react-lite';
 
-export function Pane(props: PaneProps) {
-  return <BasePane {...props} />;
-}
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './Pane.m.css';
+
+export const Pane = observer<PaneProps>(function Pane({ className, ...rest }) {
+  const styles = useS(style);
+
+  return <BasePane className={s(styles, { pane: true }, className)} {...rest} />;
+});
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
new file mode 100644
index 0000000000..ae669a3aa0
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Split/Split.m.css
@@ -0,0 +1,15 @@
+.split {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  z-index: 0;
+
+  &.vertical {
+    flex-direction: row;
+  }
+
+  &.horizontal {
+    flex-direction: column;
+    height: 100%;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Split/Split.tsx b/webapp/packages/core-blocks/src/Split/Split.tsx
index 7961c1b295..04f04522a4 100644
--- a/webapp/packages/core-blocks/src/Split/Split.tsx
+++ b/webapp/packages/core-blocks/src/Split/Split.tsx
@@ -6,9 +6,19 @@
  * you may not use this file except in compliance with the License.
  */
 import { Split as BaseSplit, SplitProps } from 'go-split';
+import { observer } from 'mobx-react-lite';
+
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './Split.m.css';
 
 export type ISplitProps = SplitProps;
 
-export function Split(props: ISplitProps) {
-  return <BaseSplit {...props} />;
-}
+export const Split = observer<ISplitProps>(function Split({ className, split, ...rest }) {
+  const styles = useS(style);
+
+  const vertical = split === 'vertical' || split === undefined;
+  const horizontal = split === 'horizontal';
+
+  return <BaseSplit className={s(styles, { split: true, vertical, horizontal }, className)} split={split} {...rest} />;
+});
diff --git a/webapp/packages/core-blocks/src/Split/styles.ts b/webapp/packages/core-blocks/src/Split/styles.ts
deleted file mode 100644
index 27276d2b4d..0000000000
--- a/webapp/packages/core-blocks/src/Split/styles.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-import { css } from 'reshadow';
-
-export const splitStyles = css`
-  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;
-  }
-`;
-
-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/StatusMessage.m.css b/webapp/packages/core-blocks/src/StatusMessage.m.css
new file mode 100644
index 0000000000..0ff3f4b1c3
--- /dev/null
+++ b/webapp/packages/core-blocks/src/StatusMessage.m.css
@@ -0,0 +1,21 @@
+.statusMessage {
+  overflow: hidden;
+  composes: theme-typography--caption from global;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.iconOrImage {
+  height: 24px;
+  width: 24px;
+}
+.message,
+.link {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.link {
+  cursor: pointer;
+}
diff --git a/webapp/packages/core-blocks/src/StatusMessage.tsx b/webapp/packages/core-blocks/src/StatusMessage.tsx
index 6493721618..5ebdac57c2 100644
--- a/webapp/packages/core-blocks/src/StatusMessage.tsx
+++ b/webapp/packages/core-blocks/src/StatusMessage.tsx
@@ -6,38 +6,16 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import { ENotificationType } from '@cloudbeaver/core-events';
 
 import { IconOrImage } from './IconOrImage';
 import { Link } from './Link';
 import { useTranslate } from './localization/useTranslate';
+import { s } from './s';
+import style from './StatusMessage.m.css';
 import { useErrorDetails } from './useErrorDetails';
-
-const styles = css`
-  status-message {
-    overflow: hidden;
-    composes: theme-typography--caption from global;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  IconOrImage {
-    height: 24px;
-    width: 24px;
-  }
-  message,
-  Link {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  Link {
-    cursor: pointer;
-  }
-`;
+import { useS } from './useS';
 
 interface Props {
   message?: string | string[] | null;
@@ -48,6 +26,7 @@ interface Props {
 }
 
 export const StatusMessage = observer<Props>(function StatusMessage({ type, message, exception = null, className, onShowDetails }) {
+  const styles = useS(style);
   const translate = useTranslate();
   const errorDetails = useErrorDetails(exception);
   const isError = type === ENotificationType.Error || exception !== null;
@@ -71,14 +50,22 @@ export const StatusMessage = observer<Props>(function StatusMessage({ type, mess
     onShowDetails = errorDetails.open;
   }
 
-  return styled(styles)(
-    <status-message className={className}>
+  return (
+    <div className={s(styles, { statusMessage: true }, className)}>
       {message && (
         <>
-          <IconOrImage icon={icon} />
-          <message title={message}>{onShowDetails ? <Link onClick={onShowDetails}>{message}</Link> : message}</message>
+          <IconOrImage className={s(styles, { iconOrImage: true })} icon={icon} />
+          <div className={s(styles, { message: true })} title={message}>
+            {onShowDetails ? (
+              <Link className={s(styles, { link: true })} onClick={onShowDetails}>
+                {message}
+              </Link>
+            ) : (
+              message
+            )}
+          </div>
         </>
       )}
-    </status-message>,
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/TextPlaceholder.m.css b/webapp/packages/core-blocks/src/TextPlaceholder.m.css
new file mode 100644
index 0000000000..bb171c3539
--- /dev/null
+++ b/webapp/packages/core-blocks/src/TextPlaceholder.m.css
@@ -0,0 +1,12 @@
+.container {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 230px;
+  margin: auto;
+}
+.content {
+  margin: auto;
+  text-align: center;
+}
diff --git a/webapp/packages/core-blocks/src/TextPlaceholder.tsx b/webapp/packages/core-blocks/src/TextPlaceholder.tsx
index ee0349d773..47c72d3215 100644
--- a/webapp/packages/core-blocks/src/TextPlaceholder.tsx
+++ b/webapp/packages/core-blocks/src/TextPlaceholder.tsx
@@ -5,31 +5,22 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { css } from 'reshadow';
-
-const TextPlaceholderStyles = css`
-  div {
-    flex: 1;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    min-width: 230px;
-    margin: auto;
-  }
-  span {
-    margin: auto;
-    text-align: center;
-  }
-`;
+import { s } from './s';
+import style from './TextPlaceholder.m.css';
+import { useS } from './useS';
+import {observer} from "mobx-react-lite";
 
 interface Props {
   className?: string;
+  children?: React.ReactNode;
 }
 
-export const TextPlaceholder: React.FC<React.PropsWithChildren<Props>> = function TextPlaceholder(props) {
-  return styled(TextPlaceholderStyles)(
-    <div>
-      <span className={props.className}>{props.children}</span>
-    </div>,
+export const TextPlaceholder = observer<Props>(function TextPlaceholder({ className, children }) {
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { container: true })}>
+      <span className={s(styles, { content: true }, className)}>{children}</span>
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/TimerIcon.m.css b/webapp/packages/core-blocks/src/TimerIcon.m.css
new file mode 100644
index 0000000000..bfe95f5651
--- /dev/null
+++ b/webapp/packages/core-blocks/src/TimerIcon.m.css
@@ -0,0 +1,49 @@
+.timer {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+
+  & > .icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  & .state {
+    opacity: 0;
+
+    & > .icon {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+.state,
+.interval {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  width: 16px;
+  height: 16px;
+  justify-content: center;
+  align-items: center;
+}
+.timer {
+  &:hover {
+    & .state {
+      opacity: 1;
+    }
+    & .interval {
+      opacity: 0;
+    }
+  }
+
+}
+.interval {
+  font-size: 8px;
+  font-weight: bold;
+  line-height: normal;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/webapp/packages/core-blocks/src/TimerIcon.tsx b/webapp/packages/core-blocks/src/TimerIcon.tsx
index 6cc7755fd4..5eaeae4c3b 100644
--- a/webapp/packages/core-blocks/src/TimerIcon.tsx
+++ b/webapp/packages/core-blocks/src/TimerIcon.tsx
@@ -6,79 +6,28 @@
  * you may not use this file except in compliance with the License.
  */
 import type React from 'react';
-import styled, { css } from 'reshadow';
-
-import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Icon } from './Icon';
-import { useStyles } from './useStyles';
-
-const style = css`
-  timer {
-    position: relative;
-    width: 16px;
-    height: 16px;
-    overflow: hidden;
-
-    & > Icon {
-      width: 16px;
-      height: 16px;
-    }
-
-    & state {
-      opacity: 0;
-
-      & > Icon {
-        width: 12px;
-        height: 12px;
-      }
-    }
-  }
-  state,
-  interval {
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    width: 16px;
-    height: 16px;
-    justify-content: center;
-    align-items: center;
-  }
-  timer:hover {
-    & state {
-      opacity: 1;
-    }
-    & interval {
-      opacity: 0;
-    }
-  }
-  interval {
-    font-size: 8px;
-    font-weight: bold;
-    line-height: normal;
-    justify-content: center;
-    align-items: center;
-  }
-`;
+import { s } from './s';
+import style from './TimerIcon.m.css';
+import { useS } from './useS';
+import {observer} from "mobx-react-lite";
 
 interface Props {
   state: 'play' | 'stop';
   interval: number;
-  styles?: ComponentStyle;
 }
 
-export const TimerIcon: React.FC<Props & React.ButtonHTMLAttributes<HTMLDivElement>> = function TimerIcon({ state, interval, styles, ...rest }) {
-  return styled(
-    style,
-    useStyles(styles),
-  )(
-    <timer {...rest}>
-      <Icon name="/icons/timer_m.svg#root" viewBox="0 0 24 24" />
-      <state>
-        <Icon name={`/icons/timer-${state}_m.svg#root`} viewBox="0 0 12 12" />
-      </state>
-      <interval>{interval}</interval>
-    </timer>,
+export const TimerIcon = observer<Props & React.ButtonHTMLAttributes<HTMLDivElement>>(function TimerIcon({ state, interval, ...rest }) {
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { timer: true })} {...rest}>
+      <Icon className={s(styles, { icon: true })} name="/icons/timer_m.svg#root" viewBox="0 0 24 24" />
+      <div className={s(styles, { state: true })}>
+        <Icon className={s(styles, { icon: true })} name={`/icons/timer-${state}_m.svg#root`} viewBox="0 0 12 12" />
+      </div>
+      <div className={s(styles, { interval: true })}>{interval}</div>
+    </div>
   );
-};
+});
diff --git a/webapp/packages/core-blocks/src/UploadArea.m.css b/webapp/packages/core-blocks/src/UploadArea.m.css
new file mode 100644
index 0000000000..8b06412e90
--- /dev/null
+++ b/webapp/packages/core-blocks/src/UploadArea.m.css
@@ -0,0 +1,8 @@
+.label {
+  cursor: pointer;
+  width: fit-content;
+
+  &.disabled {
+    cursor: default;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/UploadArea.tsx b/webapp/packages/core-blocks/src/UploadArea.tsx
index ad7a7f00c0..a311f2b2b3 100644
--- a/webapp/packages/core-blocks/src/UploadArea.tsx
+++ b/webapp/packages/core-blocks/src/UploadArea.tsx
@@ -5,12 +5,15 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
 import { forwardRef, useLayoutEffect } from 'react';
-import styled, { css, use } from 'reshadow';
 
 import { uuid } from '@cloudbeaver/core-utils';
 
+import { s } from './s';
+import style from './UploadArea.m.css';
 import { useRefInherit } from './useRefInherit';
+import { useS } from './useS';
 
 interface Props extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'value'> {
   value?: FileList | null;
@@ -19,46 +22,35 @@ interface Props extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<H
   reset?: boolean;
 }
 
-const styles = css`
-  label {
-    cursor: pointer;
-    width: fit-content;
+export const UploadArea = observer(
+  forwardRef<HTMLInputElement, Props>(function UploadArea({ id = uuid(), value, reset, children, className, ...rest }, refInherit) {
+    const styles = useS(style);
+    const ref = useRefInherit<HTMLInputElement>(refInherit);
 
-    &[|disabled] {
-      cursor: default;
-    }
-  }
-`;
+    const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (rest.onChange) {
+        await (rest.onChange(event) as void | Promise<void>);
 
-export const UploadArea = forwardRef<HTMLInputElement, Props>(function UploadArea(
-  { id = uuid(), value, reset, children, className, ...rest },
-  refInherit,
-) {
-  const ref = useRefInherit<HTMLInputElement>(refInherit);
-
-  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (rest.onChange) {
-      await (rest.onChange(event) as void | Promise<void>);
-
-      if (reset) {
-        const target = event.target as HTMLInputElement;
-        target.value = '';
+        if (reset) {
+          const target = event.target as HTMLInputElement;
+          target.value = '';
+        }
       }
-    }
-  };
+    };
 
-  useLayoutEffect(() => {
-    if (ref.current && value !== undefined) {
-      ref.current.files = value;
-    }
-  });
-
-  return styled(styles)(
-    <>
-      <input ref={ref} {...rest} type="file" id={id} hidden onChange={handleChange} />
-      <label htmlFor={id} {...use({ disabled: rest.disabled })} className={className} title={rest.title}>
-        {children}
-      </label>
-    </>,
-  );
-});
+    useLayoutEffect(() => {
+      if (ref.current && value !== undefined) {
+        ref.current.files = value;
+      }
+    });
+
+    return (
+      <>
+        <input ref={ref} {...rest} type="file" id={id} hidden onChange={handleChange} />
+        <label className={s(styles, { label: true, disabled: rest.disabled }, className)} htmlFor={id} title={rest.title}>
+          {children}
+        </label>
+      </>
+    );
+  }),
+);
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 55d1767248..837dab904c 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -62,11 +62,10 @@ export * from './PropertiesTable/PropertiesTable';
 export * from './PropertiesTable/IProperty';
 
 export * from './Slide/SlideBox';
-export * from './Slide/SlideBoxStyles';
 export * from './Slide/SlideElement';
 export * from './Slide/SlideOverlay';
+export { default as SlideBoxStyles } from './Slide/SlideBox.m.css';
 
-export * from './Split/styles';
 export * from './Split/SplitControls';
 export * from './Split/Pane';
 export * from './Split/ResizerControls';
@@ -93,7 +92,6 @@ export * from './Table/TableSelect';
 export * from './Table/getSelectedItems';
 
 export * from './Expand/Expandable';
-export * from './Expand/EXPANDABLE_FORM_STYLES';
 
 export * from './Tree/TreeNode/EventTreeNodeClickFlag';
 export * from './Tree/TreeNode/EventTreeNodeExpandFlag';
@@ -108,6 +106,7 @@ export * from './Tree/TreeNode/TreeNodeNested';
 export * from './Tree/TreeNode/TreeNodeNestedMessage';
 export * from './Tree/TreeNode/TreeNodeSelect';
 export * from './Button';
+export { default as ButtonStyles } from './Button.m.css';
 export * from './ToolsPanel/ToolsAction';
 export * from './ToolsPanel/ToolsPanel';
 export { default as ToolsPanelStyles } from './ToolsPanel/ToolsPanel.m.css';
@@ -163,11 +162,13 @@ export * from './FormControls/useForm';
 export * from './FormControls/Textarea';
 export * from './Link';
 export * from './Cell';
+export { default as CellStyles } from './Cell.m.css';
 export * from './UploadArea';
 export * from './ErrorMessage';
 export * from './preventFocusHandler';
 export * from './StatusMessage';
 export * from './ExceptionMessage';
+export { default as ExceptionMessageStyles } from './ExceptionMessage.m.css';
 export * from './getComputed';
 export * from './IconButton';
 export { default as IconButtonStyles } from './IconButton.m.css';
diff --git a/webapp/packages/plugin-administration/src/Administration/Administration.tsx b/webapp/packages/plugin-administration/src/Administration/Administration.tsx
index fa5d9cb2f8..5d73b38c6e 100644
--- a/webapp/packages/plugin-administration/src/Administration/Administration.tsx
+++ b/webapp/packages/plugin-administration/src/Administration/Administration.tsx
@@ -14,7 +14,6 @@ import {
   Loader,
   SContext,
   SlideBox,
-  slideBoxStyles,
   SlideElement,
   SlideOverlay,
   StyleRegistry,
@@ -120,7 +119,7 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
     contentRef.current?.scrollTo({ top: 0, left: 0 });
   }, [activeScreen?.item]);
 
-  return styled(useStyles(BASE_TAB_STYLES, verticalTabStyles, administrationStyles, tabsStyles, slideBoxStyles))(
+  return styled(useStyles(BASE_TAB_STYLES, verticalTabStyles, administrationStyles, tabsStyles))(
     <CaptureView view={administrationViewService}>
       <SContext registry={registry}>
         <AdministrationCaptureViewContext />
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx
index ac92393a36..347a1c0705 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProviderPropertiesForm.tsx
@@ -10,7 +10,6 @@ import { observer } from 'mobx-react-lite';
 import {
   Container,
   Expandable,
-  EXPANDABLE_FORM_STYLES,
   getPropertyControlType,
   Group,
   GroupTitle,
@@ -77,7 +76,7 @@ export const ProviderPropertiesForm = observer<Props>(function ProviderPropertie
 
       {categories.map((category, index) => (
         <Container key={`${category}_${config.driverId}`} gap>
-          <Expandable style={EXPANDABLE_FORM_STYLES} label={category} defaultExpanded={index === 0}>
+          <Expandable label={category} defaultExpanded={index === 0}>
             <Container dense={isOnlyBooleans(supportedProperties, category)} wrap gap>
               <ObjectPropertyInfoForm
                 properties={supportedProperties}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
index a484f2cbff..6bfb43895f 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
@@ -15,7 +15,6 @@ import {
   Combobox,
   Container,
   Expandable,
-  EXPANDABLE_FORM_STYLES,
   FieldCheckbox,
   Form,
   Group,
@@ -179,7 +178,7 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
             </FieldCheckbox>
           )}
           <Container gap>
-            <Expandable style={EXPANDABLE_FORM_STYLES} label={translate('connections_network_handler_ssh_tunnel_advanced_settings')}>
+            <Expandable label={translate('connections_network_handler_ssh_tunnel_advanced_settings')}>
               <Container gap>
                 <InputField
                   type="number"
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..089c343f8a
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.m.css
@@ -0,0 +1,57 @@
+.split {
+  &:not(.disabled) {
+    gap: 8px;
+  }
+}
+
+.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;
+}
+.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 066b65ce0f..168d57c1a9 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;
@@ -122,6 +66,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);
@@ -255,13 +200,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}
@@ -270,12 +213,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}
@@ -292,12 +242,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}
@@ -308,14 +258,15 @@ export const TableViewer = observer<Props, HTMLDivElement>(
                         simple={simple}
                       />
                     )}
-                  </pane-content>
+                  </div>
                 </Loader>
               </Pane>
             </Split>
-          </table-data>
+          </div>
           {!simple && (
             <TablePresentationBar
               type={DataPresentationType.toolsPanel}
+              className={s(styles, { tablePresentationBar: true })}
               presentationId={valuePresentationId ?? null}
               dataFormat={dataFormat}
               supportedDataFormat={[dataFormat]}
@@ -325,9 +276,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..8169d0ce49
--- /dev/null
+++ b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewer.m.css
@@ -0,0 +1,9 @@
+.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..008016ac7c 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,15 @@ 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
+        {...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 +50,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..ca5ced83f6
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor.m.css
@@ -0,0 +1,12 @@
+.captureView {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+  position: relative;
+}
+.pane {
+  composes: theme-typography--body2 from global;
+}
+.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..94d2ffd11b 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}>
+      <CaptureView className={s(styles, { captureView: true })} view={sqlEditorView}>
         <Split {...splitState} split="horizontal" sticky={30}>
-          <Pane>
+          <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..8d3334339a
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/ExecutionPlanTreeBlock.m.css
@@ -0,0 +1,3 @@
+.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..b8fd35c59a 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,15 +36,13 @@ 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>
+  return (
+    <Split {...splitState} sticky={30} split="horizontal" keepRatio>
       <Pane>
         {state.nodes.length && state.columns.length ? (
           <Table selectedItems={state.selectedNodes} onSelect={state.selectNode}>
@@ -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..4229ea48ab
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlResultTabs/ExecutionPlan/SqlExecutionPlanPanel.m.css
@@ -0,0 +1,5 @@
+.pane {
+  &:first-child {
+    overflow: hidden;
+  }
+}
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..81b3cd2dae 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,15 @@ export const SqlExecutionPlanPanel = observer<Props>(function SqlExecutionPlanPa
     return <Loader cancelDisabled={!data?.task.cancellable} onCancel={() => data?.task.cancel()} />;
   }
 
-  return styled(
-    styles,
-    splitStyles,
-  )(
+  return (
     <Split {...splitState} mode={selectedNode ? splitState.mode : 'minimize'} disable={!selectedNode} sticky={30}>
-      <Pane>
+      <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>
   );
 });
diff --git a/webapp/packages/plugin-version-update-administration/src/VersionChecker.tsx b/webapp/packages/plugin-version-update-administration/src/VersionChecker.tsx
index 71849ada84..ba5fdc12da 100644
--- a/webapp/packages/plugin-version-update-administration/src/VersionChecker.tsx
+++ b/webapp/packages/plugin-version-update-administration/src/VersionChecker.tsx
@@ -6,19 +6,23 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { css } from 'reshadow';
 
-import { Cell, IconOrImage, useTranslate } from '@cloudbeaver/core-blocks';
+import { Cell, CellStyles, IconOrImage, s, SContext, StyleRegistry, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { VersionResource, VersionService } from '@cloudbeaver/core-version';
 import { VersionUpdateService } from '@cloudbeaver/core-version-update';
 
-const style = css`
-  before {
-    width: 40px;
-    height: 40px;
-  }
-`;
+import VersionCheckCellStyles from './VersionCheckerCellStyles.m.css';
+
+const registry: StyleRegistry = [
+  [
+    CellStyles,
+    {
+      mode: 'append',
+      styles: [VersionCheckCellStyles],
+    },
+  ],
+];
 
 export const VersionChecker = observer(function VersionChecker() {
   const translate = useTranslate();
@@ -34,13 +38,10 @@ export const VersionChecker = observer(function VersionChecker() {
       : '';
 
   return (
-    <Cell
-      before={<IconOrImage icon={icon} />}
-      description={versionUpdateService.newVersionAvailable ? description : undefined}
-      style={style}
-      ripple={false}
-    >
-      {translate(text)}
-    </Cell>
+    <SContext registry={registry}>
+      <Cell before={<IconOrImage icon={icon} />} description={versionUpdateService.newVersionAvailable ? description : undefined} ripple={false}>
+        {translate(text)}
+      </Cell>
+    </SContext>
   );
 });
diff --git a/webapp/packages/plugin-version-update-administration/src/VersionCheckerCellStyles.m.css b/webapp/packages/plugin-version-update-administration/src/VersionCheckerCellStyles.m.css
new file mode 100644
index 0000000000..70e16b37a1
--- /dev/null
+++ b/webapp/packages/plugin-version-update-administration/src/VersionCheckerCellStyles.m.css
@@ -0,0 +1,4 @@
+.before {
+  width: 40px;
+  height: 40px;
+}