diff --git a/package-lock.json b/package-lock.json
index 8221684b60..c8b2cd4d5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,9 +82,9 @@
                 "npm-run-all": "^4.1.5",
                 "postcss": "^8.4.33",
                 "prettier": "^3.2.4",
-                "react": "^18.2.0",
+                "react": "^18.3.1",
                 "react-docgen-typescript": "^2.2.2",
-                "react-dom": "^18.2.0",
+                "react-dom": "^18.3.1",
                 "rimraf": "^5.0.5",
                 "sass": "^1.70.0",
                 "sass-loader": "^14.0.0",
@@ -22975,9 +22975,9 @@
             "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
         },
         "node_modules/react": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
             "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
@@ -23078,16 +23078,16 @@
             }
         },
         "node_modules/react-dom": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
             "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
-                "scheduler": "^0.23.0"
+                "scheduler": "^0.23.2"
             },
             "peerDependencies": {
-                "react": "^18.2.0"
+                "react": "^18.3.1"
             }
         },
         "node_modules/react-element-to-jsx-string": {
@@ -24140,9 +24140,9 @@
             }
         },
         "node_modules/scheduler": {
-            "version": "0.23.0",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
             "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
diff --git a/package.json b/package.json
index 6b93a18b81..865f62934a 100644
--- a/package.json
+++ b/package.json
@@ -179,9 +179,9 @@
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.33",
         "prettier": "^3.2.4",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
         "react-docgen-typescript": "^2.2.2",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "rimraf": "^5.0.5",
         "sass": "^1.70.0",
         "sass-loader": "^14.0.0",
diff --git a/src/components/ActionTooltip/ActionTooltip.tsx b/src/components/ActionTooltip/ActionTooltip.tsx
index e52ef2b6a8..c65ec3bdd5 100644
--- a/src/components/ActionTooltip/ActionTooltip.tsx
+++ b/src/components/ActionTooltip/ActionTooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useForkRef} from '../../hooks';
diff --git a/src/components/Alert/AlertAction.tsx b/src/components/Alert/AlertAction.tsx
index ac42f7577d..136bdd3add 100644
--- a/src/components/Alert/AlertAction.tsx
+++ b/src/components/Alert/AlertAction.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Button} from '../Button';
diff --git a/src/components/Alert/AlertActions.tsx b/src/components/Alert/AlertActions.tsx
index a90d87a270..7634e11cf3 100644
--- a/src/components/Alert/AlertActions.tsx
+++ b/src/components/Alert/AlertActions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Flex} from '../layout';
diff --git a/src/components/Alert/AlertContextProvider.tsx b/src/components/Alert/AlertContextProvider.tsx
index 50b83ac1e5..df65e640a4 100644
--- a/src/components/Alert/AlertContextProvider.tsx
+++ b/src/components/Alert/AlertContextProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AlertContext} from './AlertContext';
diff --git a/src/components/Alert/useAlertContext.tsx b/src/components/Alert/useAlertContext.tsx
index e63fd26b82..638e7eb0ae 100644
--- a/src/components/Alert/useAlertContext.tsx
+++ b/src/components/Alert/useAlertContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AlertContext} from './AlertContext';
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 95190acb8f..61b5cef88c 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -27,10 +27,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
         qa,
     } = props;
 
