diff --git a/webapp/packages/plugin-connections-administration/package.json b/webapp/packages/plugin-connections-administration/package.json
index 68a58a05d4..7973b6598a 100644
--- a/webapp/packages/plugin-connections-administration/package.json
+++ b/webapp/packages/plugin-connections-administration/package.json
@@ -35,8 +35,7 @@
     "@cloudbeaver/plugin-connections": "~0.1.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
-    "react": "^18.2.0",
-    "reshadow": "^0.0.1"
+    "react": "^18.2.0"
   },
   "peerDependencies": {},
   "devDependencies": {
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.m.css b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.m.css
new file mode 100644
index 0000000000..43076d91f3
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.m.css
@@ -0,0 +1,25 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.staticImage {
+  display: flex;
+  width: 24px;
+
+  &:not(:last-child) {
+    margin-right: 16px;
+  }
+}
+
+.tableColumnValueExpand {
+  cursor: pointer;
+}
+
+.tableItemSelect {
+  margin-left: -10px;
+  margin-right: -10px;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.tsx
index 6b1cab92b2..7570749287 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.tsx
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.tsx
@@ -6,33 +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 { Loader, Placeholder, StaticImage, TableColumnValue, TableItem, TableItemExpand, TableItemSelect } from '@cloudbeaver/core-blocks';
+import { Loader, Placeholder, s, StaticImage, TableColumnValue, TableItem, TableItemExpand, TableItemSelect, useS } from '@cloudbeaver/core-blocks';
 import { DatabaseConnection, DBDriverResource, IConnectionInfoParams } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 
 import { ConnectionsAdministrationService } from '../ConnectionsAdministrationService';
+import styles from './Connection.m.css';
 import { ConnectionEdit } from './ConnectionEdit';
 
-const styles = css`
-  StaticImage {
-    display: flex;
-    width: 24px;
-
-    &:not(:last-child) {
-      margin-right: 16px;
-    }
-  }
-  TableColumnValue[expand] {
-    cursor: pointer;
-  }
-  Checkbox {
-    margin-left: -10px;
-    margin-right: -10px;
-  }
-`;
-
 interface Props {
   connectionKey: IConnectionInfoParams;
   connection: DatabaseConnection;
@@ -43,19 +25,20 @@ export const Connection = observer<Props>(function Connection({ connectionKey, c
   const driversResource = useService(DBDriverResource);
   const connectionsAdministrationService = useService(ConnectionsAdministrationService);
   const icon = driversResource.get(connection.driverId)?.icon;
+  const style = useS(styles);
 
-  return styled(styles)(
+  return (
     <TableItem item={connectionKey} expandElement={ConnectionEdit}>
       <TableColumnValue centerContent flex>
-        <TableItemSelect />
+        <TableItemSelect className={s(style, { tableItemSelect: true })} />
       </TableColumnValue>
-      <TableColumnValue centerContent flex expand>
+      <TableColumnValue className={s(style, { tableColumnValueExpand: true })} centerContent flex expand>
         <TableItemExpand />
       </TableColumnValue>
-      <TableColumnValue centerContent flex expand>
-        <StaticImage icon={icon} />
+      <TableColumnValue className={s(style, { tableColumnValueExpand: true })} centerContent flex expand>
+        <StaticImage className={s(style, { staticImage: true })} icon={icon} />
       </TableColumnValue>
-      <TableColumnValue title={connection.name} expand ellipsis>
+      <TableColumnValue title={connection.name} className={s(style, { tableColumnValueExpand: true })} expand ellipsis>
         {connection.name}
       </TableColumnValue>
       <TableColumnValue>
@@ -63,7 +46,7 @@ export const Connection = observer<Props>(function Connection({ connectionKey, c
         {connection.host && connection.port && `:${connection.port}`}
       </TableColumnValue>
       {projectName !== undefined && (
-        <TableColumnValue title={projectName ?? ''} expand ellipsis>
+        <TableColumnValue title={projectName ?? ''} className={s(style, { tableColumnValueExpand: true })} expand ellipsis>
           {projectName}
         </TableColumnValue>
       )}
@@ -72,6 +55,6 @@ export const Connection = observer<Props>(function Connection({ connectionKey, c
           <Placeholder container={connectionsAdministrationService.connectionDetailsPlaceholder} connection={connection} />
         </Loader>
       </TableColumnValue>
-    </TableItem>,
+    </TableItem>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.ts b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.m.css
similarity index 52%
rename from webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.ts
rename to webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.m.css
index 06be78458a..7b6f7202ff 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.ts
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.m.css
@@ -5,15 +5,12 @@
  * 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 CONNECTION_DETAILS_STYLES = css`
-  StaticImage {
-    width: 24px;
-    height: 24px;
-    margin-right: 10px;
-    &:last-child {
-      margin-right: 0;
-    }
+.staticImage {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  &:last-child {
+    margin-right: 0;
   }
-`;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Origin.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Origin.tsx
index 4e70cf2f7f..c146f193da 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Origin.tsx
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Origin.tsx
@@ -6,16 +6,16 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
 import { AUTH_PROVIDER_LOCAL_ID } from '@cloudbeaver/core-authentication';
-import { PlaceholderComponent, StaticImage } from '@cloudbeaver/core-blocks';
+import { PlaceholderComponent, s, StaticImage, useS } from '@cloudbeaver/core-blocks';
 
 import type { IConnectionDetailsPlaceholderProps } from '../../ConnectionsAdministrationService';
-import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+import ConnectionDetailsStyles from './ConnectionDetailsStyles.m.css';
 
 export const Origin: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = observer(function Origin({ connection }) {
   const isLocal = connection.origin?.type === AUTH_PROVIDER_LOCAL_ID;
+  const style = useS(ConnectionDetailsStyles);
 
   if (!connection.origin || isLocal) {
     return null;
@@ -24,5 +24,5 @@ export const Origin: PlaceholderComponent<IConnectionDetailsPlaceholderProps> =
   const icon = connection.origin.icon;
   const title = connection.origin.displayName;
 
-  return styled(CONNECTION_DETAILS_STYLES)(<StaticImage icon={icon} title={title} />);
+  return <StaticImage className={s(style, { staticImage: true })} icon={icon} title={title} />;
 });
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx
index db035f76eb..fa515e924d 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx
@@ -6,16 +6,16 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { PlaceholderComponent, StaticImage, useResource, useTranslate } from '@cloudbeaver/core-blocks';
+import { PlaceholderComponent, s, StaticImage, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { NetworkHandlerResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections';
 
 import type { IConnectionDetailsPlaceholderProps } from '../../ConnectionsAdministrationService';
-import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+import ConnectionDetailsStyles from './ConnectionDetailsStyles.m.css';
 
 export const SSH: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = observer(function SSH({ connection }) {
   const translate = useTranslate();
+  const style = useS(ConnectionDetailsStyles);
   const sshConfig = connection.networkHandlersConfig?.find(state => state.id === SSH_TUNNEL_ID);
   const applicable = sshConfig?.enabled === true;
   const handler = useResource(SSH, NetworkHandlerResource, SSH_TUNNEL_ID, { active: applicable });
@@ -24,7 +24,11 @@ export const SSH: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = obs
     return null;
   }
 
-  return styled(CONNECTION_DETAILS_STYLES)(
-    <StaticImage icon="/icons/ssh_tunnel.svg" title={translate(handler.data?.label || 'connections_network_handler_ssh_tunnel_title')} />,
+  return (
+    <StaticImage
+      className={s(style, { staticImage: true })}
+      icon="/icons/ssh_tunnel.svg"
+      title={translate(handler.data?.label || 'connections_network_handler_ssh_tunnel_title')}
+    />
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Template.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Template.tsx
index 2db366f4e3..04e433dfdd 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Template.tsx
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Template.tsx
@@ -6,17 +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 { PlaceholderComponent, StaticImage } from '@cloudbeaver/core-blocks';
+import { PlaceholderComponent, s, StaticImage, useS } from '@cloudbeaver/core-blocks';
 
 import type { IConnectionDetailsPlaceholderProps } from '../../ConnectionsAdministrationService';
-import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+import ConnectionDetailsStyles from './ConnectionDetailsStyles.m.css';
 
 export const Template: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = observer(function Template({ connection }) {
+  const style = useS(ConnectionDetailsStyles);
   if (!connection.template) {
     return null;
   }
 
-  return styled(CONNECTION_DETAILS_STYLES)(<StaticImage icon="/icons/template_connection.svg" title="Template connection" />);
+  return <StaticImage className={s(style, { staticImage: true })} icon="/icons/template_connection.svg" title="Template connection" />;
 });
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.m.css b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.m.css
new file mode 100644
index 0000000000..05adef07d2
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.m.css
@@ -0,0 +1,20 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.box {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  box-sizing: border-box;
+  padding-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  height: 740px;
+}
+
+.loader {
+  height: 100%;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
index 3234377a84..e720fb59bd 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx
@@ -7,26 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Loader } from '@cloudbeaver/core-blocks';
+import { Loader, s, useS } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource, IConnectionInfoParams } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { ConnectionFormLoader, useConnectionFormState } from '@cloudbeaver/plugin-connections';
 
-const styles = css`
-  box {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    box-sizing: border-box;
-    padding-bottom: 24px;
-    display: flex;
-    flex-direction: column;
-    height: 740px;
-  }
-  Loader {
-    height: 100%;
-  }
-`;
+import styles from './ConnectionEdit.m.css';
 
 interface Props {
   item: IConnectionInfoParams;
@@ -38,6 +25,7 @@ export const ConnectionEdit = observer<Props>(function ConnectionEditNew({ item
   // const collapse = useCallback(() => tableContext?.setItemExpand(item, false), [tableContext, item]);
 
   const data = useConnectionFormState(connectionInfoResource, state => state.setOptions('edit', 'admin'));
+  const style = useS(styles);
 
   const projectId = item.projectId;
   const connectionId = item.connectionId;
@@ -46,15 +34,15 @@ export const ConnectionEdit = observer<Props>(function ConnectionEditNew({ item
     data.setConfig(projectId, { connectionId });
   }, [data, projectId, connectionId]);
 
-  return styled(styles)(
-    <box>
-      <Loader suspense>
+  return (
+    <div className={s(style, { box: true })}>
+      <Loader className={s(style, { loader: true })} suspense>
         <ConnectionFormLoader
           state={data}
           // onCancel={collapse}
           // onSave={collapse}
         />
       </Loader>
-    </box>,
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.m.css b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.m.css
new file mode 100644
index 0000000000..32fd50b114
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.m.css
@@ -0,0 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.tsx b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.tsx
index 7dee38f912..b2ff482996 100644
--- a/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.tsx
+++ b/webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.tsx
@@ -7,12 +7,12 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useMemo, useState } from 'react';
-import styled, { css } from 'reshadow';
 
-import { ItemList, ItemListSearch, useFocus, useTranslate } from '@cloudbeaver/core-blocks';
+import { ItemList, ItemListSearch, s, useFocus, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import type { DBDriver } from '@cloudbeaver/core-connections';
 
 import { Driver } from './Driver';
+import styles from './DriverList.m.css';
 
 interface Props {
   drivers: DBDriver[];
@@ -20,18 +20,11 @@ interface Props {
   onSelect: (driverId: string) => void;
 }
 
-const style = css`
-  div {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-`;
-
 export const DriverList = observer<Props>(function DriverList({ drivers, className, onSelect }) {
   const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const translate = useTranslate();
   const [search, setSearch] = useState('');
+  const style = useS(styles);
   const filteredDrivers = useMemo(() => {
     if (!search) {
       return drivers;
@@ -39,14 +32,14 @@ export const DriverList = observer<Props>(function DriverList({ drivers, classNa
     return drivers.filter(driver => driver.name?.toUpperCase().includes(search.toUpperCase()));
   }, [search, drivers]);
 
-  return styled(style)(
-    <div ref={focusedRef}>
+  return (
+    <div ref={focusedRef} className={s(style, { container: true })}>
       <ItemListSearch value={search} placeholder={translate('connections_driver_search_placeholder')} onChange={setSearch} />
       <ItemList className={className}>
         {filteredDrivers.map(driver => (
           <Driver key={driver.id} driver={driver} onSelect={onSelect} />
         ))}
       </ItemList>
-    </div>,
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.m.css b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.m.css
new file mode 100644
index 0000000000..e201d43f7f
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.m.css
@@ -0,0 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.coloredContainer {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.group {
+  max-height: 100%;
+  position: relative;
+  overflow: auto !important;
+}
+
+.loader {
+  z-index: 2;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
index 96e0a13204..053d4fa2f7 100644
--- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.tsx
@@ -8,7 +8,6 @@
 import { computed } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import styled, { css } from 'reshadow';
 
 import { TeamsResource, UsersResource, UsersResourceFilterKey } from '@cloudbeaver/core-authentication';
 import {
@@ -17,9 +16,11 @@ import {
   Group,
   InfoItem,
   Loader,
+  s,
   TextPlaceholder,
   useAutoLoad,
   useResource,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import { isCloudConnection } from '@cloudbeaver/core-connections';
@@ -28,29 +29,15 @@ import { CachedMapAllKey, CachedResourceOffsetPageListKey } from '@cloudbeaver/c
 import { TabContainerPanelComponent, useTab } from '@cloudbeaver/core-ui';
 import type { IConnectionFormProps } from '@cloudbeaver/plugin-connections';
 
+import styles from './ConnectionAccess.m.css';
 import { ConnectionAccessGrantedList } from './ConnectionAccessGrantedList';
 import { ConnectionAccessList } from './ConnectionAccessList';
 import { useConnectionAccessState } from './useConnectionAccessState';
 
-const styles = css`
-  ColoredContainer {
-    flex: 1;
-    height: 100%;
-    box-sizing: border-box;
-  }
-  Group {
-    max-height: 100%;
-    position: relative;
-    overflow: auto !important;
-  }
-  Loader {
-    z-index: 2;
-  }
-`;
-
 export const ConnectionAccess: TabContainerPanelComponent<IConnectionFormProps> = observer(function ConnectionAccess({ tabId, state: formState }) {
   const state = useConnectionAccessState(formState.info);
   const translate = useTranslate();
+  const style = useS(styles);
 
   const { selected } = useTab(tabId);
 
@@ -86,41 +73,39 @@ export const ConnectionAccess: TabContainerPanelComponent<IConnectionFormProps>
     info = 'cloud_connections_access_placeholder';
   }
 
-  return styled(styles)(
-    <Loader state={[users, teams, state.state]}>
-      {() =>
-        styled(styles)(
-          <ColoredContainer parent gap vertical>
-            {!users.resource.values.length && !teams.resource.values.length ? (
-              <Group keepSize large>
-                <TextPlaceholder>{translate('connections_administration_connection_access_empty')}</TextPlaceholder>
-              </Group>
-            ) : (
-              <>
-                {info && <InfoItem info={info} />}
-                <Container gap overflow>
-                  <ConnectionAccessGrantedList
-                    grantedUsers={grantedUsers.get()}
-                    grantedTeams={grantedTeams.get()}
+  return (
+    <Loader className={s(style, { loader: true })} state={[users, teams, state.state]}>
+      {() => (
+        <ColoredContainer className={s(style, { coloredContainer: true })} parent gap vertical>
+          {!users.resource.values.length && !teams.resource.values.length ? (
+            <Group className={s(style, { group: true })} keepSize large>
+              <TextPlaceholder>{translate('connections_administration_connection_access_empty')}</TextPlaceholder>
+            </Group>
+          ) : (
+            <>
+              {info && <InfoItem info={info} />}
+              <Container gap overflow>
+                <ConnectionAccessGrantedList
+                  grantedUsers={grantedUsers.get()}
+                  grantedTeams={grantedTeams.get()}
+                  disabled={disabled}
+                  onEdit={state.edit}
+                  onRevoke={state.revoke}
+                />
+                {state.state.editing && (
+                  <ConnectionAccessList
+                    userList={users.resource.values}
+                    teamList={teams.resource.values}
+                    grantedSubjects={state.state.grantedSubjects}
                     disabled={disabled}
-                    onEdit={state.edit}
-                    onRevoke={state.revoke}
+                    onGrant={state.grant}
                   />
-                  {state.state.editing && (
-                    <ConnectionAccessList
-                      userList={users.resource.values}
-                      teamList={teams.resource.values}
-                      grantedSubjects={state.state.grantedSubjects}
-                      disabled={disabled}
-                      onGrant={state.grant}
-                    />
-                  )}
-                </Container>
-              </>
-            )}
-          </ColoredContainer>,
-        )
-      }
-    </Loader>,
+                )}
+              </Container>
+            </>
+          )}
+        </ColoredContainer>
+      )}
+    </Loader>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.m.css b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.m.css
new file mode 100644
index 0000000000..bb34b99105
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.m.css
@@ -0,0 +1,35 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.table {
+  composes: theme-background-surface theme-text-on-surface from global;
+}
+
+.group {
+  position: relative;
+}
+
+.group,
+.container,
+.tableContainer {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.connectionAccessTableHeader {
+  flex: 0 0 auto;
+}
+
+.tableContainer {
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
index c0989b2d99..e662fda307 100644
--- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessGrantedList.tsx
@@ -8,7 +8,6 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
-import styled, { css } from 'reshadow';
 
 import type { TeamInfo } from '@cloudbeaver/core-authentication';
 import {
@@ -16,46 +15,24 @@ import {
   getComputed,
   getSelectedItems,
   Group,
+  s,
   Table,
   TableBody,
   TableColumnValue,
   TableItem,
   useObjectRef,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import type { TLocalizationToken } from '@cloudbeaver/core-localization';
 import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
 
+import styles from './ConnectionAccessGrantedList.m.css';
 import { ConnectionAccessTableHeader, IFilterState } from './ConnectionAccessTableHeader/ConnectionAccessTableHeader';
 import { ConnectionAccessTableInnerHeader } from './ConnectionAccessTableHeader/ConnectionAccessTableInnerHeader';
 import { ConnectionAccessTableItem } from './ConnectionAccessTableItem';
 import { getFilteredTeams, getFilteredUsers } from './getFilteredSubjects';
 
-const styles = css`
-  Table {
-    composes: theme-background-surface theme-text-on-surface from global;
-  }
-  Group {
-    position: relative;
-  }
-  Group,
-  container,
-  table-container {
-    height: 100%;
-  }
-  container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  ConnectionAccessTableHeader {
-    flex: 0 0 auto;
-  }
-  table-container {
-    overflow: auto;
-  }
-`;
-
 interface Props {
   grantedUsers: AdminUserInfoFragment[];
   grantedTeams: TeamInfo[];
@@ -73,6 +50,7 @@ export const ConnectionAccessGrantedList = observer<Props>(function ConnectionAc
 }) {
   const props = useObjectRef({ onRevoke, onEdit });
   const translate = useTranslate();
+  const style = useS(styles);
   const [selectedSubjects] = useState<Map<any, boolean>>(() => observable(new Map()));
   const [filterState] = useState<IFilterState>(() => observable({ filterValue: '' }));
 
@@ -96,10 +74,10 @@ export const ConnectionAccessGrantedList = observer<Props>(function ConnectionAc
     }
   }
 
-  return styled(styles)(
-    <Group box medium overflow>
-      <container>
-        <ConnectionAccessTableHeader filterState={filterState} disabled={disabled}>
+  return (
+    <Group className={s(style, { group: true })} box medium overflow>
+      <div className={s(style, { container: true })}>
+        <ConnectionAccessTableHeader className={s(style, { connectionAccessTableHeader: true })} filterState={filterState} disabled={disabled}>
           <Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>
             {translate('ui_delete')}
           </Button>
@@ -107,8 +85,8 @@ export const ConnectionAccessGrantedList = observer<Props>(function ConnectionAc
             {translate('ui_edit')}
           </Button>
         </ConnectionAccessTableHeader>
-        <table-container>
-          <Table keys={keys} selectedItems={selectedSubjects}>
+        <div className={s(style, { tableContainer: true })}>
+          <Table className={s(style, { table: true })} keys={keys} selectedItems={selectedSubjects}>
             <ConnectionAccessTableInnerHeader disabled={disabled} />
             <TableBody>
               <TableItem item="tableInfo" selectDisabled>
@@ -139,8 +117,8 @@ export const ConnectionAccessGrantedList = observer<Props>(function ConnectionAc
               ))}
             </TableBody>
           </Table>
-        </table-container>
-      </container>
-    </Group>,
+        </div>
+      </div>
+    </Group>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.m.css b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.m.css
new file mode 100644
index 0000000000..51bb934f68
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.m.css
@@ -0,0 +1,35 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.table {
+  composes: theme-background-surface theme-text-on-surface from global;
+}
+
+.group {
+  position: relative;
+}
+
+.group,
+.container,
+.tableContainer {
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.tableContainer {
+  overflow: auto;
+}
+
+.connectionAccessTableHeader {
+  flex: 0 0 auto;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
index 8865639c91..68faf63972 100644
--- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessList.tsx
@@ -8,7 +8,6 @@
 import { observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
-import styled, { css } from 'reshadow';
 
 import type { TeamInfo } from '@cloudbeaver/core-authentication';
 import {
@@ -16,45 +15,23 @@ import {
   getComputed,
   getSelectedItems,
   Group,
+  s,
   Table,
   TableBody,
   TableColumnValue,
   TableItem,
   useObjectRef,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import type { AdminUserInfoFragment } from '@cloudbeaver/core-sdk';
 
+import styles from './ConnectionAccessList.m.css';
 import { ConnectionAccessTableHeader, IFilterState } from './ConnectionAccessTableHeader/ConnectionAccessTableHeader';
 import { ConnectionAccessTableInnerHeader } from './ConnectionAccessTableHeader/ConnectionAccessTableInnerHeader';
 import { ConnectionAccessTableItem } from './ConnectionAccessTableItem';
 import { getFilteredTeams, getFilteredUsers } from './getFilteredSubjects';
 
-const styles = css`
-  Table {
-    composes: theme-background-surface theme-text-on-surface from global;
-  }
-  Group {
-    position: relative;
-  }
-  Group,
-  container,
-  table-container {
-    height: 100%;
-  }
-  container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-  table-container {
-    overflow: auto;
-  }
-  ConnectionAccessTableHeader {
-    flex: 0 0 auto;
-  }
-`;
-
 interface Props {
   userList: AdminUserInfoFragment[];
   teamList: TeamInfo[];
@@ -66,6 +43,7 @@ interface Props {
 export const ConnectionAccessList = observer<Props>(function ConnectionAccessList({ userList, teamList, grantedSubjects, onGrant, disabled }) {
   const props = useObjectRef({ onGrant });
   const translate = useTranslate();
+  const style = useS(styles);
   const [selectedSubjects] = useState<Map<any, boolean>>(() => observable(new Map()));
   const [filterState] = useState<IFilterState>(() => observable({ filterValue: '' }));
 
@@ -80,16 +58,21 @@ export const ConnectionAccessList = observer<Props>(function ConnectionAccessLis
     selectedSubjects.clear();
   }, []);
 
-  return styled(styles)(
-    <Group box medium overflow>
-      <container>
-        <ConnectionAccessTableHeader filterState={filterState} disabled={disabled}>
+  return (
+    <Group className={s(style, { group: true })} box medium overflow>
+      <div className={s(style, { container: true })}>
+        <ConnectionAccessTableHeader className={s(style, { connectionAccessTableHeader: true })} filterState={filterState} disabled={disabled}>
           <Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>
             {translate('ui_add')}
           </Button>
         </ConnectionAccessTableHeader>
-        <table-container>
-          <Table keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)}>
+        <div className={s(style, { tableContainer: true })}>
+          <Table
+            className={s(style, { table: true })}
+            keys={keys}
+            selectedItems={selectedSubjects}
+            isItemSelectable={item => !grantedSubjects.includes(item)}
+          >
             <ConnectionAccessTableInnerHeader disabled={disabled} />
             <TableBody>
               {!keys.length && filterState.filterValue && (
@@ -122,8 +105,8 @@ export const ConnectionAccessList = observer<Props>(function ConnectionAccessLis
               ))}
             </TableBody>
           </Table>
-        </table-container>
-      </container>
-    </Group>,
+        </div>
+      </div>
+    </Group>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.m.css b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.m.css
new file mode 100644
index 0000000000..62d6377e76
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.m.css
@@ -0,0 +1,26 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.buttons {
+  display: flex;
+  gap: 16px;
+}
+
+.header {
+  composes: theme-border-color-background theme-background-surface theme-text-on-surface from global;
+  overflow: hidden;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  gap: 16px;
+  border-bottom: 1px solid;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx
index 9fd94a5e82..8b33ca30be 100644
--- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.tsx
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableHeader/ConnectionAccessTableHeader.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, { css } from 'reshadow';
 
-import { Filter, useStyles, useTranslate } from '@cloudbeaver/core-blocks';
+import { Filter, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
+
+import styles from './ConnectionAccessTableHeader.m.css';
 
 export interface IFilterState {
   filterValue: string;
@@ -20,26 +21,6 @@ interface Props {
   className?: string;
 }
 
-const styles = css`
-  buttons {
-    display: flex;
-    gap: 16px;
-  }
-  header {
-    composes: theme-border-color-background theme-background-surface theme-text-on-surface from global;
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-    gap: 16px;
-    border-bottom: 1px solid;
-  }
-`;
-
 export const ConnectionAccessTableHeader = observer<React.PropsWithChildren<Props>>(function ConnectionAccessTableHeader({
   filterState,
   disabled,
@@ -47,15 +28,16 @@ export const ConnectionAccessTableHeader = observer<React.PropsWithChildren<Prop
   children,
 }) {
   const translate = useTranslate();
-  return styled(useStyles(styles))(
-    <header className={className}>
+  const style = useS(styles);
+  return (
+    <div className={s(style, { header: true }, className)}>
       <Filter
         disabled={disabled}
         placeholder={translate('connections_connection_access_filter_placeholder')}
         name="filterValue"
         state={filterState}
       />
-      <buttons>{children}</buttons>
-    </header>,
+      <div className={s(style, { buttons: true })}>{children}</div>
+    </div>
   );
 });
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.m.css b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.m.css
new file mode 100644
index 0000000000..31ba1c2fbf
--- /dev/null
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.m.css
@@ -0,0 +1,12 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.staticImage {
+  display: flex;
+  width: 24px;
+}
diff --git a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.tsx b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.tsx
index f08c951b53..26b7be72f3 100644
--- a/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.tsx
+++ b/webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccessTableItem.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, { css } from 'reshadow';
 
-import { StaticImage, TableColumnValue, TableItem, TableItemSelect } from '@cloudbeaver/core-blocks';
+import { s, StaticImage, TableColumnValue, TableItem, TableItemSelect, useS } from '@cloudbeaver/core-blocks';
+
+import styles from './ConnectionAccessTableItem.m.css';
 
 interface Props {
   id: any;
@@ -21,13 +22,6 @@ interface Props {
   className?: string;
 }
 
-const style = css`
-  StaticImage {
-    display: flex;
-    width: 24px;
-  }
-`;
-
 export const ConnectionAccessTableItem = observer<Props>(function ConnectionAccessTableItem({
   id,
   name,
@@ -38,16 +32,17 @@ export const ConnectionAccessTableItem = observer<Props>(function ConnectionAcce
   disabled,
   className,
 }) {
-  return styled(style)(
+  const style = useS(styles);
+  return (
     <TableItem item={id} title={tooltip} disabled={disabled} selectDisabled={disabled} className={className}>
       <TableColumnValue centerContent flex>
         <TableItemSelect disabled={disabled} />
       </TableColumnValue>
       <TableColumnValue>
-        <StaticImage icon={icon} title={iconTooltip} />
+        <StaticImage className={s(style, { staticImage: true })} icon={icon} title={iconTooltip} />
       </TableColumnValue>
       <TableColumnValue>{name}</TableColumnValue>
       <TableColumnValue>{description}</TableColumnValue>
-    </TableItem>,
+    </TableItem>
   );
 });