diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.m.css b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.m.css
new file mode 100644
index 0000000000..c141d48ce2
--- /dev/null
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.m.css
@@ -0,0 +1,108 @@
+.container,
+.button {
+  composes: theme-ripple from global;
+}
+
+.container {
+  box-sizing: border-box;
+  display: inline-flex;
+  padding: 0px 1px;
+}
+
+.name,
+.value {
+  composes: theme-typography--caption from global;
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex: 1;
+  padding: 4px 0;
+
+  & .shadowInput {
+    height: 24px;
+    padding: 0 36px 0 12px;
+  }
+}
+
+.value,
+.name {
+  margin-left: 24px;
+}
+
+.name {
+  flex: 0 0 auto;
+  width: 276px;
+}
+
+.remove {
+  position: relative;
+  flex: 0 0 auto;
+  align-items: center;
+  display: flex;
+  opacity: 0;
+}
+
+.select {
+  flex: 0 0 auto;
+  align-items: center;
+  display: flex;
+}
+
+.container:hover .remove {
+  opacity: 1;
+}
+
+.shadowInput {
+  composes: theme-background-surface from global;
+}
+
+.name .shadowInput,
+.value .shadowInput {
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  outline: none;
+
+  &.edited {
+    font-weight: 600;
+  }
+
+  &:global([readonly]),
+  &:not(:focus):not([data-focus='true']) {
+    background: transparent !important;
+    border: solid 2px transparent !important;
+  }
+}
+
+.icon,
+.iconOrImage {
+  height: 16px;
+  display: block;
+}
+
+.select .icon,
+.select .iconOrImage {
+  &.focus {
+    transform: rotate(180deg);
+  }
+}
+
+.button {
+  background: transparent;
+  outline: none;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.button,
+.propertyValueSelector {
+  composes: theme-form-element-radius from global;
+  margin: 2px;
+  overflow: hidden;
+}
+
+.error {
+  composes: theme-text-error from global;
+}
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
index 26253898a7..2ca3dffa11 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
@@ -7,111 +7,17 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import styled, { css, use } from 'reshadow';
 
 import { ShadowInput } from '../FormControls/ShadowInput';
 import { Icon } from '../Icon';
 import { IconOrImage } from '../IconOrImage';
 import { useTranslate } from '../localization/useTranslate';
+import { s } from '../s';
+import { useS } from '../useS';
 import type { IProperty } from './IProperty';
+import classes from './PropertyItem.m.css';
 import { PropertyValueSelector } from './PropertyValueSelector';
 
-const styles = css`
-  [|error] {
-    composes: theme-text-error from global;
-  }
-  property-item,
-  button {
-    composes: theme-ripple from global;
-  }
-  property-item {
-    box-sizing: border-box;
-    display: inline-flex;
-    padding: 0px 1px;
-  }
-  property-name,
-  property-value {
-    composes: theme-typography--caption from global;
-    position: relative;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    flex: 1;
-    padding: 4px 0;
-
-    & ShadowInput {
-      height: 24px;
-      padding: 0 36px 0 12px;
-    }
-  }
-  property-value,
-  property-name {
-    margin-left: 24px;
-  }
-  property-name {
-    flex: 0 0 auto;
-    width: 276px;
-  }
-  property-remove {
-    position: relative;
-    flex: 0 0 auto;
-    align-items: center;
-    display: flex;
-    opacity: 0;
-  }
-  property-select {
-    flex: 0 0 auto;
-    align-items: center;
-    display: flex;
-  }
-  property-item:hover property-remove {
-    opacity: 1;
-  }
-  ShadowInput {
-    composes: theme-background-surface from global;
-  }
-  property-name ShadowInput,
-  property-value ShadowInput {
-    box-sizing: border-box;
-    font: inherit;
-    color: inherit;
-    width: 100%;
-    outline: none;
-
-    &[|edited] {
-      font-weight: 600;
-    }
-    &:global([readonly]),
-    &:not(:focus):not([|focus]) {
-      background: transparent !important;
-      border: solid 2px transparent !important;
-    }
-  }
-  Icon,
-  IconOrImage {
-    height: 16px;
-    display: block;
-  }
-  property-select Icon,
-  property-select IconOrImage {
-    &[|focus] {
-      transform: rotate(180deg);
-    }
-  }
-  button {
-    background: transparent;
-    outline: none;
-    padding: 4px;
-    cursor: pointer;
-  }
-  button,
-  PropertyValueSelector {
-    composes: theme-form-element-radius from global;
-    margin: 2px;
-    overflow: hidden;
-  }
-`;
-
 interface Props {
   property: IProperty;
   value?: string;
@@ -123,6 +29,7 @@ interface Props {
 }
 
 export const PropertyItem = observer<Props>(function PropertyItem({ property, value, onNameChange, onValueChange, onRemove, error, readOnly }) {
+  const styles = useS(classes);
   const translate = useTranslate();
   const isDeletable = !readOnly && !property.displayName;
   const edited = value !== undefined && value !== property.defaultValue;
@@ -148,11 +55,12 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
   const keyPlaceholder = String(property.keyPlaceholder);
   const valuePlaceholder = String(property.valuePlaceholder);
 
-  return styled(styles)(
-    <property-item>
-      <property-name title={property.description} {...use({ error })}>
+  return (
+    <div className={s(styles, { container: true })}>
+      <div className={s(styles, { name: true, error })} title={property.description}>
         <ShadowInput
           ref={keyInputRef}
+          className={s(styles, { shadowInput: true })}
           type="text"
           name={property.id}
           placeholder={keyPlaceholder}
@@ -162,9 +70,10 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
         >
           {property.displayName || property.key}
         </ShadowInput>
-      </property-name>
-      <property-value ref={setValueRef} title={String(propertyValue)}>
+      </div>
+      <div ref={setValueRef} className={s(styles, { value: true })} title={String(propertyValue)}>
         <ShadowInput
+          className={s(styles, { shadowInput: true, edited })}
           type="text"
           name={`${property.id}_value`}
           placeholder={valuePlaceholder}
@@ -172,38 +81,38 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
           readOnly={readOnly}
           data-focus={focus}
           onChange={handleValueChange}
-          {...use({ focus, edited })}
         >
           {propertyValue}
         </ShadowInput>
         {edited && !isDeletable && (
-          <property-remove title={translate('core_blocks_properties_table_item_reset')}>
-            <button type="button" onClick={handleRevert}>
-              <IconOrImage icon="/icons/data_revert_all_sm.svg" viewBox="0 0 16 16" />
+          <div className={s(styles, { remove: true })} title={translate('core_blocks_properties_table_item_reset')}>
+            <button className={s(styles, { button: true })} type="button" onClick={handleRevert}>
+              <IconOrImage className={s(styles, { iconOrImage: true })} icon="/icons/data_revert_all_sm.svg" viewBox="0 0 16 16" />
             </button>
-          </property-remove>
+          </div>
         )}
         {isDeletable && (
-          <property-remove title={translate('core_blocks_properties_table_item_remove')}>
-            <button type="button" onClick={handleRemove}>
-              <Icon name="reject" viewBox="0 0 11 11" />
+          <div className={s(styles, { remove: true })} title={translate('core_blocks_properties_table_item_remove')}>
+            <button className={s(styles, { button: true })} type="button" onClick={handleRemove}>
+              <Icon className={s(styles, { icon: true })} name="reject" viewBox="0 0 11 11" />
             </button>
-          </property-remove>
+          </div>
         )}
         {!readOnly && property.validValues && property.validValues.length > 0 && (
-          <property-select>
+          <div className={s(styles, { select: true })}>
             <PropertyValueSelector
+              className={s(styles, { propertyValueSelector: true })}
               propertyName={property.id}
               values={property.validValues}
               container={valueRef}
               onSelect={handleValueChange}
               onSwitch={setMenuOpen}
             >
-              <Icon name="arrow" viewBox="0 0 16 16" {...use({ focus })} />
+              <Icon className={s(styles, { icon: true, focus })} name="arrow" viewBox="0 0 16 16" />
             </PropertyValueSelector>
-          </property-select>
+          </div>
         )}
-      </property-value>
-    </property-item>,
+      </div>
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.m.css b/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.m.css
new file mode 100644
index 0000000000..da9d7d57a5
--- /dev/null
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.m.css
@@ -0,0 +1,7 @@
+.menuButton {
+  composes: theme-ripple from global;
+  background: transparent;
+  outline: none;
+  padding: 4px;
+  cursor: pointer;
+}
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.tsx
index fa16b1b9a6..643bd510d7 100644
--- a/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.tsx
+++ b/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.tsx
@@ -8,19 +8,12 @@
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useRef } from 'react';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'reakit/Menu';
-import styled, { css } from 'reshadow';
+import styled from 'reshadow';
 
 import { BASE_DROPDOWN_STYLES } from '../FormControls/BASE_DROPDOWN_STYLES';
-
-const styles = css`
-  MenuButton {
-    composes: theme-ripple from global;
-    background: transparent;
-    outline: none;
-    padding: 4px;
-    cursor: pointer;
-  }
-`;
+import { s } from '../s';
+import { useS } from '../useS';
+import classes from './PropertyValueSelector.m.css';
 
 interface Props {
   propertyName?: string;
@@ -40,6 +33,7 @@ export const PropertyValueSelector = observer<React.PropsWithChildren<Props>>(fu
   onSelect,
   onSwitch,
 }) {
+  const styles = useS(classes);
   const menuRef = useRef<HTMLDivElement>(null);
   const menu = useMenuState({
     placement: 'bottom-end',
@@ -76,12 +70,9 @@ export const PropertyValueSelector = observer<React.PropsWithChildren<Props>>(fu
 
   const visible = menu.visible;
 
-  return styled(
-    BASE_DROPDOWN_STYLES,
-    styles,
-  )(
+  return styled(BASE_DROPDOWN_STYLES)(
     <>
-      <MenuButton {...menu} className={className} visible={visible}>
+      <MenuButton {...menu} className={s(styles, { menuButton: true }, className)} visible={visible}>
         {children}
       </MenuButton>
       <Menu {...menu} ref={menuRef} visible={visible} aria-label={propertyName} modal>
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.m.css b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.m.css
new file mode 100644
index 0000000000..8225a1d152
--- /dev/null
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.m.css
@@ -0,0 +1,7 @@
+.wrapper {
+  composes: theme-background-surface from global;
+  display: flex;
+  width: 100%;
+  flex: 1 1 auto;
+  padding-top: 16px;
+}
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.tsx
index d5881537f4..77105a41bc 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertiesPagePanel.tsx
@@ -6,25 +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 { s, useS } from '@cloudbeaver/core-blocks';
 
 import type { ObjectPagePanelComponent } from '../ObjectPage/ObjectPage';
 import { ObjectFolders } from './ObjectFolders';
-
-const viewerStyles = css`
-  wrapper {
-    composes: theme-background-surface from global;
-    display: flex;
-    width: 100%;
-    flex: 1 1 auto;
-    padding-top: 16px;
-  }
-`;
+import classes from './ObjectPropertiesPagePanel.m.css';
 
 export const ObjectPropertiesPagePanel: ObjectPagePanelComponent = observer(function ObjectPropertiesPagePanel({ tab }) {
-  return styled(viewerStyles)(
-    <wrapper>
+  const styles = useS(classes);
+
+  return (
+    <div className={s(styles, { wrapper: true })}>
       <ObjectFolders tab={tab} />
-    </wrapper>,
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.m.css b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.m.css
new file mode 100644
index 0000000000..723b6e76cb
--- /dev/null
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.m.css
@@ -0,0 +1,23 @@
+.container {
+  cursor: pointer;
+  width: 100%;
+}
+
+.container:not(.empty) .value {
+  padding-right: 8px;
+}
+
+.box {
+  display: flex;
+  height: 100%;
+  align-items: center;
+
+  & .icon {
+    width: 16px;
+  }
+}
+
+.value {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx
index f64c80a0e9..e3eff1fd6a 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/CellFormatter.tsx
@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext, useState } from 'react';
-import styled, { css, use } from 'reshadow';
 
-import { getComputed, Icon, useMouse, useStateDelay } from '@cloudbeaver/core-blocks';
+import { getComputed, Icon, s, useMouse, useS, useStateDelay } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource, DATA_CONTEXT_CONNECTION } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { DATA_CONTEXT_NAV_NODE, type DBObject, type NavNode, NavNodeManagerService } from '@cloudbeaver/core-navigation-tree';
@@ -19,37 +18,16 @@ import { MENU_NAV_TREE, useNode } from '@cloudbeaver/plugin-navigation-tree';
 import type { RenderCellProps } from '@cloudbeaver/plugin-react-data-grid';
 
 import { getValue } from '../../helpers';
+import classes from './CellFormatter.m.css';
 import { TableContext } from './TableContext';
 
-const menuStyles = css`
-  menu-container {
-    cursor: pointer;
-    width: 100%;
-  }
-  menu-container:not([|menuEmpty]) value {
-    padding-right: 8px;
-  }
-  menu-box {
-    display: flex;
-    height: 100%;
-    align-items: center;
-
-    & Icon {
-      width: 16px;
-    }
-  }
-  value {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-`;
-
 interface Props {
   value: string;
   node: NavNode;
 }
 
 export const Menu = observer<Props>(function Menu({ value, node }) {
+  const styles = useS(classes);
   const navNodeManagerService = useService(NavNodeManagerService);
   const connectionsInfoResource = useService(ConnectionInfoResource);
   const menu = useMenu({ menu: MENU_NAV_TREE });
@@ -80,21 +58,21 @@ export const Menu = observer<Props>(function Menu({ value, node }) {
       return !menu.available;
     });
 
-  return styled(menuStyles)(
-    <menu-container ref={mouse.reference} onDoubleClick={openNode} {...use({ menuEmpty, menuOpened })}>
-      <menu-box>
-        <value className="cell-formatter__value" title={value}>
+  return (
+    <div ref={mouse.reference} className={s(styles, { container: true, empty: menuEmpty })} onDoubleClick={openNode}>
+      <div className={classes.box}>
+        <div className={s(styles, { value: true }, 'cell-formatter__value')} title={value}>
           {value}
-        </value>
+        </div>
         {!menuEmpty && (
           <ContextMenu menu={menu} modal disclosure onVisibleSwitch={switchState}>
-            <menu-icon>
-              <Icon name="snack" viewBox="0 0 16 10" />
-            </menu-icon>
+            <div>
+              <Icon className={classes.icon} name="snack" viewBox="0 0 16 10" />
+            </div>
           </ContextMenu>
         )}
-      </menu-box>
-    </menu-container>,
+      </div>
+    </div>
   );
 });
 
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.m.css b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.m.css
new file mode 100644
index 0000000000..391a2f7a0e
--- /dev/null
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.m.css
@@ -0,0 +1,21 @@
+.container {
+  composes: theme-typography--body2 from global;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.dataGrid {
+  width: 100%;
+  height: 100%;
+}
+
+.info {
+  padding: 4px 12px;
+}
+
+.objectPropertyTableFooter {
+  composes: theme-background-secondary theme-text-on-secondary theme-border-color-background from global;
+  border-top: 1px solid;
+}
diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx
index 1d2954b204..f667a24fae 100644
--- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx
+++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx
@@ -7,9 +7,9 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
-import styled, { css } from 'reshadow';
+import styled from 'reshadow';
 
-import { IScrollState, Link, useControlledScroll, useStyles, useTable, useTranslate } from '@cloudbeaver/core-blocks';
+import { IScrollState, Link, s, useControlledScroll, useS, useStyles, useTable, useTranslate } from '@cloudbeaver/core-blocks';
 import type { DBObject } from '@cloudbeaver/core-navigation-tree';
 import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk';
 import { useTabLocalState } from '@cloudbeaver/core-ui';
@@ -26,30 +26,10 @@ import { ColumnSelect } from './Columns/ColumnSelect/ColumnSelect';
 import { HeaderRenderer } from './HeaderRenderer';
 import baseStyles from './styles/base.scss';
 import { tableStyles } from './styles/styles';
+import classes from './Table.m.css';
 import { TableContext } from './TableContext';
 import { useTableData } from './useTableData';
 
-const style = css`
-  wrapper {
-    composes: theme-typography--body2 from global;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-  DataGrid {
-    width: 100%;
-    height: 100%;
-  }
-  data-info {
-    padding: 4px 12px;
-  }
-  ObjectPropertyTableFooter {
-    composes: theme-background-secondary theme-text-on-secondary theme-border-color-background from global;
-    border-top: 1px solid;
-  }
-`;
-
 const CELL_FONT = '400 12px Roboto';
 const COLUMN_FONT = '700 12px Roboto';
 const CELL_PADDING = 16;
@@ -95,9 +75,11 @@ function getMeasuredCells(columns: ObjectPropertyInfo[], rows: DBObject[]) {
 const CUSTOM_COLUMNS = [ColumnSelect, ColumnIcon];
 
 export const Table = observer<TableProps>(function Table({ objects, hasNextPage, loadMore }) {
+  const styles = useS(classes);
+
   const [tableContainer, setTableContainerRef] = useState<HTMLDivElement | null>(null);
   const translate = useTranslate();
-  const styles = useStyles(style, baseStyles, tableStyles);
+  const deprecatedStyles = useStyles(baseStyles, tableStyles);
   const tableState = useTable();
   const tabLocalState = useTabLocalState<IScrollState>(() => ({ scrollTop: 0, scrollLeft: 0 }));
 
@@ -137,11 +119,11 @@ export const Table = observer<TableProps>(function Table({ objects, hasNextPage,
     return null;
   }
 
-  return styled(styles)(
+  return styled(deprecatedStyles)(
     <TableContext.Provider value={{ tableData, tableState }}>
-      <wrapper ref={setTableContainerRef} className="metadata-grid-container">
+      <div ref={setTableContainerRef} className={s(styles, { container: true }, 'metadata-grid-container')}>
         <DataGrid
-          className="cb-metadata-grid-theme"
+          className={s(styles, { dataGrid: true }, 'cb-metadata-grid-theme')}
           rows={objects}
           rowKeyGetter={row => row.id}
           columns={tableData.columns}
@@ -149,14 +131,14 @@ export const Table = observer<TableProps>(function Table({ objects, hasNextPage,
           onScroll={handleScroll}
         />
         {hasNextPage && (
-          <data-info>
+          <div className={s(styles, { info: true })}>
             <Link title={translate('app_navigationTree_limited')} onClick={loadMore}>
               {translate('ui_load_more')}
             </Link>
-          </data-info>
+          </div>
         )}
-        <ObjectPropertyTableFooter nodeIds={nodeIds} tableState={tableState} />
-      </wrapper>
+        <ObjectPropertyTableFooter className={s(styles, { objectPropertyTableFooter: true })} nodeIds={nodeIds} tableState={tableState} />
+      </div>
     </TableContext.Provider>,
   );
 });