-    const style = React.useMemo(
-        () => ({backgroundColor, color: borderColor, ...styleProp}),
-        [backgroundColor, borderColor, styleProp],
-    );
+    const style = {backgroundColor, color: borderColor, ...styleProp};
 
     const renderContent = () => {
         if ('imgUrl' in props && props.imgUrl) {
diff --git a/src/components/Avatar/AvatarIcon/AvatarIcon.tsx b/src/components/Avatar/AvatarIcon/AvatarIcon.tsx
index f3cd33d9d6..d063035afe 100644
--- a/src/components/Avatar/AvatarIcon/AvatarIcon.tsx
+++ b/src/components/Avatar/AvatarIcon/AvatarIcon.tsx
@@ -14,7 +14,7 @@ const avatarSizeToIconSize: Record<AvatarSize, number> = {
 };
 
 export const AvatarIcon = ({icon, color, size, className}: AvatarIconProps) => {
-    const style = React.useMemo(() => ({color}), [color]);
+    const style = {color};
 
     return (
         <div style={style} className={className}>
diff --git a/src/components/Avatar/AvatarImage/AvatarImage.tsx b/src/components/Avatar/AvatarImage/AvatarImage.tsx
index 303686b7cd..27fe626bf0 100644
--- a/src/components/Avatar/AvatarImage/AvatarImage.tsx
+++ b/src/components/Avatar/AvatarImage/AvatarImage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {AVATAR_SIZES} from '../constants';
diff --git a/src/components/Avatar/AvatarText/AvatarText.tsx b/src/components/Avatar/AvatarText/AvatarText.tsx
index fb491afc27..05f3c9cb92 100644
--- a/src/components/Avatar/AvatarText/AvatarText.tsx
+++ b/src/components/Avatar/AvatarText/AvatarText.tsx
@@ -4,8 +4,8 @@ import type {AvatarTextProps} from './types';
 import {getAvatarDisplayText} from './utils';
 
 export const AvatarText = ({text, color, className}: AvatarTextProps) => {
-    const style = React.useMemo(() => ({color}), [color]);
-    const displayText = React.useMemo(() => getAvatarDisplayText(text), [text]);
+    const style = {color};
+    const displayText = getAvatarDisplayText(text);
 
     return (
         <div style={style} className={className}>
diff --git a/src/components/Avatar/AvatarText/utils.ts b/src/components/Avatar/AvatarText/utils.ts
index 97e3e504fb..1ab9966299 100644
--- a/src/components/Avatar/AvatarText/utils.ts
+++ b/src/components/Avatar/AvatarText/utils.ts
@@ -1,5 +1,5 @@
 export const getAvatarDisplayText = (text: string) => {
-    const words = text.split(' ');
+    const words = text.split(/\s+/);
     const result =
         words.length > 1 ? [words[0][0], words[1][0]].filter(Boolean).join('') : text.slice(0, 2);
 
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index c7e216f0f8..ac9a9e2f10 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _throttle from 'lodash/throttle';
diff --git a/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/src/components/Breadcrumbs/BreadcrumbsItem.tsx
index 652413e46a..ade8680eab 100644
--- a/src/components/Breadcrumbs/BreadcrumbsItem.tsx
+++ b/src/components/Breadcrumbs/BreadcrumbsItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Link} from '../Link';
diff --git a/src/components/Breadcrumbs/BreadcrumbsMore.tsx b/src/components/Breadcrumbs/BreadcrumbsMore.tsx
index 6effc9708b..c5eb217af4 100644
--- a/src/components/Breadcrumbs/BreadcrumbsMore.tsx
+++ b/src/components/Breadcrumbs/BreadcrumbsMore.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {DropdownMenu} from '../DropdownMenu';
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index babe0860ba..02b295d71c 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,12 +1,14 @@
+'use client';
+
 import React from 'react';
 
 import type {DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
-import {isIcon} from '../utils/common';
+import {isIcon, isSvg} from '../utils/common';
 import {eventBroker} from '../utils/event-broker';
 import {isOfType} from '../utils/isOfType';
 
-import {ButtonIcon} from './ButtonIcon';
+import {ButtonIcon, getIconSide} from './ButtonIcon';
 
 import './Button.scss';
 
@@ -193,16 +195,22 @@ ButtonWithHandlers.displayName = 'Button';
 export const Button = Object.assign(ButtonWithHandlers, {Icon: ButtonIcon});
 
 const isButtonIconComponent = isOfType(ButtonIcon);
+const isSpan = isOfType<{className?: string}>('span');
+const buttonIconClassRe = RegExp(`^${b('icon')}($|\\s+\\w)`);
 
+// eslint-disable-next-line complexity
 function prepareChildren(children: React.ReactNode) {
     const items = React.Children.toArray(children);
 
     if (items.length === 1) {
         const onlyItem = items[0];
+        const isButtonIconElement =
+            isButtonIconComponent(onlyItem) ||
+            (isSpan(onlyItem) && buttonIconClassRe.test(onlyItem.props.className || ''));
 
-        if (isButtonIconComponent(onlyItem)) {
+        if (isButtonIconElement) {
             return onlyItem;
-        } else if (isIcon(onlyItem)) {
+        } else if (isIcon(onlyItem) || isSvg(onlyItem)) {
             return <Button.Icon key="icon">{onlyItem}</Button.Icon>;
         } else {
             return (
@@ -216,10 +224,12 @@ function prepareChildren(children: React.ReactNode) {
         const content = [];
 
         for (const item of items) {
-            const isIconElement = isIcon(item);
+            const isIconElement = isIcon(item) || isSvg(item);
             const isButtonIconElement = isButtonIconComponent(item);
+            const isRenderedButtonIconElement =
+                isSpan(item) && buttonIconClassRe.test(item.props.className || '');
 
-            if (isIconElement || isButtonIconElement) {
+            if (isIconElement || isButtonIconElement || isRenderedButtonIconElement) {
                 if (!startIcon && content.length === 0) {
                     const key = 'icon-start';
                     const side = 'start';
@@ -229,10 +239,14 @@ function prepareChildren(children: React.ReactNode) {
                                 {item}
                             </Button.Icon>
                         );
-                    } else {
+                    } else if (isButtonIconElement) {
                         startIcon = React.cloneElement(item, {
                             side,
                         });
+                    } else {
+                        startIcon = React.cloneElement(item, {
+                            className: b('icon', {side: getIconSide(side)}, item.props.className),
+                        });
                     }
                 } else if (!endIcon && content.length !== 0) {
                     const key = 'icon-end';
@@ -243,10 +257,14 @@ function prepareChildren(children: React.ReactNode) {
                                 {item}
                             </Button.Icon>
                         );
-                    } else {
+                    } else if (isButtonIconElement) {
                         endIcon = React.cloneElement(item, {
                             side,
                         });
+                    } else {
+                        endIcon = React.cloneElement(item, {
+                            className: b('icon', {side: getIconSide(side)}, item.props.className),
+                        });
                     }
                 }
             } else {
diff --git a/src/components/Button/ButtonIcon.tsx b/src/components/Button/ButtonIcon.tsx
index 790b4d7c37..d3dfc97560 100644
--- a/src/components/Button/ButtonIcon.tsx
+++ b/src/components/Button/ButtonIcon.tsx
@@ -17,23 +17,12 @@ function warnAboutPhysicalValues() {
 }
 
 export const ButtonIcon = ({side, className, children}: Props) => {
-    let sideMod = side;
-
-    if (sideMod === 'left') {
-        warnAboutPhysicalValues();
-        sideMod = 'start';
-    }
-    if (sideMod === 'right') {
-        warnAboutPhysicalValues();
-        sideMod = 'end';
-    }
-
     return (
         <span
             className={b(
                 'icon',
                 {
-                    side: sideMod,
+                    side: getIconSide(side),
                 },
                 className,
             )}
@@ -44,3 +33,18 @@ export const ButtonIcon = ({side, className, children}: Props) => {
 };
 
 ButtonIcon.displayName = 'Button.Icon';
+
+export function getIconSide(side?: 'left' | 'right' | 'start' | 'end') {
+    let sideMod = side;
+
+    if (sideMod === 'left') {
+        warnAboutPhysicalValues();
+        sideMod = 'start';
+    }
+    if (sideMod === 'right') {
+        warnAboutPhysicalValues();
+        sideMod = 'end';
+    }
+
+    return sideMod;
+}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 8b166a86e4..32e9f49703 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1 +1,2 @@
 export * from './Button';
+export {ButtonIcon} from './ButtonIcon';
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index e7be071d1b..fa12db13ed 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useActionHandlers} from '../../hooks';
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 98bd55ed01..958962fd0c 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useCheckbox} from '../../hooks/private';
diff --git a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
index e5588e3326..0da525b35c 100644
--- a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
+++ b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
@@ -8,50 +8,50 @@ export function CheckboxShowcase() {
     return (
         <Showcase>
             <ShowcaseItem title="Size">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox size="m" checked={false} content="size m" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="m" checked={true} content="size m" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="m" indeterminate={true} content="size m" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox size="l" checked={false} content="size l" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="l" checked={true} content="size l" />
                     <span style={{margin: '8px'}} />
                     <Checkbox size="l" indeterminate={true} content="size l" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Disabled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={false} disabled content="unchecked" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox indeterminate={true} disabled content="indeterminate" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={true} disabled content="checked" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Uncontrolled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox defaultChecked={false} content="unchecked" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox defaultChecked={true} content="checked" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Controlled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={false} content="unchecked" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox indeterminate={true} content="indeterminate" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Checkbox checked={true} content="checked" />
-                </p>
+                </div>
             </ShowcaseItem>
         </Showcase>
     );
diff --git a/src/components/ClipboardButton/ClipboardButton.tsx b/src/components/ClipboardButton/ClipboardButton.tsx
index e260292e37..78bfb58218 100644
--- a/src/components/ClipboardButton/ClipboardButton.tsx
+++ b/src/components/ClipboardButton/ClipboardButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {ActionTooltip} from '../ActionTooltip';
diff --git a/src/components/CopyToClipboard/CopyToClipboard.tsx b/src/components/CopyToClipboard/CopyToClipboard.tsx
index e54c4daf95..6265056c99 100644
--- a/src/components/CopyToClipboard/CopyToClipboard.tsx
+++ b/src/components/CopyToClipboard/CopyToClipboard.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import ReactCopyToClipboard from 'react-copy-to-clipboard';
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index f47663123a..15198af2f5 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Modal} from '../Modal';
diff --git a/src/components/Dialog/DialogFooter/DialogFooter.tsx b/src/components/Dialog/DialogFooter/DialogFooter.tsx
index 1834b5f848..5443699078 100644
--- a/src/components/Dialog/DialogFooter/DialogFooter.tsx
+++ b/src/components/Dialog/DialogFooter/DialogFooter.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Button} from '../../Button';
diff --git a/src/components/Disclosure/Disclosure.tsx b/src/components/Disclosure/Disclosure.tsx
index 7353f0513f..33efdf70d9 100644
--- a/src/components/Disclosure/Disclosure.tsx
+++ b/src/components/Disclosure/Disclosure.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {QAProps} from '../types';
diff --git a/src/components/Disclosure/DisclosureContext.tsx b/src/components/Disclosure/DisclosureContext.tsx
index b048ac548a..f7b7d682e5 100644
--- a/src/components/Disclosure/DisclosureContext.tsx
+++ b/src/components/Disclosure/DisclosureContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useUniqId} from '../../hooks';
diff --git a/src/components/Disclosure/DisclosureDetails/DisclosureDetails.tsx b/src/components/Disclosure/DisclosureDetails/DisclosureDetails.tsx
index 5d861723a7..f2d0d6fda6 100644
--- a/src/components/Disclosure/DisclosureDetails/DisclosureDetails.tsx
+++ b/src/components/Disclosure/DisclosureDetails/DisclosureDetails.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {CSSTransition} from 'react-transition-group';
diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
index 74b9467a73..d8268ca2eb 100644
--- a/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Ellipsis} from '@gravity-ui/icons';
diff --git a/src/components/DropdownMenu/DropdownMenuItem.tsx b/src/components/DropdownMenu/DropdownMenuItem.tsx
index e9a4d4a04d..a202c91288 100644
--- a/src/components/DropdownMenu/DropdownMenuItem.tsx
+++ b/src/components/DropdownMenu/DropdownMenuItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {ChevronLeft, ChevronRight} from '@gravity-ui/icons';
diff --git a/src/components/DropdownMenu/DropdownMenuNavigationContext.tsx b/src/components/DropdownMenu/DropdownMenuNavigationContext.tsx
index fcce8d56fa..1638da5604 100644
--- a/src/components/DropdownMenu/DropdownMenuNavigationContext.tsx
+++ b/src/components/DropdownMenu/DropdownMenuNavigationContext.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 export type DropdownMenuNavigationContextType = {
diff --git a/src/components/DropdownMenu/DropdownMenuPopup.tsx b/src/components/DropdownMenu/DropdownMenuPopup.tsx
index f0e38d0720..6d356ce9dc 100644
--- a/src/components/DropdownMenu/DropdownMenuPopup.tsx
+++ b/src/components/DropdownMenu/DropdownMenuPopup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useListNavigation} from '../../hooks';
diff --git a/src/components/Hotkey/Hotkey.tsx b/src/components/Hotkey/Hotkey.tsx
index 36a4c0a8e1..d622b418a9 100644
--- a/src/components/Hotkey/Hotkey.tsx
+++ b/src/components/Hotkey/Hotkey.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {DOMProps, QAProps} from '../types';
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index f6b8816d09..1d450ec112 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index 7118386124..2be2983f5a 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {DOMProps, QAProps} from '../types';
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index b69f8a7539..32e18fb0cb 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import isEqual from 'lodash/isEqual';
diff --git a/src/components/List/ListLoadingIndicator.tsx b/src/components/List/ListLoadingIndicator.tsx
index 885a002af8..0eb7830688 100644
--- a/src/components/List/ListLoadingIndicator.tsx
+++ b/src/components/List/ListLoadingIndicator.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useIntersection} from '../../hooks';
diff --git a/src/components/List/components/ListItem.tsx b/src/components/List/components/ListItem.tsx
index 4a88a4b700..39921bc332 100644
--- a/src/components/List/components/ListItem.tsx
+++ b/src/components/List/components/ListItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Grip} from '@gravity-ui/icons';
diff --git a/src/components/List/components/SimpleContainer.tsx b/src/components/List/components/SimpleContainer.tsx
index 2d39243b25..07b67e42bd 100644
--- a/src/components/List/components/SimpleContainer.tsx
+++ b/src/components/List/components/SimpleContainer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _range from 'lodash/range';
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 50c1ffbfdf..c5d856af7c 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {DOMProps, QAProps} from '../types';
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index a3336fad69..340d545d82 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useActionHandlers} from '../../hooks';
@@ -72,7 +74,7 @@ export const MenuItem = React.forwardRef<HTMLElement, MenuItemProps>(function Me
         tabIndex: disabled ? -1 : 0,
         className: b(
             'item',
-            {disabled, active, selected, theme, interactive: Boolean(onClick)},
+            {disabled, active, selected, theme, interactive: Boolean(onClick) || Boolean(href)},
             className,
         ),
         'data-qa': qa,
diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts
index 629d3d0aa1..2b5f8fdd98 100644
--- a/src/components/Menu/index.ts
+++ b/src/components/Menu/index.ts
@@ -1 +1,3 @@
 export * from './Menu';
+export {MenuItem} from './MenuItem';
+export {MenuGroup} from './MenuGroup';
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 7d14950d1b..bd98cb7bcb 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {CSSTransition} from 'react-transition-group';
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 929e43ce1f..c730a8ed1f 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useMobile} from '../mobile';
diff --git a/src/components/Pagination/components/PaginationButton/PaginationButton.tsx b/src/components/Pagination/components/PaginationButton/PaginationButton.tsx
index 537829a183..df1e1a3a2a 100644
--- a/src/components/Pagination/components/PaginationButton/PaginationButton.tsx
+++ b/src/components/Pagination/components/PaginationButton/PaginationButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {ChevronLeft, ChevronRight, ChevronsLeft} from '@gravity-ui/icons';
diff --git a/src/components/Pagination/components/PaginationInput/PaginationInput.tsx b/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
index 58a9abf11c..d611efbfd7 100644
--- a/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
+++ b/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {KeyCode} from '../../../../constants';
diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
index e55fc8fe8a..057dba0f4c 100644
--- a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
+++ b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Button} from '../../../Button';
diff --git a/src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx b/src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx
index e0033a7406..8c9a7509e7 100644
--- a/src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx
+++ b/src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Select} from '../../../Select';
diff --git a/src/components/Palette/Palette.tsx b/src/components/Palette/Palette.tsx
index 22908e9906..7c55673c08 100644
--- a/src/components/Palette/Palette.tsx
+++ b/src/components/Palette/Palette.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useSelect} from '../../hooks';
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 1d844c9ea7..8461e5e836 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
diff --git a/src/components/Popover/components/Trigger/Trigger.tsx b/src/components/Popover/components/Trigger/Trigger.tsx
index aa38c79265..dce4d5f430 100644
--- a/src/components/Popover/components/Trigger/Trigger.tsx
+++ b/src/components/Popover/components/Trigger/Trigger.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useActionHandlers} from '../../../../hooks';
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index b25b2e03cb..15e48f3b2d 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {CSSTransition} from 'react-transition-group';
diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index 28c3bcb8be..dee2817682 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import ReactDOM from 'react-dom';
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index aa1b1d423a..5604a586d1 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useRadio} from '../../hooks/private';
diff --git a/src/components/Radio/__stories__/RadioShowcase.tsx b/src/components/Radio/__stories__/RadioShowcase.tsx
index 84d2e4734e..c5ee53d4c1 100644
--- a/src/components/Radio/__stories__/RadioShowcase.tsx
+++ b/src/components/Radio/__stories__/RadioShowcase.tsx
@@ -8,19 +8,19 @@ export function RadioShowcase() {
     return (
         <Showcase>
             <ShowcaseItem title="Size">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Radio size="m" content="size m" value="value 1" />
                     <span style={{margin: '8px'}} />
                     <Radio size="m" content="size m" value="value 2" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Radio size="l" content="size l" value="value 1" />
                     <span style={{margin: '8px'}} />
                     <Radio size="l" content="size l" value="value 2" />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Disabled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Radio
                         size="m"
                         content="Unchecked"
@@ -28,8 +28,8 @@ export function RadioShowcase() {
                         value="value 1"
                         disabled
                     />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Radio
                         size="m"
                         content="Checked"
@@ -37,24 +37,24 @@ export function RadioShowcase() {
                         value="value 2"
                         disabled
                     />
-                </p>
+                </div>
             </ShowcaseItem>
             <ShowcaseItem title="Uncontrolled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Radio size="m" content="checked" defaultChecked={true} value="value 1" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Radio size="m" content="unchecked" value="value 2" />
-                </p>
+                </div>
             </ShowcaseItem>
 
             <ShowcaseItem title="Controlled">
-                <p>
+                <div style={{marginBlock: '1em'}}>
                     <Radio size="m" content="checked" checked={true} value="value 1" />
-                </p>
-                <p>
+                </div>
+                <div style={{marginBlock: '1em'}}>
                     <Radio size="m" content="unchecked" checked={false} value="value 2" />
-                </p>
+                </div>
             </ShowcaseItem>
         </Showcase>
     );
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 9758560d0a..c236c8b5d9 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useRadioGroup} from '../../hooks/private';
@@ -84,10 +86,9 @@ export const RadioButton = React.forwardRef(function RadioButton<T extends strin
         [],
     );
 
-    const handlePlateTransitionEnd: React.TransitionEventHandler<HTMLDivElement> =
-        React.useCallback((event) => {
-            event.currentTarget.hidden = true;
-        }, []);
+    const handlePlateTransitionEnd: React.TransitionEventHandler<HTMLDivElement> = (event) => {
+        event.currentTarget.hidden = true;
+    };
 
     const {containerProps, optionsProps} = useRadioGroup({...props, options});
 
diff --git a/src/components/RadioButton/RadioButtonOption.tsx b/src/components/RadioButton/RadioButtonOption.tsx
index 5d69c28832..8c5915c8e2 100644
--- a/src/components/RadioButton/RadioButtonOption.tsx
+++ b/src/components/RadioButton/RadioButtonOption.tsx
@@ -1,9 +1,11 @@
+'use client';
+
 import React from 'react';
 
 import {useRadio} from '../../hooks/private';
 import type {ControlProps} from '../types';
 import {block} from '../utils/cn';
-import {isIcon} from '../utils/common';
+import {isIcon, isSvg} from '../utils/common';
 
 const b = block('radio-button');
 
@@ -25,7 +27,7 @@ export const RadioButtonOption = React.forwardRef(function RadioButtonOption<T e
     const {disabled = false, content, children, title} = props;
     const {checked, inputProps} = useRadio(props);
     const inner = content || children;
-    const icon = isIcon(inner);
+    const icon = isIcon(inner) || isSvg(inner);
 
     return (
         <label
diff --git a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx b/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
index 9aeac9faf3..04cbd93ffc 100644
--- a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
+++ b/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
@@ -56,24 +56,24 @@ export function RadioButtonShowcase() {
             </ShowcaseItem>
             <ShowcaseItem title="width">
                 <div style={{width: 140, border: '2px dashed gray'}}>
-                    <p>
+                    <div style={{marginBlock: '1em'}}>
                         <RadioButton>
                             <RadioButton.Option value="1" content="none" />
                             <RadioButton.Option value="2" content="none********" />
                         </RadioButton>
-                    </p>
-                    <p>
+                    </div>
+                    <div style={{marginBlock: '1em'}}>
                         <RadioButton width="auto">
                             <RadioButton.Option value="1" content="auto" />
                             <RadioButton.Option value="2" content="auto********" />
                         </RadioButton>
-                    </p>
-                    <p>
+                    </div>
+                    <div style={{marginBlock: '1em'}}>
                         <RadioButton width="max">
                             <RadioButton.Option value="1" content="max" />
                             <RadioButton.Option value="2" content="max" />
                         </RadioButton>
-                    </p>
+                    </div>
                 </div>
             </ShowcaseItem>
         </Showcase>
diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts
index 35533913ec..d813dc5132 100644
--- a/src/components/RadioButton/index.ts
+++ b/src/components/RadioButton/index.ts
@@ -1 +1,3 @@
 export * from './RadioButton';
+// FIXME rename types RadioButtonOption to RadioButtonOptionProps
+export {RadioButtonOption as RadioButtonItem} from './RadioButtonOption';
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
index 085c140c0e..2024862df2 100644
--- a/src/components/RadioGroup/RadioGroup.tsx
+++ b/src/components/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useRadioGroup} from '../../hooks/private';
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index a495e4cbb3..1b86f938c5 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {KeyCode} from '../../constants';
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index 873937dbc2..c54f72a5bf 100644
--- a/src/components/Select/components/SelectControl/SelectControl.tsx
+++ b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {ChevronDown, TriangleExclamation} from '@gravity-ui/icons';
diff --git a/src/components/Select/components/SelectCounter/SelectCounter.tsx b/src/components/Select/components/SelectCounter/SelectCounter.tsx
index aa9ccfbe17..4e1932b62e 100644
--- a/src/components/Select/components/SelectCounter/SelectCounter.tsx
+++ b/src/components/Select/components/SelectCounter/SelectCounter.tsx
@@ -8,12 +8,9 @@ import './SelectCounter.scss';
 
 const b = block('select-counter');
 
-export const SelectCounter = React.forwardRef(function SelectCouner(
-    {count, size, disabled}: SelectCounterProps,
-    ref: React.ForwardedRef<HTMLDivElement>,
-) {
+export function SelectCounter({count, size, disabled}: SelectCounterProps) {
     return (
-        <div className={b({size})} ref={ref}>
+        <div className={b({size})}>
             <Text
                 variant={size === 'xl' ? 'body-2' : 'body-1'}
                 color={disabled ? 'hint' : 'primary'}
@@ -23,4 +20,4 @@ export const SelectCounter = React.forwardRef(function SelectCouner(
             </Text>
         </div>
     );
-});
+}
diff --git a/src/components/Select/components/SelectFilter/SelectFilter.tsx b/src/components/Select/components/SelectFilter/SelectFilter.tsx
index 6923ce0b77..d7739d2ec3 100644
--- a/src/components/Select/components/SelectFilter/SelectFilter.tsx
+++ b/src/components/Select/components/SelectFilter/SelectFilter.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {TextInput} from '../../../controls';
diff --git a/src/components/Select/components/SelectList/SelectList.tsx b/src/components/Select/components/SelectList/SelectList.tsx
index 51ecf4c691..b98dfc8108 100644
--- a/src/components/Select/components/SelectList/SelectList.tsx
+++ b/src/components/Select/components/SelectList/SelectList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {List} from '../../../List';
diff --git a/src/components/Select/components/SelectList/SelectLoadingIndicator.tsx b/src/components/Select/components/SelectList/SelectLoadingIndicator.tsx
index 860a72ac04..e23fedddd6 100644
--- a/src/components/Select/components/SelectList/SelectLoadingIndicator.tsx
+++ b/src/components/Select/components/SelectList/SelectLoadingIndicator.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useIntersection} from '../../../../hooks';
diff --git a/src/components/Select/components/SelectPopup/SelectPopup.tsx b/src/components/Select/components/SelectPopup/SelectPopup.tsx
index 1997c7c31c..c66ef12b76 100644
--- a/src/components/Select/components/SelectPopup/SelectPopup.tsx
+++ b/src/components/Select/components/SelectPopup/SelectPopup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {PopperPlacement} from '../../../../hooks/private';
diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts
index 59757f3f25..2bed911ccf 100644
--- a/src/components/Select/index.ts
+++ b/src/components/Select/index.ts
@@ -3,3 +3,5 @@ export * from './types';
 export {SelectQa} from './constants';
 export * from './hooks-public';
 export {isSelectGroupTitle} from './utils';
+// FIXME: rename types SelectOption and SelectOptionGroup to SelectOptionProps and SelectOptionGroupProps respectively
+export {Option as SelectItem, OptionGroup as SelectItemGroup} from './tech-components';
diff --git a/src/components/Select/tech-components.tsx b/src/components/Select/tech-components.tsx
index 9a271f34b1..1ac43fb3e3 100644
--- a/src/components/Select/tech-components.tsx
+++ b/src/components/Select/tech-components.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type {SelectOption, SelectOptionGroup} from './types';
 
 export const Option = <T extends any>(
diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx
index e2ecad0d93..3cf14bd329 100644
--- a/src/components/Sheet/Sheet.tsx
+++ b/src/components/Sheet/Sheet.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useBodyScrollLock} from '../../hooks';
diff --git a/src/components/Sheet/SheetContent.tsx b/src/components/Sheet/SheetContent.tsx
index d4241e3ee0..a8ed9e2169 100644
--- a/src/components/Sheet/SheetContent.tsx
+++ b/src/components/Sheet/SheetContent.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Platform, withMobile} from '../mobile';
diff --git a/src/components/Slider/BaseSlider/BaseSlider.tsx b/src/components/Slider/BaseSlider/BaseSlider.tsx
index 56f26775d4..ef18676dd2 100644
--- a/src/components/Slider/BaseSlider/BaseSlider.tsx
+++ b/src/components/Slider/BaseSlider/BaseSlider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import Slider from 'rc-slider';
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 15311bdd46..e41b7a3188 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import debounce from 'lodash/debounce';
diff --git a/src/components/Slider/SliderTooltip/SliderTooltip.tsx b/src/components/Slider/SliderTooltip/SliderTooltip.tsx
index 33b7167c2f..d6e5324f3a 100644
--- a/src/components/Slider/SliderTooltip/SliderTooltip.tsx
+++ b/src/components/Slider/SliderTooltip/SliderTooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {block} from '../../utils/cn';
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index ea5db7d70c..020070d873 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useCheckbox} from '../../hooks/private';
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index d6b109f5b9..b5eb92cd51 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _get from 'lodash/get';
diff --git a/src/components/Table/hoc/withTableActions/withTableActions.tsx b/src/components/Table/hoc/withTableActions/withTableActions.tsx
index 50e342e056..c73191e153 100644
--- a/src/components/Table/hoc/withTableActions/withTableActions.tsx
+++ b/src/components/Table/hoc/withTableActions/withTableActions.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Ellipsis} from '@gravity-ui/icons';
diff --git a/src/components/Table/hoc/withTableCopy/withTableCopy.tsx b/src/components/Table/hoc/withTableCopy/withTableCopy.tsx
index b9efad1f2e..e13e788752 100644
--- a/src/components/Table/hoc/withTableCopy/withTableCopy.tsx
+++ b/src/components/Table/hoc/withTableCopy/withTableCopy.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _memoize from 'lodash/memoize';
diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx
index 497de15a6f..28ec55b982 100644
--- a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx
+++ b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _difference from 'lodash/difference';
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
index 4f01d1ffa2..b037a7c9ba 100644
--- a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
+++ b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Gear, Grip, Lock} from '@gravity-ui/icons';
diff --git a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
index 68871c0adf..1882e849ad 100644
--- a/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
+++ b/src/components/Table/hoc/withTableSettings/withTableSettings.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Gear} from '@gravity-ui/icons';
diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
index 86aa721713..a36e23c6d4 100644
--- a/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
+++ b/src/components/Table/hoc/withTableSorting/withTableSorting.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import _get from 'lodash/get';
diff --git a/src/components/TableColumnSetup/TableColumnSetup.tsx b/src/components/TableColumnSetup/TableColumnSetup.tsx
index e7ba572eda..f233343651 100644
--- a/src/components/TableColumnSetup/TableColumnSetup.tsx
+++ b/src/components/TableColumnSetup/TableColumnSetup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Gear} from '@gravity-ui/icons';
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index d433ebc989..e0f1fd907a 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {QAProps} from '../types';
diff --git a/src/components/Tabs/TabsItem.tsx b/src/components/Tabs/TabsItem.tsx
index 2267196cca..909bebc5fe 100644
--- a/src/components/Tabs/TabsItem.tsx
+++ b/src/components/Tabs/TabsItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Label} from '../Label';
diff --git a/src/components/Toaster/Provider/ToasterProvider.tsx b/src/components/Toaster/Provider/ToasterProvider.tsx
index 9cd3bb36f2..f6aaf3629e 100644
--- a/src/components/Toaster/Provider/ToasterProvider.tsx
+++ b/src/components/Toaster/Provider/ToasterProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {InternalToastProps, ToastProps, ToasterPublicMethods} from '../types';
diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
index d678c70f9c..c385392653 100644
--- a/src/components/Toaster/Toast/Toast.tsx
+++ b/src/components/Toaster/Toast/Toast.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {CircleCheck, CircleInfo, Thunderbolt, TriangleExclamation, Xmark} from '@gravity-ui/icons';
diff --git a/src/components/Toaster/ToastList/ToastList.tsx b/src/components/Toaster/ToastList/ToastList.tsx
index daa00508d3..7d9ed4dd67 100644
--- a/src/components/Toaster/ToastList/ToastList.tsx
+++ b/src/components/Toaster/ToastList/ToastList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {CSSTransition, TransitionGroup} from 'react-transition-group';
diff --git a/src/components/Toaster/ToasterComponent/ToasterComponent.tsx b/src/components/Toaster/ToasterComponent/ToasterComponent.tsx
index bcc62c2e36..ca3e801cb3 100644
--- a/src/components/Toaster/ToasterComponent/ToasterComponent.tsx
+++ b/src/components/Toaster/ToasterComponent/ToasterComponent.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useMobile} from '../../mobile';
diff --git a/src/components/Toaster/ToasterComponent/ToasterPortal.tsx b/src/components/Toaster/ToasterComponent/ToasterPortal.tsx
index d8bb8f14a8..ab4355abd5 100644
--- a/src/components/Toaster/ToasterComponent/ToasterPortal.tsx
+++ b/src/components/Toaster/ToasterComponent/ToasterPortal.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Portal} from '../../Portal';
diff --git a/src/components/Toaster/ToasterSingleton.tsx b/src/components/Toaster/ToasterSingleton.tsx
index 06df2dc594..15096e70c5 100644
--- a/src/components/Toaster/ToasterSingleton.tsx
+++ b/src/components/Toaster/ToasterSingleton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import get from 'lodash/get';
diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
index e026b38947..d67c0cf3df 100644
--- a/src/components/Toc/TocItem/TocItem.tsx
+++ b/src/components/Toc/TocItem/TocItem.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useActionHandlers} from '../../../hooks';
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 4ca99e4cd8..45b9a9b487 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useForkRef} from '../../hooks';
diff --git a/src/components/TreeList/TreeList.tsx b/src/components/TreeList/TreeList.tsx
index 98fae11779..f3a2248faa 100644
--- a/src/components/TreeList/TreeList.tsx
+++ b/src/components/TreeList/TreeList.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useUniqId} from '../../hooks';
diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
index 9a9f0d4cfe..aa1d2a59bd 100644
--- a/src/components/TreeSelect/TreeSelect.tsx
+++ b/src/components/TreeSelect/TreeSelect.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useForkRef, useUniqId} from '../../hooks';
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index cafcde68da..36151ab2d4 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useControlledState, useForkRef, useUniqId} from '../../../hooks';
diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
index b8ea429c8a..ad9bbfce6d 100644
--- a/src/components/controls/TextArea/TextAreaControl.tsx
+++ b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {useForkRef} from '../../../hooks';
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 6a44f74c36..4e77b6f48b 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {TriangleExclamation} from '@gravity-ui/icons';
diff --git a/src/components/controls/common/ClearButton/ClearButton.tsx b/src/components/controls/common/ClearButton/ClearButton.tsx
index e435114b1c..407ad70379 100644
--- a/src/components/controls/common/ClearButton/ClearButton.tsx
+++ b/src/components/controls/common/ClearButton/ClearButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
diff --git a/src/components/layout/Col/Col.tsx b/src/components/layout/Col/Col.tsx
index 863f7ef9de..fbd38ec433 100644
--- a/src/components/layout/Col/Col.tsx
+++ b/src/components/layout/Col/Col.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable valid-jsdoc */
 import React from 'react';
 
