diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
index a8b893df..a9e51e29 100644
--- a/cvat-ui/package-lock.json
+++ b/cvat-ui/package-lock.json
@@ -12964,7 +12964,6 @@
       "requires": {
         "axios": "^0.21.0",
         "browser-or-node": "^1.2.1",
-        "cvat-data": "file:../cvat-data",
         "detect-browser": "^5.2.0",
         "error-stack-parser": "^2.0.2",
         "form-data": "^2.5.0",
diff --git a/cvat-ui/src/components/actions-menu/actions-menu.tsx b/cvat-ui/src/components/actions-menu/actions-menu.tsx
index b447050a..c1ef3d39 100644
--- a/cvat-ui/src/components/actions-menu/actions-menu.tsx
+++ b/cvat-ui/src/components/actions-menu/actions-menu.tsx
@@ -8,7 +8,6 @@ import Menu from 'antd/lib/menu';
 import Modal from 'antd/lib/modal';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MenuInfo } from 'rc-menu/lib/interface';
-
 import DumpSubmenu from './dump-submenu';
 import LoadSubmenu from './load-submenu';
 import ExportSubmenu from './export-submenu';
diff --git a/cvat-ui/src/components/actions-menu/load-submenu.tsx b/cvat-ui/src/components/actions-menu/load-submenu.tsx
index 89036fdb..53bbe3c7 100644
--- a/cvat-ui/src/components/actions-menu/load-submenu.tsx
+++ b/cvat-ui/src/components/actions-menu/load-submenu.tsx
@@ -17,7 +17,9 @@ interface Props {
 }
 
 export default function LoadSubmenu(props: Props): JSX.Element {
-    const { menuKey, loaders, loadActivity, onFileUpload } = props;
+    const {
+        menuKey, loaders, loadActivity, onFileUpload,
+    } = props;
 
     return (
         <Menu.SubMenu key={menuKey} title='Upload annotations'>
diff --git a/cvat-ui/src/components/actions-menu/styles.scss b/cvat-ui/src/components/actions-menu/styles.scss
index e0518205..ccb00306 100644
--- a/cvat-ui/src/components/actions-menu/styles.scss
+++ b/cvat-ui/src/components/actions-menu/styles.scss
@@ -20,7 +20,7 @@
 .cvat-menu-load-submenu-item,
 .cvat-menu-dump-submenu-item,
 .cvat-menu-export-submenu-item {
-    > i {
+    > span[role='img'] {
         color: $info-icon-color;
     }
 
diff --git a/cvat-ui/src/components/annotation-page/appearance-block.tsx b/cvat-ui/src/components/annotation-page/appearance-block.tsx
index 90843397..f7f09cbe 100644
--- a/cvat-ui/src/components/annotation-page/appearance-block.tsx
+++ b/cvat-ui/src/components/annotation-page/appearance-block.tsx
@@ -52,7 +52,7 @@ interface DispatchToProps {
 export function computeHeight(): number {
     const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
     const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
-    const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-card-bar'));
+    const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-nav'));
 
     if (sidebar && appearance && tabs) {
         const maxHeight = sidebar ? sidebar.clientHeight : 0;
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx
index 042f0463..8782eb18 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx
@@ -291,15 +291,11 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                         ant-layout-sider-zero-width-trigger-left`}
                     onClick={collapse}
                 >
-                    {sidebarCollapsed ? (
-                        <MenuFoldOutlined title='Show' />
-                    ) : (
-                        <MenuUnfoldOutlined title='Hide' />
-                    )}
+                    {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
                 </span>
                 <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
-                <Row className='cvat-objects-sidebar-filter-input'>
-                    <Col>
+                <Row>
+                    <Col span={24}>
                         <AnnotationsFiltersInput />
                     </Col>
                 </Row>
@@ -323,6 +319,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                     }}
                 />
                 <ObjectButtonsContainer
+                    readonly={false}
                     clientID={activeObjectState.clientID}
                     outsideDisabled
                     hiddenDisabled
@@ -376,8 +373,8 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
             >
                 {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
             </span>
-            <Row className='cvat-objects-sidebar-filter-input'>
-                <Col>
+            <Row>
+                <Col span={24}>
                     <AnnotationsFiltersInput />
                 </Col>
             </Row>
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
index b6356e9e..1816aed5 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx
@@ -22,7 +22,9 @@ interface InputElementParameters {
 }
 
 function renderInputElement(parameters: InputElementParameters): JSX.Element {
-    const { inputType, attrID, clientID, values, currentValue, onChange } = parameters;
+    const {
+        inputType, attrID, clientID, values, currentValue, onChange,
+    } = parameters;
 
     const renderCheckbox = (): JSX.Element => (
         <>
@@ -246,7 +248,9 @@ interface Props {
 }
 
 function AttributeEditor(props: Props): JSX.Element {
-    const { attribute, currentValue, onChange, clientID } = props;
+    const {
+        attribute, currentValue, onChange, clientID,
+    } = props;
     const { inputType, values, id: attrID } = attribute;
 
     return (
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
index c2df6952..28fd8fd8 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
@@ -17,7 +17,9 @@ interface Props {
 }
 
 function AttributeSwitcher(props: Props): JSX.Element {
-    const { currentAttribute, currentIndex, attributesCount, nextAttribute, normalizedKeyMap } = props;
+    const {
+        currentAttribute, currentIndex, attributesCount, nextAttribute, normalizedKeyMap,
+    } = props;
 
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
index bbd36ba2..e0f48d31 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
@@ -19,7 +19,9 @@ interface Props {
 }
 
 function ObjectSwitcher(props: Props): JSX.Element {
-    const { currentLabel, clientID, objectsCount, currentIndex, nextObject, normalizedKeyMap } = props;
+    const {
+        currentLabel, clientID, objectsCount, currentIndex, nextObject, normalizedKeyMap,
+    } = props;
 
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
index fbbd2e07..908ab6e8 100644
--- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
+++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss
@@ -27,7 +27,7 @@
         overflow: hidden;
     }
 
-    > button > i {
+    > button > span[role='img'] {
         color: $objects-bar-icons-color;
     }
 }
diff --git a/cvat-ui/src/components/annotation-page/request-review-modal.tsx b/cvat-ui/src/components/annotation-page/request-review-modal.tsx
index 89d4e244..884f1447 100644
--- a/cvat-ui/src/components/annotation-page/request-review-modal.tsx
+++ b/cvat-ui/src/components/annotation-page/request-review-modal.tsx
@@ -43,12 +43,12 @@ export default function RequestReviewModal(): JSX.Element | null {
             onOk={submitAnnotations}
             okText='Submit'
         >
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col>
                     <Title level={4}>Assign a user who is responsible for review</Title>
                 </Col>
             </Row>
-            <Row align='middle' type='flex' justify='start'>
+            <Row align='middle' justify='start'>
                 <Col>
                     <Text type='secondary'>Reviewer: </Text>
                 </Col>
@@ -56,7 +56,7 @@ export default function RequestReviewModal(): JSX.Element | null {
                     <UserSelector value={reviewer} onSelect={setReviewer} />
                 </Col>
             </Row>
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Text type='secondary'>You might not be able to change the job after this action. Continue?</Text>
             </Row>
         </Modal>
diff --git a/cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx b/cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx
index 163ca343..fcd415da 100644
--- a/cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx
+++ b/cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx
@@ -5,47 +5,36 @@
 import React, { ReactPortal } from 'react';
 import ReactDOM from 'react-dom';
 import { useDispatch } from 'react-redux';
-import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
+import Form from 'antd/lib/form';
 import Input from 'antd/lib/input';
 import Button from 'antd/lib/button';
 import { Row, Col } from 'antd/lib/grid';
 
 import { reviewActions, finishIssueAsync } from 'actions/review-actions';
+import { Store } from 'antd/lib/form/interface';
 
-type FormProps = {
+interface FormProps {
     top: number;
     left: number;
     submit(message: string): void;
     cancel(): void;
-} & FormComponentProps;
+}
 
 function MessageForm(props: FormProps): JSX.Element {
     const {
-        form: { getFieldDecorator },
-        form,
-        top,
-        left,
-        submit,
-        cancel,
+        top, left, submit, cancel,
     } = props;
 
-    function handleSubmit(e: React.FormEvent): void {
-        e.preventDefault();
-        form.validateFields((error, values): void => {
-            if (!error) {
-                submit(values.issue_description);
-            }
-        });
+    function handleSubmit(values: Store): void {
+        submit(values.issue_description);
     }
 
     return (
-        <Form className='cvat-create-issue-dialog' style={{ top, left }} onSubmit={handleSubmit}>
-            <Form.Item>
-                {getFieldDecorator('issue_description', {
-                    rules: [{ required: true, message: 'Please, fill out the field' }],
-                })(<Input autoComplete='off' placeholder='Please, describe the issue' />)}
+        <Form className='cvat-create-issue-dialog' style={{ top, left }} onFinish={handleSubmit}>
+            <Form.Item name='issue_description' rules={[{ required: true, message: 'Please, fill out the field' }]}>
+                <Input autoComplete='off' placeholder='Please, describe the issue' />
             </Form.Item>
-            <Row type='flex' justify='space-between'>
+            <Row justify='space-between'>
                 <Col>
                     <Button onClick={cancel} type='ghost'>
                         Cancel
@@ -61,8 +50,6 @@ function MessageForm(props: FormProps): JSX.Element {
     );
 }
 
-const WrappedMessageForm = Form.create<FormProps>()(MessageForm);
-
 interface Props {
     top: number;
     left: number;
@@ -73,7 +60,7 @@ export default function CreateIssueDialog(props: Props): ReactPortal {
     const { top, left } = props;
 
     return ReactDOM.createPortal(
-        <WrappedMessageForm
+        <MessageForm
             top={top}
             left={left}
             submit={(message: string) => {
diff --git a/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx b/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx
index 4a0a021b..8660017d 100644
--- a/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx
+++ b/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx
@@ -88,7 +88,7 @@ export default function IssueDialog(props: Props): JSX.Element {
 
     return ReactDOM.createPortal(
         <div style={{ top, left }} ref={ref} className='cvat-issue-dialog'>
-            <Row className='cvat-issue-dialog-header' type='flex' justify='space-between'>
+            <Row className='cvat-issue-dialog-header' justify='space-between'>
                 <Col>
                     <Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title>
                 </Col>
@@ -98,10 +98,10 @@ export default function IssueDialog(props: Props): JSX.Element {
                     </Tooltip>
                 </Col>
             </Row>
-            <Row className='cvat-issue-dialog-chat' type='flex' justify='start'>
+            <Row className='cvat-issue-dialog-chat' justify='start'>
                 <Col style={{ display: 'block' }}>{lines}</Col>
             </Row>
-            <Row className='cvat-issue-dialog-input' type='flex' justify='start'>
+            <Row className='cvat-issue-dialog-input' justify='start'>
                 <Col span={24}>
                     <Input
                         placeholder='Print a comment here..'
@@ -118,7 +118,7 @@ export default function IssueDialog(props: Props): JSX.Element {
                     />
                 </Col>
             </Row>
-            <Row className='cvat-issue-dialog-footer' type='flex' justify='end'>
+            <Row className='cvat-issue-dialog-footer' justify='end'>
                 <Col>
                     {currentText.length ? (
                         <Button
diff --git a/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx b/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
index b942d14a..b8238145 100644
--- a/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
+++ b/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
@@ -86,12 +86,12 @@ export default function SubmitReviewModal(): JSX.Element | null {
             okText='Submit'
             width={650}
         >
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col>
                     <Title level={4}>Submitting your review</Title>
                 </Col>
             </Row>
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col span={12}>
                     <Description title='Review summary' layout='horizontal' column={1} size='small' bordered>
                         <Description.Item label='Estimated quality: '>{estimatedQuality}</Description.Item>
@@ -119,7 +119,7 @@ export default function SubmitReviewModal(): JSX.Element | null {
                                 <RadioButton value={ReviewStatus.REJECTED}>Reject</RadioButton>
                             </Radio.Group>
                             {reviewStatus === ReviewStatus.REVIEW_FURTHER && (
-                                <Row align='middle' type='flex' justify='start'>
+                                <Row align='middle' justify='start'>
                                     <Col>
                                         <Text type='secondary'>Reviewer: </Text>
                                     </Col>
@@ -128,7 +128,7 @@ export default function SubmitReviewModal(): JSX.Element | null {
                                     </Col>
                                 </Row>
                             )}
-                            <Row type='flex' justify='center' align='middle'>
+                            <Row justify='center' align='middle'>
                                 <Col>
                                     <Rate
                                         value={Math.round(estimatedQuality)}
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
index bf3a74ec..a8a7ff42 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
@@ -52,17 +52,17 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
 
     return (
         <div className='cvat-draw-shape-popover-content'>
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col>
                     <Text className='cvat-text-color' strong>{`Draw new ${shapeType}`}</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col>
                     <Text className='cvat-text-color'>Label</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='center'>
+            <Row justify='center'>
                 <Col span={24}>
                     <LabelSelector
                         style={{ width: '100%' }}
@@ -79,7 +79,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                             <Text className='cvat-text-color'> Drawing method </Text>
                         </Col>
                     </Row>
-                    <Row type='flex' justify='space-around'>
+                    <Row justify='space-around'>
                         <Col>
                             <Radio.Group
                                 style={{ display: 'flex' }}
@@ -104,7 +104,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                             <Text className='cvat-text-color'> Drawing method </Text>
                         </Col>
                     </Row>
-                    <Row type='flex' justify='space-around'>
+                    <Row justify='space-around'>
                         <Col>
                             <Radio.Group
                                 style={{ display: 'flex' }}
@@ -123,7 +123,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                 </>
             )}
             {shapeType !== ShapeType.RECTANGLE && shapeType !== ShapeType.CUBOID && (
-                <Row type='flex' justify='space-around' align='middle'>
+                <Row justify='space-around' align='middle'>
                     <Col span={14}>
                         <Text className='cvat-text-color'> Number of points: </Text>
                     </Col>
@@ -144,7 +144,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                     </Col>
                 </Row>
             )}
-            <Row type='flex' justify='space-around'>
+            <Row justify='space-around'>
                 <Col span={12}>
                     <Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}>
                         <Button onClick={onDrawShape}>Shape</Button>
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
index a07b16da..bbbc5ccb 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
@@ -24,19 +24,19 @@ function SetupTagPopover(props: Props): JSX.Element {
 
     return (
         <div className='cvat-draw-shape-popover-content'>
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col>
                     <Text className='cvat-text-color' strong>
                         Setup tag
                     </Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='start'>
+            <Row justify='start'>
                 <Col>
                     <Text className='cvat-text-color'>Label</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='center'>
+            <Row justify='center'>
                 <Col span={24}>
                     <LabelSelector
                         style={{ width: '100%' }}
@@ -46,7 +46,7 @@ function SetupTagPopover(props: Props): JSX.Element {
                     />
                 </Col>
             </Row>
-            <Row type='flex' justify='space-around'>
+            <Row justify='space-around'>
                 <Col span={24}>
                     <Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}>
                         <Button onClick={() => onSetup(selectedLabelID)}>Tag</Button>
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
index 38e8f6f4..43625fd6 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
@@ -18,23 +18,27 @@ interface Props {
 }
 
 function SplitControl(props: Props): JSX.Element {
-    const { switchSplitShortcut, activeControl, canvasInstance, splitTrack } = props;
+    const {
+        switchSplitShortcut, activeControl, canvasInstance, splitTrack,
+    } = props;
 
     const dynamicIconProps =
-        activeControl === ActiveControl.SPLIT ? {
-            className: 'cvat-split-track-control cvat-active-canvas-control',
-            onClick: (): void => {
-                canvasInstance.split({ enabled: false });
-                splitTrack(false);
-            },
-        } : {
-            className: 'cvat-split-track-control',
-            onClick: (): void => {
-                canvasInstance.cancel();
-                canvasInstance.split({ enabled: true });
-                splitTrack(true);
-            },
-        };
+        activeControl === ActiveControl.SPLIT ?
+            {
+                className: 'cvat-split-track-control cvat-active-canvas-control',
+                onClick: (): void => {
+                    canvasInstance.split({ enabled: false });
+                    splitTrack(false);
+                },
+            } :
+            {
+                className: 'cvat-split-track-control',
+                onClick: (): void => {
+                    canvasInstance.cancel();
+                    canvasInstance.split({ enabled: true });
+                    splitTrack(true);
+                },
+            };
 
     return (
         <Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right' mouseLeaveDelay={0}>
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
index f1566ea2..88c2b0a7 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
@@ -375,17 +375,17 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
         }
     };
 
-    private setActiveInteractor = (key: string): void => {
+    private setActiveInteractor = (value: string): void => {
         const { interactors } = this.props;
         this.setState({
-            activeInteractor: interactors.filter((interactor: Model) => interactor.id === key)[0],
+            activeInteractor: interactors.filter((interactor: Model) => interactor.id === value)[0],
         });
     };
 
-    private setActiveTracker = (key: string): void => {
+    private setActiveTracker = (value: string): void => {
         const { trackers } = this.props;
         this.setState({
-            activeTracker: trackers.filter((tracker: Model) => tracker.id === key)[0],
+            activeTracker: trackers.filter((tracker: Model) => tracker.id === value)[0],
         });
     };
 
@@ -457,12 +457,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
         const { activeLabelID } = this.state;
         return (
             <>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col>
                         <Text className='cvat-text-color'>Label</Text>
                     </Col>
                 </Row>
-                <Row type='flex' justify='center'>
+                <Row justify='center'>
                     <Col span={24}>
                         <LabelSelector
                             style={{ width: '100%' }}
@@ -486,7 +486,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
 
         if (!trackers.length) {
             return (
-                <Row type='flex' justify='center' align='middle' style={{ marginTop: '5px' }}>
+                <Row justify='center' align='middle' style={{ marginTop: '5px' }}>
                     <Col>
                         <Text type='warning' className='cvat-text-color'>
                             No available trackers found
@@ -498,12 +498,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
 
         return (
             <>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col>
                         <Text className='cvat-text-color'>Tracker</Text>
                     </Col>
                 </Row>
-                <Row type='flex' align='middle' justify='center'>
+                <Row align='middle' justify='center'>
                     <Col span={24}>
                         <Select
                             style={{ width: '100%' }}
@@ -512,7 +512,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         >
                             {trackers.map(
                                 (tracker: Model): JSX.Element => (
-                                    <Select.Option title={tracker.description} key={tracker.id}>
+                                    <Select.Option value={tracker.id} title={tracker.description} key={tracker.id}>
                                         {tracker.name}
                                     </Select.Option>
                                 ),
@@ -520,7 +520,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         </Select>
                     </Col>
                 </Row>
-                <Row type='flex' align='middle' justify='start' style={{ marginTop: '5px' }}>
+                <Row align='middle' justify='start' style={{ marginTop: '5px' }}>
                     <Col>
                         <Text>Tracking frames</Text>
                     </Col>
@@ -541,7 +541,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         />
                     </Col>
                 </Row>
-                <Row type='flex' align='middle' justify='end'>
+                <Row align='middle' justify='end'>
                     <Col>
                         <Button
                             type='primary'
@@ -578,7 +578,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
 
         if (!interactors.length) {
             return (
-                <Row type='flex' justify='center' align='middle' style={{ marginTop: '5px' }}>
+                <Row justify='center' align='middle' style={{ marginTop: '5px' }}>
                     <Col>
                         <Text type='warning' className='cvat-text-color'>
                             No available interactors found
@@ -590,12 +590,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
 
         return (
             <>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col>
                         <Text className='cvat-text-color'>Interactor</Text>
                     </Col>
                 </Row>
-                <Row type='flex' align='middle' justify='center'>
+                <Row align='middle' justify='center'>
                     <Col span={24}>
                         <Select
                             style={{ width: '100%' }}
@@ -604,7 +604,11 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         >
                             {interactors.map(
                                 (interactor: Model): JSX.Element => (
-                                    <Select.Option title={interactor.description} key={interactor.id}>
+                                    <Select.Option
+                                        value={interactor.id}
+                                        title={interactor.description}
+                                        key={interactor.id}
+                                    >
                                         {interactor.name}
                                     </Select.Option>
                                 ),
@@ -612,7 +616,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         </Select>
                     </Col>
                 </Row>
-                <Row type='flex' align='middle' justify='end'>
+                <Row align='middle' justify='end'>
                     <Col>
                         <Button
                             type='primary'
@@ -651,7 +655,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
 
         if (!detectors.length) {
             return (
-                <Row type='flex' justify='center' align='middle' style={{ marginTop: '5px' }}>
+                <Row justify='center' align='middle' style={{ marginTop: '5px' }}>
                     <Col>
                         <Text type='warning' className='cvat-text-color'>
                             No available detectors found
@@ -679,17 +683,18 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         });
 
                         const states = result.map(
-                            (data: any): any => new core.classes.ObjectState({
-                                shapeType: data.type,
-                                label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
-                                points: data.points,
-                                objectType: ObjectType.SHAPE,
-                                frame,
-                                occluded: false,
-                                source: 'auto',
-                                attributes: {},
-                                zOrder: curZOrder,
-                            }),
+                            (data: any): any =>
+                                new core.classes.ObjectState({
+                                    shapeType: data.type,
+                                    label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
+                                    points: data.points,
+                                    objectType: ObjectType.SHAPE,
+                                    frame,
+                                    occluded: false,
+                                    source: 'auto',
+                                    attributes: {},
+                                    zOrder: curZOrder,
+                                }),
                         );
 
                         await jobInstance.annotations.put(states);
@@ -710,7 +715,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
     private renderPopoverContent(): JSX.Element {
         return (
             <div className='cvat-tools-control-popover-content'>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col>
                         <Text className='cvat-text-color' strong>
                             AI Tools
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx
index 02669906..e877af6c 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx
@@ -103,7 +103,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                 </>
             )}
             title={(
-                <Row type='flex' justify='space-between' align='middle'>
+                <Row justify='space-between' align='middle'>
                     <Col span={12}>
                         <Text strong>Select color</Text>
                     </Col>
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
index 6591a314..84f5120c 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
@@ -6,9 +6,8 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { CombinedState } from 'reducers/interfaces';
 import {
-    LeftOutlined, RightOutlined, EyeInvisibleOutlined, EyeOutlined,
+    LeftOutlined, RightOutlined, EyeInvisibleFilled, EyeOutlined,
 } from '@ant-design/icons';
-import { IconBaseProps } from '@ant-design/icons/lib/components/Icon';
 import Tooltip from 'antd/lib/tooltip';
 import Alert from 'antd/lib/alert';
 import { Row, Col } from 'antd/lib/grid';
@@ -27,7 +26,7 @@ export default function LabelsListComponent(): JSX.Element {
     const combinedIssues = activeReview ? issues.concat(activeReview.issues) : issues;
     const frames = combinedIssues.map((issue: any): number => issue.frame).sort((a: number, b: number) => +a - +b);
     const nearestLeft = frames.filter((_frame: number): boolean => _frame < frame).reverse()[0];
-    const dinamicLeftProps: IconBaseProps = Number.isInteger(nearestLeft) ?
+    const dinamicLeftProps: any = Number.isInteger(nearestLeft) ?
         {
             onClick: () => dispatch(changeFrameAsync(nearestLeft)),
         } :
@@ -39,7 +38,7 @@ export default function LabelsListComponent(): JSX.Element {
         };
 
     const nearestRight = frames.filter((_frame: number): boolean => _frame > frame)[0];
-    const dinamicRightProps: IconBaseProps = Number.isInteger(nearestRight) ?
+    const dinamicRightProps: any = Number.isInteger(nearestRight) ?
         {
             onClick: () => dispatch(changeFrameAsync(nearestRight)),
         } :
@@ -53,7 +52,7 @@ export default function LabelsListComponent(): JSX.Element {
     return (
         <div style={{ height: tabContentHeight }}>
             <div className='cvat-objects-sidebar-issues-list-header'>
-                <Row type='flex' justify='start' align='middle'>
+                <Row justify='start' align='middle'>
                     <Col>
                         <Tooltip title='Find the previous frame with issues'>
                             <LeftOutlined {...dinamicLeftProps} />
@@ -66,8 +65,8 @@ export default function LabelsListComponent(): JSX.Element {
                     </Col>
                     <Col offset={3}>
                         <Tooltip title='Show/hide all the issues'>
-                            { issuesHidden ? (
-                                <EyeInvisibleOutlined
+                            {issuesHidden ? (
+                                <EyeInvisibleFilled
                                     onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(false))}
                                 />
                             ) : (
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx
index 8bca1ab0..fc038b39 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-item.tsx
@@ -7,7 +7,7 @@ import { Row, Col } from 'antd/lib/grid';
 import Button from 'antd/lib/button';
 import Text from 'antd/lib/typography/Text';
 import {
-    LockOutlined, UnlockOutlined, EyeInvisibleOutlined, EyeOutlined,
+    LockFilled, UnlockOutlined, EyeInvisibleFilled, EyeOutlined,
 } from '@ant-design/icons';
 
 interface Props {
@@ -48,14 +48,15 @@ function LabelItemComponent(props: Props): JSX.Element {
 
     return (
         <Row
-            type='flex'
             align='middle'
             justify='space-around'
             className='cvat-objects-sidebar-label-item'
             style={{ display: visible ? 'flex' : 'none' }}
         >
             <Col span={4}>
-                <Button style={{ background: labelColor }} className='cvat-label-item-color-button' />
+                <Button style={{ background: labelColor }} className='cvat-label-item-color-button'>
+                    {' '}
+                </Button>
             </Col>
             <Col span={14}>
                 <Text strong className='cvat-text'>
@@ -64,14 +65,14 @@ function LabelItemComponent(props: Props): JSX.Element {
             </Col>
             <Col span={3}>
                 {statesLocked ? (
-                    <LockOutlined {...classes.lock.enabled} onClick={unlockStates} />
+                    <LockFilled {...classes.lock.enabled} onClick={unlockStates} />
                 ) : (
                     <UnlockOutlined {...classes.lock.disabled} onClick={lockStates} />
                 )}
             </Col>
             <Col span={3}>
                 {statesHidden ? (
-                    <EyeInvisibleOutlined {...classes.hidden.enabled} onClick={showStates} />
+                    <EyeInvisibleFilled {...classes.hidden.enabled} onClick={showStates} />
                 ) : (
                     <EyeOutlined {...classes.hidden.disabled} onClick={hideStates} />
                 )}
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
index b48c1574..3517010f 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
@@ -94,7 +94,7 @@ function ItemTopComponent(props: Props): JSX.Element {
     };
 
     return (
-        <Row type='flex' align='middle'>
+        <Row align='middle'>
             <Col span={10}>
                 <Text style={{ fontSize: 12 }}>{clientID}</Text>
                 <br />
@@ -104,7 +104,13 @@ function ItemTopComponent(props: Props): JSX.Element {
             </Col>
             <Col span={12}>
                 <Tooltip title='Change current label' mouseLeaveDelay={0}>
-                    <LabelSelector disabled={readonly} size='small' labels={labels} value={labelID} onChange={changeLabel} />
+                    <LabelSelector
+                        disabled={readonly}
+                        size='small'
+                        labels={labels}
+                        value={labelID}
+                        onChange={changeLabel}
+                    />
                 </Tooltip>
             </Col>
             <Col span={2}>
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
index cde142be..ea7a046f 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
@@ -4,7 +4,19 @@
 
 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
-import Icon from '@ant-design/icons';
+import Icon, {
+    UnlockOutlined,
+    LockFilled,
+    TeamOutlined,
+    UserOutlined,
+    PushpinFilled,
+    PushpinOutlined,
+    EyeInvisibleFilled,
+    StarFilled,
+    SelectOutlined,
+    StarOutlined,
+    EyeOutlined,
+} from '@ant-design/icons';
 import Tooltip from 'antd/lib/tooltip';
 
 import { ObjectType, ShapeType } from 'reducers/interfaces';
@@ -130,9 +142,9 @@ function SwitchLock(props: Props): JSX.Element {
     return (
         <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
             {locked ? (
-                <Icon {...classes.lock.enabled} type='lock' theme='filled' onClick={unlock} />
+                <LockFilled {...classes.lock.enabled} onClick={unlock} />
             ) : (
-                <Icon {...classes.lock.disabled} type='unlock' onClick={lock} />
+                <UnlockOutlined {...classes.lock.disabled} onClick={lock} />
             )}
         </Tooltip>
     );
@@ -145,9 +157,9 @@ function SwitchOccluded(props: Props): JSX.Element {
     return (
         <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
             {occluded ? (
-                <Icon {...classes.occluded.enabled} type='team' onClick={unsetOccluded} />
+                <TeamOutlined {...classes.occluded.enabled} onClick={unsetOccluded} />
             ) : (
-                <Icon {...classes.occluded.disabled} type='user' onClick={setOccluded} />
+                <UserOutlined {...classes.occluded.disabled} onClick={setOccluded} />
             )}
         </Tooltip>
     );
@@ -158,9 +170,9 @@ function SwitchPinned(props: Props): JSX.Element {
     return (
         <Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
             {pinned ? (
-                <Icon {...classes.pinned.enabled} type='pushpin' theme='filled' onClick={unpin} />
+                <PushpinFilled {...classes.pinned.enabled} onClick={unpin} />
             ) : (
-                <Icon {...classes.pinned.disabled} type='pushpin' onClick={pin} />
+                <PushpinOutlined {...classes.pinned.disabled} onClick={pin} />
             )}
         </Tooltip>
     );
@@ -174,15 +186,9 @@ function SwitchHidden(props: Props): JSX.Element {
     return (
         <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
             {hidden ? (
-                <Icon
-                    {...classes.hidden.enabled}
-                    type='eye-invisible'
-                    theme='filled'
-                    onClick={show}
-                    style={hiddenStyle}
-                />
+                <EyeInvisibleFilled {...classes.hidden.enabled} onClick={show} style={hiddenStyle} />
             ) : (
-                <Icon {...classes.hidden.disabled} type='eye' onClick={hide} style={hiddenStyle} />
+                <EyeOutlined {...classes.hidden.disabled} onClick={hide} style={hiddenStyle} />
             )}
         </Tooltip>
     );
@@ -203,7 +209,7 @@ function SwitchOutside(props: Props): JSX.Element {
                     style={outsideStyle}
                 />
             ) : (
-                <Icon {...classes.outside.disabled} type='select' onClick={setOutside} style={outsideStyle} />
+                <SelectOutlined {...classes.outside.disabled} onClick={setOutside} style={outsideStyle} />
             )}
         </Tooltip>
     );
@@ -217,15 +223,9 @@ function SwitchKeyframe(props: Props): JSX.Element {
     return (
         <Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`} mouseLeaveDelay={0}>
             {keyframe ? (
-                <Icon
-                    {...classes.keyframe.enabled}
-                    type='star'
-                    theme='filled'
-                    onClick={unsetKeyframe}
-                    style={keyframeStyle}
-                />
+                <StarFilled {...classes.keyframe.enabled} onClick={unsetKeyframe} style={keyframeStyle} />
             ) : (
-                <Icon {...classes.keyframe.disabled} type='star' onClick={setKeyframe} style={keyframeStyle} />
+                <StarOutlined {...classes.keyframe.disabled} onClick={setKeyframe} style={keyframeStyle} />
             )}
         </Tooltip>
     );
@@ -236,9 +236,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
 
     if (objectType === ObjectType.TRACK) {
         return (
-            <Row type='flex' align='middle' justify='space-around'>
+            <Row align='middle' justify='space-around'>
                 <Col span={20} style={{ textAlign: 'center' }}>
-                    <Row type='flex' justify='space-around'>
+                    <Row justify='space-around'>
                         <Col>
                             <NavigateFirstKeyframe {...props} />
                         </Col>
@@ -253,7 +253,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                         </Col>
                     </Row>
                     {!readonly && (
-                        <Row type='flex' justify='space-around'>
+                        <Row justify='space-around'>
                             <Col>
                                 <SwitchOutside {...props} />
                             </Col>
@@ -287,9 +287,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
 
     if (objectType === ObjectType.TAG) {
         return (
-            <Row type='flex' align='middle' justify='space-around'>
+            <Row align='middle' justify='space-around'>
                 <Col span={20} style={{ textAlign: 'center' }}>
-                    <Row type='flex' justify='space-around'>
+                    <Row justify='space-around'>
                         <Col>
                             <SwitchLock {...props} />
                         </Col>
@@ -300,9 +300,9 @@ function ItemButtonsComponent(props: Props): JSX.Element {
     }
 
     return (
-        <Row type='flex' align='middle' justify='space-around'>
+        <Row align='middle' justify='space-around'>
             <Col span={20} style={{ textAlign: 'center' }}>
-                <Row type='flex' justify='space-around'>
+                <Row justify='space-around'>
                     <Col>
                         <SwitchLock {...props} />
                     </Col>
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-details.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-details.tsx
index b541ce0d..9615d4bf 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-details.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-details.tsx
@@ -55,7 +55,6 @@ function ItemAttributesComponent(props: Props): JSX.Element {
                         (attribute: any): JSX.Element => (
                             <Row
                                 key={attribute.id}
-                                type='flex'
                                 align='middle'
                                 justify='start'
                                 className='cvat-object-item-attribute-wrapper'
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
index ccc00758..05c1272a 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
@@ -5,8 +5,12 @@
 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
 import {
-    LockOutlined, UnlockOutlined, EyeInvisibleOutlined,
-    EyeOutlined, CaretDownOutlined, CaretUpFilled,
+    LockFilled,
+    UnlockOutlined,
+    EyeInvisibleFilled,
+    EyeOutlined,
+    CaretDownOutlined,
+    CaretUpFilled,
 } from '@ant-design/icons';
 import Tooltip from 'antd/lib/tooltip';
 
@@ -14,7 +18,6 @@ import AnnotationsFiltersInput from 'components/annotation-page/annotations-filt
 import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector';
 import { StatesOrdering } from 'reducers/interfaces';
 
-
 interface Props {
     readonly: boolean;
     statesHidden: boolean;
@@ -39,11 +42,7 @@ function LockAllSwitcher(props: Props): JSX.Element {
     return (
         <Col span={2}>
             <Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`} mouseLeaveDelay={0}>
-                {statesLocked ? (
-                    <LockOutlined type='lock' onClick={unlockAllStates} />
-                ) : (
-                    <UnlockOutlined type='unlock' onClick={lockAllStates} />
-                )}
+                {statesLocked ? <LockFilled onClick={unlockAllStates} /> : <UnlockOutlined onClick={lockAllStates} />}
             </Tooltip>
         </Col>
     );
@@ -57,7 +56,7 @@ function HideAllSwitcher(props: Props): JSX.Element {
         <Col span={2}>
             <Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`} mouseLeaveDelay={0}>
                 {statesHidden ? (
-                    <EyeInvisibleOutlined onClick={showAllStates} />
+                    <EyeInvisibleFilled onClick={showAllStates} />
                 ) : (
                     <EyeOutlined onClick={hideAllStates} />
                 )}
@@ -87,11 +86,11 @@ function ObjectListHeader(props: Props): JSX.Element {
     return (
         <div className='cvat-objects-sidebar-states-header'>
             <Row>
-                <Col>
+                <Col span={24}>
                     <AnnotationsFiltersInput />
                 </Col>
             </Row>
-            <Row type='flex' justify='space-between' align='middle'>
+            <Row justify='space-between' align='middle'>
                 {!readonly && (
                     <>
                         <LockAllSwitcher {...props} />
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss
index 188257d2..b2c6f710 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss
@@ -19,6 +19,10 @@
             background: $header-color;
             border-radius: 0;
             height: 25px;
+
+            .ant-collapse-arrow {
+                top: $grid-unit-size;
+            }
         }
 
         > .ant-collapse-content {
@@ -48,7 +52,11 @@
     box-sizing: border-box;
     border: none;
 
-    .ant-tabs-card-bar {
+    .ant-tabs-nav {
+        &::before {
+            content: none;
+        }
+
         border: none;
         margin-bottom: 0;
         padding-top: 25px;
@@ -75,7 +83,7 @@
     box-sizing: border-box;
 
     > div > div {
-        > i {
+        > span[role='img'] {
             font-size: 16px;
             color: $objects-bar-icons-color;
 
@@ -133,7 +141,7 @@
             text-align: center;
             margin: 0 2px;
 
-            > i {
+            > span[role='img'] {
                 @extend .cvat-object-sidebar-icon;
             }
 
@@ -182,7 +190,7 @@
             line-height: 12px;
         }
 
-        > div:nth-child(3) > i {
+        > div:nth-child(3) > span {
             @extend .cvat-object-sidebar-icon;
 
             font-size: 25px;
@@ -198,7 +206,7 @@
             margin-top: 5px;
         }
 
-        i {
+        span[role='img'] {
             @extend .cvat-object-sidebar-icon;
         }
     }
@@ -216,6 +224,10 @@
             background: inherit;
             padding-top: 2px;
             padding-bottom: 2px;
+
+            .ant-collapse-arrow {
+                top: $grid-unit-size;
+            }
         }
 
         > .ant-collapse-content {
@@ -281,10 +293,10 @@
 
 .cvat-objects-sidebar-label-item {
     height: 2.5em;
-    border-bottom: 1px solid $border-color-2;
+    border-bottom: 1px solid $border-color-1;
     padding: 5px;
 
-    i {
+    span {
         @extend .cvat-object-sidebar-icon;
     }
 
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
index 371ea5a3..0422c569 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss
@@ -8,10 +8,6 @@
     height: 100%;
 }
 
-.cvat-objects-sidebar-filter-input {
-    width: calc(100% - 35px);
-}
-
 .cvat-objects-sidebar-sider {
     top: 0;
     right: 0;
@@ -34,26 +30,38 @@
 .cvat-canvas-controls-sidebar {
     background-color: $background-color-2;
     border-right: 1px solid $border-color-1;
+}
 
-    > div {
-        > i {
-            border-radius: 3.3px;
-            transform: scale(0.65);
-            padding: 2px;
-
-            &:hover {
-                background: $header-color;
-                transform: scale(0.75);
-            }
+.cvat-cursor-control,
+.cvat-move-control,
+.cvat-rotate-canvas-control,
+.cvat-fit-control,
+.cvat-resize-control,
+.cvat-draw-rectangle-control,
+.cvat-draw-polygon-control,
+.cvat-draw-polyline-control,
+.cvat-draw-points-control,
+.cvat-draw-cuboid-control,
+.cvat-setup-tag-control,
+.cvat-merge-control,
+.cvat-group-control,
+.cvat-split-track-control,
+.cvat-issue-control {
+    border-radius: 3.3px;
+    transform: scale(0.65);
+    padding: 2px;
 
-            &:active {
-                transform: scale(0.65);
-            }
+    &:hover {
+        background: $header-color;
+        transform: scale(0.75);
+    }
 
-            > svg {
-                transform: scale(0.8);
-            }
-        }
+    &:active {
+        transform: scale(0.65);
+    }
+
+    > svg {
+        transform: scale(0.8);
     }
 }
 
@@ -76,13 +84,15 @@
     }
 }
 
-.cvat-rotate-canvas-controls > .ant-popover-content > .ant-popover-inner > div > .ant-popover-inner-content {
-    padding: 0;
+.cvat-rotate-canvas-controls {
+    .ant-popover-inner-content {
+        padding: 0;
+    }
 }
 
 .cvat-draw-shape-popover,
 .cvat-tools-control-popover {
-    > .ant-popover-content > .ant-popover-inner > div > .ant-popover-inner-content {
+    .ant-popover-inner-content {
         padding: 0;
     }
 }
diff --git a/cvat-ui/src/components/annotation-page/styles.scss b/cvat-ui/src/components/annotation-page/styles.scss
index 731e71e5..c14da8d9 100644
--- a/cvat-ui/src/components/annotation-page/styles.scss
+++ b/cvat-ui/src/components/annotation-page/styles.scss
@@ -6,6 +6,7 @@
 
 .cvat-annotation-page.ant-layout {
     height: 100%;
+    overflow: hidden;
 }
 
 .ant-layout-header.cvat-annotation-header {
@@ -37,21 +38,21 @@
     align-items: center;
     margin: 0 3px;
 
-    > span {
+    > span:not([role='img']) {
         margin-left: 0;
         font-size: 10px;
     }
 
-    > i {
+    > span[role='img'] {
         transform: scale(0.8);
         padding: 3px;
     }
 
-    &:hover > i {
+    &:hover > span[role='img'] {
         transform: scale(0.85);
     }
 
-    &:active > i {
+    &:active > span[role='img'] {
         transform: scale(0.8);
     }
 
@@ -80,7 +81,7 @@
     height: 100%;
     margin-right: 10px;
 
-    > i {
+    > span {
         font-size: 25px;
         margin: 0 7px;
         color: $player-buttons-color;
@@ -96,18 +97,17 @@
 }
 
 .cvat-player-controls {
-    position: relative;
     height: 100%;
     line-height: 27px;
 
     > div {
-        position: relative;
         height: 50%;
     }
 }
 
 .cvat-player-slider {
     width: 350px;
+    margin: 0;
 
     > .ant-slider-rail {
         background-color: $player-slider-color;
@@ -266,7 +266,7 @@
         }
     }
 
-    > i {
+    > span[role='img'] {
         opacity: 0.7;
         color: $objects-bar-icons-color;
 
diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss
index 992f5e50..0f15c968 100644
--- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss
+++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss
@@ -12,7 +12,7 @@
     background: $background-color-2;
     padding: 5px;
 
-    > div > .ant-row-flex > .ant-col > .ant-tag {
+    > div > .ant-row > .ant-col > .ant-tag {
         margin: 4px;
     }
 }
diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx
index 1ff0223a..854f6f36 100644
--- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx
+++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx
@@ -98,7 +98,6 @@ const ShortcutsSelect = (props: Props): JSX.Element => {
                                 onChange={(value: string) => {
                                     onChangeShortcutLabel(value, Number.parseInt(id, 10));
                                 }}
-                                size='default'
                                 style={{ width: 200 }}
                                 className='cvat-tag-annotation-label-select'
                             >
diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx
index 93c94936..b67b07c4 100644
--- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx
+++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx
@@ -207,19 +207,15 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                         ant-layout-sider-zero-width-trigger-left`}
                     onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                 >
-                    {sidebarCollapsed ? (
-                        <MenuFoldOutlined title='Show' />
-                    ) : (
-                        <MenuUnfoldOutlined title='Hide' />
-                    )}
+                    {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
                 </span>
-                <Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-label-select'>
+                <Row justify='start' className='cvat-tag-annotation-sidebar-label-select'>
                     <Col>
                         <Text strong>Tag label</Text>
                         <LabelSelector labels={labels} value={selectedLabelID} onChange={onChangeLabel} />
                     </Col>
                 </Row>
-                <Row type='flex' justify='space-around' className='cvat-tag-annotation-sidebar-buttons'>
+                <Row justify='space-around' className='cvat-tag-annotation-sidebar-buttons'>
                     <Col span={8}>
                         <Button onClick={() => onAddTag(selectedLabelID)}>Add tag</Button>
                     </Col>
@@ -227,7 +223,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                         <Button onClick={onChangeFrame}>Skip frame</Button>
                     </Col>
                 </Row>
-                <Row type='flex' className='cvat-tag-annotation-sidebar-checkbox-skip-frame'>
+                <Row className='cvat-tag-annotation-sidebar-checkbox-skip-frame'>
                     <Col>
                         <Checkbox
                             checked={skipFrame}
@@ -239,7 +235,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                         </Checkbox>
                     </Col>
                 </Row>
-                <Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-frame-tags'>
+                <Row justify='start' className='cvat-tag-annotation-sidebar-frame-tags'>
                     <Col>
                         <Text strong>Frame tags:&nbsp;</Text>
                         {frameTags.map((tag: any) => (
@@ -262,7 +258,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
                         <ShortcutsSelect onAddTag={onAddTag} />
                     </Col>
                 </Row>
-                <Row type='flex' justify='center' className='cvat-tag-annotation-sidebar-shortcut-help'>
+                <Row justify='center' className='cvat-tag-annotation-sidebar-shortcut-help'>
                     <Col>
                         <Text>
                             Use&nbsp;
diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
index 6047ea26..8716831e 100644
--- a/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Col } from 'antd/lib/grid';
-import Icon from '@ant-design/icons'
+import Icon from '@ant-design/icons';
 import Tooltip from 'antd/lib/tooltip';
 import Popover from 'antd/lib/popover';
 
diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
index 927673e5..65ef5130 100644
--- a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
@@ -50,7 +50,7 @@ function PlayerNavigation(props: Props): JSX.Element {
     return (
         <>
             <Col className='cvat-player-controls'>
-                <Row type='flex'>
+                <Row align='bottom'>
                     <Col>
                         <Slider
                             className='cvat-player-slider'
@@ -61,7 +61,7 @@ function PlayerNavigation(props: Props): JSX.Element {
                         />
                     </Col>
                 </Row>
-                <Row type='flex' justify='center'>
+                <Row justify='center'>
                     <Col className='cvat-player-filename-wrapper'>
                         <Tooltip title={frameFilename} mouseLeaveDelay={0}>
                             <Text type='secondary'>{frameFilename}</Text>
@@ -82,7 +82,7 @@ function PlayerNavigation(props: Props): JSX.Element {
                         type='number'
                         value={frameInputValue}
                         onChange={(value: number | undefined | string) => {
-                            if (typeof (value) !== 'undefined') {
+                            if (typeof value !== 'undefined') {
                                 setFrameInputValue(Math.floor(clamp(+value, startFrame, stopFrame)));
                             }
                         }}
diff --git a/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx b/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
index 61dc4cf5..ae9058ef 100644
--- a/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
@@ -133,12 +133,12 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
     return (
         <Modal {...baseProps}>
             <div className='cvat-job-info-modal-window'>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col>
                         <Text className='cvat-text'>Overview</Text>
                     </Col>
                 </Row>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col span={4}>
                         <Text strong className='cvat-text'>
                             Assignee
@@ -171,7 +171,7 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
                     </Col>
                 </Row>
                 {!!bugTracker && (
-                    <Row type='flex' justify='start' className='cvat-job-info-bug-tracker'>
+                    <Row justify='start' className='cvat-job-info-bug-tracker'>
                         <Col>
                             <Text strong className='cvat-text'>
                                 Bug tracker
@@ -180,7 +180,7 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
                         </Col>
                     </Row>
                 )}
-                <Row type='flex' justify='space-around' className='cvat-job-info-statistics'>
+                <Row justify='space-around' className='cvat-job-info-statistics'>
                     <Col span={24}>
                         <Text className='cvat-text'>Annotations statistics</Text>
                         <Table scroll={{ y: 400 }} bordered pagination={false} columns={columns} dataSource={rows} />
diff --git a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
index 45711fe9..cbd0d693 100644
--- a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx
@@ -99,7 +99,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
     } = props;
 
     return (
-        <Row type='flex' justify='space-between'>
+        <Row justify='space-between'>
             <LeftGroup
                 saving={saving}
                 savingStatuses={savingStatuses}
@@ -113,7 +113,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
                 onRedoClick={onRedoClick}
             />
             <Col className='cvat-annotation-header-player-group'>
-                <Row type='flex' align='middle'>
+                <Row align='middle'>
                     <PlayerButtons
                         playing={playing}
                         playPauseShortcut={playPauseShortcut}
diff --git a/cvat-ui/src/components/create-project-page/create-project-content.tsx b/cvat-ui/src/components/create-project-page/create-project-content.tsx
index ac879144..d67f5db5 100644
--- a/cvat-ui/src/components/create-project-page/create-project-content.tsx
+++ b/cvat-ui/src/components/create-project-page/create-project-content.tsx
@@ -116,7 +116,7 @@ export default function CreateProjectContent(): JSX.Element {
     };
 
     return (
-        <Row type='flex' justify='start' align='middle' className='cvat-create-project-content'>
+        <Row justify='start' align='middle' className='cvat-create-project-content'>
             <Col span={24}>
                 <NameConfigurationForm formRef={nameFormRef} />
             </Col>
diff --git a/cvat-ui/src/components/create-project-page/create-project-page.tsx b/cvat-ui/src/components/create-project-page/create-project-page.tsx
index 5072edde..1156511e 100644
--- a/cvat-ui/src/components/create-project-page/create-project-page.tsx
+++ b/cvat-ui/src/components/create-project-page/create-project-page.tsx
@@ -11,7 +11,7 @@ import CreateProjectContent from './create-project-content';
 
 export default function CreateProjectPageComponent(): JSX.Element {
     return (
-        <Row type='flex' justify='center' align='top' className='cvat-create-task-form-wrapper'>
+        <Row justify='center' align='top' className='cvat-create-task-form-wrapper'>
             <Col md={20} lg={16} xl={14} xxl={9}>
                 <Text className='cvat-title'>Create a new project</Text>
                 <CreateProjectContent />
diff --git a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
index 55a79724..614d1a4a 100644
--- a/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
+++ b/cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
@@ -69,8 +69,9 @@ function validateRepository(_: RuleObject, value: string): Promise<[void, void]>
     return Promise.resolve();
 }
 
-const isInteger = ({ min, max }: { min?: number, max?: number }) => (
-    _: RuleObject, value?: number | string,
+const isInteger = ({ min, max }: { min?: number; max?: number }) => (
+    _: RuleObject,
+    value?: number | string,
 ): Promise<void> => {
     if (typeof value === 'undefined' || value === '') {
         return Promise.resolve();
@@ -134,17 +135,20 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { onSubmit } = this.props;
         if (this.formRef.current) {
             this.formRef.current.resetFields();
-            return this.formRef.current.validateFields().then((values: Store): Promise<void> => {
-                const frameFilter = values.frameStep ? `step=${values.frameStep}` : undefined;
-                const entries = Object.entries(values)
-                    .filter((entry: [string, unknown]): boolean => entry[0] !== frameFilter);
-
-                onSubmit({
-                    ...Object.fromEntries(entries) as any as AdvancedConfiguration,
-                    frameFilter,
-                });
-                return Promise.resolve();
-            });
+            return this.formRef.current.validateFields().then(
+                (values: Store): Promise<void> => {
+                    const frameFilter = values.frameStep ? `step=${values.frameStep}` : undefined;
+                    const entries = Object.entries(values).filter(
+                        (entry: [string, unknown]): boolean => entry[0] !== frameFilter,
+                    );
+
+                    onSubmit({
+                        ...((Object.fromEntries(entries) as any) as AdvancedConfiguration),
+                        frameFilter,
+                    });
+                    return Promise.resolve();
+                },
+            );
         }
 
         return Promise.reject(new Error('Form ref is empty'));
@@ -185,13 +189,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
                         { validator: isInteger({ min: 5, max: 100 }) },
                     ]}
                 >
-                    <Input
-                        size='large'
-                        type='number'
-                        min={5}
-                        max={100}
-                        suffix={<PercentageOutlined />}
-                    />
+                    <Input size='large' type='number' min={5} max={100} suffix={<PercentageOutlined />} />
                 </Form.Item>
             </Tooltip>
         );
@@ -215,11 +213,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
     private renderSegmentSize(): JSX.Element {
         return (
             <Tooltip title='Defines a number of frames in a segment' mouseLeaveDelay={0}>
-                <Form.Item
-                    label='Segment size'
-                    name='segmentSize'
-                    rules={[{ validator: isInteger({ min: 1 }) }]}
-                >
+                <Form.Item label='Segment size' name='segmentSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
                     <Input size='large' type='number' min={1} />
                 </Form.Item>
             </Tooltip>
@@ -228,11 +222,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
 
     private renderStartFrame(): JSX.Element {
         return (
-            <Form.Item
-                label='Start frame'
-                name='startFrame'
-                rules={[{ validator: isInteger({ min: 0 }) }]}
-            >
+            <Form.Item label='Start frame' name='startFrame' rules={[{ validator: isInteger({ min: 0 }) }]}>
                 <Input size='large' type='number' min={0} step={1} />
             </Form.Item>
         );
@@ -253,11 +243,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
 
     private renderFrameStep(): JSX.Element {
         return (
-            <Form.Item
-                label='Frame step'
-                name='frameStep'
-                rules={[{ validator: isInteger({ min: 1 }) }]}
-            >
+            <Form.Item label='Frame step' name='frameStep' rules={[{ validator: isInteger({ min: 1 }) }]}>
                 <Input size='large' type='number' min={1} step={1} />
             </Form.Item>
         );
@@ -286,10 +272,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
                 extra='Attach a repository to store annotations there'
                 rules={[{ validator: validateRepository }]}
             >
-                <Input
-                    size='large'
-                    placeholder='e.g. https//github.com/user/repos [annotation/<anno_file_name>.zip]'
-                />
+                <Input size='large' placeholder='e.g. https//github.com/user/repos [annotation/<anno_file_name>.zip]' />
             </Form.Item>
         );
     }
@@ -337,11 +320,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
 
     private renderCreateTaskMethod(): JSX.Element {
         return (
-            <Form.Item
-                help='Using cache to store data.'
-                name='useCache'
-                valuePropName='checked'
-            >
+            <Form.Item help='Using cache to store data.' name='useCache' valuePropName='checked'>
                 <Checkbox>
                     <Text className='cvat-text-color'>Use cache</Text>
                 </Checkbox>
@@ -370,11 +349,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
                 )}
                 mouseLeaveDelay={0}
             >
-                <Form.Item
-                    label='Chunk size'
-                    name='dataChunkSize'
-                    rules={[{ validator: isInteger({ min: 1 }) }]}
-                >
+                <Form.Item label='Chunk size' name='dataChunkSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
                     <Input size='large' type='number' />
                 </Form.Item>
             </Tooltip>
@@ -387,9 +362,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
             <Form initialValues={initialValues} ref={this.formRef} layout='vertical'>
                 {activeFileManagerTab === 'share' ? (
                     <Row>
-                        <Col>
-                            { this.renderCopyDataChechbox() }
-                        </Col>
+                        <Col>{this.renderCopyDataChechbox()}</Col>
                     </Row>
                 ) : null}
                 <Row>
@@ -398,7 +371,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
                 <Row>
                     <Col>{this.renderCreateTaskMethod()}</Col>
                 </Row>
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col span={7}>{this.renderImageQuality()}</Col>
                     <Col span={7} offset={1}>
                         {this.renderOverlap()}
@@ -408,7 +381,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
                     </Col>
                 </Row>
 
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col span={7}>{this.renderStartFrame()}</Col>
                     <Col span={7} offset={1}>
                         {this.renderStopFrame()}
@@ -418,7 +391,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
                     </Col>
                 </Row>
 
-                <Row type='flex' justify='start'>
+                <Row justify='start'>
                     <Col span={7}>{this.renderChunkSize()}</Col>
                 </Row>
 
diff --git a/cvat-ui/src/components/create-task-page/create-task-page.tsx b/cvat-ui/src/components/create-task-page/create-task-page.tsx
index a78b90b1..adf65cf1 100644
--- a/cvat-ui/src/components/create-task-page/create-task-page.tsx
+++ b/cvat-ui/src/components/create-task-page/create-task-page.tsx
@@ -69,7 +69,7 @@ export default function CreateTaskPage(props: Props): JSX.Element {
     }, [error]);
 
     return (
-        <Row type='flex' justify='center' align='top' className='cvat-create-task-form-wrapper'>
+        <Row justify='center' align='top' className='cvat-create-task-form-wrapper'>
             <Col md={20} lg={16} xl={14} xxl={9}>
                 <Text className='cvat-title'>Create a new task</Text>
                 <CreateTaskContent
diff --git a/cvat-ui/src/components/feedback/feedback.tsx b/cvat-ui/src/components/feedback/feedback.tsx
index 6ad51062..b1741186 100644
--- a/cvat-ui/src/components/feedback/feedback.tsx
+++ b/cvat-ui/src/components/feedback/feedback.tsx
@@ -109,7 +109,7 @@ export default function Feedback(): JSX.Element {
                 visible={visible}
             >
                 <Button
-                    style={{ color: '#ff4d4f' }}
+                    style={visible ? { color: '#ff4d4f' } : {}}
                     className='cvat-feedback-button'
                     type='link'
                     onClick={(): void => {
diff --git a/cvat-ui/src/components/feedback/styles.scss b/cvat-ui/src/components/feedback/styles.scss
index 39415886..5b44af6b 100644
--- a/cvat-ui/src/components/feedback/styles.scss
+++ b/cvat-ui/src/components/feedback/styles.scss
@@ -9,7 +9,7 @@
     padding: 0;
     height: auto;
 
-    > i {
+    > span[role='img'] {
         font-size: 40px;
     }
 }
diff --git a/cvat-ui/src/components/file-manager/file-manager.tsx b/cvat-ui/src/components/file-manager/file-manager.tsx
index aa7c6e2b..3a547e0b 100644
--- a/cvat-ui/src/components/file-manager/file-manager.tsx
+++ b/cvat-ui/src/components/file-manager/file-manager.tsx
@@ -3,14 +3,16 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React from 'react';
+import React, { ReactText } from 'react';
 import Tabs from 'antd/lib/tabs';
 import Input from 'antd/lib/input';
 import Text from 'antd/lib/typography/Text';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import Upload, { RcFile } from 'antd/lib/upload';
 import Empty from 'antd/lib/empty';
-import Tree, { AntTreeNode, TreeNodeNormal } from 'antd/lib/tree/Tree';
+import Tree, { TreeNodeNormal } from 'antd/lib/tree/Tree';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { EventDataNode } from 'rc-tree/lib/interface';
 import { InboxOutlined } from '@ant-design/icons';
 
 import consts from 'consts';
@@ -124,17 +126,18 @@ export default class FileManager extends React.PureComponent<Props, State> {
     private renderShareSelector(): JSX.Element {
         function renderTreeNodes(data: TreeNodeNormal[]): JSX.Element[] {
             // sort alphabetically
-            data.sort((a: TreeNodeNormal, b: TreeNodeNormal): number => a.key.localeCompare(b.key));
+            data.sort((a: TreeNodeNormal, b: TreeNodeNormal): number =>
+                a.key.toLocaleString().localeCompare(b.key.toLocaleString()));
             return data.map((item: TreeNodeNormal) => {
                 if (item.children) {
                     return (
-                        <Tree.TreeNode title={item.title} key={item.key} dataRef={item} isLeaf={item.isLeaf}>
+                        <Tree.TreeNode title={item.title} key={item.key} data={item} isLeaf={item.isLeaf}>
                             {renderTreeNodes(item.children)}
                         </Tree.TreeNode>
                     );
                 }
 
-                return <Tree.TreeNode key={item.key} {...item} dataRef={item} />;
+                return <Tree.TreeNode {...item} key={item.key} data={item} />;
             });
         }
 
@@ -153,21 +156,22 @@ export default class FileManager extends React.PureComponent<Props, State> {
                         checkStrictly={false}
                         expandedKeys={expandedKeys}
                         checkedKeys={files.share}
-                        loadData={(node: AntTreeNode): Promise<void> => this.loadData(node.props.dataRef.key)}
-                        onExpand={(newExpandedKeys: string[]): void => {
+                        loadData={(event: EventDataNode): Promise<void> => this.loadData(event.key.toLocaleString())}
+                        onExpand={(newExpandedKeys: ReactText[]): void => {
                             this.setState({
-                                expandedKeys: newExpandedKeys,
+                                expandedKeys: newExpandedKeys.map((text: ReactText): string => text.toLocaleString()),
                             });
                         }}
                         onCheck={(
                             checkedKeys:
-                                | string[]
-                                | {
-                                      checked: string[];
-                                      halfChecked: string[];
-                                  },
+                            | ReactText[]
+                            | {
+                                checked: ReactText[];
+                                halfChecked: ReactText[];
+                            },
                         ): void => {
-                            const keys = checkedKeys as string[];
+                            const keys = (checkedKeys as ReactText[]).map((text: ReactText): string =>
+                                text.toLocaleString());
                             this.setState({
                                 files: {
                                     ...files,
diff --git a/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx b/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx
index 6192eca9..6330ca00 100644
--- a/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx
+++ b/cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx
@@ -100,7 +100,9 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
     }
 
     public render(): React.ReactNode {
-        const { restore, job, serverVersion, coreVersion, canvasVersion, uiVersion } = this.props;
+        const {
+            restore, job, serverVersion, coreVersion, canvasVersion, uiVersion,
+        } = this.props;
 
         const { hasError, error } = this.state;
 
@@ -152,7 +154,8 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
                                             }}
                                         >
                                             {' '}
-                                            Copy{' '}
+                                            Copy
+                                            {' '}
                                         </a>
                                     </Tooltip>
                                     the error message to clipboard
diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx
index 0c9ba603..7c10e621 100644
--- a/cvat-ui/src/components/header/header.tsx
+++ b/cvat-ui/src/components/header/header.tsx
@@ -8,9 +8,15 @@ import { connect } from 'react-redux';
 import { useHistory } from 'react-router';
 import { Row, Col } from 'antd/lib/grid';
 import Icon, {
-    ContactsOutlined, SettingOutlined, InfoCircleOutlined, EditOutlined,
-    LoadingOutlined, LogoutOutlined, GithubOutlined,
-    QuestionCircleOutlined, CaretDownOutlined,
+    SettingOutlined,
+    InfoCircleOutlined,
+    EditOutlined,
+    LoadingOutlined,
+    LogoutOutlined,
+    GithubOutlined,
+    QuestionCircleOutlined,
+    CaretDownOutlined,
+    ControlOutlined,
 } from '@ant-design/icons';
 import Layout from 'antd/lib/layout';
 import Button from 'antd/lib/button';
@@ -169,7 +175,7 @@ function HeaderContainer(props: Props): JSX.Element {
                         <Text strong>UI version:</Text>
                         <Text type='secondary'>{` ${tool.ui.version}`}</Text>
                     </p>
-                    <Row type='flex' justify='space-around'>
+                    <Row justify='space-around'>
                         <Col>
                             <a href={CHANGELOG_URL} target='_blank' rel='noopener noreferrer'>
                                 What&apos;s new?
@@ -212,7 +218,7 @@ function HeaderContainer(props: Props): JSX.Element {
                         window.open(`${tool.server.host}/admin`, '_blank');
                     }}
                 >
-                    <ContactsOutlined />
+                    <ControlOutlined />
                     Admin page
                 </Menu.Item>
             )}
diff --git a/cvat-ui/src/components/header/settings-modal/player-settings.tsx b/cvat-ui/src/components/header/settings-modal/player-settings.tsx
index dc341d6a..d87a357b 100644
--- a/cvat-ui/src/components/header/settings-modal/player-settings.tsx
+++ b/cvat-ui/src/components/header/settings-modal/player-settings.tsx
@@ -82,7 +82,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
 
     return (
         <div className='cvat-player-settings'>
-            <Row type='flex' align='bottom' className='cvat-player-settings-step'>
+            <Row align='bottom' className='cvat-player-settings-step'>
                 <Col>
                     <Text className='cvat-text-color'> Player step </Text>
                     <InputNumber
@@ -105,7 +105,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     </Text>
                 </Col>
             </Row>
-            <Row type='flex' align='middle' className='cvat-player-settings-speed'>
+            <Row align='middle' className='cvat-player-settings-speed'>
                 <Col>
                     <Text className='cvat-text-color'> Player speed </Text>
                     <Select
@@ -135,7 +135,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     </Select>
                 </Col>
             </Row>
-            <Row type='flex' className='cvat-player-settings-canvas-background'>
+            <Row className='cvat-player-settings-canvas-background'>
                 <Col>
                     <Popover
                         content={(
@@ -152,7 +152,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     </Popover>
                 </Col>
             </Row>
-            <Row type='flex'>
+            <Row>
                 <Col>
                     <Checkbox
                         className='cvat-text-color cvat-player-settings-grid'
@@ -165,7 +165,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     </Checkbox>
                 </Col>
             </Row>
-            <Row type='flex' justify='space-between'>
+            <Row justify='space-between'>
                 <Col span={8} className='cvat-player-settings-grid-size'>
                     <Text className='cvat-text-color'> Grid size </Text>
                     <InputNumber
@@ -223,10 +223,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                     <Text className='cvat-text-color'>{`${gridOpacity} %`}</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='start'>
-                <Col>
+            <Row justify='start'>
+                <Col span={7}>
                     <Row className='cvat-player-settings-reset-zoom'>
-                        <Col className='cvat-player-settings-reset-zoom-checkbox'>
+                        <Col span={24} className='cvat-player-settings-reset-zoom-checkbox'>
                             <Checkbox
                                 className='cvat-text-color'
                                 checked={resetZoom}
@@ -237,14 +237,14 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                                 Reset zoom
                             </Checkbox>
                         </Col>
-                        <Col>
+                        <Col span={24}>
                             <Text type='secondary'> Fit image after changing frame </Text>
                         </Col>
                     </Row>
                 </Col>
-                <Col offset={5}>
+                <Col span={7} offset={5}>
                     <Row className='cvat-player-settings-rotate-all'>
-                        <Col className='cvat-player-settings-rotate-all-checkbox'>
+                        <Col span={24} className='cvat-player-settings-rotate-all-checkbox'>
                             <Checkbox
                                 className='cvat-text-color'
                                 checked={rotateAll}
@@ -255,7 +255,7 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                                 Rotate all images
                             </Checkbox>
                         </Col>
-                        <Col>
+                        <Col span={24}>
                             <Text type='secondary'> Rotate all images simultaneously </Text>
                         </Col>
                     </Row>
@@ -264,8 +264,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
             <Row>
                 <Col span={12}>
                     <Row className='cvat-player-settings-brightness'>
-                        <Col className='cvat-text-color'>Brightness</Col>
-                        <Col>
+                        <Col span={24} className='cvat-text-color'>
+                            Brightness
+                        </Col>
+                        <Col span={24}>
                             <Slider
                                 min={50}
                                 max={200}
@@ -277,8 +279,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                         </Col>
                     </Row>
                     <Row className='cvat-player-settings-contrast'>
-                        <Col className='cvat-text-color'>Contrast</Col>
-                        <Col>
+                        <Col span={24} className='cvat-text-color'>
+                            Contrast
+                        </Col>
+                        <Col span={24}>
                             <Slider
                                 min={50}
                                 max={200}
@@ -290,8 +294,10 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                         </Col>
                     </Row>
                     <Row className='cvat-player-settings-saturation'>
-                        <Col className='cvat-text-color'>Saturation</Col>
-                        <Col>
+                        <Col span={24} className='cvat-text-color'>
+                            Saturation
+                        </Col>
+                        <Col span={24}>
                             <Slider
                                 min={0}
                                 max={300}
diff --git a/cvat-ui/src/components/header/settings-modal/styles.scss b/cvat-ui/src/components/header/settings-modal/styles.scss
index f0d23d20..070e38d5 100644
--- a/cvat-ui/src/components/header/settings-modal/styles.scss
+++ b/cvat-ui/src/components/header/settings-modal/styles.scss
@@ -55,6 +55,10 @@
     justify-items: start;
 }
 
+.cvat-player-settings-grid-size-input {
+    height: fit-content;
+}
+
 .cvat-player-settings-grid-color {
     > .ant-select {
         width: 150px;
@@ -75,7 +79,7 @@
     }
 }
 
-.cvat-player-settings-step > div > span > i {
+.cvat-player-settings-step > div > span > span[role='img'] {
     margin: 0 5px;
     font-size: 10px;
 }
diff --git a/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx b/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
index 8166a1ec..a66a0a3c 100644
--- a/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
+++ b/cvat-ui/src/components/header/settings-modal/workspace-settings.tsx
@@ -49,7 +49,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
 
     return (
         <div className='cvat-workspace-settings'>
-            <Row type='flex'>
+            <Row>
                 <Col>
                     <Checkbox
                         className='cvat-text-color cvat-workspace-settings-auto-save'
@@ -62,7 +62,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                     </Checkbox>
                 </Col>
             </Row>
-            <Row type='flex'>
+            <Row>
                 <Col className='cvat-workspace-settings-auto-save-interval'>
                     <Text type='secondary'> Auto save every </Text>
                     <InputNumber
@@ -82,7 +82,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                 </Col>
             </Row>
             <Row className='cvat-workspace-settings-show-interpolated'>
-                <Col>
+                <Col span={24}>
                     <Checkbox
                         className='cvat-text-color'
                         checked={showAllInterpolationTracks}
@@ -93,12 +93,12 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         Show all interpolation tracks
                     </Checkbox>
                 </Col>
-                <Col>
+                <Col span={24}>
                     <Text type='secondary'> Show hidden interpolated objects in the side panel </Text>
                 </Col>
             </Row>
             <Row className='cvat-workspace-settings-show-text-always'>
-                <Col>
+                <Col span={24}>
                     <Checkbox
                         className='cvat-text-color'
                         checked={showObjectsTextAlways}
@@ -109,7 +109,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         Always show object details
                     </Checkbox>
                 </Col>
-                <Col>
+                <Col span={24}>
                     <Text type='secondary'>
                         {' '}
                         Show text for an object on the canvas not only when the object is activated
@@ -118,7 +118,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                 </Col>
             </Row>
             <Row className='cvat-workspace-settings-autoborders'>
-                <Col>
+                <Col span={24}>
                     <Checkbox
                         className='cvat-text-color'
                         checked={automaticBordering}
@@ -129,7 +129,7 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         Automatic bordering
                     </Checkbox>
                 </Col>
-                <Col>
+                <Col span={24}>
                     <Text type='secondary'>
                         {' '}
                         Enable automatic bordering for polygons and polylines during drawing/editing
diff --git a/cvat-ui/src/components/labels-editor/raw-viewer.tsx b/cvat-ui/src/components/labels-editor/raw-viewer.tsx
index ba90c3e5..6db8741e 100644
--- a/cvat-ui/src/components/labels-editor/raw-viewer.tsx
+++ b/cvat-ui/src/components/labels-editor/raw-viewer.tsx
@@ -10,7 +10,9 @@ import Tooltip from 'antd/lib/tooltip';
 import Form, { FormInstance, RuleObject } from 'antd/lib/form';
 import { Store } from 'antd/lib/form/interface';
 
-import { Label, Attribute, validateParsedLabel, idGenerator } from './common';
+import {
+    Label, Attribute, validateParsedLabel, idGenerator,
+} from './common';
 
 function validateLabels(_: RuleObject, value: string): Promise<void> {
     try {
@@ -80,14 +82,10 @@ export default class RawViewer extends React.PureComponent<Props> {
         const textLabels = JSON.stringify(convertedLabels, null, 2);
         return (
             <Form layout='vertical' onFinish={this.handleSubmit} ref={this.formRef}>
-                <Form.Item
-                    name='labels'
-                    initialValue={textLabels}
-                    rules={[{ validator: validateLabels }]}
-                >
+                <Form.Item name='labels' initialValue={textLabels} rules={[{ validator: validateLabels }]}>
                     <Input.TextArea rows={5} className='cvat-raw-labels-viewer' />
                 </Form.Item>
-                <Row type='flex' justify='start' align='middle'>
+                <Row justify='start' align='middle'>
                     <Col>
                         <Tooltip title='Save labels and return' mouseLeaveDelay={0}>
                             <Button style={{ width: '150px' }} type='primary' htmlType='submit'>
diff --git a/cvat-ui/src/components/labels-editor/styles.scss b/cvat-ui/src/components/labels-editor/styles.scss
index 1e34e992..646ae32d 100644
--- a/cvat-ui/src/components/labels-editor/styles.scss
+++ b/cvat-ui/src/components/labels-editor/styles.scss
@@ -51,7 +51,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
         margin-left: 5px;
         color: white;
 
-        > i:hover {
+        > span[role='img']:hover {
             filter: invert(1);
         }
     }
@@ -84,7 +84,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
     display: contents;
 }
 
-.cvat-delete-attribute-button:hover > i {
+.cvat-delete-attribute-button:hover > span[role='img'] {
     color: $danger-icon-color;
 }
 
diff --git a/cvat-ui/src/components/login-page/login-page.tsx b/cvat-ui/src/components/login-page/login-page.tsx
index f252606f..7fb3daa5 100644
--- a/cvat-ui/src/components/login-page/login-page.tsx
+++ b/cvat-ui/src/components/login-page/login-page.tsx
@@ -31,7 +31,7 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
 
     return (
         <>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col {...sizes}>
                     <Title level={2}> Login </Title>
                     <LoginForm
@@ -40,7 +40,7 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
                             onLogin(loginData.username, loginData.password);
                         }}
                     />
-                    <Row type='flex' justify='start' align='top'>
+                    <Row justify='start' align='top'>
                         <Col>
                             <Text strong>
                                 New to CVAT? Create
@@ -49,7 +49,7 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
                         </Col>
                     </Row>
                     {renderResetPassword && (
-                        <Row type='flex' justify='start' align='top'>
+                        <Row justify='start' align='top'>
                             <Col>
                                 <Text strong>
                                     <Link to='/auth/password/reset'>Forgot your password?</Link>
diff --git a/cvat-ui/src/components/model-runner-modal/detector-runner.tsx b/cvat-ui/src/components/model-runner-modal/detector-runner.tsx
index d0c4a582..8a000e1a 100644
--- a/cvat-ui/src/components/model-runner-modal/detector-runner.tsx
+++ b/cvat-ui/src/components/model-runner-modal/detector-runner.tsx
@@ -111,7 +111,9 @@ function DetectorRunner(props: Props): JSX.Element {
                 >
                     {labels.map(
                         (label: string): JSX.Element => (
-                            <Select.Option value={label} key={label}>{label}</Select.Option>
+                            <Select.Option value={label} key={label}>
+                                {label}
+                            </Select.Option>
                         ),
                     )}
                 </Select>
@@ -121,7 +123,7 @@ function DetectorRunner(props: Props): JSX.Element {
 
     return (
         <div className='cvat-run-model-content'>
-            <Row type='flex' align='middle'>
+            <Row align='middle'>
                 <Col span={4}>Model:</Col>
                 <Col span={20}>
                     <Select
@@ -143,7 +145,9 @@ function DetectorRunner(props: Props): JSX.Element {
                     >
                         {models.map(
                             (_model: Model): JSX.Element => (
-                                <Select.Option value={_model.id} key={_model.id}>{_model.name}</Select.Option>
+                                <Select.Option value={_model.id} key={_model.id}>
+                                    {_model.name}
+                                </Select.Option>
                             ),
                         )}
                     </Select>
@@ -155,7 +159,7 @@ function DetectorRunner(props: Props): JSX.Element {
                     const label = task.labels.filter((_label: any): boolean => _label.name === mapping[modelLabel])[0];
                     const color = label ? label.color : consts.NEW_LABEL_COLOR;
                     return (
-                        <Row key={modelLabel} type='flex' justify='start' align='middle'>
+                        <Row key={modelLabel} justify='start' align='middle'>
                             <Col span={10}>
                                 <Tag color={color}>{modelLabel}</Tag>
                             </Col>
@@ -179,22 +183,14 @@ function DetectorRunner(props: Props): JSX.Element {
                 })}
             {isDetector && !!taskLabels.length && !!modelLabels.length && (
                 <>
-                    <Row type='flex' justify='start' align='middle'>
+                    <Row justify='start' align='middle'>
                         <Col span={10}>
-                            {renderSelector(
-                                match.model || '',
-                                'Model labels',
-                                modelLabels,
-                                (modelLabel: string) => updateMatch(modelLabel, null),
-                            )}
+                            {renderSelector(match.model || '', 'Model labels', modelLabels, (modelLabel: string) =>
+                                updateMatch(modelLabel, null))}
                         </Col>
                         <Col span={10} offset={1}>
-                            {renderSelector(
-                                match.task || '',
-                                'Task labels',
-                                taskLabels,
-                                (taskLabel: string) => updateMatch(null, taskLabel),
-                            )}
+                            {renderSelector(match.task || '', 'Task labels', taskLabels, (taskLabel: string) =>
+                                updateMatch(null, taskLabel))}
                         </Col>
                         <Col span={1} offset={1}>
                             <Tooltip
@@ -219,7 +215,7 @@ function DetectorRunner(props: Props): JSX.Element {
             )}
             {isReId && (
                 <div>
-                    <Row type='flex' align='middle' justify='start'>
+                    <Row align='middle' justify='start'>
                         <Col>
                             <Text>Threshold</Text>
                         </Col>
@@ -239,7 +235,7 @@ function DetectorRunner(props: Props): JSX.Element {
                             </Tooltip>
                         </Col>
                     </Row>
-                    <Row type='flex' align='middle' justify='start'>
+                    <Row align='middle' justify='start'>
                         <Col>
                             <Text>Maximum distance</Text>
                         </Col>
@@ -260,7 +256,7 @@ function DetectorRunner(props: Props): JSX.Element {
                     </Row>
                 </div>
             )}
-            <Row type='flex' align='middle' justify='end'>
+            <Row align='middle' justify='end'>
                 <Col>
                     <Button
                         disabled={!buttonEnabled}
@@ -269,10 +265,12 @@ function DetectorRunner(props: Props): JSX.Element {
                             runInference(
                                 task,
                                 model,
-                                model.type === 'detector' ? { mapping, cleanup } : {
-                                    threshold,
-                                    max_distance: distance,
-                                },
+                                model.type === 'detector' ?
+                                    { mapping, cleanup } :
+                                    {
+                                        threshold,
+                                        max_distance: distance,
+                                    },
                             );
                         }}
                     >
diff --git a/cvat-ui/src/components/model-runner-modal/model-runner-dialog.tsx b/cvat-ui/src/components/model-runner-modal/model-runner-dialog.tsx
index a9f87889..d4873199 100644
--- a/cvat-ui/src/components/model-runner-modal/model-runner-dialog.tsx
+++ b/cvat-ui/src/components/model-runner-modal/model-runner-dialog.tsx
@@ -48,7 +48,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch): DispatchToProps {
 }
 
 function ModelRunnerDialog(props: StateToProps & DispatchToProps): JSX.Element {
-    const { reid, detectors, task, visible, runInference, closeDialog } = props;
+    const {
+        reid, detectors, task, visible, runInference, closeDialog,
+    } = props;
 
     const models = [...reid, ...detectors];
 
diff --git a/cvat-ui/src/components/models-page/deployed-model-item.tsx b/cvat-ui/src/components/models-page/deployed-model-item.tsx
index 2c6bd898..80ac1b19 100644
--- a/cvat-ui/src/components/models-page/deployed-model-item.tsx
+++ b/cvat-ui/src/components/models-page/deployed-model-item.tsx
@@ -17,7 +17,7 @@ export default function DeployedModelItem(props: Props): JSX.Element {
     const { model } = props;
 
     return (
-        <Row className='cvat-models-list-item' type='flex'>
+        <Row className='cvat-models-list-item'>
             <Col span={3}>
                 <Tag color='purple'>{model.framework}</Tag>
             </Col>
@@ -34,7 +34,9 @@ export default function DeployedModelItem(props: Props): JSX.Element {
                 <Select showSearch placeholder='Supported labels' style={{ width: '90%' }} value='Supported labels'>
                     {model.labels.map(
                         (label): JSX.Element => (
-                            <Select.Option key={label}>{label}</Select.Option>
+                            <Select.Option value={label} key={label}>
+                                {label}
+                            </Select.Option>
                         ),
                     )}
                 </Select>
diff --git a/cvat-ui/src/components/models-page/deployed-models-list.tsx b/cvat-ui/src/components/models-page/deployed-models-list.tsx
index 5ddeb7fa..6db6b881 100644
--- a/cvat-ui/src/components/models-page/deployed-models-list.tsx
+++ b/cvat-ui/src/components/models-page/deployed-models-list.tsx
@@ -20,9 +20,9 @@ export default function DeployedModelsListComponent(props: Props): JSX.Element {
 
     return (
         <>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col md={22} lg={18} xl={16} xxl={14} className='cvat-models-list'>
-                    <Row type='flex' align='middle' style={{ padding: '10px' }}>
+                    <Row align='middle' style={{ padding: '10px' }}>
                         <Col span={3}>
                             <Text strong>Framework</Text>
                         </Col>
diff --git a/cvat-ui/src/components/models-page/empty-list.tsx b/cvat-ui/src/components/models-page/empty-list.tsx
index 4b703192..a6415fb3 100644
--- a/cvat-ui/src/components/models-page/empty-list.tsx
+++ b/cvat-ui/src/components/models-page/empty-list.tsx
@@ -13,22 +13,22 @@ import { EmptyTasksIcon as EmptyModelsIcon } from 'icons';
 export default function EmptyListComponent(): JSX.Element {
     return (
         <div className='cvat-empty-models-list'>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Icon className='cvat-empty-models-icon' component={EmptyModelsIcon} />
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Text strong>No models deployed yet...</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Text type='secondary'>To annotate your tasks automatically</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Text type='secondary'>deploy a model with </Text>
                     <a href={`${consts.NUCLIO_GUIDE}`}>nuclio</a>
diff --git a/cvat-ui/src/components/models-page/top-bar.tsx b/cvat-ui/src/components/models-page/top-bar.tsx
index d0ede583..a1d539ef 100644
--- a/cvat-ui/src/components/models-page/top-bar.tsx
+++ b/cvat-ui/src/components/models-page/top-bar.tsx
@@ -8,7 +8,7 @@ import Text from 'antd/lib/typography/Text';
 
 export default function TopBarComponent(): JSX.Element {
     return (
-        <Row type='flex' justify='center' align='middle'>
+        <Row justify='center' align='middle'>
             <Col md={22} lg={20} xl={16} xxl={14}>
                 <Text className='cvat-title'>Models</Text>
             </Col>
diff --git a/cvat-ui/src/components/project-page/details.tsx b/cvat-ui/src/components/project-page/details.tsx
index 800bc7ef..dba14325 100644
--- a/cvat-ui/src/components/project-page/details.tsx
+++ b/cvat-ui/src/components/project-page/details.tsx
@@ -47,7 +47,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
                     </Title>
                 </Col>
             </Row>
-            <Row type='flex' justify='space-between'>
+            <Row justify='space-between'>
                 <Col>
                     <Text type='secondary'>
                         {`Project #${project.id} created`}
diff --git a/cvat-ui/src/components/project-page/project-page.tsx b/cvat-ui/src/components/project-page/project-page.tsx
index 6d304db0..49121d70 100644
--- a/cvat-ui/src/components/project-page/project-page.tsx
+++ b/cvat-ui/src/components/project-page/project-page.tsx
@@ -11,6 +11,7 @@ import { Row, Col } from 'antd/lib/grid';
 import Result from 'antd/lib/result';
 import Button from 'antd/lib/button';
 import Title from 'antd/lib/typography/Title';
+import { PlusOutlined } from '@ant-design/icons';
 
 import { CombinedState, Task } from 'reducers/interfaces';
 import { getProjectsAsync } from 'actions/projects-actions';
@@ -18,7 +19,6 @@ import { cancelInferenceAsync } from 'actions/models-actions';
 import TaskItem from 'components/tasks-page/task-item';
 import DetailsComponent from './details';
 import ProjectTopBar from './top-bar';
-import { PlusOutlined } from '@ant-design/icons';
 
 interface ParamType {
     id: string;
@@ -67,11 +67,11 @@ export default function ProjectPageComponent(): JSX.Element {
     }
 
     return (
-        <Row type='flex' justify='center' align='top' className='cvat-project-page'>
+        <Row justify='center' align='top' className='cvat-project-page'>
             <Col md={22} lg={18} xl={16} xxl={14}>
                 <ProjectTopBar projectInstance={project} />
                 <DetailsComponent project={project} />
-                <Row type='flex' justify='space-between' align='middle' className='cvat-project-page-tasks-bar'>
+                <Row justify='space-between' align='middle' className='cvat-project-page-tasks-bar'>
                     <Col>
                         <Title level={4}>Tasks</Title>
                     </Col>
diff --git a/cvat-ui/src/components/project-page/styles.scss b/cvat-ui/src/components/project-page/styles.scss
index 8d218fed..4769c556 100644
--- a/cvat-ui/src/components/project-page/styles.scss
+++ b/cvat-ui/src/components/project-page/styles.scss
@@ -13,11 +13,11 @@
     margin: $grid-unit-size * 2 0;
     background: $background-color-1;
 
-    .ant-row-flex:nth-child(1) {
+    .ant-row:nth-child(1) {
         margin-bottom: $grid-unit-size * 2;
     }
 
-    .ant-row-flex:nth-child(2) .ant-col:nth-child(2) > span {
+    .ant-row:nth-child(2) .ant-col:nth-child(2) > span {
         margin-right: $grid-unit-size;
     }
 
diff --git a/cvat-ui/src/components/project-page/top-bar.tsx b/cvat-ui/src/components/project-page/top-bar.tsx
index 711a833e..b90d7be3 100644
--- a/cvat-ui/src/components/project-page/top-bar.tsx
+++ b/cvat-ui/src/components/project-page/top-bar.tsx
@@ -24,7 +24,7 @@ export default function ProjectTopBar(props: DetailsComponentProps): JSX.Element
     const history = useHistory();
 
     return (
-        <Row className='cvat-task-top-bar' type='flex' justify='space-between' align='middle'>
+        <Row className='cvat-task-top-bar' justify='space-between' align='middle'>
             <Col>
                 <Button onClick={() => history.push('/projects')} type='link' size='large'>
                     <LeftOutlined />
diff --git a/cvat-ui/src/components/projects-page/empty-list.tsx b/cvat-ui/src/components/projects-page/empty-list.tsx
index 370797b0..35c84807 100644
--- a/cvat-ui/src/components/projects-page/empty-list.tsx
+++ b/cvat-ui/src/components/projects-page/empty-list.tsx
@@ -18,30 +18,30 @@ export default function EmptyListComponent(props: Props): JSX.Element {
     const { notFound } = props;
     return (
         <div className='cvat-empty-projects-list'>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Icon className='cvat-empty-projects-icon' component={EmptyTasksIcon} />
                 </Col>
             </Row>
             {notFound ? (
-                <Row type='flex' justify='center' align='middle'>
+                <Row justify='center' align='middle'>
                     <Col>
                         <Text strong>No results matched your search...</Text>
                     </Col>
                 </Row>
             ) : (
                 <>
-                    <Row type='flex' justify='center' align='middle'>
+                    <Row justify='center' align='middle'>
                         <Col>
                             <Text strong>No projects created yet ...</Text>
                         </Col>
                     </Row>
-                    <Row type='flex' justify='center' align='middle'>
+                    <Row justify='center' align='middle'>
                         <Col>
                             <Text type='secondary'>To get started with your annotation project</Text>
                         </Col>
                     </Row>
-                    <Row type='flex' justify='center' align='middle'>
+                    <Row justify='center' align='middle'>
                         <Col>
                             <Link to='/projects/create'>create a new one</Link>
                         </Col>
diff --git a/cvat-ui/src/components/projects-page/project-item.tsx b/cvat-ui/src/components/projects-page/project-item.tsx
index bb39e13e..6d80e04c 100644
--- a/cvat-ui/src/components/projects-page/project-item.tsx
+++ b/cvat-ui/src/components/projects-page/project-item.tsx
@@ -12,10 +12,10 @@ import Card from 'antd/lib/card';
 import Meta from 'antd/lib/card/Meta';
 import Dropdown from 'antd/lib/dropdown';
 import Button from 'antd/lib/button';
+import { MoreOutlined } from '@ant-design/icons';
 
 import { CombinedState, Project } from 'reducers/interfaces';
 import ProjectActionsMenuComponent from './actions-menu';
-import { MoreOutlined } from '@ant-design/icons';
 
 interface Props {
     projectInstance: Project;
diff --git a/cvat-ui/src/components/projects-page/project-list.tsx b/cvat-ui/src/components/projects-page/project-list.tsx
index 134286be..282ba785 100644
--- a/cvat-ui/src/components/projects-page/project-list.tsx
+++ b/cvat-ui/src/components/projects-page/project-list.tsx
@@ -38,7 +38,7 @@ export default function ProjectListComponent(): JSX.Element {
 
     return (
         <>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col className='cvat-projects-list' md={22} lg={18} xl={16} xxl={14}>
                     {projectInstances.map(
                         (row: any[]): JSX.Element => (
@@ -53,7 +53,7 @@ export default function ProjectListComponent(): JSX.Element {
                     )}
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col md={22} lg={18} xl={16} xxl={14}>
                     <Pagination
                         className='cvat-projects-pagination'
diff --git a/cvat-ui/src/components/projects-page/projects-page.tsx b/cvat-ui/src/components/projects-page/projects-page.tsx
index f4b00ba8..5d4d129a 100644
--- a/cvat-ui/src/components/projects-page/projects-page.tsx
+++ b/cvat-ui/src/components/projects-page/projects-page.tsx
@@ -47,20 +47,13 @@ export default function ProjectsPageComponent(): JSX.Element {
     }, [gettingQuery]);
 
     if (projectFetching) {
-        return (
-            <Spin size='large' className='cvat-spinner' />
-        );
+        return <Spin size='large' className='cvat-spinner' />;
     }
 
     return (
         <div className='cvat-projects-page'>
             <TopBarComponent />
-            { projectsCount
-                ? (
-                    <ProjectListComponent />
-                ) : (
-                    <EmptyListComponent notFound={anySearchQuery} />
-                )}
+            {projectsCount ? <ProjectListComponent /> : <EmptyListComponent notFound={anySearchQuery} />}
             <FeedbackComponent />
         </div>
     );
diff --git a/cvat-ui/src/components/projects-page/top-bar.tsx b/cvat-ui/src/components/projects-page/top-bar.tsx
index 3658aad9..337edd07 100644
--- a/cvat-ui/src/components/projects-page/top-bar.tsx
+++ b/cvat-ui/src/components/projects-page/top-bar.tsx
@@ -15,7 +15,7 @@ export default function TopBarComponent(): JSX.Element {
     const history = useHistory();
 
     return (
-        <Row type='flex' justify='center' align='middle' className='cvat-projects-top-bar'>
+        <Row justify='center' align='middle' className='cvat-projects-top-bar'>
             <Col md={11} lg={9} xl={8} xxl={7}>
                 <Text className='cvat-title'>Projects</Text>
                 <SearchField />
diff --git a/cvat-ui/src/components/register-page/register-page.tsx b/cvat-ui/src/components/register-page/register-page.tsx
index 4d1a6207..b3a299a5 100644
--- a/cvat-ui/src/components/register-page/register-page.tsx
+++ b/cvat-ui/src/components/register-page/register-page.tsx
@@ -41,7 +41,7 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
 
     return (
         <>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col {...sizes}>
                     <Title level={2}> Create an account </Title>
                     <RegisterForm
@@ -59,7 +59,7 @@ function RegisterPageComponent(props: RegisterPageComponentProps & RouteComponen
                             );
                         }}
                     />
-                    <Row type='flex' justify='start' align='top'>
+                    <Row justify='start' align='top'>
                         <Col>
                             <Text strong>
                                 Already have an account?
diff --git a/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx b/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx
index 633478b7..24c4735b 100644
--- a/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx
+++ b/cvat-ui/src/components/reset-password-confirm-page/reset-password-confirm-page.tsx
@@ -47,7 +47,7 @@ function ResetPasswordPagePageComponent(props: ResetPasswordConfirmPageComponent
     const { fetching, onResetPasswordConfirm } = props;
 
     return (
-        <Row type='flex' justify='center' align='middle'>
+        <Row justify='center' align='middle'>
             <Col {...sizes}>
                 <Title level={2}> Change password </Title>
                 <ResetPasswordConfirmForm
diff --git a/cvat-ui/src/components/reset-password-page/reset-password-page.tsx b/cvat-ui/src/components/reset-password-page/reset-password-page.tsx
index 689690ce..f02b5a75 100644
--- a/cvat-ui/src/components/reset-password-page/reset-password-page.tsx
+++ b/cvat-ui/src/components/reset-password-page/reset-password-page.tsx
@@ -48,7 +48,7 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
     const { fetching, onResetPassword } = props;
 
     return (
-        <Row type='flex' justify='center' align='middle'>
+        <Row justify='center' align='middle'>
             <Col {...sizes}>
                 <Title level={2}> Reset password </Title>
                 <ResetPasswordForm
@@ -57,7 +57,7 @@ function ResetPasswordPagePageComponent(props: ResetPasswordPageComponentProps):
                         onResetPassword(resetPasswordData.email);
                     }}
                 />
-                <Row type='flex' justify='start' align='top'>
+                <Row justify='start' align='top'>
                     <Col>
                         <Text strong>
                             Go to
diff --git a/cvat-ui/src/components/task-page/details.tsx b/cvat-ui/src/components/task-page/details.tsx
index e5ba7866..f0077f7e 100644
--- a/cvat-ui/src/components/task-page/details.tsx
+++ b/cvat-ui/src/components/task-page/details.tsx
@@ -16,11 +16,11 @@ import getCore from 'cvat-core-wrapper';
 import { getReposData, syncRepos } from 'utils/git-utils';
 import { ActiveInference } from 'reducers/interfaces';
 import AutomaticAnnotationProgress from 'components/tasks-page/automatic-annotation-progress';
+import Descriptions from 'antd/lib/descriptions';
 import UserSelector, { User } from './user-selector';
 import BugTrackerEditor from './bug-tracker-editor';
 import LabelsEditorComponent from '../labels-editor/labels-editor';
 
-
 const core = getCore();
 
 interface Props {
@@ -159,33 +159,11 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
         const { overlap, segmentSize, imageQuality } = taskInstance;
 
         return (
-            <>
-                <Row type='flex' justify='start' align='middle'>
-                    <Col span={12}>
-                        <Text strong className='cvat-text-color'>
-                            Overlap size
-                        </Text>
-                        <br />
-                        <Text className='cvat-text-color'>{overlap}</Text>
-                    </Col>
-                    <Col span={12}>
-                        <Text strong className='cvat-text-color'>
-                            Segment size
-                        </Text>
-                        <br />
-                        <Text className='cvat-text-color'>{segmentSize}</Text>
-                    </Col>
-                </Row>
-                <Row type='flex' justify='space-between' align='middle'>
-                    <Col span={12}>
-                        <Text strong className='cvat-text-color'>
-                            Image quality
-                        </Text>
-                        <br />
-                        <Text className='cvat-text-color'>{imageQuality}</Text>
-                    </Col>
-                </Row>
-            </>
+            <Descriptions className='cvat-task-parameters' bordered layout='vertical' size='small'>
+                <Descriptions.Item label='Overlap size'>{overlap}</Descriptions.Item>
+                <Descriptions.Item label='Segment size'>{segmentSize}</Descriptions.Item>
+                <Descriptions.Item label='Image quality'>{imageQuality}</Descriptions.Item>
+            </Descriptions>
         );
     }
 
@@ -205,7 +183,7 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
         );
 
         return (
-            <Row className='cvat-task-details-user-block' type='flex' justify='space-between' align='middle'>
+            <Row className='cvat-task-details-user-block' justify='space-between' align='middle'>
                 <Col span={12}>
                     {owner && (
                         <Text type='secondary'>{`Task #${taskInstance.id} Created by ${owner} on ${created}`}</Text>
@@ -318,21 +296,21 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
 
         return (
             <div className='cvat-task-details'>
-                <Row type='flex' justify='start' align='middle'>
+                <Row justify='start' align='middle'>
                     <Col>{this.renderTaskName()}</Col>
                 </Row>
-                <Row type='flex' justify='space-between' align='top'>
+                <Row justify='space-between' align='top'>
                     <Col md={8} lg={7} xl={7} xxl={6}>
-                        <Row type='flex' justify='start' align='middle'>
+                        <Row justify='start' align='middle'>
                             <Col span={24}>{this.renderPreview()}</Col>
                         </Row>
                         <Row>
-                            <Col>{this.renderParameters()}</Col>
+                            <Col span={24}>{this.renderParameters()}</Col>
                         </Row>
                     </Col>
                     <Col md={16} lg={17} xl={17} xxl={18}>
                         {this.renderDescription()}
-                        <Row type='flex' justify='space-between' align='middle'>
+                        <Row justify='space-between' align='middle'>
                             <Col span={12}>
                                 <BugTrackerEditor
                                     instance={taskInstance}
diff --git a/cvat-ui/src/components/task-page/job-list.tsx b/cvat-ui/src/components/task-page/job-list.tsx
index f597a8c2..e9587fd4 100644
--- a/cvat-ui/src/components/task-page/job-list.tsx
+++ b/cvat-ui/src/components/task-page/job-list.tsx
@@ -17,7 +17,6 @@ import copy from 'copy-to-clipboard';
 import getCore from 'cvat-core-wrapper';
 import UserSelector, { User } from './user-selector';
 
-
 const core = getCore();
 
 const baseURL = core.config.backendAPI.slice(0, -7);
@@ -223,7 +222,7 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
 
     return (
         <div className='cvat-task-job-list'>
-            <Row type='flex' justify='space-between' align='middle'>
+            <Row justify='space-between' align='middle'>
                 <Col>
                     <Text className='cvat-text-color cvat-jobs-header'> Jobs </Text>
                     <Tooltip trigger='click' title='Copied to clipboard!' mouseLeaveDelay={0}>
diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss
index bf5d364a..e39461cb 100644
--- a/cvat-ui/src/components/task-page/styles.scss
+++ b/cvat-ui/src/components/task-page/styles.scss
@@ -58,7 +58,7 @@
         }
     }
 
-    > .ant-tag > i {
+    > .ant-tag > span[role='img'] {
         margin-right: 5px;
     }
 }
@@ -84,14 +84,19 @@
 .cvat-task-preview-wrapper {
     overflow: hidden;
     margin-bottom: 20px;
-    width: 252px;
-    height: 144px;
+    width: $grid-unit-size * 32;
+    height: $grid-unit-size * 18;
     display: table-cell;
     text-align: center;
     vertical-align: middle;
     background-color: $background-color-2;
 }
 
+.cvat-task-parameters {
+    margin-top: $grid-unit-size * 2;
+    width: $grid-unit-size * 32;
+}
+
 .cvat-open-bug-tracker-button {
     margin-left: 15px;
 }
@@ -112,8 +117,10 @@
 }
 
 .cvat-job-item-status {
-    i {
-        margin-left: $grid-unit-size;
+    .cvat-job-annotation-color {
+        span {
+            margin-left: $grid-unit-size;
+        }
     }
 }
 
diff --git a/cvat-ui/src/components/task-page/task-page.tsx b/cvat-ui/src/components/task-page/task-page.tsx
index 7249911c..9944df41 100644
--- a/cvat-ui/src/components/task-page/task-page.tsx
+++ b/cvat-ui/src/components/task-page/task-page.tsx
@@ -37,7 +37,9 @@ class TaskPageComponent extends React.PureComponent<Props> {
     }
 
     public render(): JSX.Element {
-        const { task, fetching, updating, getTask } = this.props;
+        const {
+            task, fetching, updating, getTask,
+        } = this.props;
 
         if (task === null || updating) {
             if (task === null && !fetching) {
@@ -60,7 +62,7 @@ class TaskPageComponent extends React.PureComponent<Props> {
 
         return (
             <>
-                <Row type='flex' justify='center' align='top' className='cvat-task-details-wrapper'>
+                <Row justify='center' align='top' className='cvat-task-details-wrapper'>
                     <Col md={22} lg={18} xl={16} xxl={14}>
                         <TopBarComponent taskInstance={(task as Task).instance} />
                         <DetailsContainer task={task as Task} />
diff --git a/cvat-ui/src/components/task-page/top-bar.tsx b/cvat-ui/src/components/task-page/top-bar.tsx
index e7f67bff..a92b25cd 100644
--- a/cvat-ui/src/components/task-page/top-bar.tsx
+++ b/cvat-ui/src/components/task-page/top-bar.tsx
@@ -23,7 +23,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
     const history = useHistory();
 
     return (
-        <Row className='cvat-task-top-bar' type='flex' justify='space-between' align='middle'>
+        <Row className='cvat-task-top-bar' justify='space-between' align='middle'>
             <Col>
                 {taskInstance.projectId ? (
                     <Button
diff --git a/cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx b/cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx
index e11b90b7..932b4555 100644
--- a/cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx
+++ b/cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx
@@ -27,7 +27,7 @@ export default function AutomaticAnnotationProgress(props: Props): JSX.Element |
                     <Text strong>Automatic annotation</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='space-between'>
+            <Row justify='space-between'>
                 <Col span={22}>
                     <Progress
                         percent={Math.floor(activeInference.progress)}
diff --git a/cvat-ui/src/components/tasks-page/empty-list.tsx b/cvat-ui/src/components/tasks-page/empty-list.tsx
index 011ecae3..0aa2291b 100644
--- a/cvat-ui/src/components/tasks-page/empty-list.tsx
+++ b/cvat-ui/src/components/tasks-page/empty-list.tsx
@@ -13,22 +13,22 @@ import { EmptyTasksIcon } from 'icons';
 export default function EmptyListComponent(): JSX.Element {
     return (
         <div className='cvat-empty-tasks-list'>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Icon className='cvat-empty-tasks-icon' component={EmptyTasksIcon} />
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Text strong>No tasks created yet ...</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Text type='secondary'>To get started with your annotation project</Text>
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col>
                     <Link to='/tasks/create'>create a new task</Link>
                     <Text type='secondary'> or try to </Text>
diff --git a/cvat-ui/src/components/tasks-page/task-item.tsx b/cvat-ui/src/components/tasks-page/task-item.tsx
index 943495f1..250a66cc 100644
--- a/cvat-ui/src/components/tasks-page/task-item.tsx
+++ b/cvat-ui/src/components/tasks-page/task-item.tsx
@@ -104,7 +104,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
 
         return (
             <Col span={6}>
-                <Row type='flex' justify='space-between' align='top'>
+                <Row justify='space-between' align='top'>
                     <Col>
                         <svg height='8' width='8' className={progressColor}>
                             <circle cx='4' cy='4' r='4' strokeWidth='0' />
@@ -141,7 +141,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
 
         return (
             <Col span={4}>
-                <Row type='flex' justify='end'>
+                <Row justify='end'>
                     <Col>
                         <Button
                             className='cvat-item-open-task-button'
@@ -158,7 +158,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                         </Button>
                     </Col>
                 </Row>
-                <Row type='flex' justify='end'>
+                <Row justify='end'>
                     <Col className='cvat-item-open-task-actions'>
                         <Text className='cvat-text-color'>Actions</Text>
                         <Dropdown overlay={<ActionsMenuContainer taskInstance={taskInstance} />}>
@@ -183,7 +183,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
         }
 
         return (
-            <Row className='cvat-tasks-list-item' type='flex' justify='center' align='top' style={{ ...style }}>
+            <Row className='cvat-tasks-list-item' justify='center' align='top' style={{ ...style }}>
                 {this.renderPreview()}
                 {this.renderDescription()}
                 {this.renderProgress()}
diff --git a/cvat-ui/src/components/tasks-page/task-list.tsx b/cvat-ui/src/components/tasks-page/task-list.tsx
index f1ca4ab2..e586075f 100644
--- a/cvat-ui/src/components/tasks-page/task-list.tsx
+++ b/cvat-ui/src/components/tasks-page/task-list.tsx
@@ -17,17 +17,19 @@ export interface ContentListProps {
 }
 
 export default function TaskListComponent(props: ContentListProps): JSX.Element {
-    const { currentTasksIndexes, numberOfTasks, currentPage, onSwitchPage } = props;
+    const {
+        currentTasksIndexes, numberOfTasks, currentPage, onSwitchPage,
+    } = props;
     const taskViews = currentTasksIndexes.map((tid, id): JSX.Element => <TaskItem idx={id} taskID={tid} key={tid} />);
 
     return (
         <>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col className='cvat-tasks-list' md={22} lg={18} xl={16} xxl={14}>
                     {taskViews}
                 </Col>
             </Row>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col md={22} lg={18} xl={16} xxl={14}>
                     <Pagination
                         className='cvat-tasks-pagination'
diff --git a/cvat-ui/src/components/tasks-page/top-bar.tsx b/cvat-ui/src/components/tasks-page/top-bar.tsx
index 102b6e4c..83c3ed8e 100644
--- a/cvat-ui/src/components/tasks-page/top-bar.tsx
+++ b/cvat-ui/src/components/tasks-page/top-bar.tsx
@@ -22,7 +22,7 @@ export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element
 
     return (
         <>
-            <Row type='flex' justify='center' align='middle'>
+            <Row justify='center' align='middle'>
                 <Col md={11} lg={9} xl={8} xxl={7}>
                     <Text className='cvat-title'>Tasks</Text>
                     <Input.Search defaultValue={searchValue} onSearch={onSearch} size='large' placeholder='Search' />