diff --git a/webapp/packages/core-blocks/src/Button.tsx b/webapp/packages/core-blocks/src/Button.tsx
index 21072af5fb..6bcfab94dd 100644
--- a/webapp/packages/core-blocks/src/Button.tsx
+++ b/webapp/packages/core-blocks/src/Button.tsx
@@ -13,6 +13,7 @@ import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { IconOrImage } from './IconOrImage';
 import { Loader } from './Loader/Loader';
+import { useObjectRef } from './useObjectRef';
 import { useObservableRef } from './useObservableRef';
 import { useStyles } from './useStyles';
 
@@ -123,16 +124,12 @@ export const Button = observer<ButtonProps>(function Button({
   className,
   ...rest
 }) {
+  const handlersRef = useObjectRef({ onClick });
   const state = useObservableRef(
     () => ({
       loading: false,
-    }),
-    {
-      loading: observable.ref,
-    },
-    {
       click(e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLLinkElement | HTMLDivElement>) {
-        const returnValue = onClick?.(e);
+        const returnValue = handlersRef.onClick?.(e);
 
         if (returnValue instanceof Promise) {
           if (loader) {
@@ -143,7 +140,11 @@ export const Button = observer<ButtonProps>(function Button({
           }
         }
       },
+    }),
+    {
+      loading: observable.ref,
     },
+    false,
     ['click'],
   );
 
diff --git a/webapp/packages/core-blocks/src/Fill.m.css b/webapp/packages/core-blocks/src/Fill.m.css
new file mode 100644
index 0000000000..d023b7abd3
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Fill.m.css
@@ -0,0 +1,3 @@
+.fill {
+  flex: 1;
+}
diff --git a/webapp/packages/core-blocks/src/Fill.tsx b/webapp/packages/core-blocks/src/Fill.tsx
new file mode 100644
index 0000000000..ff6837a52b
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Fill.tsx
@@ -0,0 +1,19 @@
+/*
+ * 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 style from './Fill.m.css';
+import { s } from './s';
+import { useS } from './useS';
+
+interface Props {
+  className?: string;
+}
+
+export const Fill: React.FC<Props> = function Fill({ className }) {
+  const styles = useS(style);
+  return <div className={s(styles, { fill: true }, className)} />;
+};
diff --git a/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.m.css b/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.m.css
new file mode 100644
index 0000000000..6069bbea3e
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.m.css
@@ -0,0 +1,5 @@
+.folderExplorerPath {
+    composes: theme-typography--caption from global;
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.tsx b/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.tsx
index 7a11ad662f..50e23740a6 100644
--- a/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.tsx
+++ b/webapp/packages/core-blocks/src/FolderExplorer/FolderExplorerPath.tsx
@@ -7,10 +7,11 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
+import { s } from '../s';
+import { useS } from '../useS';
 import { FolderExplorerContext } from './FolderExplorerContext';
-import { folderExplorerStyles } from './folderExplorerStyles';
+import style from './FolderExplorerPath.m.css';
 import { FolderName } from './FolderName';
 
 interface Props {
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export const FolderExplorerPath = observer<Props>(function FolderExplorerPath({ getName, canSkip, className }) {
+  const styles = useS(style);
   const context = useContext(FolderExplorerContext);
 
   if (!context) {
@@ -60,5 +62,5 @@ export const FolderExplorerPath = observer<Props>(function FolderExplorerPath({
     }
   }
 
-  return styled(folderExplorerStyles)(<folder-explorer-path className={className}>{pathElements}</folder-explorer-path>);
+  return <div className={s(styles, { folderExplorerPath: true }, className)}>{pathElements}</div>;
 });
diff --git a/webapp/packages/core-blocks/src/FolderExplorer/FolderName.m.css b/webapp/packages/core-blocks/src/FolderExplorer/FolderName.m.css
new file mode 100644
index 0000000000..e443aa8525
--- /dev/null
+++ b/webapp/packages/core-blocks/src/FolderExplorer/FolderName.m.css
@@ -0,0 +1,30 @@
+.path {
+    composes: theme-typography--caption from global;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.pathElement {
+    display: flex;
+    align-items: center;
+
+    &:first-child {
+        & .pathElementArrow {
+            display: none;
+        }
+    }
+}
+
+.pathElementArrow {
+    width: 16px;
+    height: 16px;
+    transform: rotate(-90deg);
+    opacity: 0.5;
+}
+
+.pathElementName {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 4px;
+}
diff --git a/webapp/packages/core-blocks/src/FolderExplorer/FolderName.tsx b/webapp/packages/core-blocks/src/FolderExplorer/FolderName.tsx
index 6edbd1cfc5..8fb4f05047 100644
--- a/webapp/packages/core-blocks/src/FolderExplorer/FolderName.tsx
+++ b/webapp/packages/core-blocks/src/FolderExplorer/FolderName.tsx
@@ -7,12 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import styled from 'reshadow';
 
 import { Icon } from '../Icon';
 import { Link } from '../Link';
+import { s } from '../s';
+import { useS } from '../useS';
 import { FolderExplorerContext } from './FolderExplorerContext';
-import { folderExplorerStyles } from './folderExplorerStyles';
+import style from './FolderName.m.css';
 
 interface BaseProps {
   folder?: string;
@@ -36,6 +37,7 @@ interface ShortProps extends BaseProps {
 }
 
 export const FolderName = observer<FolderProps | ShortProps>(function FolderName({ folder, path, title, short, last, getName }) {
+  const styles = useS(style);
   const context = useContext(FolderExplorerContext);
 
   if (!context) {
@@ -57,14 +59,12 @@ export const FolderName = observer<FolderProps | ShortProps>(function FolderName
     path = path.slice(0, path.length - 1);
   }
 
-  return styled(folderExplorerStyles)(
-    <folder-explorer-path-element title={title || name}>
-      <folder-explorer-path-element-arrow>
+  return (
+    <div className={s(styles, { pathElement: true })} title={title || name}>
+      <div className={s(styles, { pathElementArrow: true })}>
         <Icon name="arrow" viewBox="0 0 16 16" />
-      </folder-explorer-path-element-arrow>
-      <folder-explorer-path-element-name>
-        {last ? name : <Link onClick={() => context.open(path, folder!)}>{name}</Link>}
-      </folder-explorer-path-element-name>
-    </folder-explorer-path-element>,
+      </div>
+      <div className={s(styles, { pathElementName: true })}>{last ? name : <Link onClick={() => context.open(path, folder!)}>{name}</Link>}</div>
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/FolderExplorer/folderExplorerStyles.ts b/webapp/packages/core-blocks/src/FolderExplorer/folderExplorerStyles.ts
deleted file mode 100644
index e6dd4adf51..0000000000
--- a/webapp/packages/core-blocks/src/FolderExplorer/folderExplorerStyles.ts
+++ /dev/null
@@ -1,39 +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 folderExplorerStyles = css`
-  folder-explorer-path {
-    composes: theme-typography--caption from global;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  folder-explorer-path-element {
-    display: flex;
-    align-items: center;
-  }
-
-  folder-explorer-path-element-arrow {
-    width: 16px;
-    height: 16px;
-    transform: rotate(-90deg);
-    opacity: 0.5;
-  }
-
-  folder-explorer-path-element-name {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 4px;
-  }
-
-  folder-explorer-path-element:first-child folder-explorer-path-element-arrow {
-    display: none;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts b/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts
index f866859472..d8765c1221 100644
--- a/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts
+++ b/webapp/packages/core-blocks/src/FolderExplorer/useFolderExplorer.ts
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { action, observable } from 'mobx';
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect } from 'react';
 
 import { useObservableRef } from '../useObservableRef';
 import { useUserData } from '../useUserData';
@@ -26,15 +26,17 @@ export function useFolderExplorer(root: string, options: IFolderExplorerOptions
     data => typeof data === 'object' && typeof data.folder === 'string' && Array.isArray(data.path) && Array.isArray(data.fullPath),
   );
 
-  useMemo(
+  const saveState = options.saveState;
+
+  useEffect(
     action(() => {
-      if (!options.saveState) {
+      if (!saveState) {
         userState.folder = root;
         userState.fullPath = [root];
         userState.path = [];
       }
     }),
-    [userState],
+    [userState, saveState],
   );
 
   const data = useObservableRef<IFolderExplorerContext>(
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
index 9e8a1cc245..aec3a63a35 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx
@@ -16,6 +16,7 @@ import { CheckboxMarkup, CheckboxMod } from './CheckboxMarkup';
 import { CheckboxOnChangeEvent, useCheckboxState } from './useCheckboxState';
 
 export interface CheckboxBaseProps {
+  caption?: string;
   mod?: CheckboxMod[];
   ripple?: boolean;
   indeterminate?: boolean;
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx
index 4acf4fd0ff..3c6b8d0ed9 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx
@@ -47,6 +47,9 @@ const checkboxStyles = css`
     composes: theme-typography--body2 from global;
     cursor: pointer;
   }
+  checkbox-caption {
+    composes: theme-text-text-hint-on-light theme-typography--caption from global;
+  }
 `;
 
 const checkboxMod: Record<CheckboxMod, any> = {
@@ -92,6 +95,7 @@ const checkboxState = {
 
 interface ICheckboxMarkupProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
   label?: string;
+  caption?: string;
   indeterminate?: boolean;
   ripple?: boolean;
   mod?: CheckboxMod[];
@@ -110,6 +114,7 @@ export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxM
   ripple = true,
   style,
   readOnly,
+  caption,
   ...rest
 }) {
   const styles = useS(CheckboxMarkupStyles);
@@ -144,6 +149,7 @@ export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxM
       {label && (id || rest.name) && (
         <checkbox-label as="label" htmlFor={id || rest.name}>
           {label}
+          {caption && <checkbox-caption>{caption}</checkbox-caption>}
         </checkbox-label>
       )}
     </checkbox-container>,
diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
index 1b810a38d4..db90e7c33a 100644
--- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx
@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { getLayoutProps } from '../../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../../Containers/filterLayoutFakeProps';
 import elementsSizeStyles from '../../Containers/shared/ElementsSize.m.css';
 import { s } from '../../s';
 import { useS } from '../../useS';
@@ -20,18 +20,21 @@ export const FieldCheckbox: CheckboxType = function FieldCheckbox({
   ...rest
 }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps<any>)) {
   const layoutProps = getLayoutProps(rest);
+  const checkboxProps = filterLayoutFakeProps(rest);
   const styles = useS(elementsSizeStyles, formControlStyles, fieldCheckboxStyles);
 
-  if (rest.autoHide && !isControlPresented(rest.name, rest.state)) {
+  if (checkboxProps.autoHide && !isControlPresented(checkboxProps.name, checkboxProps.state)) {
     return null;
   }
 
   return (
     <div data-testid="field" className={s(styles, { field: true, ...layoutProps }, className)}>
-      <Checkbox {...(rest as CheckboxBaseProps & ICheckboxControlledProps)} className={styles.checkbox} />
-      <label data-testid="field-label" htmlFor={rest.id || rest.name} title={rest.title} className={styles.fieldLabel}>
-        {children}
-      </label>
+      <Checkbox {...(checkboxProps as CheckboxBaseProps & ICheckboxControlledProps)} className={styles.checkbox} />
+      {children && (
+        <label data-testid="field-label" htmlFor={checkboxProps.id || checkboxProps.name} title={checkboxProps.title} className={styles.fieldLabel}>
+          {children}
+        </label>
+      )}
     </div>
   );
 };
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index a456043934..77dfb6ed06 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -12,7 +12,7 @@ import styled, { use } from 'reshadow';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { isNotNullDefined } from '@cloudbeaver/core-utils';
 
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { Icon } from '../Icon';
@@ -100,6 +100,7 @@ export const InputField: InputFieldType = observer(
     const [passwordRevealed, setPasswordRevealed] = useState(false);
     const translate = useTranslate();
     const layoutProps = getLayoutProps(rest);
+    rest = filterLayoutFakeProps(rest);
     const propStyles = useStyles(style);
     const styles = useS(inputFieldStyle, formControlStyles, elementsSizeStyles);
     const context = useContext(FormContext);
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
index f02e852455..1fc5202f6c 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
@@ -13,7 +13,7 @@ import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { blobToData, bytesToSize } from '@cloudbeaver/core-utils';
 
 import { Button } from '../Button';
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { IconButton } from '../IconButton';
@@ -96,6 +96,7 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
   const [error, setError] = useState<Error | null>(null);
 
   const layoutProps = getLayoutProps(rest);
+  rest = filterLayoutFakeProps(rest);
   const styles = useStyles(INPUT_FILE_FIELD_STYLES, baseFormControlStyles, style, error ? baseInvalidFormControlStyles : baseValidFormControlStyles);
   const sizeStyles = useS(elementsSizeStyles);
 
diff --git a/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx b/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
index 085ba2043b..dc9bd10f60 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
@@ -12,7 +12,7 @@ import styled, { css, use } from 'reshadow';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Button } from '../Button';
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { useTranslate } from '../localization/useTranslate';
@@ -110,6 +110,7 @@ export const InputFiles: InputFilesType = observer(
     refInherit: React.Ref<HTMLInputElement>,
   ) {
     const layoutProps = getLayoutProps(rest);
+    rest = filterLayoutFakeProps(rest);
     const ref = useRefInherit<HTMLInputElement>(refInherit);
     const [innerState, setInnerState] = useState<FileList | null>(null);
     const translate = useTranslate();
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index c83225d0c1..bbfaa111a8 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -11,7 +11,7 @@ import styled, { css, use } from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
-import { getLayoutProps } from '../Containers/filterLayoutFakeProps';
+import { filterLayoutFakeProps, getLayoutProps } from '../Containers/filterLayoutFakeProps';
 import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps';
 import elementsSizeStyles from '../Containers/shared/ElementsSize.m.css';
 import { s } from '../s';
@@ -91,6 +91,7 @@ export const Textarea: TextareaType = observer(function Textarea({
   ...rest
 }: ControlledProps | ObjectProps<any, any>) {
   const layoutProps = getLayoutProps(rest);
+  rest = filterLayoutFakeProps(rest);
   const sizeStyles = useS(elementsSizeStyles);
   const context = useContext(FormContext);
 
diff --git a/webapp/packages/core-blocks/src/Overlay/OVERLAY_BASE_STYLES.ts b/webapp/packages/core-blocks/src/Overlay/OVERLAY_BASE_STYLES.ts
deleted file mode 100644
index 46317c1020..0000000000
--- a/webapp/packages/core-blocks/src/Overlay/OVERLAY_BASE_STYLES.ts
+++ /dev/null
@@ -1,127 +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 OVERLAY_BASE_STYLES = css`
-  overlay {
-    composes: theme-text-on-primary from global;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.4);
-
-    &:not([|active]) {
-      display: none;
-    }
-
-    &[|fill] {
-      background-color: var(--theme-background-surface);
-    }
-  }
-
-  overlay {
-    margin: auto;
-  }
-
-  overlay,
-  box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    overflow: auto;
-  }
-
-  box {
-    composes: theme-background-surface theme-text-on-surface theme-elevation-z6 from global;
-    border-radius: 0.25rem;
-    align-items: normal;
-    max-width: calc(100% - 48px);
-    max-height: calc(100% - 48px);
-  }
-
-  overlay[|fill] box {
-    box-shadow: none;
-  }
-
-  actions {
-    gap: 16px;
-    display: flex;
-  }
-
-  header,
-  message,
-  actions {
-    flex-shrink: 0;
-    padding: 24px;
-  }
-
-  message {
-    padding-right: 0px;
-    overflow: auto;
-    flex: 1;
-
-    &:not(:first-child) {
-      padding-top: 0px;
-    }
-  }
-
-  message-box {
-    padding-right: 24px;
-  }
-
-  header {
-    position: relative;
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    flex: 0 0 auto;
-    box-sizing: border-box;
-  }
-
-  header-title,
-  sub-title {
-    max-width: 400px;
-  }
-
-  header-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    min-height: 24px;
-    overflow: auto;
-  }
-
-  icon-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  IconOrImage {
-    width: 24px;
-    height: 24px;
-    margin-right: 16px;
-  }
-
-  h3 {
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  sub-title {
-    composes: theme-typography--caption from global;
-    grid-column: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/Overlay/Overlay.m.css b/webapp/packages/core-blocks/src/Overlay/Overlay.m.css
new file mode 100644
index 0000000000..e3afd4eac0
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/Overlay.m.css
@@ -0,0 +1,39 @@
+.overlay {
+    composes: theme-text-on-primary from global;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    box-shadow: none;
+
+    &.active {
+        display: flex;
+    }
+
+    &.fill {
+        background-color: var(--theme-background-surface);
+        & .box {
+            box-shadow: none;
+        }
+    }
+}
+
+.box {
+    composes: theme-background-surface theme-text-on-surface theme-elevation-z6 from global;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: auto;
+    border-radius: 0.25rem;
+    align-items: normal;
+    max-width: calc(100% - 48px);
+    max-height: calc(100% - 48px);
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/Overlay.tsx b/webapp/packages/core-blocks/src/Overlay/Overlay.tsx
index 95394888ae..8987b68190 100644
--- a/webapp/packages/core-blocks/src/Overlay/Overlay.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/Overlay.tsx
@@ -6,9 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { use } from 'reshadow';
 
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './Overlay.m.css';
 
 interface Props {
   active?: boolean;
@@ -17,13 +18,11 @@ interface Props {
 }
 
 export const Overlay = observer<React.PropsWithChildren<Props>>(function Overlay({ active, fill, className, children }) {
-  if (!active) {
-    return null;
-  }
+  const styles = useS(style);
 
-  return styled(OVERLAY_BASE_STYLES)(
-    <overlay className={className} {...use({ active, fill })}>
-      <box>{children}</box>
-    </overlay>,
+  return (
+    <div className={s(styles, { overlay: true, active, fill }, className)}>
+      <div className={s(styles, { box: true })}>{children}</div>
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayActions.m.css b/webapp/packages/core-blocks/src/Overlay/OverlayActions.m.css
new file mode 100644
index 0000000000..e1377c42ef
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayActions.m.css
@@ -0,0 +1,6 @@
+.actions {
+    gap: 16px;
+    display: flex;
+    flex-shrink: 0;
+    padding: 24px;
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayActions.tsx b/webapp/packages/core-blocks/src/Overlay/OverlayActions.tsx
index 92c27b3084..1ab55b2215 100644
--- a/webapp/packages/core-blocks/src/Overlay/OverlayActions.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayActions.tsx
@@ -6,14 +6,17 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './OverlayActions.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const OverlayActions = observer<React.PropsWithChildren<Props>>(function OverlayActions({ className, children }) {
-  return styled(OVERLAY_BASE_STYLES)(<actions className={className}>{children}</actions>);
+  const styles = useS(style);
+
+  return <div className={s(styles, { actions: true }, className)}>{children}</div>;
 });
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeader.m.css b/webapp/packages/core-blocks/src/Overlay/OverlayHeader.m.css
new file mode 100644
index 0000000000..84c91dec09
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeader.m.css
@@ -0,0 +1,9 @@
+.header {
+    flex-shrink: 0;
+    padding: 24px;
+    position: relative;
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeader.tsx b/webapp/packages/core-blocks/src/Overlay/OverlayHeader.tsx
index b9c7ef92a6..85cc794223 100644
--- a/webapp/packages/core-blocks/src/Overlay/OverlayHeader.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeader.tsx
@@ -5,14 +5,16 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled from 'reshadow';
-
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './OverlayHeader.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const OverlayHeader: React.FC<React.PropsWithChildren<Props>> = function OverlayHeader({ className, children }) {
-  return styled(OVERLAY_BASE_STYLES)(<header className={className}>{children}</header>);
+  const styles = useS(style);
+
+  return <div className={s(styles, { header: true }, className)}>{children}</div>;
 };
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.m.css b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.m.css
new file mode 100644
index 0000000000..eae4c70646
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.m.css
@@ -0,0 +1,11 @@
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconOrImage {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.tsx b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.tsx
index 45df0b3c55..0762bf0903 100644
--- a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderIcon.tsx
@@ -5,10 +5,10 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled from 'reshadow';
-
 import { IconOrImage } from '../IconOrImage';
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './OverlayHeaderIcon.m.css';
 
 interface Props {
   icon?: string;
@@ -17,14 +17,16 @@ interface Props {
 }
 
 export const OverlayHeaderIcon: React.FC<React.PropsWithChildren<Props>> = function OverlayHeaderIcon({ icon, viewBox, className, children }) {
+  const styles = useS(style);
+
   if (!icon && !children) {
     return null;
   }
 
-  return styled(OVERLAY_BASE_STYLES)(
-    <icon-container className={className}>
-      {icon && <IconOrImage icon={icon} viewBox={viewBox} />}
+  return (
+    <div className={s(styles, { iconContainer: true }, className)}>
+      {icon && <IconOrImage className={s(styles, { iconOrImage: true })} icon={icon} viewBox={viewBox} />}
       {children}
-    </icon-container>,
+    </div>
   );
 };
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.m.css b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.m.css
new file mode 100644
index 0000000000..2aeef9deda
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.m.css
@@ -0,0 +1,8 @@
+.subTitle {
+  composes: theme-typography--caption from global;
+  grid-column: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 400px;
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.tsx b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.tsx
index 75de360886..fadf54701a 100644
--- a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderSubTitle.tsx
@@ -5,14 +5,16 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled from 'reshadow';
-
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './OverlayHeaderSubTitle.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const OverlayHeaderSubTitle: React.FC<React.PropsWithChildren<Props>> = function OverlayHeaderSubTitle({ className, children }) {
-  return styled(OVERLAY_BASE_STYLES)(<sub-title className={className}>{children}</sub-title>);
+  const styles = useS(style);
+
+  return <div className={s(styles, { subTitle: true }, className)}>{children}</div>;
 };
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.m.css b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.m.css
new file mode 100644
index 0000000000..5ed06b9043
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.m.css
@@ -0,0 +1,17 @@
+.headerTitle {
+    max-width: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    min-height: 24px;
+    overflow: auto;
+    margin: 0;
+    text-overflow: ellipsis;
+}
+
+.headerTitleContent {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.tsx b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.tsx
index 578d06a9d4..626823a88e 100644
--- a/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayHeaderTitle.tsx
@@ -5,18 +5,20 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled from 'reshadow';
-
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './OverlayHeaderTitle.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const OverlayHeaderTitle: React.FC<React.PropsWithChildren<Props>> = function OverlayHeaderTitle({ className, children }) {
-  return styled(OVERLAY_BASE_STYLES)(
-    <header-title className={className}>
-      <h3>{children}</h3>
-    </header-title>,
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { headerTitle: true }, className)}>
+      <h3 className={s(styles, { headerTitleContent: true })}>{children}</h3>
+    </div>
   );
 };
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayMessage.m.css b/webapp/packages/core-blocks/src/Overlay/OverlayMessage.m.css
new file mode 100644
index 0000000000..9524b2cf11
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayMessage.m.css
@@ -0,0 +1,14 @@
+.message {
+    flex-shrink: 0;
+    padding: 24px 0px 24px 24px;
+    overflow: auto;
+    flex: 1;
+
+    &:not(:first-child) {
+        padding-top: 0px;
+    }
+}
+
+.messageBox {
+    padding-right: 24px;
+}
diff --git a/webapp/packages/core-blocks/src/Overlay/OverlayMessage.tsx b/webapp/packages/core-blocks/src/Overlay/OverlayMessage.tsx
index 62daa21e6c..e587d5dac1 100644
--- a/webapp/packages/core-blocks/src/Overlay/OverlayMessage.tsx
+++ b/webapp/packages/core-blocks/src/Overlay/OverlayMessage.tsx
@@ -6,18 +6,21 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { OVERLAY_BASE_STYLES } from './OVERLAY_BASE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './OverlayMessage.m.css';
 
 interface Props {
   className?: string;
 }
 
 export const OverlayMessage = observer<React.PropsWithChildren<Props>>(function OverlayMessage({ className, children }) {
-  return styled(OVERLAY_BASE_STYLES)(
-    <message className={className}>
-      <message-box>{children}</message-box>
-    </message>,
+  const styles = useS(style);
+
+  return (
+    <div className={s(styles, { message: true }, className)}>
+      <div className={s(styles, { messageBox: true })}>{children}</div>
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
index a1e45cc736..dc2c9aff69 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
@@ -145,6 +145,8 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
   }, [property]);
 
   const focus = menuOpen;
+  const keyPlaceholder = String(property.keyPlaceholder);
+  const valuePlaceholder = String(property.valuePlaceholder);
 
   return styled(styles)(
     <property-item>
@@ -153,7 +155,7 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
           ref={keyInputRef}
           type="text"
           name={property.id}
-          placeholder={property.keyPlaceholder}
+          placeholder={keyPlaceholder}
           readOnly={!isDeletable}
           autoComplete="none"
           onChange={handleKeyChange}
@@ -161,11 +163,11 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
           {property.displayName || property.key}
         </ShadowInput>
       </property-name>
-      <property-value ref={setValueRef} title={propertyValue}>
+      <property-value ref={setValueRef} title={String(propertyValue)}>
         <ShadowInput
           type="text"
           name={`${property.id}_value`}
-          placeholder={property.valuePlaceholder}
+          placeholder={valuePlaceholder}
           autoComplete="none"
           readOnly={readOnly}
           data-focus={focus}
diff --git a/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts b/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts
index 880ba1a5e3..bea59762e6 100644
--- a/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts
+++ b/webapp/packages/core-blocks/src/ResourcesHooks/useResource.ts
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { action, comparer, computed, observable, reaction, toJS, untracked } from 'mobx';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useDeferredValue, useEffect, useState } from 'react';
 
 import { IServiceConstructor, useService } from '@cloudbeaver/core-di';
 import {
@@ -462,26 +462,15 @@ export function useResource<
     };
   }, []);
 
-  useEffect(
-    () =>
-      reaction(
-        () => ({
-          canLoad: result.canLoad,
-          loadKey: propertiesRef.key,
-        }),
-        ({ canLoad, loadKey }) => {
-          refObj.use(loadKey);
-          if (canLoad && !result.isError()) {
-            result.load();
-          }
-        },
-        {
-          fireImmediately: true,
-          delay: 100,
-        },
-      ),
-    [],
-  );
+  const canLoad = useDeferredValue(getComputed(() => result.canLoad));
+  const loadKey = useDeferredValue(getComputed(() => propertiesRef.key));
+
+  useEffect(() => {
+    refObj.use(loadKey);
+    if (canLoad && !result.isError()) {
+      result.load();
+    }
+  }, [canLoad, loadKey]);
 
   if (actions?.forceSuspense) {
     result.data;
diff --git a/webapp/packages/core-blocks/src/Table/BASE_TABLE_STYLES.ts b/webapp/packages/core-blocks/src/Table/BASE_TABLE_STYLES.ts
deleted file mode 100644
index dbb24634d9..0000000000
--- a/webapp/packages/core-blocks/src/Table/BASE_TABLE_STYLES.ts
+++ /dev/null
@@ -1,164 +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 BASE_TABLE_STYLES = css`
-  table {
-    composes: theme-typography--body2 from global;
-    min-width: 100%;
-    text-align: left;
-    border-collapse: collapse;
-    border-color: var(--theme-background);
-
-    & thead {
-      &[|fixed] {
-        background: var(--theme-surface);
-        position: sticky;
-        top: 0;
-        z-index: 1;
-
-        & > tr {
-          border-top: none !important;
-          border-bottom: none !important;
-
-          & > th {
-            box-shadow: inset 0 -1px 0 var(--theme-background);
-          }
-        }
-      }
-    }
-
-    &[|size='big'] {
-      & > thead > tr > th {
-        height: 54px;
-
-        &[|min] {
-          width: 46px;
-        }
-      }
-
-      & > tbody > tr > td {
-        height: 46px;
-      }
-    }
-
-    &[|expanded] {
-      & > tbody > tr:not([|expanded]) {
-        opacity: 0.85;
-      }
-    }
-  }
-
-  tr {
-    outline: none;
-    border-bottom: 1px solid;
-    border-color: var(--theme-background) !important;
-  }
-
-  tbody > tr {
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:focus {
-      border-color: var(--theme-background);
-    }
-
-    &:not([|noHover]):hover,
-    &:not([|noHover])[|selected],
-    &:not([|noHover])[|expanded] {
-      background-color: var(--theme-sub-secondary);
-    }
-
-    &[|disabled] {
-      opacity: 0.85;
-    }
-  }
-
-  th {
-    box-sizing: border-box;
-    white-space: nowrap;
-    padding: 16px;
-    height: 36px;
-    padding-top: unset;
-    padding-bottom: unset;
-    border-color: var(--theme-background);
-    text-transform: uppercase;
-    text-align: left;
-    text-decoration: none !important;
-
-    &[|min] {
-      width: 28px;
-    }
-
-    &[|centerContent] > th-flex {
-      align-items: center;
-      justify-content: center;
-    }
-
-    & > th-flex {
-      display: flex;
-    }
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  td {
-    position: relative;
-    box-sizing: border-box;
-    height: 28px;
-    padding: 0 16px;
-    transition: padding ease-in-out 0.24s;
-
-    &[|ellipsis] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &[|centerContent] > td-flex {
-      align-items: center;
-      justify-content: center;
-    }
-
-    & > td-flex {
-      display: flex;
-    }
-
-    &[|expandArea] {
-      padding: 0;
-    }
-
-    & > input[type='checkbox'] {
-      display: block;
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  table-item-expand-box {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    width: 16px;
-    height: 100%;
-    padding: 0;
-
-    & > Icon {
-      width: 16px;
-      height: 16px;
-      padding: 0;
-
-      &[use|expanded] {
-        transform: rotate(180deg);
-      }
-    }
-  }
-`;
diff --git a/webapp/packages/core-blocks/src/Table/Table.m.css b/webapp/packages/core-blocks/src/Table/Table.m.css
new file mode 100644
index 0000000000..9223a94f2c
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Table/Table.m.css
@@ -0,0 +1,21 @@
+.table {
+  composes: theme-typography--body2 from global;
+  min-width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  border-color: var(--theme-background);
+
+  &.big {
+    & > thead > tr > th {
+      height: 54px;
+
+      &.min {
+        width: 46px;
+      }
+    }
+
+    & > tbody > tr > td {
+      height: 46px;
+    }
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Table/Table.tsx b/webapp/packages/core-blocks/src/Table/Table.tsx
index 357922108c..28ef5d0e1c 100644
--- a/webapp/packages/core-blocks/src/Table/Table.tsx
+++ b/webapp/packages/core-blocks/src/Table/Table.tsx
@@ -8,11 +8,12 @@
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import styled, { use } from 'reshadow';
 
+import { s } from '../s';
 import { useObjectRef } from '../useObjectRef';
 import { useObservableRef } from '../useObservableRef';
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { useS } from '../useS';
+import style from './Table.m.css';
 import { ITableContext, ITableState, TableContext } from './TableContext';
 
 interface Props {
@@ -36,6 +37,7 @@ export const Table = observer<React.PropsWithChildren<Props>>(function Table({
   onSelect,
 }) {
   const props = useObjectRef({ onSelect });
+  const styles = useS(style);
 
   const [selected] = useState<Map<any, boolean>>(() => selectedItems || observable(new Map()));
   const [expanded] = useState<Map<any, boolean>>(() => expandedItems || observable(new Map()));
@@ -115,11 +117,9 @@ export const Table = observer<React.PropsWithChildren<Props>>(function Table({
     collapse,
   }));
 
-  return styled(BASE_TABLE_STYLES)(
+  return (
     <TableContext.Provider value={context}>
-      <table className={className} {...use({ expanded: isExpanded.get(), size })}>
-        {children}
-      </table>
-    </TableContext.Provider>,
+      <table className={s(styles, { table: true, expanded: isExpanded.get(), big: size === 'big' }, className)}>{children}</table>
+    </TableContext.Provider>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Table/TableBody.tsx b/webapp/packages/core-blocks/src/Table/TableBody.tsx
index 8e16cd1701..a8188335bf 100644
--- a/webapp/packages/core-blocks/src/Table/TableBody.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableBody.tsx
@@ -5,14 +5,11 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled from 'reshadow';
-
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
 
 interface Props {
   className?: string;
 }
 
 export const TableBody: React.FC<React.PropsWithChildren<Props>> = function TableBody({ children, className }) {
-  return styled(BASE_TABLE_STYLES)(<tbody className={className}>{children}</tbody>);
+  return <tbody className={className}>{children}</tbody>;
 };
diff --git a/webapp/packages/core-blocks/src/Table/TableColumnHeader.m.css b/webapp/packages/core-blocks/src/Table/TableColumnHeader.m.css
new file mode 100644
index 0000000000..795381ca85
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Table/TableColumnHeader.m.css
@@ -0,0 +1,29 @@
+.columnHeader {
+  box-sizing: border-box;
+  white-space: nowrap;
+  padding: 16px;
+  height: 36px;
+  padding-top: unset;
+  padding-bottom: unset;
+  border-color: var(--theme-background);
+  text-transform: uppercase;
+  text-align: left;
+  text-decoration: none !important;
+
+  &.min {
+    width: 28px;
+  }
+
+  & > .thFlex {
+    display: flex;
+  }
+
+  &.centerContent > .thFlex {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:last-child {
+    border-right: none;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Table/TableColumnHeader.tsx b/webapp/packages/core-blocks/src/Table/TableColumnHeader.tsx
index cda72a98ab..49c250b12d 100644
--- a/webapp/packages/core-blocks/src/Table/TableColumnHeader.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableColumnHeader.tsx
@@ -5,9 +5,9 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { use } from 'reshadow';
-
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './TableColumnHeader.m.css';
 
 interface Props {
   title?: string;
@@ -25,9 +25,11 @@ export const TableColumnHeader: React.FC<React.PropsWithChildren<Props>> = funct
   className,
   children,
 }) {
-  return styled(BASE_TABLE_STYLES)(
-    <th title={title} className={className} {...use({ min, centerContent })}>
-      {flex ? <th-flex className={className}>{children}</th-flex> : children}
-    </th>,
+  const styles = useS(style);
+
+  return (
+    <th title={title} className={s(styles, { min, centerContent, columnHeader: true }, className)}>
+      {flex ? <div className={s(styles, { thFlex: true }, className)}>{children}</div> : children}
+    </th>
   );
 };
diff --git a/webapp/packages/core-blocks/src/Table/TableColumnValue.m.css b/webapp/packages/core-blocks/src/Table/TableColumnValue.m.css
new file mode 100644
index 0000000000..2c23361528
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Table/TableColumnValue.m.css
@@ -0,0 +1,26 @@
+.cell {
+  position: relative;
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 16px;
+  transition: padding ease-in-out 0.24s;
+
+  &.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.centerContent > .tdFlex {
+    align-items: center;
+    justify-content: center;
+  }
+
+  & > .tdFlex {
+    display: flex;
+  }
+
+  &.expandArea {
+    padding: 0;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
index 1728498cec..631abf388f 100644
--- a/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableColumnValue.tsx
@@ -7,14 +7,15 @@
  */
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useCallback, useContext } from 'react';
-import styled, { use } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
+import { s } from '../s';
 import { useObjectRef } from '../useObjectRef';
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { useS } from '../useS';
 import { EventTableItemExpandFlag } from './EventTableItemExpandFlag';
 import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag';
+import style from './TableColumnValue.m.css';
 import { TableContext } from './TableContext';
 import { TableItemContext } from './TableItemContext';
 
@@ -34,6 +35,7 @@ export const TableColumnValue = observer<Props, HTMLTableCellElement>(
     const tableContext = useContext(TableContext);
     const context = useContext(TableItemContext);
     const props = useObjectRef({ onClick, onDoubleClick });
+    const styles = useS(style);
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLTableCellElement>) => {
@@ -61,19 +63,18 @@ export const TableColumnValue = observer<Props, HTMLTableCellElement>(
       return null;
     }
 
-    return styled(BASE_TABLE_STYLES)(
+    return (
       <td
-        align={align}
-        className={className}
-        {...use({ centerContent, ellipsis })}
         ref={ref}
+        align={align}
+        className={s(styles, { centerContent, ellipsis, cell: true }, className)}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
         {...rest}
       >
-        {flex && <td-flex className={className}>{children}</td-flex>}
+        {flex && <div className={s(styles, { tdFlex: true, centerContent, ellipsis }, className)}>{children}</div>}
         {!flex && children}
-      </td>,
+      </td>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/Table/TableHeader.m.css b/webapp/packages/core-blocks/src/Table/TableHeader.m.css
new file mode 100644
index 0000000000..923a3b1ab0
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Table/TableHeader.m.css
@@ -0,0 +1,15 @@
+.tableHeader.fixed {
+  background: var(--theme-surface);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  & > tr {
+    border-top: none !important;
+    border-bottom: none !important;
+
+    & > th {
+      box-shadow: inset 0 -1px 0 var(--theme-background);
+    }
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Table/TableHeader.tsx b/webapp/packages/core-blocks/src/Table/TableHeader.tsx
index aaa54f34d6..a13552cd12 100644
--- a/webapp/packages/core-blocks/src/Table/TableHeader.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableHeader.tsx
@@ -5,9 +5,9 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import styled, { use } from 'reshadow';
-
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import style from './TableHeader.m.css';
 
 interface Props {
   fixed?: boolean;
@@ -15,9 +15,11 @@ interface Props {
 }
 
 export const TableHeader: React.FC<React.PropsWithChildren<Props>> = function TableHeader({ fixed, children, className }) {
-  return styled(BASE_TABLE_STYLES)(
-    <thead className={className} {...use({ fixed })}>
+  const styles = useS(style);
+
+  return (
+    <thead className={s(styles, { fixed, tableHeader: true }, className)}>
       <tr>{children}</tr>
-    </thead>,
+    </thead>
   );
 };
diff --git a/webapp/packages/core-blocks/src/Table/TableItem.m.css b/webapp/packages/core-blocks/src/Table/TableItem.m.css
new file mode 100644
index 0000000000..7b14d8df28
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Table/TableItem.m.css
@@ -0,0 +1,19 @@
+.row {
+  outline: none;
+  border-bottom: 1px solid;
+  border-color: var(--theme-background) !important;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:not(.noHover):hover,
+  &:not(.noHover).selected,
+  &:not(.noHover).expanded {
+    background-color: var(--theme-sub-secondary);
+  }
+
+  &.disabled {
+    opacity: 0.85;
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Table/TableItem.tsx b/webapp/packages/core-blocks/src/Table/TableItem.tsx
index f73c8174b8..9cfa042c36 100644
--- a/webapp/packages/core-blocks/src/Table/TableItem.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItem.tsx
@@ -7,16 +7,18 @@
  */
 import { observer } from 'mobx-react-lite';
 import { Children, useCallback, useContext, useMemo } from 'react';
-import styled, { use } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { getComputed } from '../getComputed';
 import { Loader } from '../Loader/Loader';
+import { s } from '../s';
 import { useObjectRef } from '../useObjectRef';
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { useS } from '../useS';
 import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag';
+import cellStyles from './TableColumnValue.m.css';
 import { TableContext } from './TableContext';
+import rowStyles from './TableItem.m.css';
 import { ITableItemContext, TableItemContext } from './TableItemContext';
 
 interface ExpandProps {
@@ -49,6 +51,7 @@ export const TableItem = observer<React.PropsWithChildren<Props>>(function Table
 }) {
   const context = useContext(TableContext);
   const props = useObjectRef({ selectOnItem });
+  const styles = useS(rowStyles, cellStyles);
 
   if (!context) {
     throw new Error('TableContext must be provided');
@@ -100,26 +103,25 @@ export const TableItem = observer<React.PropsWithChildren<Props>>(function Table
 
   const ExpandElement = expandElement;
 
-  return styled(BASE_TABLE_STYLES)(
+  return (
     <TableItemContext.Provider value={itemContext}>
       <tr
         title={title}
-        className={className}
+        className={s(styles, { selected: isSelected, expanded: isExpanded, disabled, row: true }, className)}
         onClick={handleClick}
         onDoubleClick={handleDoubleClick}
-        {...use({ selected: isSelected, expanded: isExpanded, disabled })}
       >
         {children}
       </tr>
       {isExpanded && ExpandElement && (
-        <tr {...use({ noHover: true, expanded: isExpanded })}>
-          <td colSpan={Children.toArray(children).length} {...use({ expandArea: true })}>
+        <tr className={s(styles, { noHover: true, expanded: isExpanded, row: true })}>
+          <td colSpan={Children.toArray(children).length} className={s(styles, { expandArea: true, cell: true })}>
             <Loader suspense>
               <ExpandElement item={item} />
             </Loader>
           </td>
         </tr>
       )}
-    </TableItemContext.Provider>,
+    </TableItemContext.Provider>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Table/TableItemExpand.m.css b/webapp/packages/core-blocks/src/Table/TableItemExpand.m.css
new file mode 100644
index 0000000000..fb53a891d2
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Table/TableItemExpand.m.css
@@ -0,0 +1,19 @@
+.tableItemExpandBox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 16px;
+  height: 100%;
+  padding: 0;
+}
+
+.tableItemExpandBoxIcon {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  transition: transform ease-in-out 0.2s;
+
+  &.expanded {
+    transform: rotate(180deg);
+  }
+}
diff --git a/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx b/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx
index 6d3bdec642..db6c38f650 100644
--- a/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItemExpand.tsx
@@ -7,17 +7,18 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useContext } from 'react';
-import styled, { use } from 'reshadow';
 
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { Icon } from '../Icon';
 import { useTranslate } from '../localization/useTranslate';
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
 import { EventTableItemExpandFlag } from './EventTableItemExpandFlag';
 import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag';
 import { TableContext } from './TableContext';
 import { TableItemContext } from './TableItemContext';
+import style from './TableItemExpand.m.css';
 
 interface Props {
   onExpand?: (item: any, state: boolean) => void;
@@ -29,6 +30,8 @@ export const TableItemExpand = observer<Props>(function TableItemExpand({ onExpa
   const translate = useTranslate();
   const tableContext = useContext(TableContext);
   const context = useContext(TableItemContext);
+  const styles = useS(style);
+
   if (!context) {
     throw new Error('TableContext must be provided');
   }
@@ -51,9 +54,9 @@ export const TableItemExpand = observer<Props>(function TableItemExpand({ onExpa
     [tableContext, context, onExpand, disabled],
   );
 
-  return styled(BASE_TABLE_STYLES)(
-    <table-item-expand-box className={className} title={translate('ui_expand')} onClick={handleClick}>
-      <Icon name="angle" viewBox="0 0 15 8" {...use({ expanded: context.isExpanded() })} />
-    </table-item-expand-box>,
+  return (
+    <div className={s(styles, { tableItemExpandBox: true }, className)} title={translate('ui_expand')} onClick={handleClick}>
+      <Icon name="angle" viewBox="0 0 15 8" className={s(styles, { tableItemExpandBoxIcon: true, expanded: context.isExpanded() })} />
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx b/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx
index 56287d3465..84cceac280 100644
--- a/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItemSelect.tsx
@@ -12,7 +12,6 @@ import styled, { css } from 'reshadow';
 import { EventContext } from '@cloudbeaver/core-events';
 
 import { Checkbox } from '../FormControls/Checkboxes/Checkbox';
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
 import { EventTableItemSelectionFlag } from './EventTableItemSelectionFlag';
 import { TableContext } from './TableContext';
 import { TableItemContext } from './TableItemContext';
@@ -24,7 +23,7 @@ interface Props {
   className?: string;
 }
 
-const checkboxStyles = css`
+const styles = css`
   Checkbox {
     margin-left: -10px;
     margin-right: -10px;
@@ -34,6 +33,7 @@ const checkboxStyles = css`
 export const TableItemSelect = observer<Props>(function TableItemSelect({ checked, disabled, tooltip, className }) {
   const tableContext = useContext(TableContext);
   const context = useContext(TableItemContext);
+
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLInputElement>) => {
       if (!context) {
@@ -51,10 +51,7 @@ export const TableItemSelect = observer<Props>(function TableItemSelect({ checke
     return null;
   }
 
-  return styled(
-    BASE_TABLE_STYLES,
-    checkboxStyles,
-  )(
+  return styled(styles)(
     <Checkbox
       className={className}
       title={tooltip}
diff --git a/webapp/packages/core-blocks/src/Table/TableItemSeparator.tsx b/webapp/packages/core-blocks/src/Table/TableItemSeparator.tsx
index 048a0956f8..2ff557acce 100644
--- a/webapp/packages/core-blocks/src/Table/TableItemSeparator.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableItemSeparator.tsx
@@ -6,9 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { use } from 'reshadow';
 
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
+import { s } from '../s';
+import { useS } from '../useS';
+import cellStyles from './TableColumnValue.m.css';
+import rowStyles from './TableItem.m.css';
 
 interface Props {
   colSpan?: number;
@@ -24,11 +26,13 @@ export const TableItemSeparator = observer<React.PropsWithChildren<Props>>(funct
   onClick,
   onDoubleClick,
 }) {
-  return styled(BASE_TABLE_STYLES)(
-    <tr {...use({ noHover: true })} className={className} onClick={onClick} onDoubleClick={onDoubleClick}>
-      <td colSpan={colSpan} {...use({ expandArea: true })}>
+  const styles = useS(rowStyles, cellStyles);
+
+  return (
+    <tr className={s(styles, { noHover: true, row: true }, className)} onClick={onClick} onDoubleClick={onDoubleClick}>
+      <td colSpan={colSpan} className={s(styles, { expandArea: true, cell: true })}>
         {children}
       </td>
-    </tr>,
+    </tr>
   );
 });
diff --git a/webapp/packages/core-blocks/src/Table/TableSelect.tsx b/webapp/packages/core-blocks/src/Table/TableSelect.tsx
index 6bc441f8e0..fa187c29ae 100644
--- a/webapp/packages/core-blocks/src/Table/TableSelect.tsx
+++ b/webapp/packages/core-blocks/src/Table/TableSelect.tsx
@@ -11,7 +11,6 @@ import styled, { css } from 'reshadow';
 
 import { Checkbox } from '../FormControls/Checkboxes/Checkbox';
 import { useTranslate } from '../localization/useTranslate';
-import { BASE_TABLE_STYLES } from './BASE_TABLE_STYLES';
 import { TableContext } from './TableContext';
 
 interface Props {
@@ -36,10 +35,7 @@ export const TableSelect = observer<Props>(function TableSelect({ id, disabled,
     throw new Error('Context must be provided');
   }
 
-  return styled(
-    BASE_TABLE_STYLES,
-    styles,
-  )(
+  return styled(styles)(
     <Checkbox
       id={id}
       className={className}
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 1dd0886fa4..c84e73ef53 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -72,7 +72,6 @@ export * from './Split/Split';
 export * from './Split/useSplit';
 export * from './Split/useSplitUserState';
 
-export * from './Table/BASE_TABLE_STYLES';
 export * from './Table/EventTableItemExpandFlag';
 export * from './Table/EventTableItemSelectionFlag';
 export * from './Table/Table';
@@ -120,6 +119,7 @@ export * from './FormControls/Checkboxes/useCheckboxState';
 export * from './FormControls/BASE_DROPDOWN_STYLES';
 export * from './FormControls/FormBox';
 export * from './FormControls/Filter';
+export * from './Fill';
 
 export * from './Containers/Container';
 export * from './Containers/Group';
diff --git a/webapp/packages/core-blocks/src/useObservableRef.ts b/webapp/packages/core-blocks/src/useObservableRef.ts
index f0186eac4d..1588976bfc 100644
--- a/webapp/packages/core-blocks/src/useObservableRef.ts
+++ b/webapp/packages/core-blocks/src/useObservableRef.ts
@@ -5,8 +5,8 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { AnnotationsMap, makeObservable, runInAction, untracked } from 'mobx';
-import { useState } from 'react';
+import { action, AnnotationsMap, makeObservable, runInAction, untracked } from 'mobx';
+import { useLayoutEffect, useState } from 'react';
 
 export function useObservableRef<T extends Record<any, any>>(
   init: () => T & ThisType<T>,
@@ -79,19 +79,21 @@ export function useObservableRef<T extends Record<any, any>>(
     return state;
   });
 
-  if (update) {
-    runInAction(() => {
-      assign(state, update);
+  useLayoutEffect(
+    action(() => {
+      if (update) {
+        assign(state, update);
 
-      if (Array.isArray(bind)) {
-        bind = bind.filter(key => (key as any) in (update as T));
+        if (Array.isArray(bind)) {
+          bind = bind.filter(key => (key as any) in (update as T));
 
-        if (bind.length > 0) {
-          bindFunctions(state, bind);
+          if (bind.length > 0) {
+            bindFunctions(state, bind);
+          }
         }
       }
-    });
-  }
+    }),
+  );
 
   return state;
 }
diff --git a/webapp/packages/core-blocks/src/useS.ts b/webapp/packages/core-blocks/src/useS.ts
index 94b044d739..f9165d4528 100644
--- a/webapp/packages/core-blocks/src/useS.ts
+++ b/webapp/packages/core-blocks/src/useS.ts
@@ -5,14 +5,17 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useService } from '@cloudbeaver/core-di';
-import { BaseStyles, ComponentStyle, Style, ThemeService } from '@cloudbeaver/core-theming';
+import { BaseStyles, ClassCollection, ComponentStyle, Style, ThemeSelector, ThemeService } from '@cloudbeaver/core-theming';
+import { MetadataMap } from '@cloudbeaver/core-utils';
 
 import { SContextReact } from './SContext';
 import { useExecutor } from './useExecutor';
 
+const stylesCache = new MetadataMap<string, Map<ThemeSelector<any>, Promise<undefined | BaseStyles | BaseStyles[]>>>(() => new Map());
+
 type Intersect<T> = (T extends any ? (x: T) => 0 : never) extends (x: infer R) => 0
   ? R extends Record<string, string>
     ? BaseStyles<R>
@@ -60,6 +63,8 @@ export function useS<T extends ComponentStyle[]>(...componentStyles: [...T]): Ex
     ],
   });
 
+  const staticStyles: BaseStyles[] = [];
+  const themedStyles: Array<Promise<undefined | BaseStyles | BaseStyles[]>> = [];
   let changed = lastThemeRef.current !== currentThemeId || filteredStyles.length !== stylesRef.current.length;
   for (let i = 0; !changed && i < filteredStyles.length; i++) {
     changed = stylesRef.current[i] !== filteredStyles[i];
@@ -68,11 +73,20 @@ export function useS<T extends ComponentStyle[]>(...componentStyles: [...T]): Ex
   if (changed) {
     stylesRef.current = filteredStyles;
     lastThemeRef.current = currentThemeId;
-    const staticStyles: BaseStyles[] = [];
-    const themedStyles: Array<Promise<undefined | BaseStyles | BaseStyles[]>> = [];
 
     for (const style of filteredStyles) {
-      const data = typeof style === 'object' ? style : style(currentThemeId);
+      let data: ClassCollection<Record<string, string>> | Promise<undefined | BaseStyles | BaseStyles[]>;
+
+      if (typeof style === 'object') {
+        data = style;
+      } else {
+        if (!stylesCache.get(currentThemeId).has(style)) {
+          data = style(currentThemeId);
+          stylesCache.get(currentThemeId).set(style, style(currentThemeId));
+        } else {
+          data = stylesCache.get(currentThemeId).get(style)!;
+        }
+      }
 
       if (data instanceof Promise) {
         themedStyles.push(data);
@@ -81,14 +95,16 @@ export function useS<T extends ComponentStyle[]>(...componentStyles: [...T]): Ex
       }
     }
     loadedStyles.current = staticStyles.flat(Infinity);
+  }
 
-    if (themedStyles.length > 0) {
+  useEffect(() => {
+    if (changed && themedStyles.length > 0) {
       Promise.all(themedStyles).then(styles => {
         loadedStyles.current = [staticStyles, styles].flat(Infinity).filter(Boolean) as BaseStyles[];
         forceUpdate(patch + 1);
       });
     }
-  }
+  });
 
   const styles = useMemo(() => combineStyles(loadedStyles.current), [patch, loadedStyles.current]);
 
diff --git a/webapp/packages/core-blocks/src/useStyles.ts b/webapp/packages/core-blocks/src/useStyles.ts
index 78cd5dc26a..b315bf0eec 100644
--- a/webapp/packages/core-blocks/src/useStyles.ts
+++ b/webapp/packages/core-blocks/src/useStyles.ts
@@ -5,14 +5,17 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { create } from 'reshadow';
 
 import { useService } from '@cloudbeaver/core-di';
-import { BaseStyles, ComponentStyle, Style, ThemeService } from '@cloudbeaver/core-theming';
+import { BaseStyles, ClassCollection, ComponentStyle, Style, ThemeSelector, ThemeService } from '@cloudbeaver/core-theming';
+import { MetadataMap } from '@cloudbeaver/core-utils';
 
 import { useExecutor } from './useExecutor';
 
+const stylesCache = new MetadataMap<string, Map<ThemeSelector<any>, Promise<undefined | BaseStyles | BaseStyles[]>>>(() => new Map());
+
 /**
  * Changes styles depending on theme
  *
@@ -21,8 +24,8 @@ import { useExecutor } from './useExecutor';
 export function useStyles(...componentStyles: ComponentStyle[]): Record<string, any> {
   // todo do you understand that we store ALL STYLES in each component that uses this hook?
 
+  const [, forceUpdate] = useState(0);
   const stylesRef = useRef<ComponentStyle[]>([]);
-  const [patch, forceUpdate] = useState(0);
   const loadedStyles = useRef<BaseStyles[]>([]);
   const themeService = useService(ThemeService);
   const [currentThemeId, setCurrentThemeId] = useState(() => themeService.currentThemeId);
@@ -42,6 +45,8 @@ export function useStyles(...componentStyles: ComponentStyle[]): Record<string,
     ],
   });
 
+  const themedStyles: Array<Promise<undefined | BaseStyles | BaseStyles[]>> = [];
+  const staticStyles: BaseStyles[] = [];
   let changed = lastThemeRef.current !== currentThemeId || filteredStyles.length !== stylesRef.current.length;
   for (let i = 0; !changed && i < filteredStyles.length; i++) {
     changed = stylesRef.current[i] !== filteredStyles[i];
@@ -50,11 +55,20 @@ export function useStyles(...componentStyles: ComponentStyle[]): Record<string,
   if (changed) {
     stylesRef.current = filteredStyles;
     lastThemeRef.current = currentThemeId;
-    const staticStyles: BaseStyles[] = [];
-    const themedStyles: Array<Promise<undefined | BaseStyles | BaseStyles[]>> = [];
 
     for (const style of filteredStyles) {
-      const data = typeof style === 'object' ? style : style(currentThemeId);
+      let data: ClassCollection<Record<string, string>> | Promise<undefined | BaseStyles | BaseStyles[]>;
+
+      if (typeof style === 'object') {
+        data = style;
+      } else {
+        if (!stylesCache.get(currentThemeId).has(style)) {
+          data = style(currentThemeId);
+          stylesCache.get(currentThemeId).set(style, style(currentThemeId));
+        } else {
+          data = stylesCache.get(currentThemeId).get(style)!;
+        }
+      }
 
       if (data instanceof Promise) {
         themedStyles.push(data);
@@ -63,16 +77,18 @@ export function useStyles(...componentStyles: ComponentStyle[]): Record<string,
       }
     }
     loadedStyles.current = staticStyles.flat(Infinity);
+  }
 
-    if (themedStyles.length > 0) {
+  useEffect(() => {
+    if (changed && themedStyles.length > 0) {
       Promise.all(themedStyles).then(styles => {
         loadedStyles.current = [staticStyles, styles].flat(Infinity).filter(Boolean) as BaseStyles[];
-        forceUpdate(patch + 1);
+        forceUpdate(i => i + 1);
       });
     }
-  }
+  });
 
-  const styles = useMemo(() => create(loadedStyles.current), [patch, loadedStyles.current]);
+  const styles = useMemo(() => create(loadedStyles.current), [loadedStyles.current]);
 
   return styles; // todo this method is called in each rerender
 }
diff --git a/webapp/packages/core-cli/configs/babel.config.js b/webapp/packages/core-cli/configs/babel.config.js
index 0db4171bbe..ed8f1acecb 100644
--- a/webapp/packages/core-cli/configs/babel.config.js
+++ b/webapp/packages/core-cli/configs/babel.config.js
@@ -61,6 +61,7 @@ module.exports = api => {
       [
         '@babel/preset-react',
         {
+          development: devMode,
           runtime: 'automatic',
         },
       ],
diff --git a/webapp/packages/core-cli/src/babel-plugins/TestingAttributes.ts b/webapp/packages/core-cli/src/babel-plugins/TestingAttributes.ts
index 934fe90356..d5a814d96e 100644
--- a/webapp/packages/core-cli/src/babel-plugins/TestingAttributes.ts
+++ b/webapp/packages/core-cli/src/babel-plugins/TestingAttributes.ts
@@ -16,7 +16,12 @@ import * as t from '@babel/types';
 type FunctionType = t.FunctionDeclaration | t.FunctionExpression | t.ArrowFunctionExpression;
 
 function addTestIdAttribute(node: t.JSXOpeningElement, name: string): void {
-  if (!hasDataAttribute(node, DEFAULT_DATA_TESTID)) {
+  if (
+    t.isJSXIdentifier(node.name) &&
+    node.name.name !== 'Fragment' &&
+    node.name.name !== '_Fragment' &&
+    !hasDataAttribute(node, DEFAULT_DATA_TESTID)
+  ) {
     const dataAttribute = createDataAttribute(name, DEFAULT_DATA_TESTID);
     const indexOf = node.attributes.findIndex(attribute => t.isJSXSpreadAttribute(attribute));
     if (indexOf !== -1) {
@@ -105,6 +110,9 @@ export default function plugin(): PluginObj {
       CallExpression(p) {
         p.traverse({
           JSXOpeningElement({ node }) {
+            if (t.isJSXOpeningFragment(node)) {
+              return;
+            }
             addTestIdAttribute(node, getElementName(node.name));
           },
         });
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.m.css b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.m.css
new file mode 100644
index 0000000000..d8544a0497
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.m.css
@@ -0,0 +1,61 @@
+.body {
+  flex: 1;
+  box-sizing: content-box;
+  display: flex;
+  max-height: 100%;
+  overflow: auto;
+  padding-top: 0px;
+  padding-right: 0px;
+  flex-shrink: 0;
+  padding: 24px;
+
+  &.noBodyPadding {
+    padding: 0px;
+  }
+
+  padding-top: 0px;
+  padding-right: 0px;
+
+  &.noBodyPadding + footer {
+    padding-top: 24px;
+  }
+
+  &.noBodyPadding .dialogBodyOverflowBox {
+    padding-right: 0px;
+  }
+
+  &.noOverflow .dialogBodyContent {
+    overflow: auto;
+  }
+}
+
+.dialogBodyOverflow {
+  composes: branding-overflow from global;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: 24px;
+  pointer-events: none;
+}
+
+.dialogBodyOverflowBox {
+  position: relative;
+  flex: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  word-break: break-word;
+  white-space: pre-wrap;
+  padding-right: 24px;
+}
+
+.dialogBodyContent {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.tsx b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.tsx
index 178275a055..c083e86d3e 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogBody.tsx
@@ -6,13 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { use } from 'reshadow';
 
-import { useStyles } from '@cloudbeaver/core-blocks';
+import { s, useS } from '@cloudbeaver/core-blocks';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
-import { dialogStyles } from '../styles';
-import { commonDialogBaseStyle, commonDialogThemeStyle } from './styles';
+import styles from './CommonDialogBody.m.css';
 
 interface Props {
   noBodyPadding?: boolean;
@@ -23,12 +21,14 @@ interface Props {
 }
 
 export const CommonDialogBody = observer<Props>(function CommonDialogBody({ noBodyPadding, noOverflow, className, children, style }) {
-  return styled(useStyles(commonDialogThemeStyle, commonDialogBaseStyle, dialogStyles, style))(
-    <dialog-body className={className} {...use({ 'no-padding': noBodyPadding, 'no-overflow': noOverflow })}>
-      <dialog-body-overflow-box>
-        <dialog-body-content>{children}</dialog-body-content>
-        {!noOverflow && <dialog-body-overflow />}
-      </dialog-body-overflow-box>
-    </dialog-body>,
+  const computedStyles = useS(styles, style);
+
+  return (
+    <div className={s(computedStyles, { body: true, noBodyPadding, noOverflow }, className)}>
+      <div className={s(computedStyles, { dialogBodyOverflowBox: true })}>
+        <div className={s(computedStyles, { dialogBodyContent: true })}>{children}</div>
+        {!noOverflow && <div className={s(computedStyles, { dialogBodyOverflow: true })} />}
+      </div>
+    </div>
   );
 });
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.m.css b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.m.css
new file mode 100644
index 0000000000..8ef2b4237b
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.m.css
@@ -0,0 +1,11 @@
+.footer {
+  flex-shrink: 0;
+  padding: 0 24px 24px 24px;
+  display: flex;
+  z-index: 0;
+  box-sizing: border-box;
+
+  &:empty {
+    display: none;
+  }
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.tsx b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.tsx
index ca7c9a0cd0..73a3c83406 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogFooter.tsx
@@ -6,13 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { useStyles } from '@cloudbeaver/core-blocks';
+import { s, useS } from '@cloudbeaver/core-blocks';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
-import { dialogStyles } from '../styles';
-import { commonDialogBaseStyle, commonDialogThemeStyle } from './styles';
+import styles from './CommonDialogFooter.m.css';
 
 interface Props {
   className?: string;
@@ -21,5 +19,7 @@ interface Props {
 }
 
 export const CommonDialogFooter = observer<Props>(function CommonDialogFooter({ children, className, style }) {
-  return styled(useStyles(commonDialogThemeStyle, commonDialogBaseStyle, dialogStyles, style))(<footer className={className}>{children}</footer>);
+  const computedStyles = useS(styles, style);
+
+  return <footer className={s(computedStyles, { footer: true }, className)}>{children}</footer>;
 });
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.m.css b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.m.css
new file mode 100644
index 0000000000..2be5ec8633
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.m.css
@@ -0,0 +1,58 @@
+.header {
+  position: relative;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  flex-shrink: 0;
+  padding: 24px;
+
+  &.noPadding {
+    padding: 0px;
+  }
+}
+
+.headerTitleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  min-height: 24px;
+  overflow: hidden;
+}
+
+.headerTitle {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 16px;
+  &.bigIcon {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.subTitle {
+  composes: theme-typography--caption from global;
+  grid-column: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reject {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx
index 94276b6554..347ada1ff2 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx
@@ -6,13 +6,11 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { use } from 'reshadow';
 
-import { Icon, IconOrImage, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Icon, IconOrImage, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
-import { dialogStyles } from '../styles';
-import { commonDialogBaseStyle, commonDialogThemeStyle } from './styles';
+import styles from './CommonDialogHeader.m.css';
 
 interface Props {
   title?: string;
@@ -38,19 +36,22 @@ export const CommonDialogHeader = observer<Props>(function CommonDialogHeader({
   style,
 }) {
   const translate = useTranslate();
+  const computedStyles = useS(styles, style);
 
-  return styled(useStyles(commonDialogThemeStyle, commonDialogBaseStyle, dialogStyles, style))(
-    <header title={tooltip} className={className}>
-      <icon-container>{icon && <IconOrImage {...use({ bigIcon })} icon={icon} viewBox={viewBox} />}</icon-container>
-      <header-title>
-        <h3>{translate(title)}</h3>
+  return (
+    <header title={tooltip} className={s(computedStyles, { header: true }, className)}>
+      <div className={s(computedStyles, { iconContainer: true })}>
+        {icon && <IconOrImage className={s(computedStyles, { icon: true, bigIcon })} icon={icon} viewBox={viewBox} />}
+      </div>
+      <div className={s(computedStyles, { headerTitleContainer: true })}>
+        <h3 className={s(computedStyles, { headerTitle: true })}>{translate(title)}</h3>
         {onReject && (
-          <reject>
+          <div className={s(computedStyles, { reject: true })}>
             <Icon name="cross" viewBox="0 0 16 16" onClick={onReject} />
-          </reject>
+          </div>
         )}
-      </header-title>
-      {subTitle && <sub-title>{typeof subTitle === 'string' ? translate(subTitle) : subTitle}</sub-title>}
-    </header>,
+      </div>
+      {subTitle && <div className={s(computedStyles, { subTitle: true })}>{typeof subTitle === 'string' ? translate(subTitle) : subTitle}</div>}
+    </header>
   );
 });
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css
new file mode 100644
index 0000000000..9cfc79c109
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.m.css
@@ -0,0 +1,64 @@
+.container {
+  box-sizing: border-box;
+  display: flex;
+  outline: none;
+}
+
+.dialog {
+  composes: theme-background-surface theme-text-on-surface theme-elevation-z10 from global;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border: none;
+  height: auto;
+  max-height: 100%;
+  max-width: 748px;
+  padding: 0px;
+
+  &.small {
+    min-width: 404px;
+    min-height: 262px;
+    max-height: max(100vh - 48px, 262px);
+
+    &.fixedSize {
+      width: 404px;
+      height: 262px;
+    }
+    &.fixedWidth {
+      width: 404px;
+    }
+  }
+  &.medium {
+    min-width: 576px;
+    min-height: 374px;
+    max-height: max(100vh - 48px, 374px);
+
+    &.fixedSize {
+      width: 576px;
+      height: 374px;
+    }
+    &.fixedWidth {
+      width: 576px;
+    }
+  }
+  &.large {
+    min-width: 720px;
+    min-height: 468px;
+    max-height: max(100vh - 48px, 468px);
+
+    &.fixedSize {
+      width: 720px;
+      height: 468px;
+    }
+    &.fixedWidth {
+      width: 720px;
+    }
+  }
+}
+
+.loader {
+  height: 100%;
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
index 194f3ec171..beeb8ec6fe 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
@@ -8,14 +8,12 @@
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useContext, useEffect } from 'react';
 import { Dialog, useDialogState } from 'reakit/Dialog';
-import styled, { use } from 'reshadow';
 
-import { Loader, useStyles } from '@cloudbeaver/core-blocks';
+import { Loader, s, useS } from '@cloudbeaver/core-blocks';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { DialogContext } from '../DialogContext';
-import { dialogStyles } from '../styles';
-import { commonDialogBaseStyle, commonDialogThemeStyle } from './styles';
+import styles from './CommonDialogWrapper.m.css';
 
 export interface CommonDialogWrapperProps {
   size?: 'small' | 'medium' | 'large';
@@ -29,6 +27,7 @@ export interface CommonDialogWrapperProps {
 
 export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivElement>(
   forwardRef(function CommonDialogWrapper({ size = 'medium', fixedSize, fixedWidth, 'aria-label': ariaLabel, className, children, style }, ref) {
+    const computedStyles = useS(styles, style);
     const context = useContext(DialogContext);
     const dialogState = useDialogState({ visible: true });
 
@@ -38,12 +37,28 @@ export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivEle
       }
     });
 
-    return styled(useStyles(commonDialogThemeStyle, commonDialogBaseStyle, dialogStyles, style))(
-      <Dialog {...dialogState} ref={ref} aria-label={ariaLabel} visible={context.visible} hideOnClickOutside={false} modal={false}>
-        <dialog className={className} {...use({ size, fixedSize, fixedWidth })}>
-          <Loader suspense>{children}</Loader>
+    return (
+      <Dialog
+        {...dialogState}
+        ref={ref}
+        aria-label={ariaLabel}
+        className={s(computedStyles, { container: true })}
+        visible={context.visible}
+        hideOnClickOutside={false}
+        modal={false}
+      >
+        <dialog
+          className={s(
+            computedStyles,
+            { dialog: true, small: size === 'small', medium: size === 'medium', large: size === 'large', fixedSize, fixedWidth },
+            className,
+          )}
+        >
+          <Loader className={s(computedStyles, { loader: true })} suspense>
+            {children}
+          </Loader>
         </dialog>
-      </Dialog>,
+      </Dialog>
     );
   }),
 );
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts
deleted file mode 100644
index 4a6f3cc023..0000000000
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/styles.ts
+++ /dev/null
@@ -1,210 +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';
-
-import type { ThemeSelector } from '@cloudbeaver/core-theming';
-
-export const commonDialogThemeStyle: ThemeSelector = async theme => {
-  let styles: any;
-
-  switch (theme) {
-    case 'dark':
-      styles = await import('./themes/dark.module.scss');
-      break;
-    default:
-      styles = await import('./themes/light.module.scss');
-      break;
-  }
-
-  return [styles.default];
-};
-
-export const commonDialogContainerStyles = css`
-  error,
-  dialog {
-    composes: theme-background-surface theme-text-on-surface theme-elevation-z10 from global;
-    border-radius: 0.25rem;
-  }
-`;
-
-export const commonDialogBaseStyle = [
-  commonDialogContainerStyles,
-  css`
-    dialog {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      overflow: hidden;
-      margin: 0;
-      border: none;
-      height: auto;
-      max-height: 100%;
-      max-width: 748px;
-      padding: 0px;
-
-      &[|size='small'] {
-        min-width: 404px;
-        min-height: 262px;
-        max-height: max(100vh - 48px, 262px);
-
-        &[|fixedSize] {
-          width: 404px;
-          height: 262px;
-        }
-        &[|fixedWidth] {
-          width: 404px;
-        }
-      }
-      &[|size='medium'] {
-        min-width: 576px;
-        min-height: 374px;
-        max-height: max(100vh - 48px, 374px);
-
-        &[|fixedSize] {
-          width: 576px;
-          height: 374px;
-        }
-        &[|fixedWidth] {
-          width: 576px;
-        }
-      }
-      &[|size='large'] {
-        min-width: 720px;
-        min-height: 468px;
-        max-height: max(100vh - 48px, 468px);
-
-        &[|fixedSize] {
-          width: 720px;
-          height: 468px;
-        }
-        &[|fixedWidth] {
-          width: 720px;
-        }
-      }
-    }
-    header,
-    dialog-body,
-    footer {
-      flex-shrink: 0;
-      padding: 24px;
-
-      &[|no-padding] {
-        padding: 0px;
-      }
-    }
-    dialog-body {
-      padding-top: 0px;
-      padding-right: 0px;
-    }
-    footer {
-      padding-top: 0px;
-    }
-    header {
-      position: relative;
-      display: grid;
-      grid-template-columns: max-content 1fr;
-    }
-    header-title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      position: relative;
-      min-height: 24px;
-      overflow: hidden;
-    }
-    icon-container {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    IconOrImage {
-      width: 24px;
-      height: 24px;
-      margin-right: 16px;
-      &[|bigIcon] {
-        width: 40px;
-        height: 40px;
-      }
-    }
-    dialog-body {
-      flex: 1;
-      box-sizing: content-box;
-      display: flex;
-      max-height: 100%;
-      overflow: auto;
-    }
-    dialog-body-overflow-box {
-      position: relative;
-      flex: 1;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-      word-break: break-word;
-      white-space: pre-wrap;
-      padding-right: 24px;
-    }
-    dialog-body-content {
-      flex: 1;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-    }
-    Loader {
-      height: 100%;
-    }
-    dialog-body[|no-padding] + footer {
-      padding-top: 24px;
-    }
-    dialog-body[|no-padding] dialog-body-overflow-box {
-      padding-right: 0;
-    }
-    dialog-body[|no-overflow] dialog-body-content {
-      overflow: auto;
-    }
-    dialog-body-overflow {
-      composes: branding-overflow from global;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      flex-shrink: 0;
-      width: 100%;
-      height: 24px;
-      pointer-events: none;
-    }
-    h3 {
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    sub-title {
-      composes: theme-typography--caption from global;
-      grid-column: 2;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    reject {
-      cursor: pointer;
-      width: 18px;
-      height: 18px;
-      flex-shrink: 0;
-    }
-    footer {
-      display: flex;
-      z-index: 0;
-      box-sizing: border-box;
-
-      &:empty {
-        display: none;
-      }
-    }
-  `,
-];
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/_base-common-dialog.scss b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/_base-common-dialog.scss
deleted file mode 100644
index 8eb478f26d..0000000000
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/_base-common-dialog.scss
+++ /dev/null
@@ -1,15 +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.
- */
-
-@mixin base-common-dialog() {
-  :global(.#{$theme-class}) {
-    dialog-body-overflow {
-      background-image: linear-gradient(to top, $mdc-theme-surface, rgba($mdc-theme-surface, 0));
-    }
-  }
-}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/dark.module.scss b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/dark.module.scss
deleted file mode 100644
index 3e1295e285..0000000000
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/dark.module.scss
+++ /dev/null
@@ -1,12 +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 "@cloudbeaver/core-theming/src/styles/theme-dark";
-@import "base-common-dialog";
-
-@include base-common-dialog;
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/light.module.scss b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/light.module.scss
deleted file mode 100644
index 10d9953980..0000000000
--- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/themes/light.module.scss
+++ /dev/null
@@ -1,12 +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 "@cloudbeaver/core-theming/src/styles/theme-light";
-@import "base-common-dialog";
-
-@include base-common-dialog;
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.m.css b/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.m.css
new file mode 100644
index 0000000000..25fe6fea27
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.m.css
@@ -0,0 +1,4 @@
+.footer {
+  align-items: center;
+  gap: 16px;
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx b/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx
index 1db91e26ca..4cae3d4fb7 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/ConfirmationDialog.tsx
@@ -5,9 +5,7 @@
  * 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 { Button, Translate, useFocus, useStyles } from '@cloudbeaver/core-blocks';
+import { Button, Fill, s, Translate, useFocus, useS } from '@cloudbeaver/core-blocks';
 import type { TLocalizationToken } from '@cloudbeaver/core-localization';
 
 import { CommonDialogBody } from './CommonDialog/CommonDialogBody';
@@ -15,17 +13,7 @@ import { CommonDialogFooter } from './CommonDialog/CommonDialogFooter';
 import { CommonDialogHeader } from './CommonDialog/CommonDialogHeader';
 import { CommonDialogWrapper } from './CommonDialog/CommonDialogWrapper';
 import type { DialogComponent, DialogueStateResult } from './CommonDialogService';
-
-const style = css`
-  CommonDialogFooter {
-    align-items: center;
-    gap: 16px;
-  }
-
-  fill {
-    flex: 1;
-  }
-`;
+import style from './ConfirmationDialog.m.css';
 
 export interface ConfirmationDialogPayload {
   icon?: string;
@@ -46,20 +34,21 @@ export const ConfirmationDialog: DialogComponent<ConfirmationDialogPayload, Dial
   rejectDialog,
   className,
 }) {
+  const styles = useS(style);
   const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const { icon, title, subTitle, bigIcon, viewBox, message, confirmActionText, cancelActionText } = payload;
 
-  return styled(useStyles(style))(
+  return (
     <CommonDialogWrapper ref={focusedRef} size="small" className={className} fixedWidth>
       <CommonDialogHeader title={title} subTitle={subTitle} icon={icon} viewBox={viewBox} bigIcon={bigIcon} onReject={rejectDialog} />
       <CommonDialogBody>
         <Translate token={message} />
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['outlined']} onClick={rejectDialog}>
           <Translate token={cancelActionText || 'ui_processing_cancel'} />
         </Button>
-        <fill />
+        <Fill />
         {payload.extraStatus !== undefined && (
           <Button type="button" mod={['outlined']} onClick={() => resolveDialog(payload.extraStatus)}>
             <Translate token={cancelActionText || 'ui_no'} />
@@ -69,6 +58,6 @@ export const ConfirmationDialog: DialogComponent<ConfirmationDialogPayload, Dial
           <Translate token={confirmActionText || 'ui_processing_ok'} />
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 };
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.m.css b/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.m.css
new file mode 100644
index 0000000000..90f5ead351
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.m.css
@@ -0,0 +1,35 @@
+.loader {
+  height: 100%;
+}
+
+.backdrop {
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.48);
+  /*backdrop-filter: blur(4px);
+    background-color: rgba(221, 221, 221, 0.25);*/
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 999;
+  display: flex;
+  overflow: auto;
+}
+
+.innerBox {
+  display: flex;
+  margin: auto;
+  padding: 24px;
+  flex-direction: column;
+  align-items: center;
+
+  & > :not(:last-child) {
+    display: none;
+  }
+}
+
+.error {
+  composes: theme-background-surface theme-text-on-surface theme-elevation-z10 from global;
+  border-radius: 0.25rem;
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx b/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx
index 53adecf4ae..f7b8d7c96b 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/DialogsPortal.tsx
@@ -8,18 +8,16 @@
 import { observer } from 'mobx-react-lite';
 import { useLayoutEffect, useMemo, useRef } from 'react';
 import { DialogBackdrop } from 'reakit/Dialog';
-import styled from 'reshadow';
 
-import { ErrorBoundary, Loader, useObjectRef, useStyles } from '@cloudbeaver/core-blocks';
+import { ErrorBoundary, Loader, s, useObjectRef, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
-import { commonDialogContainerStyles } from './CommonDialog/styles';
 import { CommonDialogService, DialogInternal } from './CommonDialogService';
 import { DialogContext, IDialogContext } from './DialogContext';
-import { dialogStyles } from './styles';
+import style from './DialogsPortal.m.css';
 
 export const DialogsPortal = observer(function DialogsPortal() {
-  const styles = useStyles(dialogStyles);
+  const styles = useS(style);
   const commonDialogService = useService(CommonDialogService);
   const focusedElementRef = useRef<HTMLElement | null>(null);
 
@@ -81,12 +79,12 @@ export const DialogsPortal = observer(function DialogsPortal() {
     };
   }, [activeDialog]);
 
-  return styled(styles)(
-    <Loader suspense overlay>
-      <DialogBackdrop visible={!!activeDialog} onMouseDown={state.backdropClick}>
-        <inner-box>
+  return (
+    <Loader className={s(styles, { loader: true })} suspense overlay>
+      <DialogBackdrop className={s(styles, { backdrop: true })} visible={!!activeDialog} onMouseDown={state.backdropClick}>
+        <div className={s(styles, { innerBox: true })}>
           {commonDialogService.dialogs.map((dialog, i, arr) => (
-            <ErrorBoundary key={dialog.id} styles={commonDialogContainerStyles} remount onClose={state.reject}>
+            <ErrorBoundary key={dialog.id} className={s(styles, { error: true })} remount onClose={state.reject}>
               <NestedDialog
                 key={dialog.id}
                 visible={i === arr.length - 1}
@@ -96,9 +94,9 @@ export const DialogsPortal = observer(function DialogsPortal() {
               />
             </ErrorBoundary>
           ))}
-        </inner-box>
+        </div>
       </DialogBackdrop>
-    </Loader>,
+    </Loader>
   );
 });
 
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.m.css b/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.m.css
new file mode 100644
index 0000000000..060df06e60
--- /dev/null
+++ b/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.m.css
@@ -0,0 +1,3 @@
+.footer {
+  align-items: center;
+}
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.tsx b/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.tsx
index bc401781f8..ab2b931eff 100644
--- a/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.tsx
+++ b/webapp/packages/core-dialogs/src/CommonDialog/RenameDialog.tsx
@@ -8,9 +8,8 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Button, Container, InputField, SubmittingForm, useFocus, useObservableRef, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Container, Fill, InputField, s, SubmittingForm, useFocus, useObservableRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { throttleAsync } from '@cloudbeaver/core-utils';
 
 import { CommonDialogBody } from './CommonDialog/CommonDialogBody';
@@ -18,16 +17,7 @@ import { CommonDialogFooter } from './CommonDialog/CommonDialogFooter';
 import { CommonDialogHeader } from './CommonDialog/CommonDialogHeader';
 import { CommonDialogWrapper } from './CommonDialog/CommonDialogWrapper';
 import type { DialogComponent } from './CommonDialogService';
-
-const style = css`
-  CommonDialogFooter {
-    align-items: center;
-  }
-
-  fill {
-    flex: 1;
-  }
-`;
+import style from './RenameDialog.m.css';
 
 interface IRenameDialogState {
   value: string;
@@ -59,6 +49,7 @@ export const RenameDialog: DialogComponent<RenameDialogPayload, string> = observ
 }) {
   const translate = useTranslate();
   const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
+  const styles = useS(style);
 
   const { icon, subTitle, bigIcon, viewBox, value, objectName, create, confirmActionText } = payload;
   let { title } = payload;
@@ -102,7 +93,7 @@ export const RenameDialog: DialogComponent<RenameDialogPayload, string> = observ
 
   const errorMessage = state.valid ? ' ' : translate(state.message ?? 'ui_rename_taken_or_invalid');
 
-  return styled(useStyles(style))(
+  return (
     <CommonDialogWrapper size="small" className={className} fixedWidth>
       <CommonDialogHeader title={title} subTitle={subTitle} icon={icon} viewBox={viewBox} bigIcon={bigIcon} onReject={rejectDialog} />
       <CommonDialogBody>
@@ -114,15 +105,15 @@ export const RenameDialog: DialogComponent<RenameDialogPayload, string> = observ
           </Container>
         </SubmittingForm>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['outlined']} onClick={rejectDialog}>
           {translate('ui_processing_cancel')}
         </Button>
-        <fill />
+        <Fill />
         <Button type="button" mod={['unelevated']} disabled={!state.valid} onClick={() => resolveDialog(state.value)}>
           {translate(confirmActionText || (create ? 'ui_create' : 'ui_rename'))}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/core-dialogs/src/CommonDialog/styles.ts b/webapp/packages/core-dialogs/src/CommonDialog/styles.ts
deleted file mode 100644
index 4e02b53727..0000000000
--- a/webapp/packages/core-dialogs/src/CommonDialog/styles.ts
+++ /dev/null
@@ -1,43 +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 dialogStyles = css`
-  DialogBackdrop {
-    box-sizing: border-box;
-    background-color: rgba(0, 0, 0, 0.48);
-    /*backdrop-filter: blur(4px);
-      background-color: rgba(221, 221, 221, 0.25);*/
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    z-index: 999;
-    display: flex;
-    overflow: auto;
-  }
-
-  inner-box {
-    display: flex;
-    margin: auto;
-    padding: 24px;
-    flex-direction: column;
-    align-items: center;
-
-    & > :not(:last-child) {
-      display: none;
-    }
-  }
-
-  Dialog {
-    box-sizing: border-box;
-    display: flex;
-    outline: none;
-  }
-`;
diff --git a/webapp/packages/core-dialogs/src/Menu/ContextMenu/ContextMenu.ts b/webapp/packages/core-dialogs/src/Menu/ContextMenu/ContextMenu.ts
index 4dc08de783..50ea2fb1ff 100644
--- a/webapp/packages/core-dialogs/src/Menu/ContextMenu/ContextMenu.ts
+++ b/webapp/packages/core-dialogs/src/Menu/ContextMenu/ContextMenu.ts
@@ -36,7 +36,6 @@ export class ContextMenu {
   }
 
   constructMenuWithContext<T>(panelId: string, context: IMenuContext<T>): IMenuPanel {
-    context.contextId = context.contextId || uuid();
     return this.constructMenuPanelWithContext(panelId, context);
   }
 
@@ -59,7 +58,8 @@ export class ContextMenu {
 
   private constructMenuPanelWithContext<T>(panelId: string, context: IMenuContext<T>): IMenuPanel {
     const panel = this.menuStore.getPanel(panelId);
-    return new ContextMenuPanel(`${panelId}-${context.contextId!}-panel`, () => this.constructMenuItems(panel.menuItems.values, context));
+    const contextId = context.contextId || uuid();
+    return new ContextMenuPanel(`${panelId}-${contextId}-panel`, () => this.constructMenuItems(panel.menuItems.values, context));
   }
 
   private constructMenuItems<T>(menuItems: Array<IContextMenuItem<any>>, context: IMenuContext<T>): ComputedMenuItemModel[] {
diff --git a/webapp/packages/core-navigation-tree/src/NodesManager/NavTreeResource.ts b/webapp/packages/core-navigation-tree/src/NodesManager/NavTreeResource.ts
index e6c37f9ed9..626ca1650d 100644
--- a/webapp/packages/core-navigation-tree/src/NodesManager/NavTreeResource.ts
+++ b/webapp/packages/core-navigation-tree/src/NodesManager/NavTreeResource.ts
@@ -170,18 +170,14 @@ export class NavTreeResource extends CachedMapResource<string, string[], Record<
   }
 
   setDetails(keyObject: ResourceKeySimple<string>, state: boolean): void {
-    ResourceKeyUtils.forEach(keyObject, key => {
-      const children = resourceKeyList(this.getNestedChildren(key));
-      this.navNodeInfoResource.setDetails(children, state);
-
-      ResourceKeyUtils.forEach(children, key => {
-        const metadata = this.metadata.get(key);
+    const list = resourceKeyList(ResourceKeyUtils.mapArray(keyObject, key => this.getNestedChildren(key)).flat());
+    this.navNodeInfoResource.setDetails(list, state);
 
-        if (!metadata.withDetails && state) {
-          metadata.outdated = true;
-        }
-        metadata.withDetails = state;
-      });
+    this.updateMetadata(list, metadata => {
+      if (!metadata.withDetails && state) {
+        metadata.outdated = true;
+      }
+      metadata.withDetails = state;
     });
   }
 
@@ -501,7 +497,7 @@ export class NavTreeResource extends CachedMapResource<string, string[], Record<
       }
 
       for (const node of data) {
-        const metadata = this.metadata.get(node.parentPath);
+        const metadata = this.getMetadata(node.parentPath);
 
         this.setDetails(resourceKeyList([node.navNodeInfo.id, ...node.navNodeChildren.map(node => node.id)]), metadata.withDetails);
       }
@@ -519,7 +515,7 @@ export class NavTreeResource extends CachedMapResource<string, string[], Record<
         data.map(data => this.insertSlice(data, offset, limit)),
       );
     } else {
-      const metadata = this.metadata.get(data.parentPath);
+      const metadata = this.getMetadata(data.parentPath);
 
       this.setDetails(resourceKeyList([data.navNodeInfo.id, ...data.navNodeChildren.map(node => node.id)]), metadata.withDetails);
 
@@ -547,7 +543,7 @@ export class NavTreeResource extends CachedMapResource<string, string[], Record<
   }
 
   private async loadNodeChildren(parentPath: string, offset: number, limit: number): Promise<NavNodeChildrenQuery> {
-    const metadata = this.metadata.get(parentPath);
+    const metadata = this.getMetadata(parentPath);
     const { navNodeChildren, navNodeInfo } = await this.graphQLService.sdk.navNodeChildren({
       parentPath,
       offset,
diff --git a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.m.css b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.m.css
new file mode 100644
index 0000000000..a3c5c590cb
--- /dev/null
+++ b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.m.css
@@ -0,0 +1,27 @@
+.code,
+.message {
+  display: block;
+  white-space: pre-wrap;
+}
+.textarea {
+  min-height: 270px !important;
+}
+.message {
+  overflow: auto;
+  max-height: 96px;
+}
+.property {
+  padding: 8px 16px;
+}
+.errorDetails {
+  border: solid 1px;
+}
+.footer {
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
+.errorInfoContainer {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
index dea16631ce..e1ac728334 100644
--- a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
+++ b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/ErrorDetailsDialog.tsx
@@ -7,47 +7,51 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useMemo } from 'react';
-import styled from 'reshadow';
 
-import { Button, Iframe, Textarea, useClipboard, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Iframe, s, Textarea, useClipboard, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 
+import style from './ErrorDetailsDialog.m.css';
 import { ErrorModel, IErrorInfo } from './ErrorModel';
-import { styles } from './styles';
 
 function DisplayErrorInfo({ error }: { error: IErrorInfo }) {
-  return styled(useStyles(styles))(
+  const styles = useS(style);
+
+  return (
     <>
-      <property>{error.isHtml ? <Iframe srcDoc={error.message} /> : <message>{error.message}</message>}</property>
+      <property className={s(styles, { property: true })}>
+        {error.isHtml ? <Iframe srcDoc={error.message} /> : <message className={s(styles, { message: true })}>{error.message}</message>}
+      </property>
       {error.stackTrace && (
-        <property>
-          <Textarea value={error.stackTrace} style={styles} readOnly embedded />
+        <property className={s(styles, { property: true })}>
+          <Textarea className={s(styles, { textarea: true })} value={error.stackTrace} readOnly embedded />
         </property>
       )}
-    </>,
+    </>
   );
 }
 
 export const ErrorDetailsDialog: DialogComponent<Error | string, null> = observer(function ErrorDetailsDialog(props) {
   const translate = useTranslate();
+  const styles = useS(style);
 
   const error = useMemo(() => new ErrorModel({ error: props.payload }), [props.payload]);
 
   const copy = useClipboard();
   const copyHandler = useCallback(() => copy(error.textToCopy, true), [error, copy]);
 
-  return styled(useStyles(styles))(
+  return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader title="core_eventsLog_dbeaverErrorDetails" icon="/icons/error_icon.svg" bigIcon onReject={props.rejectDialog} />
       <CommonDialogBody>
         {error.errors.map((error, id) => (
-          <div key={id}>
+          <div key={id} className={s(styles, { errorInfoContainer: true })}>
             {id > 0 && <hr />}
             <DisplayErrorInfo error={error} />
           </div>
         ))}
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         {error.textToCopy && (
           <Button type="button" mod={['outlined']} onClick={copyHandler}>
             {translate('ui_copy_to_clipboard')}
@@ -57,6 +61,6 @@ export const ErrorDetailsDialog: DialogComponent<Error | string, null> = observe
           {translate('ui_close')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts b/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts
deleted file mode 100644
index 6c3815b8dd..0000000000
--- a/webapp/packages/core-notifications/src/NotificationsItem/ErrorDetailsDialog/styles.ts
+++ /dev/null
@@ -1,34 +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 styles = css`
-  code,
-  message {
-    display: block;
-    white-space: pre-wrap;
-  }
-  textarea {
-    min-height: 270px !important;
-  }
-  message {
-    overflow: auto;
-    max-height: 96px;
-  }
-  property {
-    padding: 8px 16px;
-  }
-  error-details {
-    border: solid 1px;
-  }
-  CommonDialogFooter {
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-`;
diff --git a/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx b/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx
index c436e53361..b267a84bbc 100644
--- a/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx
+++ b/webapp/packages/core-ui/src/ContextMenu/MenuItemRenderer.tsx
@@ -101,7 +101,7 @@ export const MenuItemRenderer = observer<IMenuItemRendererProps>(function MenuIt
     const extraProps = item.getExtraProps?.();
 
     return (
-      <MenuItem id={item.id} aria-label={item.label} hidden={item.hidden} disabled={item.disabled} onClick={onClick} {...extraProps}>
+      <MenuItem id={item.id} aria-label={item.label} hidden={item.hidden} disabled={item.disabled} onClick={() => onClick()}>
         <MenuItemElement label={item.label} icon={IconComponent ? <IconComponent item={item} {...extraProps} /> : item.icon} tooltip={item.tooltip} />
       </MenuItem>
     );
diff --git a/webapp/packages/core-ui/src/InlineEditor/EditorDialog.m.css b/webapp/packages/core-ui/src/InlineEditor/EditorDialog.m.css
new file mode 100644
index 0000000000..dda8fc553e
--- /dev/null
+++ b/webapp/packages/core-ui/src/InlineEditor/EditorDialog.m.css
@@ -0,0 +1,10 @@
+.textarea {
+  width: 100% !important;
+  min-height: 250px;
+  box-sizing: border-box;
+}
+.footer {
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
diff --git a/webapp/packages/core-ui/src/InlineEditor/EditorDialog.tsx b/webapp/packages/core-ui/src/InlineEditor/EditorDialog.tsx
index 46aa7d758d..d7c4758a5a 100644
--- a/webapp/packages/core-ui/src/InlineEditor/EditorDialog.tsx
+++ b/webapp/packages/core-ui/src/InlineEditor/EditorDialog.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Button, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import {
   CommonDialogBody,
   CommonDialogFooter,
@@ -19,24 +18,14 @@ import {
   DialogComponentProps,
 } from '@cloudbeaver/core-dialogs';
 
-const styles = css`
-  textarea {
-    width: 100% !important;
-    min-height: 250px;
-    box-sizing: border-box;
-  }
-  CommonDialogFooter {
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-`;
+import style from './EditorDialog.m.css';
 
 export const EditorDialog: DialogComponent<string, string> = observer(function EditorDialog({
   payload,
   resolveDialog,
   rejectDialog,
 }: DialogComponentProps<string, string>) {
+  const styles = useS(style);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [value, setValue] = useState(payload);
   const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value), []);
@@ -47,13 +36,13 @@ export const EditorDialog: DialogComponent<string, string> = observer(function E
     setTimeout(() => textareaRef.current?.focus(), 100);
   }, []);
 
-  return styled(useStyles(styles))(
+  return (
     <CommonDialogWrapper>
       <CommonDialogHeader title="app_shared_inlineEditor_dialog_title" onReject={rejectDialog} />
       <CommonDialogBody>
-        <textarea ref={textareaRef} value={value} onChange={handleChange} />
+        <textarea ref={textareaRef} className={s(styles, { textarea: true })} value={value} onChange={handleChange} />
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['outlined']} onClick={rejectDialog}>
           {translate('app_shared_inlineEditor_dialog_cancel')}
         </Button>
@@ -61,6 +50,6 @@ export const EditorDialog: DialogComponent<string, string> = observer(function E
           {translate('app_shared_inlineEditor_dialog_apply')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/core-ui/src/Tabs/TabList.tsx b/webapp/packages/core-ui/src/Tabs/TabList.tsx
index 14fb950e93..33a7a1b713 100644
--- a/webapp/packages/core-ui/src/Tabs/TabList.tsx
+++ b/webapp/packages/core-ui/src/Tabs/TabList.tsx
@@ -19,9 +19,10 @@ interface Props extends Omit<TabListOptions, keyof TabStateReturn> {
   'aria-label'?: string;
   style?: ComponentStyle;
   childrenFirst?: boolean;
+  className?: string;
 }
 
-export const TabList = observer<React.PropsWithChildren<Props>>(function TabList({ style, children, childrenFirst, ...props }) {
+export const TabList = observer<React.PropsWithChildren<Props>>(function TabList({ style, className, children, childrenFirst, ...props }) {
   const state = useContext(TabsContext);
 
   if (!state) {
@@ -31,7 +32,7 @@ export const TabList = observer<React.PropsWithChildren<Props>>(function TabList
   if (state.container) {
     const displayed = state.container.getDisplayed(state.props);
     return (
-      <BaseTabList {...props} {...state.state} area-label={props['aria-label'] ?? state.container.areaLabel}>
+      <BaseTabList {...props} {...state.state} className={className} area-label={props['aria-label'] ?? state.container.areaLabel}>
         {childrenFirst && children}
         {displayed
           .map(
@@ -61,7 +62,7 @@ export const TabList = observer<React.PropsWithChildren<Props>>(function TabList
   }
 
   return (
-    <BaseTabList {...props} {...state.state}>
+    <BaseTabList {...props} className={className} {...state.state}>
       {children}
     </BaseTabList>
   );
diff --git a/webapp/packages/core-utils/src/TempMap.ts b/webapp/packages/core-utils/src/TempMap.ts
index 68c0405145..032f6c71b8 100644
--- a/webapp/packages/core-utils/src/TempMap.ts
+++ b/webapp/packages/core-utils/src/TempMap.ts
@@ -158,7 +158,7 @@ export class TempMap<TKey, TValue> implements Map<TKey, TValue> {
 
         this.flushTask = null;
       }),
-      300,
+      0,
     );
   }
 }
diff --git a/webapp/packages/core-view/src/DataContext/DataContext.ts b/webapp/packages/core-view/src/DataContext/DataContext.ts
index 27a27c291f..deb5ea5ebe 100644
--- a/webapp/packages/core-view/src/DataContext/DataContext.ts
+++ b/webapp/packages/core-view/src/DataContext/DataContext.ts
@@ -26,6 +26,7 @@ export class DataContext implements IDataContext {
     makeObservable<this, 'map'>(this, {
       set: action,
       delete: action,
+      clear: action,
       map: observable.shallow,
       fallback: observable.ref,
     });
@@ -35,12 +36,20 @@ export class DataContext implements IDataContext {
     this.fallback = fallback;
   }
 
+  hasOwn(context: DataContextGetter<any>): boolean {
+    return this.map.has(context);
+  }
+
   has(context: DataContextGetter<any>, nested = true): boolean {
-    if (nested) {
-      return this.map.has(context) || this.fallback?.has(context) || false;
+    if (this.hasOwn(context)) {
+      return true;
     }
 
-    return this.map.has(context);
+    if (nested && this.fallback?.has(context)) {
+      return true;
+    }
+
+    return false;
   }
 
   hasValue<T>(context: DataContextGetter<T>, value: T, nested = true): boolean {
@@ -48,7 +57,7 @@ export class DataContext implements IDataContext {
     let provider: IDataContextProvider = this;
 
     while (true) {
-      if (provider.map.get(context) === value) {
+      if (provider.getOwn(context) === value) {
         return true;
       }
 
@@ -65,10 +74,12 @@ export class DataContext implements IDataContext {
     let provider: IDataContextProvider = this;
 
     while (true) {
-      const value = provider.map.get(context);
+      if (provider.hasOwn(context)) {
+        const value = provider.getOwn(context)!;
 
-      if (predicate(value)) {
-        return value;
+        if (predicate(value)) {
+          return value;
+        }
       }
 
       if (provider.fallback) {
@@ -80,7 +91,7 @@ export class DataContext implements IDataContext {
   }
 
   set<T>(context: DataContextGetter<T>, value: T): DeleteVersionedContextCallback {
-    const data = this.map.get(context);
+    const data = this.getOwn(context);
     let version = this.versions.get(context);
 
     if (data === value) {
@@ -104,6 +115,10 @@ export class DataContext implements IDataContext {
     return this;
   }
 
+  getOwn<T>(context: DataContextGetter<T>): T | undefined {
+    return this.map.get(context);
+  }
+
   get<T>(context: DataContextGetter<T>): T {
     if (!this.map.has(context)) {
       const defaultValue = context();
@@ -119,7 +134,7 @@ export class DataContext implements IDataContext {
       throw new Error("Context doesn't exists");
     }
 
-    return this.map.get(context);
+    return this.getOwn(context)!;
   }
 
   tryGet<T>(context: DataContextGetter<T>): T | undefined {
@@ -129,6 +144,11 @@ export class DataContext implements IDataContext {
       }
     }
 
-    return this.map.get(context);
+    return this.getOwn(context);
+  }
+
+  clear(): void {
+    this.map.clear();
+    this.versions.clear();
   }
 }
diff --git a/webapp/packages/core-view/src/DataContext/DynamicDataContext.ts b/webapp/packages/core-view/src/DataContext/DynamicDataContext.ts
index e0fba0f036..eb34338c7e 100644
--- a/webapp/packages/core-view/src/DataContext/DynamicDataContext.ts
+++ b/webapp/packages/core-view/src/DataContext/DynamicDataContext.ts
@@ -9,6 +9,7 @@ import { action, makeObservable, observable } from 'mobx';
 
 import type { DataContextGetter } from './DataContextGetter';
 import type { DeleteVersionedContextCallback, IDataContext } from './IDataContext';
+import type { IDataContextProvider } from './IDataContextProvider';
 
 export class DynamicDataContext implements IDataContext {
   fallback: IDataContext;
@@ -24,16 +25,17 @@ export class DynamicDataContext implements IDataContext {
 
     makeObservable(this, {
       fallback: observable.ref,
-      flush: action,
       set: action,
+      clear: action,
     });
   }
 
+  setFallBack(fallback?: IDataContextProvider): void;
   setFallBack(fallback: IDataContext): void {
     if (this.fallback === fallback) {
       return;
     }
-    this.flush();
+    this.clear();
     this.fallback = fallback;
   }
 
@@ -55,6 +57,10 @@ export class DynamicDataContext implements IDataContext {
     return this;
   }
 
+  hasOwn(context: DataContextGetter<any>): boolean {
+    return this.fallback.hasOwn(context);
+  }
+
   has(context: DataContextGetter<any>): boolean {
     return this.fallback.has(context);
   }
@@ -63,6 +69,10 @@ export class DynamicDataContext implements IDataContext {
     return this.fallback.get(context);
   }
 
+  getOwn<T>(context: DataContextGetter<T>): T | undefined {
+    return this.fallback.getOwn(context);
+  }
+
   hasValue<T>(context: DataContextGetter<T>, value: T): boolean {
     return this.fallback.hasValue(context, value);
   }
@@ -75,7 +85,7 @@ export class DynamicDataContext implements IDataContext {
     return this.fallback.tryGet(context);
   }
 
-  flush(): void {
+  clear(): void {
     for (const deleteCallback of this.contexts.values()) {
       deleteCallback();
     }
diff --git a/webapp/packages/core-view/src/DataContext/IDataContext.ts b/webapp/packages/core-view/src/DataContext/IDataContext.ts
index 4ef9f73871..1f4a6ff4cb 100644
--- a/webapp/packages/core-view/src/DataContext/IDataContext.ts
+++ b/webapp/packages/core-view/src/DataContext/IDataContext.ts
@@ -13,4 +13,6 @@ export type DeleteVersionedContextCallback = () => void;
 export interface IDataContext extends IDataContextProvider {
   set: <T>(context: DataContextGetter<T>, value: T) => DeleteVersionedContextCallback;
   delete: (context: DataContextGetter<any>, version?: number) => this;
+  clear: () => void;
+  setFallBack: (fallback?: IDataContextProvider) => void;
 }
diff --git a/webapp/packages/core-view/src/DataContext/IDataContextProvider.ts b/webapp/packages/core-view/src/DataContext/IDataContextProvider.ts
index d1dacabc07..7fb9860697 100644
--- a/webapp/packages/core-view/src/DataContext/IDataContextProvider.ts
+++ b/webapp/packages/core-view/src/DataContext/IDataContextProvider.ts
@@ -11,7 +11,9 @@ export interface IDataContextProvider {
   fallback?: IDataContextProvider;
   readonly map: Map<DataContextGetter<any>, any>;
   has: (context: DataContextGetter<any>, nested?: boolean) => boolean;
+  hasOwn: (context: DataContextGetter<any>) => boolean;
   get: <T>(context: DataContextGetter<T>) => T;
+  getOwn: <T>(context: DataContextGetter<T>) => T | undefined;
   find: <T>(context: DataContextGetter<T>, predicate: (item: T) => boolean) => T | undefined;
   hasValue: <T>(context: DataContextGetter<T>, value: T, nested?: boolean) => boolean;
   tryGet: <T>(context: DataContextGetter<T>) => T | undefined;
diff --git a/webapp/packages/core-view/src/DataContext/TempDataContext.ts b/webapp/packages/core-view/src/DataContext/TempDataContext.ts
new file mode 100644
index 0000000000..394ec85606
--- /dev/null
+++ b/webapp/packages/core-view/src/DataContext/TempDataContext.ts
@@ -0,0 +1,186 @@
+/*
+ * 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 { action, makeObservable, observable } from 'mobx';
+
+import { MetadataMap } from '@cloudbeaver/core-utils';
+
+import { DataContext } from './DataContext';
+import type { DataContextGetter } from './DataContextGetter';
+import type { DeleteVersionedContextCallback, IDataContext } from './IDataContext';
+import type { IDataContextProvider } from './IDataContextProvider';
+
+export class TempDataContext implements IDataContext {
+  readonly map: Map<DataContextGetter<any>, any>;
+  private readonly versions: MetadataMap<DataContextGetter<any>, number>;
+  target: IDataContext;
+  fallback?: IDataContextProvider;
+  private flushTimeout: any;
+
+  constructor(fallback?: IDataContextProvider) {
+    this.map = new Map();
+    this.versions = new MetadataMap(() => 0);
+    this.target = new DataContext(fallback);
+    this.fallback = fallback;
+
+    makeObservable<this>(this, {
+      target: observable.ref,
+      set: action,
+      delete: action,
+      clear: action,
+      flush: action,
+    });
+  }
+
+  setFallBack(fallback?: IDataContextProvider): void {
+    this.fallback = fallback;
+    this.planFlush();
+  }
+
+  hasOwn(context: DataContextGetter<any>): boolean {
+    return this.map.has(context) || this.target.hasOwn(context);
+  }
+
+  has(context: DataContextGetter<any>, nested = true): boolean {
+    if (this.hasOwn(context)) {
+      return true;
+    }
+
+    if (nested && this.fallback?.has(context)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  hasValue<T>(context: DataContextGetter<T>, value: T, nested = true): boolean {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let provider: IDataContextProvider = this;
+
+    while (true) {
+      if (provider.getOwn(context) === value) {
+        return true;
+      }
+
+      if (provider.fallback && nested) {
+        provider = provider.fallback;
+      } else {
+        return false;
+      }
+    }
+  }
+
+  find<T>(context: DataContextGetter<T>, predicate: (value: T) => boolean): T | undefined {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let provider: IDataContextProvider = this;
+
+    while (true) {
+      if (provider.hasOwn(context)) {
+        const value = provider.getOwn(context)!;
+
+        if (predicate(value)) {
+          return value;
+        }
+      }
+
+      if (provider.fallback) {
+        provider = provider.fallback;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  getOwn<T>(context: DataContextGetter<T>): T | undefined {
+    if (this.map.has(context)) {
+      return this.map.get(context);
+    }
+
+    return this.target.getOwn(context);
+  }
+
+  set<T>(context: DataContextGetter<T>, value: T): DeleteVersionedContextCallback {
+    const data = this.getOwn(context);
+    let version = this.versions.get(context);
+
+    if (data === value) {
+      return this.delete.bind(this, context, version);
+    }
+
+    version++;
+    this.map.set(context, value);
+    this.versions.set(context, version);
+    this.planFlush();
+
+    return this.delete.bind(this, context, version);
+  }
+
+  delete(context: DataContextGetter<any>, version?: number): this {
+    if (version !== this.versions.get(context)) {
+      return this;
+    }
+
+    this.map.delete(context);
+    this.planFlush();
+
+    return this;
+  }
+
+  get<T>(context: DataContextGetter<T>): T {
+    if (!this.hasOwn(context)) {
+      const defaultValue = context();
+
+      if (defaultValue !== undefined) {
+        return defaultValue;
+      }
+
+      if (this.fallback) {
+        return this.fallback.get(context);
+      }
+
+      throw new Error("Context doesn't exists");
+    }
+
+    return this.getOwn(context)!;
+  }
+
+  tryGet<T>(context: DataContextGetter<T>): T | undefined {
+    if (!this.hasOwn(context)) {
+      if (this.fallback) {
+        return this.fallback.tryGet(context);
+      }
+    }
+
+    return this.getOwn(context);
+  }
+
+  clear(): void {
+    this.map.clear();
+    this.versions.clear();
+    this.planFlush();
+  }
+
+  flush(): void {
+    clearTimeout(this.flushTimeout);
+    this.target.clear();
+    this.target.setFallBack(this.fallback);
+
+    for (const [key, value] of this.map) {
+      this.target.set(key, value);
+    }
+  }
+
+  private planFlush(): void {
+    if (this.flushTimeout) {
+      clearTimeout(this.flushTimeout);
+    }
+
+    this.flushTimeout = setTimeout(() => {
+      this.flush();
+    }, 0);
+  }
+}
diff --git a/webapp/packages/core-view/src/DataContext/useDataContext.ts b/webapp/packages/core-view/src/DataContext/useDataContext.ts
index 35419843ab..434f6896b0 100644
--- a/webapp/packages/core-view/src/DataContext/useDataContext.ts
+++ b/webapp/packages/core-view/src/DataContext/useDataContext.ts
@@ -7,11 +7,12 @@
  */
 import { useState } from 'react';
 
-import { DataContext } from './DataContext';
+import type { IDataContext } from './IDataContext';
 import type { IDataContextProvider } from './IDataContextProvider';
+import { TempDataContext } from './TempDataContext';
 
-export function useDataContext(fallback?: IDataContextProvider): DataContext {
-  const [context] = useState(() => new DataContext());
+export function useDataContext(fallback?: IDataContextProvider): IDataContext {
+  const [context] = useState(() => new TempDataContext());
 
   context.setFallBack(fallback);
 
diff --git a/webapp/packages/core-view/src/DataContext/useDynamicDataContext.ts b/webapp/packages/core-view/src/DataContext/useDynamicDataContext.ts
index d8e936f398..eaadb70249 100644
--- a/webapp/packages/core-view/src/DataContext/useDynamicDataContext.ts
+++ b/webapp/packages/core-view/src/DataContext/useDynamicDataContext.ts
@@ -8,12 +8,12 @@
 import { untracked } from 'mobx';
 import { useEffect, useState } from 'react';
 
-import { DataContext } from './DataContext';
 import { DynamicDataContext } from './DynamicDataContext';
 import type { IDataContext } from './IDataContext';
+import { TempDataContext } from './TempDataContext';
 
 export function useDynamicDataContext(context: IDataContext | undefined, capture: (context: IDataContext) => void): void {
-  const [state] = useState(() => new DynamicDataContext(context || new DataContext()));
+  const [state] = useState(() => new DynamicDataContext(context || new TempDataContext()));
 
   untracked(() => {
     if (context) {
@@ -25,5 +25,5 @@ export function useDynamicDataContext(context: IDataContext | undefined, capture
     capture(state);
   });
 
-  useEffect(() => () => state.flush(), []);
+  useEffect(() => () => state.clear(), []);
 }
diff --git a/webapp/packages/core-view/src/index.ts b/webapp/packages/core-view/src/index.ts
index 62b84b564a..c0af039136 100644
--- a/webapp/packages/core-view/src/index.ts
+++ b/webapp/packages/core-view/src/index.ts
@@ -35,6 +35,7 @@ export * from './DataContext/DataContext';
 export * from './DataContext/DynamicDataContext';
 export * from './DataContext/IDataContext';
 export * from './DataContext/IDataContextProvider';
+export * from './DataContext/TempDataContext';
 export * from './DataContext/useDataContext';
 export * from './DataContext/useDynamicDataContext';
 export * from './LoadableStateContext/DATA_CONTEXT_LOADABLE_STATE';
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/Permissions.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/Permissions.tsx
index 09aef71adc..8aec49e4a3 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/Permissions.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/Permissions.tsx
@@ -6,27 +6,18 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import { PermissionsResource } from '@cloudbeaver/core-administration';
-import { FieldCheckbox, Group, GroupTitle, useResource, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { FieldCheckbox, Group, GroupTitle, useResource, useTranslate } from '@cloudbeaver/core-blocks';
 import { CachedMapAllKey } from '@cloudbeaver/core-sdk';
 
 import type { ITeamFormProps } from '../ITeamFormProps';
 
-const styles = css`
-  caption {
-    composes: theme-text-text-hint-on-light theme-typography--caption from global;
-  }
-`;
-
 export const Permissions = observer<ITeamFormProps>(function Permissions({ state }) {
   const translate = useTranslate();
   const permissionsResource = useResource(Permissions, PermissionsResource, CachedMapAllKey);
 
-  const style = useStyles(styles);
-
-  return styled(style)(
+  return (
     <Group small gap>
       <GroupTitle>{translate('administration_teams_team_permissions')}</GroupTitle>
       {permissionsResource.resource.values.map(permission => {
@@ -52,16 +43,15 @@ export const Permissions = observer<ITeamFormProps>(function Permissions({ state
             id={permission.id}
             value={permission.id}
             title={tooltip}
+            label={label}
             name="teamPermissions"
             state={state.config}
             readOnly={state.readonly}
             disabled={state.disabled}
-          >
-            {label}
-            {caption ? <caption>{caption}</caption> : null}
-          </FieldCheckbox>
+            caption={caption}
+          />
         );
       })}
-    </Group>,
+    </Group>
   );
 });
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserForm.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserForm.tsx
index 3805d79396..73b413b565 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserForm.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/UserForm.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 import styled, { css } from 'reshadow';
 
 import { Button, Loader, StatusMessage, SubmittingForm, useFocus, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
@@ -96,7 +97,9 @@ export const UserForm = observer<Props>(function UserForm({ user, editing = fals
   const controller = useController(UserFormController);
   const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
 
-  controller.update(user, editing, onCancel);
+  useEffect(() => {
+    controller.update(user, editing, onCancel);
+  });
 
   return styled(styles)(
     <TabsState localState={controller.partsState} container={service.tabsContainer} user={user} controller={controller} editing={editing}>
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserDetailsInfo/Origin.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserDetailsInfo/Origin.tsx
index 08711b811b..5713c8127d 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserDetailsInfo/Origin.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UserDetailsInfo/Origin.tsx
@@ -71,7 +71,7 @@ export const Origin: PlaceholderComponent<IUserDetailsInfoProps> = observer(func
   return (
     <>
       {user.origins.map(origin => (
-        <container
+        <div
           key={origin.type + origin.subType}
           title={origin.displayName}
           className={s(styles, { container: true })}
@@ -79,7 +79,7 @@ export const Origin: PlaceholderComponent<IUserDetailsInfoProps> = observer(func
         >
           <OriginIcon className={s(styles, { originIcon: true })} origin={origin} />
           <Icon className={s(styles, { icon: true })} name="reject" viewBox="0 0 16 16" />
-        </container>
+        </div>
       ))}
     </>
   );
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/useUsersTable.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/useUsersTable.tsx
index 9006fcdcaf..7cdd471659 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/useUsersTable.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/useUsersTable.tsx
@@ -103,6 +103,8 @@ export function useUsersTable(filters: IUserFilters) {
     }),
     {
       loading: observable.ref,
+      usersLoader: observable.ref,
+      loadableState: observable.ref,
       users: computed<AdminUser[]>({ equals: (first, second) => isArraysEqual(first, second, undefined, true) }),
       update: action.bound,
       delete: action.bound,
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css
new file mode 100644
index 0000000000..1ed904ac9b
--- /dev/null
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.m.css
@@ -0,0 +1,40 @@
+.wrapper {
+  min-height: 520px !important;
+  max-height: max(100vh - 48px, 520px) !important;
+}
+.submittingForm {
+  overflow: auto;
+  margin: auto;
+}
+.submittingForm,
+.authProviderForm {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.tabList {
+  composes: theme-background-surface theme-text-on-surface from global;
+  justify-content: center;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.tab {
+  &:global([aria-selected='true']) {
+    font-weight: 500 !important;
+  }
+}
+.authProviderForm {
+  flex-direction: column;
+  padding: 18px 24px;
+}
+.configurationsList {
+  overflow: auto;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  max-height: 400px;
+}
+.errorMessage {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  flex: 1;
+}
diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
index 4adcbb8713..9955807cb6 100644
--- a/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
+++ b/webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
@@ -6,10 +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 styled from 'reshadow';
 
 import { AuthProvider, AuthProviderConfiguration, UserInfoResource } from '@cloudbeaver/core-authentication';
-import { ErrorMessage, getComputed, Link, SubmittingForm, TextPlaceholder, useErrorDetails, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import {
+  ErrorMessage,
+  getComputed,
+  Link,
+  s,
+  SubmittingForm,
+  TextPlaceholder,
+  useErrorDetails,
+  useS,
+  useStyles,
+  useTranslate,
+} from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import {
   CommonDialogBody,
@@ -23,60 +34,19 @@ import { BASE_TAB_STYLES, Tab, TabList, TabsState, TabTitle, UNDERLINE_TAB_BIG_S
 
 import { AuthenticationService } from '../AuthenticationService';
 import type { IAuthOptions } from '../IAuthOptions';
+import style from './AuthDialog.m.css';
 import { AuthDialogFooter } from './AuthDialogFooter';
 import { AuthProviderForm } from './AuthProviderForm/AuthProviderForm';
 import { ConfigurationsList } from './AuthProviderForm/ConfigurationsList';
 import { FEDERATED_AUTH } from './FEDERATED_AUTH';
 import { getAuthProviderTabId, useAuthDialogState } from './useAuthDialogState';
 
-const styles = css`
-  CommonDialogWrapper {
-    min-height: 520px !important;
-    max-height: max(100vh - 48px, 520px) !important;
-  }
-  SubmittingForm {
-    overflow: auto;
-    margin: auto;
-  }
-  SubmittingForm,
-  AuthProviderForm {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-  TabList {
-    composes: theme-background-surface theme-text-on-surface from global;
-    justify-content: center;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-  Tab {
-    &:global([aria-selected='true']) {
-      font-weight: 500 !important;
-    }
-  }
-  AuthProviderForm {
-    flex-direction: column;
-    padding: 18px 24px;
-  }
-  ConfigurationsList {
-    overflow: auto;
-    margin-top: 12px;
-    margin-bottom: 12px;
-    max-height: 400px;
-  }
-  ErrorMessage {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    flex: 1;
-  }
-`;
-
 export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function AuthDialog({
   payload: { providerId, configurationId, linkUser = false, accessRequest = false },
   options,
   rejectDialog,
 }) {
+  const styles = useS(style);
   const dialogData = useAuthDialogState(accessRequest, providerId, configurationId);
   const errorDetails = useErrorDetails(dialogData.exception);
   const authenticationService = useService(AuthenticationService);
@@ -171,14 +141,14 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
     );
   }
 
-  return styled(useStyles(BASE_TAB_STYLES, styles, UNDERLINE_TAB_STYLES, UNDERLINE_TAB_BIG_STYLES))(
+  return styled(useStyles(BASE_TAB_STYLES, UNDERLINE_TAB_STYLES, UNDERLINE_TAB_BIG_STYLES))(
     <TabsState
       currentTabId={state.tabId}
       onChange={tabData => {
         state.setTabId(tabData.tabId);
       }}
     >
-      <CommonDialogWrapper size="large" aria-label={translate('authentication_login_dialog_title')}>
+      <CommonDialogWrapper className={s(styles, { wrapper: true })} size="large" aria-label={translate('authentication_login_dialog_title')}>
         <CommonDialogHeader
           title={dialogTitle}
           tooltip={tooltip}
@@ -188,7 +158,7 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
         />
         <CommonDialogBody noBodyPadding>
           {showTabs && (
-            <TabList aria-label="Auth providers">
+            <TabList className={s(styles, { tabList: true })} aria-label="Auth providers">
               {dialogData.providers
                 .map(provider => {
                   if (provider.configurable) {
@@ -200,6 +170,7 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
                           tabId={tabId}
                           title={configuration.displayName}
                           disabled={dialogData.authenticating}
+                          className={s(styles, { tab: true })}
                           onClick={() => {
                             state.setActiveProvider(provider, configuration);
                           }}
@@ -215,6 +186,7 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
                       tabId={provider.id}
                       title={provider.description || provider.label}
                       disabled={dialogData.authenticating}
+                      className={s(styles, { tab: true })}
                       onClick={() => {
                         state.setActiveProvider(provider, null);
                       }}
@@ -229,6 +201,7 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
                   key={FEDERATED_AUTH}
                   tabId={FEDERATED_AUTH}
                   title={translate('authentication_auth_federated')}
+                  className={s(styles, { tab: true })}
                   disabled={dialogData.authenticating}
                   onClick={() => {
                     state.setActiveProvider(null, null);
@@ -246,11 +219,14 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
               activeConfiguration={state.activeConfiguration}
               providers={dialogData.federatedProviders}
               authTask={dialogData.authTask}
+              className={s(styles, { configurationsList: true })}
               login={login}
               onClose={rejectDialog}
             />
           ) : (
-            <SubmittingForm onSubmit={() => login(linkUser)}>{renderForm(state.activeProvider, state.activeConfiguration)}</SubmittingForm>
+            <SubmittingForm className={s(styles, { submittingForm: true })} onSubmit={() => login(linkUser)}>
+              {renderForm(state.activeProvider, state.activeConfiguration)}
+            </SubmittingForm>
           )}
         </CommonDialogBody>
         {!federate && (
@@ -258,6 +234,7 @@ export const AuthDialog: DialogComponent<IAuthOptions, null> = observer(function
             <AuthDialogFooter authAvailable={!dialogData.configure} isAuthenticating={dialogData.authenticating} onLogin={() => login(linkUser)}>
               {errorDetails.name && (
                 <ErrorMessage
+                  className={s(styles, { errorMessage: true })}
                   text={errorDetails.message || errorDetails.name}
                   hasDetails={errorDetails.hasDetails}
                   onShowDetails={errorDetails.open}
diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.m.css b/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.m.css
new file mode 100644
index 0000000000..6fa529d844
--- /dev/null
+++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.m.css
@@ -0,0 +1,3 @@
+.driverSelector {
+  flex: 1;
+}
diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.tsx
index b004afc35e..c7bc098176 100644
--- a/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.tsx
+++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/DriverSelectorDialog.tsx
@@ -6,19 +6,13 @@
  * 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 } from '@cloudbeaver/core-blocks';
+import { Loader, s, useS } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogHeader, CommonDialogWrapper } from '@cloudbeaver/core-dialogs';
 
 import type { IDriver } from './Driver';
 import { DriverSelector } from './DriverSelector';
-
-const styles = css`
-  DriverSelector {
-    flex: 1;
-  }
-`;
+import styles from './DriverSelectorDialog.m.css';
 
 interface IProps {
   title: string;
@@ -29,13 +23,15 @@ interface IProps {
 }
 
 export const DriverSelectorDialog = observer<IProps>(function DriverSelectorDialog({ title, drivers, isLoading, onSelect, onClose }) {
-  return styled(styles)(
+  const style = useS(styles);
+
+  return (
     <CommonDialogWrapper size="large" fixedSize>
       <CommonDialogHeader title={title} onReject={onClose} />
       <CommonDialogBody noBodyPadding noOverflow>
         {isLoading && <Loader />}
-        {!isLoading && <DriverSelector drivers={drivers} onSelect={onSelect} />}
+        {!isLoading && <DriverSelector className={s(style, { driverSelector: true })} drivers={drivers} onSelect={onSelect} />}
       </CommonDialogBody>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.m.css b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.m.css
new file mode 100644
index 0000000000..1dcf935c11
--- /dev/null
+++ b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.m.css
@@ -0,0 +1,18 @@
+.submittingForm,
+.center {
+  display: flex;
+  flex: 1;
+  margin: auto;
+}
+.center {
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.connectionAuthenticationFormLoader {
+  align-content: center;
+}
+.errorMessage {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+}
diff --git a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
index b5d95c5103..7bbd8cde1e 100644
--- a/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
+++ b/webapp/packages/plugin-connection-template/src/ConnectionDialog/ConnectionDialog.tsx
@@ -6,39 +6,19 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { ErrorMessage, Loader, SubmittingForm, useAdministrationSettings, useFocus, useTranslate } from '@cloudbeaver/core-blocks';
+import { ErrorMessage, Loader, s, SubmittingForm, useAdministrationSettings, useFocus, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useController } from '@cloudbeaver/core-di';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 import { ConnectionAuthenticationFormLoader } from '@cloudbeaver/plugin-connections';
 
 import { ConnectionController, ConnectionStep } from './ConnectionController';
+import style from './ConnectionDialog.m.css';
 import { ConnectionDialogFooter } from './ConnectionDialogFooter';
 import { TemplateConnectionSelector } from './TemplateConnectionSelector/TemplateConnectionSelector';
 
-const styles = css`
-  SubmittingForm,
-  center {
-    display: flex;
-    flex: 1;
-    margin: auto;
-  }
-  center {
-    box-sizing: border-box;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  ConnectionAuthenticationFormLoader {
-    align-content: center;
-  }
-  ErrorMessage {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-  }
-`;
-
 export const ConnectionDialog: DialogComponent<null, null> = observer(function ConnectionDialog({ rejectDialog }) {
+  const styles = useS(style);
   const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
   const controller = useController(ConnectionController, rejectDialog);
   const translate = useTranslate();
@@ -50,7 +30,7 @@ export const ConnectionDialog: DialogComponent<null, null> = observer(function C
     subtitle = controller.template.name;
   }
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="large" fixedSize>
       <CommonDialogHeader
         title="basicConnection_connectionDialog_newConnection"
@@ -69,9 +49,11 @@ export const ConnectionDialog: DialogComponent<null, null> = observer(function C
         )}
         {controller.step === ConnectionStep.Connection &&
           (!controller.authModel ? (
-            <center>{controller.isConnecting && translate('basicConnection_connectionDialog_connecting_message')}</center>
+            <center className={s(styles, { center: true })}>
+              {controller.isConnecting && translate('basicConnection_connectionDialog_connecting_message')}
+            </center>
           ) : (
-            <SubmittingForm ref={focusedRef} onSubmit={controller.onConnect}>
+            <SubmittingForm ref={focusedRef} className={s(styles, { submittingForm: true })} onSubmit={controller.onConnect}>
               <ConnectionAuthenticationFormLoader
                 config={controller.config}
                 authModelId={controller.authModel.id}
@@ -79,6 +61,7 @@ export const ConnectionDialog: DialogComponent<null, null> = observer(function C
                 formId={controller.template?.id}
                 allowSaveCredentials={credentialsSavingEnabled}
                 disabled={controller.isConnecting}
+                className={s(styles, { connectionAuthenticationFormLoader: true })}
               />
             </SubmittingForm>
           ))}
@@ -86,7 +69,12 @@ export const ConnectionDialog: DialogComponent<null, null> = observer(function C
       {controller.step === ConnectionStep.Connection && (
         <CommonDialogFooter>
           {controller.responseMessage && (
-            <ErrorMessage text={controller.responseMessage} hasDetails={controller.hasDetails} onShowDetails={controller.onShowDetails} />
+            <ErrorMessage
+              text={controller.responseMessage}
+              className={s(styles, { errorMessage: true })}
+              hasDetails={controller.hasDetails}
+              onShowDetails={controller.onShowDetails}
+            />
           )}
           <ConnectionDialogFooter
             isConnecting={controller.isConnecting}
@@ -95,6 +83,6 @@ export const ConnectionDialog: DialogComponent<null, null> = observer(function C
           />
         </CommonDialogFooter>
       )}
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.m.css b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.m.css
new file mode 100644
index 0000000000..6472b4a0a5
--- /dev/null
+++ b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.m.css
@@ -0,0 +1,13 @@
+.submittingForm {
+  overflow: auto;
+  margin: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.connectionAuthenticationFormLoader {
+  align-content: center;
+}
+.button {
+  margin-left: auto;
+}
diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx
index 047fb8d9c3..81d03035ea 100644
--- a/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionAuthentication/ConnectionAuthenticationDialog.tsx
@@ -6,31 +6,15 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, SubmittingForm, useFocus, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, s, SubmittingForm, useFocus, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useDBDriver } from '@cloudbeaver/core-connections';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
 
+import style from './ConnectionAuthenticationDialog.m.css';
 import { ConnectionAuthenticationFormLoader } from './ConnectionAuthenticationFormLoader';
 
-const styles = css`
-  SubmittingForm {
-    overflow: auto;
-    margin: auto;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-  ConnectionAuthenticationFormLoader {
-    align-content: center;
-  }
-  Button {
-    margin-left: auto;
-  }
-`;
-
 interface Payload {
   config: ConnectionConfig;
   authModelId: string | null;
@@ -44,10 +28,11 @@ export const ConnectionAuthenticationDialog: DialogComponent<Payload> = observer
   resolveDialog,
 }) {
   const translate = useTranslate();
+  const styles = useS(style);
   const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
   const { driver } = useDBDriver(payload.driverId || '');
 
-  return styled(useStyles(styles))(
+  return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader
         title="connections_connection_credentials_provisioning"
@@ -56,21 +41,22 @@ export const ConnectionAuthenticationDialog: DialogComponent<Payload> = observer
         onReject={rejectDialog}
       />
       <CommonDialogBody>
-        <SubmittingForm ref={focusedRef} onSubmit={() => resolveDialog()}>
+        <SubmittingForm ref={focusedRef} className={s(styles, { submittingForm: true })} onSubmit={() => resolveDialog()}>
           <ConnectionAuthenticationFormLoader
             config={payload.config}
             authModelId={payload.authModelId}
             networkHandlers={payload.networkHandlers}
             formId={payload.config.connectionId || payload.driverId}
+            className={s(styles, { connectionAuthenticationFormLoader: true })}
             hideFeatures={['nonSecuredProperty']}
           />
         </SubmittingForm>
       </CommonDialogBody>
       <CommonDialogFooter>
-        <Button mod={['unelevated']} onClick={() => resolveDialog()}>
+        <Button mod={['unelevated']} className={s(styles, { button: true })} onClick={() => resolveDialog()}>
           {translate('ui_apply')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.tsx
index e4c25b317e..50cee437c9 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.tsx
@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import React from 'react';
 import styled, { css } from 'reshadow';
 
 import {
@@ -78,7 +79,7 @@ export const SSL: TabContainerPanelComponent<Props> = observer(function SSL({ st
           )}
 
           {categories.map(category => (
-            <>
+            <React.Fragment key={category}>
               <GroupTitle keepSize>{category}</GroupTitle>
               <ObjectPropertyInfoForm
                 state={handlerState.properties}
@@ -91,7 +92,7 @@ export const SSL: TabContainerPanelComponent<Props> = observer(function SSL({ st
                 showRememberTip
                 small
               />
-            </>
+            </React.Fragment>
           ))}
 
           {credentialsSavingEnabled && (
diff --git a/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.m.css b/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.m.css
new file mode 100644
index 0000000000..7fb2a797bf
--- /dev/null
+++ b/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.m.css
@@ -0,0 +1,14 @@
+.submittingForm {
+  overflow: auto;
+  margin: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.connectionAuthenticationFormLoader {
+  align-content: center;
+}
+.errorMessage {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  flex: 1;
+}
diff --git a/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
index acfa945348..720b171a5b 100644
--- a/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
+++ b/webapp/packages/plugin-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx
@@ -6,34 +6,17 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { ErrorMessage, Loader, SubmittingForm, useAdministrationSettings, useFocus, useStyles } from '@cloudbeaver/core-blocks';
+import { ErrorMessage, Loader, s, SubmittingForm, useAdministrationSettings, useFocus, useS } from '@cloudbeaver/core-blocks';
 import { IConnectionInfoParams, useConnectionInfo, useDBDriver } from '@cloudbeaver/core-connections';
 import { useController } from '@cloudbeaver/core-di';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 
 import { ConnectionAuthenticationFormLoader } from '../ConnectionAuthentication/ConnectionAuthenticationFormLoader';
+import style from './DatabaseAuthDialog.m.css';
 import { DBAuthDialogController } from './DBAuthDialogController';
 import { DBAuthDialogFooter } from './DBAuthDialogFooter';
 
-const styles = css`
-  SubmittingForm {
-    overflow: auto;
-    margin: auto;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-  ConnectionAuthenticationFormLoader {
-    align-content: center;
-  }
-  ErrorMessage {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    flex: 1;
-  }
-`;
-
 interface Payload {
   connection: IConnectionInfoParams;
   networkHandlers: string[];
@@ -43,6 +26,7 @@ interface Payload {
 export const DatabaseAuthDialog: DialogComponent<Payload> = observer(function DatabaseAuthDialog({ payload, options, rejectDialog, resolveDialog }) {
   const connection = useConnectionInfo(payload.connection);
   const controller = useController(DBAuthDialogController, payload.connection, payload.networkHandlers, resolveDialog);
+  const styles = useS(style);
 
   const { driver } = useDBDriver(connection.connectionInfo?.driverId || '');
   const { credentialsSavingEnabled } = useAdministrationSettings();
@@ -54,7 +38,7 @@ export const DatabaseAuthDialog: DialogComponent<Payload> = observer(function Da
     authModelId = connection.connectionInfo?.authModel || driver?.defaultAuthModel || null;
   }
 
-  return styled(useStyles(styles))(
+  return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader
         title="connections_database_authentication"
@@ -63,7 +47,7 @@ export const DatabaseAuthDialog: DialogComponent<Payload> = observer(function Da
         onReject={options?.persistent ? undefined : rejectDialog}
       />
       <CommonDialogBody>
-        <SubmittingForm ref={focusedRef} onSubmit={controller.login}>
+        <SubmittingForm ref={focusedRef} className={s(styles, { submittingForm: true })} onSubmit={controller.login}>
           {!connection.isLoaded() || connection.isLoading() || !controller.configured ? (
             <Loader />
           ) : (
@@ -74,6 +58,7 @@ export const DatabaseAuthDialog: DialogComponent<Payload> = observer(function Da
               networkHandlers={payload.networkHandlers}
               formId={`${payload.connection.projectId}:${payload.connection.connectionId}`}
               allowSaveCredentials={credentialsSavingEnabled}
+              className={s(styles, { connectionAuthenticationFormLoader: true })}
               disabled={controller.isAuthenticating}
               hideFeatures={['nonSecuredProperty']}
             />
@@ -83,10 +68,15 @@ export const DatabaseAuthDialog: DialogComponent<Payload> = observer(function Da
       <CommonDialogFooter>
         <DBAuthDialogFooter isAuthenticating={controller.isAuthenticating} onLogin={controller.login}>
           {controller.error.responseMessage && (
-            <ErrorMessage text={controller.error.responseMessage} hasDetails={controller.error.hasDetails} onShowDetails={controller.showDetails} />
+            <ErrorMessage
+              className={s(styles, { errorMessage: true })}
+              text={controller.error.responseMessage}
+              hasDetails={controller.error.hasDetails}
+              onShowDetails={controller.showDetails}
+            />
           )}
         </DBAuthDialogFooter>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.m.css b/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.m.css
new file mode 100644
index 0000000000..9f1949f500
--- /dev/null
+++ b/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.m.css
@@ -0,0 +1,14 @@
+.propertiesTable {
+  flex: 1;
+  overflow: hidden;
+  padding: 12px 0;
+}
+.errorMessage {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  position: sticky;
+  bottom: 0;
+  padding: 8px 24px;
+}
+.tabList {
+  margin: 0 10px;
+}
diff --git a/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.tsx b/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.tsx
index f205ec2a32..5bdbbb74ec 100644
--- a/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.tsx
+++ b/webapp/packages/plugin-data-export/src/Dialog/ProcessorConfigureDialog.tsx
@@ -7,41 +7,17 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import styled, { css } from 'reshadow';
+import styled from 'reshadow';
 
-import { ErrorMessage, IProperty, PropertiesTable, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { ErrorMessage, IProperty, PropertiesTable, s, useS, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper } from '@cloudbeaver/core-dialogs';
 import type { DataTransferOutputSettings, DataTransferProcessorInfo, GQLErrorCatcher } from '@cloudbeaver/core-sdk';
 import { ITabData, Tab, TabList, TabsState, TabTitle, UNDERLINE_TAB_STYLES } from '@cloudbeaver/core-ui';
 
 import { OutputOptionsForm } from './OutputOptionsForm';
+import style from './ProcessorConfigureDialog.m.css';
 import { ProcessorConfigureDialogFooter } from './ProcessorConfigureDialogFooter';
 
-const styles = css`
-  PropertiesTable {
-    flex: 1;
-    overflow: hidden;
-    padding: 12px 0;
-  }
-  message {
-    margin: auto;
-  }
-  ErrorMessage {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    position: sticky;
-    bottom: 0;
-    padding: 8px 24px;
-  }
-
-  TabList {
-    margin: 0 10px;
-  }
-
-  ObjectPropertyInfoForm {
-    margin: 12px 0;
-  }
-`;
-
 interface Props {
   processor: DataTransferProcessorInfo;
   properties: IProperty[];
@@ -73,6 +49,8 @@ export const ProcessorConfigureDialog = observer<Props>(function ProcessorConfig
   onExport,
 }) {
   const translate = useTranslate();
+  const styles = useS(style);
+
   const title = `${translate('data_transfer_dialog_configuration_title')} (${processor.name})`;
   const [currentTabId, setCurrentTabId] = useState(SETTINGS_TABS.EXTRACTION);
 
@@ -92,13 +70,13 @@ export const ProcessorConfigureDialog = observer<Props>(function ProcessorConfig
     }
   }
 
-  return styled(useStyles(UNDERLINE_TAB_STYLES, styles))(
+  return styled(useStyles(UNDERLINE_TAB_STYLES))(
     <CommonDialogWrapper size="large" fixedSize>
       <CommonDialogHeader title={title} onReject={onClose} />
       <CommonDialogBody noOverflow noBodyPadding>
         {!processor.isBinary ? (
           <TabsState currentTabId={currentTabId} onChange={handleTabChange}>
-            <TabList aria-label="Export Settings tabs">
+            <TabList className={s(styles, { tabList: true })} aria-label="Export Settings tabs">
               <Tab tabId={SETTINGS_TABS.EXTRACTION} style={UNDERLINE_TAB_STYLES}>
                 <TabTitle>{translate('data_transfer_format_settings')}</TabTitle>
               </Tab>
@@ -109,12 +87,19 @@ export const ProcessorConfigureDialog = observer<Props>(function ProcessorConfig
           </TabsState>
         ) : null}
         {currentTabId === SETTINGS_TABS.EXTRACTION ? (
-          <PropertiesTable properties={properties} propertiesState={processorProperties} />
+          <PropertiesTable className={s(styles, { propertiesTable: true })} properties={properties} propertiesState={processorProperties} />
         ) : (
           <OutputOptionsForm outputSettings={outputSettings} />
         )}
 
-        {error.responseMessage && <ErrorMessage text={error.responseMessage} hasDetails={error.hasDetails} onShowDetails={onShowDetails} />}
+        {error.responseMessage && (
+          <ErrorMessage
+            className={s(styles, { errorMessage: true })}
+            text={error.responseMessage}
+            hasDetails={error.hasDetails}
+            onShowDetails={onShowDetails}
+          />
+        )}
       </CommonDialogBody>
       <CommonDialogFooter>
         <ProcessorConfigureDialogFooter
diff --git a/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.m.css b/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.m.css
new file mode 100644
index 0000000000..7507cef88e
--- /dev/null
+++ b/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.m.css
@@ -0,0 +1,21 @@
+.exportProcessorList {
+  flex: 1;
+}
+.exportObject {
+  composes: theme-typography--body2 from global;
+  flex-shrink: 0;
+  padding: 16px 24px;
+  padding-top: 0;
+  max-height: 50px;
+  overflow: hidden;
+
+  & pre {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: initial;
+  }
+}
+.pre {
+  composes: theme-typography--caption from global;
+}
diff --git a/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.tsx b/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.tsx
index e1ea9da4fd..bcd27b71fc 100644
--- a/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.tsx
+++ b/webapp/packages/plugin-data-export/src/Dialog/ProcessorSelectDialog.tsx
@@ -6,38 +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 { Loader } from '@cloudbeaver/core-blocks';
+import { Loader, s, useS } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogHeader, CommonDialogWrapper } from '@cloudbeaver/core-dialogs';
 import type { DataTransferProcessorInfo } from '@cloudbeaver/core-sdk';
 
 import type { IExportContext } from '../IExportContext';
 import { ExportProcessorList } from './ExportProcessorList/ExportProcessorList';
-
-const styles = css`
-  ExportProcessorList {
-    flex: 1;
-  }
-  export-object {
-    composes: theme-typography--body2 from global;
-    flex-shrink: 0;
-    padding: 16px 24px;
-    padding-top: 0;
-    max-height: 50px;
-    overflow: hidden;
-
-    & pre {
-      margin: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: initial;
-    }
-  }
-  pre {
-    composes: theme-typography--caption from global;
-  }
-`;
+import style from './ProcessorSelectDialog.m.css';
 
 interface Props {
   context: IExportContext;
@@ -48,18 +24,22 @@ interface Props {
 }
 
 export const ProcessorSelectDialog = observer<Props>(function ProcessorSelectDialog({ context, processors, isLoading, onSelect, onClose }) {
-  return styled(styles)(
+  const styles = useS(style);
+
+  return (
     <CommonDialogWrapper size="large" fixedSize>
-      <CommonDialogHeader title="data_transfer_dialog_title" onReject={onClose} subTitle={context.name} />
+      <CommonDialogHeader title="data_transfer_dialog_title" subTitle={context.name} onReject={onClose} />
       <CommonDialogBody noBodyPadding noOverflow>
         {context.query && (
-          <export-object>
-            <pre title={context.query}>{context.query}</pre>
-          </export-object>
+          <div className={s(styles, { exportObject: true })}>
+            <pre className={s(styles, { pre: true })} title={context.query}>
+              {context.query}
+            </pre>
+          </div>
         )}
         {isLoading && <Loader />}
-        {!isLoading && <ExportProcessorList processors={processors} onSelect={onSelect} />}
+        {!isLoading && <ExportProcessorList className={s(styles, { exportProcessorList: true })} processors={processors} onSelect={onSelect} />}
       </CommonDialogBody>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.m.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.m.css
new file mode 100644
index 0000000000..30002cba9d
--- /dev/null
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.m.css
@@ -0,0 +1,5 @@
+.footer {
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.tsx
index deefe99223..a3d4af0c7d 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.tsx
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuFilter/FilterCustomValueDialog.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Button, InputField, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, InputField, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import {
   CommonDialogBody,
@@ -21,13 +20,7 @@ import {
 } from '@cloudbeaver/core-dialogs';
 import { ClipboardService } from '@cloudbeaver/core-ui';
 
-export const dialogStyle = css`
-  CommonDialogFooter {
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-`;
+import style from './FilterCustomValueDialog.m.css';
 
 interface IPayload {
   inputTitle: string;
@@ -40,6 +33,7 @@ export const FilterCustomValueDialog: DialogComponent<IPayload, string | number>
   rejectDialog,
 }: DialogComponentProps<IPayload, string | number>) {
   const clipboardService = useService(ClipboardService);
+  const styles = useS(style);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const [value, setValue] = useState<string | number>(payload.defaultValue);
@@ -60,7 +54,7 @@ export const FilterCustomValueDialog: DialogComponent<IPayload, string | number>
     inputRef.current?.focus();
   }, []);
 
-  return styled(dialogStyle)(
+  return (
     <CommonDialogWrapper size="small">
       <CommonDialogHeader title="data_grid_table_context_menu_filter_dialog_title" onReject={rejectDialog} />
       <CommonDialogBody noOverflow>
@@ -68,7 +62,7 @@ export const FilterCustomValueDialog: DialogComponent<IPayload, string | number>
           {payload.inputTitle}
         </InputField>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         {clipboardService.clipboardAvailable && clipboardService.state !== 'denied' && (
           <Button type="button" mod={['outlined']} onClick={getValueFromClipboard}>
             {translate('ui_clipboard')}
@@ -81,6 +75,6 @@ export const FilterCustomValueDialog: DialogComponent<IPayload, string | number>
           {translate('ui_processing_ok')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataActions.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataActions.ts
index db11eb5a80..2de6937126 100644
--- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataActions.ts
+++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataActions.ts
@@ -5,7 +5,9 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { action, makeObservable, observable, runInAction } from 'mobx';
+import { action, makeObservable, runInAction } from 'mobx';
+
+import { MetadataMap } from '@cloudbeaver/core-utils';
 
 import { getDependingDataActions } from './Actions/DatabaseDataActionDecorator';
 import { isDatabaseDataAction } from './DatabaseDataAction';
@@ -17,17 +19,15 @@ import type { IDatabaseDataSource } from './IDatabaseDataSource';
 type ActionsList<TOptions, TResult extends IDatabaseDataResult> = Array<IDatabaseDataAction<TOptions, TResult>>;
 
 export class DatabaseDataActions<TOptions, TResult extends IDatabaseDataResult> implements IDatabaseDataActions<TOptions, TResult> {
-  private readonly actions: Map<string, ActionsList<TOptions, TResult>>;
+  private readonly actions: MetadataMap<string, ActionsList<TOptions, TResult>>;
   private readonly source: IDatabaseDataSource<TOptions, TResult>;
 
   constructor(source: IDatabaseDataSource<TOptions, TResult>) {
-    this.actions = new Map();
+    this.actions = new MetadataMap(() => []);
     this.source = source;
 
-    makeObservable<this, 'actions' | 'createActionsList'>(this, {
-      actions: observable.shallow,
+    makeObservable<this>(this, {
       updateResults: action,
-      createActionsList: action,
     });
   }
 
@@ -44,12 +44,12 @@ export class DatabaseDataActions<TOptions, TResult extends IDatabaseDataResult>
       throw new Error('DataFormat unsupported');
     }
 
-    const actions = this.getOrCreateActionsList(result.uniqueResultId);
+    const actions = this.actions.get(result.uniqueResultId);
 
-    return runInAction(() => {
-      let action = actions.find(action => action instanceof Action);
+    let action = actions.find(action => action instanceof Action);
 
-      if (!action) {
+    if (!action) {
+      runInAction(() => {
         const allDeps = getDependingDataActions(Action).slice(1); // skip source argument
 
         const depends: any[] = [];
@@ -68,17 +68,18 @@ export class DatabaseDataActions<TOptions, TResult extends IDatabaseDataResult>
 
         action = new Action(this.source, ...depends);
         action.updateResult(result, this.source.results.indexOf(result));
-        this.addActionToList(result.uniqueResultId, actions, action);
-      }
-      return action as T;
-    });
+        this.actions.set(result.uniqueResultId, [...actions, action]);
+      });
+    }
+
+    return action as T;
   }
 
   getImplementation<T extends IDatabaseDataAction<TOptions, TResult>>(
     result: TResult,
     Action: IDatabaseDataActionInterface<TOptions, TResult, T>,
   ): T | undefined {
-    const actions = this.getActionsList(result.uniqueResultId);
+    const actions = this.actions.get(result.uniqueResultId);
     const action = actions?.find(action => action instanceof Action);
 
     return action as T | undefined;
@@ -118,28 +119,4 @@ export class DatabaseDataActions<TOptions, TResult extends IDatabaseDataResult>
       }
     }
   }
-
-  private addActionToList(resultId: string, actions: ActionsList<TOptions, TResult>, action: IDatabaseDataAction<TOptions, TResult>) {
-    actions.push(action);
-  }
-
-  private getOrCreateActionsList(resultId: string): ActionsList<TOptions, TResult> {
-    let actions = this.getActionsList(resultId);
-
-    if (!actions) {
-      actions = this.createActionsList(resultId);
-    }
-
-    return actions;
-  }
-
-  private createActionsList(resultId: string): ActionsList<TOptions, TResult> {
-    const actions: ActionsList<TOptions, TResult> = observable.array([], { deep: false });
-    this.actions.set(resultId, actions);
-    return actions;
-  }
-
-  private getActionsList(resultId: string): ActionsList<TOptions, TResult> | undefined {
-    return this.actions.get(resultId);
-  }
 }
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.m.css b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.m.css
new file mode 100644
index 0000000000..60a7264457
--- /dev/null
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.m.css
@@ -0,0 +1,19 @@
+.footerContainer {
+  display: flex;
+  width: min-content;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
+.buttons {
+  flex: 1;
+  display: flex;
+  gap: 24px;
+}
+.wrapper {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.tsx
index efb2c1078d..7c871a1f5a 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/AutoRefresh/AutoRefreshSettingsDialog.tsx
@@ -7,38 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Button, Container, FieldCheckbox, Group, InputField, SubmittingForm, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Container, FieldCheckbox, Fill, Group, InputField, s, SubmittingForm, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs';
 
+import style from './AutoRefreshSettingsDialog.m.css';
 import type { IAutoRefreshSettings } from './IAutoRefreshSettings';
 
-const styles = css`
-  footer-container {
-    display: flex;
-    width: min-content;
-    flex: 1;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-  buttons {
-    flex: 1;
-    display: flex;
-    gap: 24px;
-  }
-  wrapper {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-  fill {
-    flex: 1;
-  }
-`;
-
 interface Payload {
   settings: IAutoRefreshSettings;
 }
@@ -49,6 +24,7 @@ export const AutoRefreshSettingsDialog = observer<DialogComponentProps<Payload>>
   payload,
 }) {
   const translate = useTranslate();
+  const styles = useS(style);
   const formRef = useRef<HTMLFormElement>(null);
 
   function resolve() {
@@ -61,11 +37,11 @@ export const AutoRefreshSettingsDialog = observer<DialogComponentProps<Payload>>
     }
   }
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="small">
       <CommonDialogHeader title="data_viewer_auto_refresh_settings" icon="/icons/settings_cog_m.svg" onReject={rejectDialog} />
       <CommonDialogBody noBodyPadding noOverflow>
-        <wrapper>
+        <div className={s(styles, { wrapper: true })}>
           <SubmittingForm ref={formRef} onSubmit={() => resolve()}>
             <Container>
               <Group form gap>
@@ -79,21 +55,21 @@ export const AutoRefreshSettingsDialog = observer<DialogComponentProps<Payload>>
               </Group>
             </Container>
           </SubmittingForm>
-        </wrapper>
+        </div>
       </CommonDialogBody>
       <CommonDialogFooter>
-        <footer-container>
-          <buttons>
+        <div className={s(styles, { footerContainer: true })}>
+          <div className={s(styles, { buttons: true })}>
             <Button mod={['outlined']} onClick={() => rejectDialog()}>
               {translate('ui_processing_cancel')}
             </Button>
-            <fill />
+            <Fill />
             <Button mod={['unelevated']} onClick={() => resolve()}>
               {translate('ui_processing_ok')}
             </Button>
-          </buttons>
-        </footer-container>
+          </div>
+        </div>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx
index e1b8b6a6d2..0e13a5ae3f 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled, { css, use } from 'reshadow';
 
-import { SubmittingForm, ToolsPanel } from '@cloudbeaver/core-blocks';
+import { getComputed, SubmittingForm, ToolsPanel } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import type { IDataContext } from '@cloudbeaver/core-view';
 
@@ -99,7 +99,7 @@ export const TableFooter = observer<Props>(function TableFooter({ resultIndex, m
     }
   }, [model.countGain]);
 
-  const disabled = model.isLoading() || model.isDisabled(resultIndex);
+  const disabled = getComputed(() => model.isLoading() || model.isDisabled(resultIndex));
 
   return styled(tableFooterStyles)(
     <ToolsPanel>
diff --git a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/useWhereFilter.ts b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/useWhereFilter.ts
index 4aea107f4b..f5336259cf 100644
--- a/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/useWhereFilter.ts
+++ b/webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/useWhereFilter.ts
@@ -5,7 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 
 import { useObservableRef } from '@cloudbeaver/core-blocks';
 
@@ -68,6 +68,8 @@ export function useWhereFilter(model: IDatabaseDataModel<IDatabaseDataOptions, a
       },
     }),
     {
+      model: observable.ref,
+      resultIndex: observable.ref,
       filter: computed,
       constraints: computed,
       disabled: computed,
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
index 3b652df219..223fb7c16e 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
@@ -162,6 +162,8 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
         canSave: computed,
         truncated: computed,
         stretch: observable.ref,
+        model: observable.ref,
+        resultIndex: observable.ref,
         toggleStretch: action.bound,
         save: action.bound,
       },
diff --git a/webapp/packages/plugin-help/src/Shortcuts/Shortcut.tsx b/webapp/packages/plugin-help/src/Shortcuts/Shortcut.tsx
index f72a5bd0e6..e9c51b144c 100644
--- a/webapp/packages/plugin-help/src/Shortcuts/Shortcut.tsx
+++ b/webapp/packages/plugin-help/src/Shortcuts/Shortcut.tsx
@@ -5,6 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import React from 'react';
 import styled, { css } from 'reshadow';
 
 import { useTranslate } from '@cloudbeaver/core-blocks';
@@ -51,10 +52,10 @@ export const Shortcut: React.FC<Props> = function Shortcut({ shortcut }) {
       <shortcut-label>{translate(shortcut.label)}</shortcut-label>
       <shortcut-content>
         {shortcut.code.map((code, index) => (
-          <>
+          <React.Fragment key={code}>
             {index > 0 && <span>{translate('ui_or')}</span>}
             <shortcut-code>{code}</shortcut-code>
-          </>
+          </React.Fragment>
         ))}
       </shortcut-content>
     </shortcut-container>,
diff --git a/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.m.css b/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.m.css
new file mode 100644
index 0000000000..80eb2046cb
--- /dev/null
+++ b/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.m.css
@@ -0,0 +1,17 @@
+.button {
+  margin-left: auto;
+}
+.container {
+  composes: theme-typography--body2 from global;
+  gap: 32px;
+}
+.group {
+  gap: 16px;
+}
+.groupTitle,
+.group {
+  padding: 0 !important;
+}
+.groupTitle {
+  font-weight: bold;
+}
diff --git a/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.tsx b/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.tsx
index f634751fa5..ca9ed1f6fc 100644
--- a/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.tsx
+++ b/webapp/packages/plugin-help/src/Shortcuts/ShortcutsDialog.tsx
@@ -5,45 +5,24 @@
  * 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 { Button, Container, Group, GroupTitle, Link, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Container, Group, GroupTitle, Link, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 
 import { Shortcut } from './Shortcut';
 import { DATA_VIEWER_SHORTCUTS, NAVIGATION_TREE_SHORTCUTS, SQL_EDITOR_SHORTCUTS } from './SHORTCUTS_DATA';
-
-const style = css`
-  Button {
-    margin-left: auto;
-  }
-  Container {
-    composes: theme-typography--body2 from global;
-    gap: 32px;
-  }
-  Group {
-    gap: 16px;
-  }
-  GroupTitle,
-  Group {
-    padding: 0 !important;
-  }
-  GroupTitle {
-    font-weight: bold;
-  }
-`;
+import style from './ShortcutsDialog.m.css';
 
 export const ShortcutsDialog: DialogComponent<null> = function ShortcutsDialog({ rejectDialog }) {
   const translate = useTranslate();
-  const styles = useStyles(style);
+  const styles = useS(style);
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader title={translate('shortcuts_title')} onReject={rejectDialog} />
       <CommonDialogBody>
-        <Container wrap overflow>
-          <Group overflow>
-            <GroupTitle>
+        <Container className={s(styles, { container: true })} wrap overflow>
+          <Group className={s(styles, { group: true })} overflow>
+            <GroupTitle className={s(styles, { groupTitle: true })}>
               <Link href="https://dbeaver.com/docs/cloudbeaver/Data-editor/" target="_blank" wrapper indicator>
                 Data Viewer
               </Link>
@@ -52,8 +31,8 @@ export const ShortcutsDialog: DialogComponent<null> = function ShortcutsDialog({
               <Shortcut key={shortcut.label} shortcut={shortcut} />
             ))}
           </Group>
-          <Group overflow>
-            <GroupTitle>
+          <Group className={s(styles, { group: true })} overflow>
+            <GroupTitle className={s(styles, { groupTitle: true })}>
               <Link href="https://dbeaver.com/docs/cloudbeaver/SQL-Editor/" target="_blank" wrapper indicator>
                 SQL Editor
               </Link>
@@ -62,8 +41,8 @@ export const ShortcutsDialog: DialogComponent<null> = function ShortcutsDialog({
               <Shortcut key={shortcut.label} shortcut={shortcut} />
             ))}
           </Group>
-          <Group overflow>
-            <GroupTitle>
+          <Group className={s(styles, { group: true })} overflow>
+            <GroupTitle className={s(styles, { groupTitle: true })}>
               <Link href="https://dbeaver.com/docs/cloudbeaver/Database-Navigator/" target="_blank" wrapper indicator>
                 Navigation Tree
               </Link>
@@ -75,10 +54,10 @@ export const ShortcutsDialog: DialogComponent<null> = function ShortcutsDialog({
         </Container>
       </CommonDialogBody>
       <CommonDialogFooter>
-        <Button type="button" mod={['outlined']} onClick={rejectDialog}>
+        <Button className={s(styles, { button: true })} type="button" mod={['outlined']} onClick={rejectDialog}>
           {translate('ui_close')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 };
diff --git a/webapp/packages/plugin-log-viewer/src/LogViewer/LogEntry.tsx b/webapp/packages/plugin-log-viewer/src/LogViewer/LogEntry.tsx
index f6b4d10a9b..3ec6cba24b 100644
--- a/webapp/packages/plugin-log-viewer/src/LogViewer/LogEntry.tsx
+++ b/webapp/packages/plugin-log-viewer/src/LogViewer/LogEntry.tsx
@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';
 
-import { BASE_TABLE_STYLES, IconOrImage, Link, TableColumnValue, TableItem, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { IconOrImage, Link, TableColumnValue, TableItem, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
 import { isSameDay } from '@cloudbeaver/core-utils';
 
 import type { ILogEntry } from './ILogEntry';
@@ -76,7 +76,7 @@ export const LogEntry = observer<Props>(function LogEntry({ item, onSelect, sele
       break;
   }
 
-  return styled(useStyles(BASE_TABLE_STYLES, style))(
+  return styled(useStyles(style))(
     <TableItem item={item.id} className={className} {...use({ selected })}>
       <TableColumnValue title={item.type} centerContent flex {...use({ icon: true })}>
         <icon-box>{icon && <IconOrImage icon={icon} />}</icon-box>
diff --git a/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewerTable.tsx b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewerTable.tsx
index 30d2962207..b85c91bfc5 100644
--- a/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewerTable.tsx
+++ b/webapp/packages/plugin-log-viewer/src/LogViewer/LogViewerTable.tsx
@@ -8,16 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';
 
-import {
-  BASE_TABLE_STYLES,
-  MenuBarSmallItem,
-  Table,
-  TableBody,
-  TableColumnHeader,
-  TableHeader,
-  useStyles,
-  useTranslate,
-} from '@cloudbeaver/core-blocks';
+import { MenuBarSmallItem, Table, TableBody, TableColumnHeader, TableHeader, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
 
 import type { ILogEntry } from './ILogEntry';
 import { LogEntry } from './LogEntry';
@@ -69,7 +60,7 @@ interface Props {
 }
 export const LogViewerTable = observer<Props>(function LogViewerTable({ items, selectedItem, onItemSelect, onClear, className }) {
   const translate = useTranslate();
-  const style = useStyles(BASE_TABLE_STYLES, styles);
+  const style = useStyles(styles);
 
   return styled(style)(
     <wrapper className={className}>
diff --git a/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTable.tsx b/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTable.tsx
index 4d5d173c29..97d1a1f526 100644
--- a/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTable.tsx
+++ b/webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTable.tsx
@@ -36,7 +36,7 @@ export const FiltersTable = observer<Props>(function FiltersTable({ title, filte
 
   return (
     <Group className={styles.group} box medium overflow>
-      <container className={s(style, { container: true })}>
+      <div className={s(style, { container: true })}>
         <header className={s(style, { header: true })}>
           <h4 className={s(style, { headerTitle: true })}>{title}</h4>
           <SubmittingForm className={s(style, { submittingForm: true })} onSubmit={add}>
@@ -62,7 +62,7 @@ export const FiltersTable = observer<Props>(function FiltersTable({ title, filte
             </TableBody>
           </Table>
         </div>
-      </container>
+      </div>
     </Group>
   );
 });
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css
new file mode 100644
index 0000000000..e6aa563260
--- /dev/null
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.m.css
@@ -0,0 +1,3 @@
+.folderExplorerPath {
+  padding: 0 4px 8px 4px;
+}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
index bea57a81ee..5dc3a73a93 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTree.tsx
@@ -6,8 +6,9 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import styled, { css, use } from 'reshadow';
+import elementsTreeStyles from './ElementsTree.m.css';
 
 import {
   EventTreeNodeClickFlag,
@@ -16,10 +17,12 @@ import {
   FolderExplorer,
   FolderExplorerPath,
   PlaceholderElement,
+  s,
   Translate,
   TREE_NODE_STYLES,
   TreeNodeNested,
   TreeNodeNestedMessage,
+  useS,
   useStyles,
 } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
@@ -43,7 +46,7 @@ import { useDropOutside } from './useDropOutside';
 import { IElementsTreeOptions, useElementsTree } from './useElementsTree';
 import { useElementsTreeFolderExplorer } from './useElementsTreeFolderExplorer';
 
-const styles = css`
+const oldStyles = css`
   box {
     display: flex;
     flex-direction: column;
@@ -75,10 +78,6 @@ const styles = css`
     max-width: 100%;
   }
 
-  FolderExplorerPath {
-    padding: 0 4px 8px 4px;
-  }
-
   drop-outside {
     composes: theme-border-color-background from global;
     border: dashed 2px;
@@ -143,9 +142,10 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
   onSelect,
   onFilter,
 }) {
+  const styles = useS(elementsTreeStyles);
   const navTreeResource = useService(NavTreeResource);
   const navNodeInfoResource = useService(NavNodeInfoResource);
-  const treeRootRef = useRef<HTMLDivElement>(null);
+  const [treeRootRef, setTreeRootRef] = useState<HTMLDivElement | null>(null);
   const folderExplorer = useElementsTreeFolderExplorer(baseRoot, settings);
 
   const root = folderExplorer.state.folder;
@@ -190,9 +190,9 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
       folderExplorer,
       selectionTree,
       control,
-      getTreeRoot: () => treeRootRef.current,
+      getTreeRoot: () => treeRootRef,
     }),
-    [tree, folderExplorer, selectionTree, control],
+    [tree, folderExplorer, selectionTree, control, treeRootRef],
   );
 
   const getName = useCallback((folder: string) => navNodeInfoResource.get(folder)?.name || 'Not found', [navNodeInfoResource]);
@@ -217,15 +217,17 @@ export const ElementsTree = observer<ElementsTreeProps>(function ElementsTree({
     tree.resetSelection();
   }
 
-  return styled(useStyles(TREE_NODE_STYLES, styles, style))(
+  return styled(useStyles(TREE_NODE_STYLES, oldStyles, style))(
     <>
       <ElementsTreeTools tree={tree} settingsElements={settingsElements} style={style} />
-      <tree-box ref={treeRootRef} {...use({ big })}>
+      <tree-box ref={setTreeRootRef} {...use({ big })}>
         <ElementsTreeContext.Provider value={context}>
           <box className={className}>
             <FolderExplorer state={folderExplorer}>
               <tree ref={dropOutside.mouse.reference} onClick={handleClick}>
-                {settings?.showFolderExplorerPath && <FolderExplorerPath getName={getName} canSkip={canSkip} />}
+                {settings?.showFolderExplorerPath && (
+                  <FolderExplorerPath className={s(styles, { folderExplorerPath: true })} getName={getName} canSkip={canSkip} />
+                )}
                 <drop-outside
                   ref={dndBox.setRef}
                   {...use({
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css
index f1d7456986..c7585635a6 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.m.css
@@ -15,7 +15,3 @@
   flex-direction: row;
   overflow-x: auto;
 }
-
-.fill {
-  flex: 1;
-}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
index 62d6fdcd84..4df5859e9b 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx
@@ -11,6 +11,7 @@ import styled from 'reshadow';
 
 import {
   ACTION_ICON_BUTTON_STYLES,
+  Fill,
   IconButton,
   IconButtonStyles,
   PlaceholderElement,
@@ -77,7 +78,7 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
               onClick={() => setOpen(!opened)}
             />
           )}
-          <div className={s(styles, { fill: true })} />
+          <Fill />
           <ElementsTreeToolsMenu tree={tree} />
           <IconButton
             name="/icons/refresh_sm.svg#root"
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts
index 0d65fe803c..4762529570 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationNodeComponent.ts
@@ -32,7 +32,7 @@ export type NavTreeControlProps = {
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 
-export type NavTreeControlComponent = React.FC<NavTreeControlProps>;
+export type NavTreeControlComponent = React.ForwardRefExoticComponent<NavTreeControlProps>;
 
 export type NavigationNodeComponent = React.FC<{
   node: NavNode;
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
index afc9b36562..3f9b72ba0e 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
 import { useDeferredValue, useEffect } from 'react';
 import styled, { css, use } from 'reshadow';
 
-import { getComputed, TreeNode, useStyles } from '@cloudbeaver/core-blocks';
+import { getComputed, TreeNode, useMergeRefs, useStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { DATA_CONTEXT_NAV_NODE, DATA_CONTEXT_NAV_NODES, NavNodeManagerService } from '@cloudbeaver/core-navigation-tree';
 import { useDNDData } from '@cloudbeaver/core-ui';
@@ -63,6 +63,8 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
     },
   });
 
+  const controlRef = useMergeRefs(navNode.ref, dndData.setTargetRef);
+
   const dndBox = useNavTreeDropBox(node, {
     expanded: navNode.expanded,
     expand: navNode.expand,
@@ -75,12 +77,6 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
     externalExpanded = false;
   }
 
-  function setRef(refObj: HTMLDivElement | null) {
-    //@ts-expect-error ignore
-    navNode.ref.current = refObj;
-    dndData.setTargetRef(refObj);
-  }
-
   const hasNodes = getComputed(() => !!dndBox.state.context && dndBox.state.canDrop && dndBox.state.isOverCurrent);
   const expanded = useDeferredValue(navNode.expanded || externalExpanded);
 
@@ -112,7 +108,7 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
     >
       {/* <DNDPreview data={dndData} src="/icons/empty.svg" /> */}
       <NavigationNodeControlRenderer
-        ref={setRef}
+        ref={controlRef}
         navNode={navNode}
         dragging={dndData.state.isDragging}
         control={externalControl}
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
index 217f66c8a3..33eb27ac2a 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
@@ -6,10 +6,10 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import { forwardRef, useContext, useDeferredValue, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useContext, useDeferredValue, useEffect, useRef, useState } from 'react';
 import styled, { css, use } from 'reshadow';
 
-import { getComputed, TreeNodeContext, useObjectRef } from '@cloudbeaver/core-blocks';
+import { getComputed, TreeNodeContext, useMergeRefs, useObjectRef } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { type NavNode, NavNodeInfoResource } from '@cloudbeaver/core-navigation-tree';
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
@@ -49,50 +49,55 @@ export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
     const navNodeInfoResource = useService(NavNodeInfoResource);
     const observer = useRef<IntersectionObserver | null>(null);
 
+    const setElementRef = useCallback((ref: HTMLDivElement | null) => {
+      if (elementRef.current) {
+        observer.current?.unobserve(elementRef.current);
+      }
+
+      elementRef.current = ref;
+
+      if (elementRef.current) {
+        observer.current?.observe(elementRef.current);
+      }
+    }, []);
+    const mergedRef = useMergeRefs(setElementRef, ref);
+
     if (!contextRef.context) {
       throw new Error('ElementsTreeContext not found');
     }
 
+    const root = contextRef.context?.getTreeRoot();
+
     useEffect(() => {
-      if (elementRef.current) {
-        observer.current = new IntersectionObserver(
-          entries => {
-            for (const entry of entries) {
-              if (entry.target === elementRef.current) {
-                if (entry.isIntersecting) {
-                  setSize(-1);
-                } else {
-                  setSize(elementRef.current.offsetHeight);
-                }
+      observer.current = new IntersectionObserver(
+        entries => {
+          for (const entry of entries) {
+            if (entry.target === elementRef.current) {
+              if (entry.isIntersecting) {
+                setSize(-1);
+              } else {
+                setSize(Math.ceil(elementRef.current.offsetHeight));
               }
             }
-          },
-          {
-            root: contextRef.context?.getTreeRoot(),
-            threshold: 0,
-          },
-        );
+          }
+        },
+        {
+          root,
+          threshold: 0,
+        },
+      );
+
+      if (elementRef.current) {
         observer.current.observe(elementRef.current);
       }
-      return () => observer.current?.disconnect();
-    });
 
-    function setRef(element: HTMLDivElement | null) {
-      elementRef.current = element;
-
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(element);
-        } else {
-          ref.current = element;
-        }
-      }
-    }
+      return () => observer.current?.disconnect();
+    }, [root]);
 
     const displayed = useDeferredValue(size !== -1);
 
     if (displayed) {
-      return <div ref={setRef} style={{ height: `${size}px` }} />;
+      return <div ref={mergedRef} style={{ height: `${size}px` }} />;
     }
 
     const Control = navNode.control || externalControl || NavigationNodeControlLoader;
@@ -104,7 +109,7 @@ export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
     }
 
     return styled(styles)(
-      <Control ref={setRef} {...use({ outdated })} nodeInfo={nodeInfo} dndElement={dragging} style={style} node={node} onClick={onClickHandler} />,
+      <Control ref={mergedRef} {...use({ outdated })} nodeInfo={nodeInfo} dndElement={dragging} style={style} node={node} onClick={onClickHandler} />,
     );
   }),
 );
diff --git a/webapp/packages/plugin-projects/src/FolderDialog.m.css b/webapp/packages/plugin-projects/src/FolderDialog.m.css
new file mode 100644
index 0000000000..060df06e60
--- /dev/null
+++ b/webapp/packages/plugin-projects/src/FolderDialog.m.css
@@ -0,0 +1,3 @@
+.footer {
+  align-items: center;
+}
diff --git a/webapp/packages/plugin-projects/src/FolderDialog.tsx b/webapp/packages/plugin-projects/src/FolderDialog.tsx
index a3fab99c82..437cc4a4e5 100644
--- a/webapp/packages/plugin-projects/src/FolderDialog.tsx
+++ b/webapp/packages/plugin-projects/src/FolderDialog.tsx
@@ -8,17 +8,19 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import styled, { css } from 'reshadow';
 
 import {
   Button,
   Container,
+  Fill,
   InputField,
+  s,
   SubmittingForm,
   Translate,
   useFocus,
   useObservableRef,
   useResource,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
@@ -26,15 +28,7 @@ import { ProjectInfo, ProjectInfoResource } from '@cloudbeaver/core-projects';
 import { createPath, throttleAsync } from '@cloudbeaver/core-utils';
 import { ProjectSelect } from '@cloudbeaver/plugin-projects';
 
-const style = css`
-  CommonDialogFooter {
-    align-items: center;
-  }
-
-  fill {
-    flex: 1;
-  }
-`;
+import style from './FolderDialog.m.css';
 
 interface IFolderDialogState {
   value: string;
@@ -78,6 +72,7 @@ export const FolderDialog: DialogComponent<FolderDialogPayload, IFolderDialogRes
   rejectDialog,
   className,
 }) {
+  const styles = useS(style);
   const translate = useTranslate();
   const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
 
@@ -157,7 +152,7 @@ export const FolderDialog: DialogComponent<FolderDialogPayload, IFolderDialogRes
   const errorMessage = state.valid ? ' ' : translate(state.message ?? 'ui_rename_taken_or_invalid');
   const subTitle = createPath(projectInfoLoader.data?.name ?? state.projectId, state.folder);
 
-  return styled(style)(
+  return (
     <CommonDialogWrapper size="small" className={className} fixedWidth>
       <CommonDialogHeader subTitle={subTitle} title={title} icon={icon} viewBox={viewBox} bigIcon={bigIcon} onReject={rejectDialog} />
       <CommonDialogBody>
@@ -177,15 +172,15 @@ export const FolderDialog: DialogComponent<FolderDialogPayload, IFolderDialogRes
           </Container>
         </SubmittingForm>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['outlined']} onClick={rejectDialog}>
           <Translate token="ui_processing_cancel" />
         </Button>
-        <fill />
+        <Fill />
         <Button type="button" mod={['unelevated']} disabled={!state.valid} onClick={resolveHandler}>
           <Translate token={confirmActionText || (create ? 'ui_create' : 'ui_rename')} />
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx b/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx
index 652063cc6b..a3b0da61bd 100644
--- a/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx
+++ b/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx
@@ -7,18 +7,11 @@
  */
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, Container, InputField, SubmittingForm, Translate, useFocus, useObservableRef, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Container, Fill, InputField, SubmittingForm, Translate, useFocus, useObservableRef, useTranslate } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 import { ProjectSelect } from '@cloudbeaver/plugin-projects';
 
-const style = css`
-  fill {
-    flex: 1;
-  }
-`;
-
 export interface ISaveScriptDialogResult {
   name: string;
   projectId: string | null;
@@ -86,7 +79,7 @@ export const SaveScriptDialog: DialogComponent<Payload, ISaveScriptDialogResult>
 
   const errorMessage = state.valid ? ' ' : translate(state.message ?? 'ui_rename_taken_or_invalid');
 
-  return styled(style)(
+  return (
     <CommonDialogWrapper size="small" className={className} fixedWidth>
       <CommonDialogHeader title={translate('plugin_resource_manager_scripts_save_script')} icon="/icons/sql_script_m.svg" onReject={rejectDialog} />
       <CommonDialogBody>
@@ -121,11 +114,11 @@ export const SaveScriptDialog: DialogComponent<Payload, ISaveScriptDialogResult>
         <Button type="button" mod={['outlined']} onClick={rejectDialog}>
           <Translate token="ui_processing_cancel" />
         </Button>
-        <fill />
+        <Fill />
         <Button type="button" mod={['unelevated']} disabled={!state.valid} onClick={state.submit}>
           <Translate token="ui_processing_save" />
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.m.css b/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.m.css
new file mode 100644
index 0000000000..b0d20ce7ec
--- /dev/null
+++ b/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.m.css
@@ -0,0 +1,8 @@
+.text {
+  margin: 0;
+}
+.footer {
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
diff --git a/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.tsx b/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.tsx
index 832daf3bb5..cc6ca74962 100644
--- a/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.tsx
+++ b/webapp/packages/plugin-root/src/ServerNodeChangedDialog/ServerNodeChangedDialog.tsx
@@ -6,38 +6,29 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 import { RouterService } from '@cloudbeaver/core-routing';
 
-const styles = css`
-  p {
-    margin: 0;
-  }
-  CommonDialogFooter {
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-`;
+import style from './ServerNodeChangedDialog.m.css';
 
 export const ServerNodeChangedDialog: DialogComponent<null, null> = observer(function ServerNodeChangedDialog({ rejectDialog }) {
+  const styles = useS(style);
   const routerService = useService(RouterService);
   const translate = useTranslate();
   function reload() {
     routerService.reload();
   }
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="small" fixedSize>
       <CommonDialogHeader title="app_root_server_node_changed_title" onReject={rejectDialog} />
       <CommonDialogBody noOverflow>
-        <p>{translate('app_root_server_node_changed_message')}</p>
+        <p className={s(styles, { text: true })}>{translate('app_root_server_node_changed_message')}</p>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['outlined']} onClick={rejectDialog}>
           {translate('ui_processing_cancel')}
         </Button>
@@ -45,6 +36,6 @@ export const ServerNodeChangedDialog: DialogComponent<null, null> = observer(fun
           {translate('ui_processing_reload')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-root/src/SessionExpireDialog/SessionExpiredDialog.tsx b/webapp/packages/plugin-root/src/SessionExpireDialog/SessionExpiredDialog.tsx
index 8a6b22a86d..5ddd34647f 100644
--- a/webapp/packages/plugin-root/src/SessionExpireDialog/SessionExpiredDialog.tsx
+++ b/webapp/packages/plugin-root/src/SessionExpireDialog/SessionExpiredDialog.tsx
@@ -6,42 +6,33 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 import { RouterService } from '@cloudbeaver/core-routing';
 
-const styles = css`
-  p {
-    margin: 0;
-  }
-  CommonDialogFooter {
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-`;
+import style from '../ServerNodeChangedDialog/ServerNodeChangedDialog.m.css';
 
 export const SessionExpiredDialog: DialogComponent<null, null> = observer(function SessionExpiredDialog({ rejectDialog }) {
+  const styles = useS(style);
   const routerService = useService(RouterService);
   const translate = useTranslate();
   function reload() {
     routerService.reload();
   }
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="small" fixedSize>
       <CommonDialogHeader title="app_root_session_expired_title" onReject={rejectDialog} />
       <CommonDialogBody noOverflow>
-        <p>{translate('app_root_session_expired_message')}</p>
+        <p className={s(styles, { text: true })}>{translate('app_root_session_expired_message')}</p>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['unelevated']} onClick={reload}>
           {translate('ui_processing_reload')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-root/src/SessionExpireWarningDialog/SessionExpireWarningDialog.tsx b/webapp/packages/plugin-root/src/SessionExpireWarningDialog/SessionExpireWarningDialog.tsx
index 5f19336889..c2156a9aef 100644
--- a/webapp/packages/plugin-root/src/SessionExpireWarningDialog/SessionExpireWarningDialog.tsx
+++ b/webapp/packages/plugin-root/src/SessionExpireWarningDialog/SessionExpireWarningDialog.tsx
@@ -6,35 +6,27 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 
-const styles = css`
-  p {
-    margin: 0;
-  }
-  CommonDialogFooter {
-    align-items: center;
-    justify-content: flex-end;
-  }
-`;
+import style from '../ServerNodeChangedDialog/ServerNodeChangedDialog.m.css';
 
 export const SessionExpireWarningDialog: DialogComponent<null, null> = observer(function SessionExpireWarningDialog({ rejectDialog }) {
   const translate = useTranslate();
+  const styles = useS(style);
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="small" fixedSize>
       <CommonDialogHeader title="app_root_session_expire_warning_title" onReject={rejectDialog} />
       <CommonDialogBody noOverflow>
-        <p>{translate('app_root_session_expire_warning_message')}</p>
+        <p className={s(styles, { text: true })}>{translate('app_root_session_expire_warning_message')}</p>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button type="button" mod={['unelevated']} onClick={rejectDialog}>
           {translate('app_root_session_expire_warning_button')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/useSQLCodeEditor.ts b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/useSQLCodeEditor.ts
index d0d4647b25..429267e6b1 100644
--- a/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/useSQLCodeEditor.ts
+++ b/webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditor/useSQLCodeEditor.ts
@@ -5,6 +5,8 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observable } from 'mobx';
+
 import { useObservableRef } from '@cloudbeaver/core-blocks';
 import type { EditorState, EditorView, IEditorRef } from '@cloudbeaver/plugin-codemirror6';
 
@@ -64,7 +66,7 @@ export function useSQLCodeEditor(editorRef: IEditorRef | null) {
         }
       },
     }),
-    {},
+    { editorRef: observable.ref },
     { editorRef },
   );
 
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.m.css b/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.m.css
new file mode 100644
index 0000000000..88393af362
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.m.css
@@ -0,0 +1,9 @@
+.footer {
+  align-items: center;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  gap: 16px;
+}
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.tsx b/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.tsx
index f5fe94a0b4..b64fedc6d7 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.tsx
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditor/ScriptImportDialog.tsx
@@ -5,48 +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 { Button, Translate } from '@cloudbeaver/core-blocks';
+import { Button, Fill, s, Translate, useS } from '@cloudbeaver/core-blocks';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
 
-const style = css`
-  CommonDialogFooter {
-    align-items: center;
-  }
-
-  container {
-    width: 100%;
-    display: flex;
-    gap: 16px;
-  }
-
-  fill {
-    flex: 1;
-  }
-`;
+import style from './ScriptImportDialog.m.css';
 
 export const ScriptImportDialog: DialogComponent<null, boolean> = function ScriptImportDialog({ resolveDialog, rejectDialog, className }) {
-  return styled(style)(
+  const styles = useS(style);
+
+  return (
     <CommonDialogWrapper size="small" className={className} fixedWidth>
       <CommonDialogHeader title="ui_changes_might_be_lost" onReject={rejectDialog} />
       <CommonDialogBody>
         <Translate token="sql_editor_upload_script_unsaved_changes_dialog_message" />
       </CommonDialogBody>
-      <CommonDialogFooter>
-        <container>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
+        <div className={s(styles, { container: true })}>
           <Button type="button" mod={['outlined']} onClick={rejectDialog}>
             <Translate token="ui_processing_cancel" />
           </Button>
-          <fill />
+          <Fill />
           <Button type="button" mod={['outlined']} onClick={() => resolveDialog(false)}>
             <Translate token="ui_no" />
           </Button>
           <Button type="button" mod={['unelevated']} onClick={() => resolveDialog(true)}>
             <Translate token="ui_yes" />
           </Button>
-        </container>
+        </div>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 };
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.m.css b/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.m.css
new file mode 100644
index 0000000000..55f3d279e9
--- /dev/null
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.m.css
@@ -0,0 +1,3 @@
+.overlayActions {
+    justify-content: space-between;
+}
diff --git a/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.tsx b/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.tsx
index 2918502721..1f4ee566e0 100644
--- a/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.tsx
+++ b/webapp/packages/plugin-sql-editor/src/SqlEditorOverlay.tsx
@@ -7,7 +7,6 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import styled, { css } from 'reshadow';
 
 import {
   Button,
@@ -19,7 +18,9 @@ import {
   OverlayHeaderSubTitle,
   OverlayHeaderTitle,
   OverlayMessage,
+  s,
   useResource,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import {
@@ -35,19 +36,15 @@ import { NodeManagerUtils } from '@cloudbeaver/core-navigation-tree';
 
 import type { ISqlEditorTabState } from './ISqlEditorTabState';
 import { SqlDataSourceService } from './SqlDataSource/SqlDataSourceService';
+import style from './SqlEditorOverlay.m.css';
 import { SqlEditorService } from './SqlEditorService';
 
-const viewerStyles = css`
-  OverlayActions {
-    justify-content: space-between;
-  }
-`;
-
 interface Props {
   state: ISqlEditorTabState;
 }
 
 export const SqlEditorOverlay = observer<Props>(function SqlEditorOverlay({ state }) {
+  const styles = useS(style);
   const translate = useTranslate();
   const sqlEditorService = useService(SqlEditorService);
   const sqlDataSourceService = useService(SqlDataSourceService);
@@ -96,7 +93,7 @@ export const SqlEditorOverlay = observer<Props>(function SqlEditorOverlay({ stat
     }
   }, [connected, initExecutionContext]);
 
-  return styled(viewerStyles)(
+  return (
     <Overlay active={initExecutionContext && !connection.tryGetData?.connected}>
       <OverlayHeader>
         <OverlayHeaderIcon icon={driver.tryGetData?.icon} />
@@ -104,7 +101,7 @@ export const SqlEditorOverlay = observer<Props>(function SqlEditorOverlay({ stat
         {dataContainer && <OverlayHeaderSubTitle>{dataContainer}</OverlayHeaderSubTitle>}
       </OverlayHeader>
       <OverlayMessage>{translate('sql_editor_restore_message')}</OverlayMessage>
-      <OverlayActions>
+      <OverlayActions className={s(styles, { overlayActions: true })}>
         <Button type="button" mod={['outlined']} loader onClick={cancelConnection}>
           {translate('ui_processing_cancel')}
         </Button>
@@ -112,6 +109,6 @@ export const SqlEditorOverlay = observer<Props>(function SqlEditorOverlay({ stat
           {translate('sql_editor_restore')}
         </Button>
       </OverlayActions>
-    </Overlay>,
+    </Overlay>
   );
 });
diff --git a/webapp/packages/plugin-sql-editor/src/useDataSource.ts b/webapp/packages/plugin-sql-editor/src/useDataSource.ts
index d3f5c54790..0fa5e86132 100644
--- a/webapp/packages/plugin-sql-editor/src/useDataSource.ts
+++ b/webapp/packages/plugin-sql-editor/src/useDataSource.ts
@@ -7,7 +7,7 @@
  */
 import { useEffect } from 'react';
 
-import { useObservableRef } from '@cloudbeaver/core-blocks';
+import { useObjectRef, useObservableRef } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import type { ISqlDataSource } from './SqlDataSource/ISqlDataSource';
@@ -15,25 +15,6 @@ import { SqlEditorService } from './SqlEditorService';
 
 export function useDataSource(dataSource?: ISqlDataSource) {
   const sqlEditorService = useService(SqlEditorService);
-  const refObj = useObservableRef(
-    () => ({
-      async load(refresh?: boolean) {
-        if (!this.dataSource || this.dataSource.isLoading()) {
-          return;
-        }
-
-        if (refresh) {
-          this.dataSource.markOutdated();
-        }
-
-        await this.dataSource.load();
-      },
-    }),
-    {},
-    {
-      dataSource,
-    },
-  );
 
   // TODO: getComputed skips update somehow ...
   const outdated = dataSource && (dataSource.isOutdated() || !dataSource.isLoaded()) && !dataSource.isLoading();
@@ -44,7 +25,9 @@ export function useDataSource(dataSource?: ISqlDataSource) {
     }
 
     if (!dataSource.exception || (Array.isArray(dataSource.exception) && !dataSource.exception.some(Boolean))) {
-      refObj.load();
+      if (!dataSource?.isLoading()) {
+        dataSource.load();
+      }
     }
   });
 
diff --git a/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.m.css b/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.m.css
new file mode 100644
index 0000000000..eeed774332
--- /dev/null
+++ b/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.m.css
@@ -0,0 +1,14 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.sqlCodeEditorLoader {
+  height: 100%;
+  width: 100%;
+}
+.footer {
+  gap: 24px;
+}
diff --git a/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx b/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx
index 203c643032..7dc306523b 100644
--- a/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx
+++ b/webapp/packages/plugin-sql-generator/src/ScriptPreview/ScriptPreviewDialog.tsx
@@ -6,9 +6,8 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Button, useClipboard, useResource, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, Fill, s, useClipboard, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { ConnectionDialectResource, ConnectionExecutionContextService, createConnectionParam } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs';
@@ -16,25 +15,7 @@ import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import type { IDatabaseDataModel } from '@cloudbeaver/plugin-data-viewer';
 import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
 
-const styles = css`
-  wrapper {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-  SQLCodeEditorLoader {
-    height: 100%;
-    width: 100%;
-  }
-  fill {
-    flex: 1;
-  }
-  CommonDialogFooter {
-    gap: 24px;
-  }
-`;
+import style from './ScriptPreviewDialog.m.css';
 
 interface Payload {
   script: string;
@@ -44,6 +25,7 @@ interface Payload {
 export const ScriptPreviewDialog = observer<DialogComponentProps<Payload>>(function ScriptPreviewDialog({ rejectDialog, payload }) {
   const translate = useTranslate();
   const copy = useClipboard();
+  const styles = useS(style);
 
   const connectionExecutionContextService = useService(ConnectionExecutionContextService);
   const context = connectionExecutionContextService.get(payload.model.source.executionContext?.context?.id ?? '');
@@ -62,19 +44,25 @@ export const ScriptPreviewDialog = observer<DialogComponentProps<Payload>>(funct
     rejectDialog();
   };
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader title="data_viewer_script_preview_dialog_title" icon="sql-script" onReject={rejectDialog} />
       <CommonDialogBody noBodyPadding noOverflow>
-        <wrapper>
-          <SQLCodeEditorLoader value={payload.script} extensions={extensions} lineNumbers readonly />
-        </wrapper>
+        <div className={s(styles, { wrapper: true })}>
+          <SQLCodeEditorLoader
+            className={s(styles, { sqlCodeEditorLoader: true })}
+            value={payload.script}
+            extensions={extensions}
+            lineNumbers
+            readonly
+          />
+        </div>
       </CommonDialogBody>
-      <CommonDialogFooter>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
         <Button mod={['unelevated']} onClick={apply}>
           {translate('ui_apply')}
         </Button>
-        <fill />
+        <Fill />
         <Button mod={['outlined']} onClick={() => copy(payload.script, true)}>
           {translate('ui_copy_to_clipboard')}
         </Button>
@@ -82,6 +70,6 @@ export const ScriptPreviewDialog = observer<DialogComponentProps<Payload>>(funct
           {translate('ui_close')}
         </Button>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });
diff --git a/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.m.css b/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.m.css
new file mode 100644
index 0000000000..dd41f9f44a
--- /dev/null
+++ b/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.m.css
@@ -0,0 +1,28 @@
+.footerContainer {
+  display: flex;
+  width: min-content;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
+.buttons {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 24px;
+}
+.errorMessage {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  flex: 1;
+}
+.wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.sqlCodeEditorLoader {
+  height: 100%;
+  width: 100%;
+}
diff --git a/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx b/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx
index eee20e15fc..d0ae7fd0d8 100644
--- a/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx
+++ b/webapp/packages/plugin-sql-generator/src/SqlGenerators/GeneratedSqlDialog.tsx
@@ -8,9 +8,8 @@
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Button, ErrorMessage, Loader, useClipboard, useErrorDetails, useObservableRef, useTranslate } from '@cloudbeaver/core-blocks';
+import { Button, ErrorMessage, Loader, s, useClipboard, useErrorDetails, useObservableRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource, createConnectionParam } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { CommonDialogBody, CommonDialogFooter, CommonDialogHeader, CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs';
@@ -19,39 +18,9 @@ import { useCodemirrorExtensions } from '@cloudbeaver/plugin-codemirror6';
 import { SqlDialectInfoService } from '@cloudbeaver/plugin-sql-editor';
 import { SQLCodeEditorLoader, useSqlDialectExtension } from '@cloudbeaver/plugin-sql-editor-new';
 
+import style from './GeneratedSqlDialog.m.css';
 import { SqlGeneratorsResource } from './SqlGeneratorsResource';
 
-const styles = css`
-  footer-container {
-    display: flex;
-    width: min-content;
-    flex: 1;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 24px;
-  }
-  buttons {
-    flex: 0 0 auto;
-    display: flex;
-    gap: 24px;
-  }
-  ErrorMessage {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    flex: 1;
-  }
-  wrapper {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-  SQLCodeEditorLoader {
-    height: 100%;
-    width: 100%;
-  }
-`;
-
 interface Payload {
   generatorId: string;
   pathId: string;
@@ -60,6 +29,7 @@ interface Payload {
 export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(function GeneratedSqlDialog({ rejectDialog, payload }) {
   const translate = useTranslate();
   const copy = useClipboard();
+  const styles = useS(style);
 
   const sqlDialectInfoService = useService(SqlDialectInfoService);
   const sqlGeneratorsResource = useService(SqlGeneratorsResource);
@@ -119,31 +89,36 @@ export const GeneratedSqlDialog = observer<DialogComponentProps<Payload>>(functi
     });
   });
 
-  return styled(styles)(
+  return (
     <CommonDialogWrapper size="large">
       <CommonDialogHeader title="app_shared_sql_generators_dialog_title" icon="sql-script" onReject={rejectDialog} />
       <CommonDialogBody noOverflow noBodyPadding>
-        <wrapper>
+        <div className={s(styles, { wrapper: true })}>
           <Loader loading={state.loading}>
-            {() => styled(styles)(<SQLCodeEditorLoader value={state.query} extensions={extensions} readonly />)}
+            {() => <SQLCodeEditorLoader className={s(styles, { sqlCodeEditorLoader: true })} value={state.query} extensions={extensions} readonly />}
           </Loader>
-        </wrapper>
+        </div>
       </CommonDialogBody>
       <CommonDialogFooter>
-        <footer-container>
+        <div className={s(styles, { footerContainer: true })}>
           {state.error.responseMessage && (
-            <ErrorMessage text={state.error.responseMessage} hasDetails={error.hasDetails} onShowDetails={error.open} />
+            <ErrorMessage
+              className={s(styles, { errorMessage: true })}
+              text={state.error.responseMessage}
+              hasDetails={error.hasDetails}
+              onShowDetails={error.open}
+            />
           )}
-          <buttons>
+          <div className={s(styles, { buttons: true })}>
             <Button mod={['outlined']} onClick={() => copy(state.query, true)}>
               {translate('ui_copy_to_clipboard')}
             </Button>
             <Button mod={['unelevated']} onClick={rejectDialog}>
               {translate('ui_close')}
             </Button>
-          </buttons>
-        </footer-container>
+          </div>
+        </div>
       </CommonDialogFooter>
-    </CommonDialogWrapper>,
+    </CommonDialogWrapper>
   );
 });