diff --git a/src/components/layout/Container/Container.tsx b/src/components/layout/Container/Container.tsx
index 957e0803f0..03eacffdba 100644
--- a/src/components/layout/Container/Container.tsx
+++ b/src/components/layout/Container/Container.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable valid-jsdoc */
 import React from 'react';
 
diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
index 3a93a16493..98ac86419a 100644
--- a/src/components/layout/Flex/Flex.tsx
+++ b/src/components/layout/Flex/Flex.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {block} from '../../utils/cn';
diff --git a/src/components/layout/LayoutProvider/LayoutProvider.tsx b/src/components/layout/LayoutProvider/LayoutProvider.tsx
index 33addad11e..f23d666289 100644
--- a/src/components/layout/LayoutProvider/LayoutProvider.tsx
+++ b/src/components/layout/LayoutProvider/LayoutProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable valid-jsdoc */
 import React from 'react';
 
diff --git a/src/components/layout/Row/Row.tsx b/src/components/layout/Row/Row.tsx
index 4ebac152f6..d2f3316250 100644
--- a/src/components/layout/Row/Row.tsx
+++ b/src/components/layout/Row/Row.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable valid-jsdoc */
 import React from 'react';
 
diff --git a/src/components/mobile/MobileProvider.tsx b/src/components/mobile/MobileProvider.tsx
index 42927415e3..22a04bf8c9 100644
--- a/src/components/mobile/MobileProvider.tsx
+++ b/src/components/mobile/MobileProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {MobileContext} from './MobileContext';
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
index c0690affe0..d466d50b9a 100644
--- a/src/components/theme/ThemeProvider.tsx
+++ b/src/components/theme/ThemeProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {PrivateLayoutProvider} from '../layout/LayoutProvider/LayoutProvider';
diff --git a/src/components/utils/FocusTrap.tsx b/src/components/utils/FocusTrap.tsx
index e4b177825f..97f032a848 100644
--- a/src/components/utils/FocusTrap.tsx
+++ b/src/components/utils/FocusTrap.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {createFocusTrap} from 'focus-trap';
diff --git a/src/components/utils/common.ts b/src/components/utils/common.ts
index 0a394d0ddc..4e52a287c1 100644
--- a/src/components/utils/common.ts
+++ b/src/components/utils/common.ts
@@ -9,4 +9,5 @@ export function getUniqId() {
     return `${NAMESPACE}uniq-${nextUniqueId++}`;
 }
 
+export const isSvg = isOfType('svg');
 export const isIcon = isOfType(Icon);
diff --git a/src/components/utils/event-broker/useEventBroker.ts b/src/components/utils/event-broker/useEventBroker.ts
index b8efa8410b..5ba3a5f0de 100644
--- a/src/components/utils/event-broker/useEventBroker.ts
+++ b/src/components/utils/event-broker/useEventBroker.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {eventBroker} from './EventBroker';
diff --git a/src/components/utils/layer-manager/LayerManager.ts b/src/components/utils/layer-manager/LayerManager.ts
index 09155a05dd..6aa483855f 100644
--- a/src/components/utils/layer-manager/LayerManager.ts
+++ b/src/components/utils/layer-manager/LayerManager.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import type {VirtualElement} from '@popperjs/core';
 
 import {KeyCode} from '../../../constants';
diff --git a/src/components/utils/withEventBrokerDomHandlers.tsx b/src/components/utils/withEventBrokerDomHandlers.tsx
index 1b6b35c2bd..b14ee40b07 100644
--- a/src/components/utils/withEventBrokerDomHandlers.tsx
+++ b/src/components/utils/withEventBrokerDomHandlers.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import type {EventBrokerData} from './event-broker';
diff --git a/src/hooks/usePortalContainer/PortalProvider.tsx b/src/hooks/usePortalContainer/PortalProvider.tsx
index edf69b01bb..e10f853157 100644
--- a/src/hooks/usePortalContainer/PortalProvider.tsx
+++ b/src/hooks/usePortalContainer/PortalProvider.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 export const PortalContext = React.createContext<React.RefObject<HTMLElement>>({current: null});