diff --git a/babel.config.json b/babel.config.json
index 115fd68d5..69a8c061e 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -4,7 +4,7 @@
     ],
     "presets": [
         "@babel/preset-react",
-        ["@babel/preset-env", { "modules": "commonjs"}],
+        ["@babel/preset-env", { "modules": "auto"}],
         "@babel/preset-typescript"
     ],
     "sourceMaps": true,
diff --git a/lib/constants/checked-statuses.js b/lib/constants/checked-statuses.js
index 41ed35620..222a80665 100644
--- a/lib/constants/checked-statuses.js
+++ b/lib/constants/checked-statuses.js
@@ -1,7 +1,5 @@
 'use strict';
 
-module.exports = {
-    UNCHECKED: 0,
-    INDETERMINATE: 0.5,
-    CHECKED: 1
-};
+export const UNCHECKED = 0;
+export const INDETERMINATE = 0.5;
+export const CHECKED = 1;
diff --git a/lib/constants/expand-modes.js b/lib/constants/expand-modes.js
index 319a448f6..6d16c82c7 100644
--- a/lib/constants/expand-modes.js
+++ b/lib/constants/expand-modes.js
@@ -1,8 +1,6 @@
 'use strict';
 
-module.exports = {
-    EXPAND_ALL: 'all',
-    COLLAPSE_ALL: 'none',
-    EXPAND_ERRORS: 'errors',
-    EXPAND_RETRIES: 'retries'
-};
+export const EXPAND_ALL = 'all';
+export const COLLAPSE_ALL = 'none';
+export const EXPAND_ERRORS = 'errors';
+export const EXPAND_RETRIES = 'retries';
diff --git a/lib/db-utils/client.js b/lib/db-utils/client.js
index d30668488..470580c57 100644
--- a/lib/db-utils/client.js
+++ b/lib/db-utils/client.js
@@ -1,14 +1,14 @@
 'use strict';
 /* eslint-env browser */
 
-const {isEmpty} = require('lodash');
+import {isEmpty} from 'lodash';
 /** @type Record<string, (...args: unknown[]) => unknown> */
-const commonSqliteUtils = require('./common');
-const {fetchFile, normalizeUrls} = require('../common-utils');
+import commonSqliteUtils, {handleDatabases, mergeTables, compareDatabaseRowsByTimestamp, selectAllQuery} from './common';
+import {fetchFile, normalizeUrls} from '../common-utils';
 
-const {DB_SUITES_TABLE_NAME, LOCAL_DATABASE_NAME} = require('../constants/database');
+import {DB_SUITES_TABLE_NAME, LOCAL_DATABASE_NAME} from '../constants/database';
 
-function fetchDataFromDatabases(dbJsonUrls) {
+export function fetchDataFromDatabases(dbJsonUrls) {
     const loadDbJsonUrl = (dbJsonUrl) => fetchFile(dbJsonUrl);
     const prepareUrls = (urls, baseUrl) => normalizeUrls(urls, baseUrl);
 
@@ -22,10 +22,10 @@ function fetchDataFromDatabases(dbJsonUrls) {
         return {url: dbUrl, status, data};
     };
 
-    return commonSqliteUtils.handleDatabases(dbJsonUrls, {loadDbJsonUrl, prepareUrls, formatData, loadDbUrl});
+    return handleDatabases(dbJsonUrls, {loadDbJsonUrl, prepareUrls, formatData, loadDbUrl});
 }
 
-async function mergeDatabases(dataForDbs) {
+export async function mergeDatabases(dataForDbs) {
     const SQL = await window.initSqlJs();
 
     const fetchedDataArray = dataForDbs.map(data => new Uint8Array(data));
@@ -44,7 +44,7 @@ async function mergeDatabases(dataForDbs) {
     const mergedDbConnection = new SQL.Database(undefined, sumOfChunkSizes);
     const dbPaths = connections.map(db => db.filename);
 
-    commonSqliteUtils.mergeTables({db: mergedDbConnection, dbPaths, getExistingTables: (statement) => {
+    mergeTables({db: mergedDbConnection, dbPaths, getExistingTables: (statement) => {
         const tables = [];
 
         while (statement.step()) {
@@ -59,7 +59,7 @@ async function mergeDatabases(dataForDbs) {
     return mergedDbConnection;
 }
 
-async function connectToDatabase(dbUrl) {
+export async function connectToDatabase(dbUrl) {
     const mainDatabaseUrl = new URL(dbUrl);
     const {data} = await fetchFile(mainDatabaseUrl.href, {
         responseType: 'arraybuffer'
@@ -69,22 +69,22 @@ async function connectToDatabase(dbUrl) {
     return new SQL.Database(new Uint8Array(data));
 }
 
-function getMainDatabaseUrl() {
+export function getMainDatabaseUrl() {
     return new URL(LOCAL_DATABASE_NAME, window.location.href);
 }
 
-function getSuitesTableRows(db) {
+export function getSuitesTableRows(db) {
     const databaseRows = getTableRows(db, DB_SUITES_TABLE_NAME);
 
     if (isEmpty(databaseRows)) {
         return;
     }
 
-    return databaseRows.values.sort(commonSqliteUtils.compareDatabaseRowsByTimestamp);
+    return databaseRows.values.sort(compareDatabaseRowsByTimestamp);
 }
 
-function getTableRows(db, tableName) {
-    const [databaseRows] = db.exec(commonSqliteUtils.selectAllQuery(tableName));
+export function getTableRows(db, tableName) {
+    const [databaseRows] = db.exec(selectAllQuery(tableName));
 
     if (!databaseRows) {
         console.warn(`Table "${tableName}" is empty`);
@@ -95,11 +95,12 @@ function getTableRows(db, tableName) {
     return databaseRows;
 }
 
-function closeDatabase(db) {
+export function closeDatabase(db) {
     db.close();
 }
 
-module.exports = {
+export * from './common';
+export default {
     ...commonSqliteUtils,
     fetchDataFromDatabases,
     mergeDatabases,
diff --git a/lib/history-utils.js b/lib/history-utils.js
index cf597b5b4..047622994 100644
--- a/lib/history-utils.js
+++ b/lib/history-utils.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {isEmpty} = require('lodash');
+import {isEmpty} from 'lodash';
 
 const formatDuration = (d) => `<- ${d}ms`;
 
@@ -21,7 +21,7 @@ const traverseNodes = (nodes, traverseCb, depth = 0) => {
     });
 };
 
-const getCommandsHistory = (history) => {
+export const getCommandsHistory = (history) => {
     if (isEmpty(history)) {
         return [];
     }
@@ -50,6 +50,6 @@ const getCommandsHistory = (history) => {
     }
 };
 
-module.exports = {
+export default {
     getCommandsHistory
 };
diff --git a/lib/static/components/bullet.jsx b/lib/static/components/bullet.jsx
index 196fe4777..cb303d582 100644
--- a/lib/static/components/bullet.jsx
+++ b/lib/static/components/bullet.jsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import classNames from 'classnames';
-import {Checkbox} from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import {isCheckboxChecked, isCheckboxIndeterminate} from '../../common-utils';
 import {CHECKED, INDETERMINATE, UNCHECKED} from '../../constants/checked-statuses';
 import useLocalStorage from '../hooks/useLocalStorage';
+import {Checkbox} from '@gravity-ui/uikit';
+import {ChevronUp} from '@gravity-ui/icons';
 
 const Bullet = ({status, onClick, className}) => {
     const [isCheckbox] = useLocalStorage('showCheckboxes', false);
 
+    const handleClick = React.useCallback((e) => {
+        e.stopPropagation();
+        onClick(e);
+    });
+
     if (!isCheckbox) {
-        return <span className={classNames('bullet_type-simple', className)} />;
+        return <div className='bullet-container'><ChevronUp className={classNames(className, 'bullet_type-simple')}/></div>;
     }
 
-    return <Checkbox
-        className={classNames('bullet_type-checkbox', className)}
-        checked={isCheckboxChecked(status)}
-        indeterminate={isCheckboxIndeterminate(status)}
-        onClick={onClick}
-    />;
+    return <div onClick={handleClick} className='bullet-container'>
+        <Checkbox
+            className={classNames('bullet_type-checkbox', className)}
+            checked={isCheckboxChecked(status)}
+            indeterminate={isCheckboxIndeterminate(status)}
+        />
+    </div>;
 };
 
 Bullet.propTypes = {
diff --git a/lib/static/components/controls/browser-list/index.styl b/lib/static/components/controls/browser-list/index.styl
index fb9e6c9f1..690552154 100644
--- a/lib/static/components/controls/browser-list/index.styl
+++ b/lib/static/components/controls/browser-list/index.styl
@@ -16,6 +16,7 @@
         flex 1 1 auto
 
     .action-button
+        width 60px
         opacity 0
         
 .g-select-list__option:hover
diff --git a/lib/static/components/controls/find-same-diffs-button.jsx b/lib/static/components/controls/find-same-diffs-button.jsx
index 4c2206890..fe8eeb905 100644
--- a/lib/static/components/controls/find-same-diffs-button.jsx
+++ b/lib/static/components/controls/find-same-diffs-button.jsx
@@ -1,10 +1,11 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import * as actions from '../../modules/actions';
 import ControlButton from './control-button';
 import {getFailedOpenedImageIds} from '../../modules/selectors/tree';
+import {Magnifier} from '@gravity-ui/icons';
 
 class FindSameDiffsButton extends Component {
     static propTypes = {
@@ -26,10 +27,14 @@ class FindSameDiffsButton extends Component {
         const {isDisabled} = this.props;
 
         return <ControlButton
-            label="🔍 Find same diffs"
+            label={<Fragment>
+                <Magnifier/>
+                Find same diffs
+            </Fragment>}
             isSuiteControl={true}
             isDisabled={isDisabled}
             handler={this._findSameDiffs}
+            dataTestId={'find-same-diffs'}
         />;
     }
 }
diff --git a/lib/static/components/controls/menu-bar.jsx b/lib/static/components/controls/menu-bar.jsx
index 6131989bb..72d323be6 100644
--- a/lib/static/components/controls/menu-bar.jsx
+++ b/lib/static/components/controls/menu-bar.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {Dropdown} from 'semantic-ui-react';
 import {isEmpty} from 'lodash';
 import ExtensionPoint from '../extension-point';
-import plugins from '../../modules/plugins';
+import * as plugins from '../../modules/plugins';
 import {MENU_BAR} from '../../../constants/extension-points';
 import { Button, DropdownMenu, Icon, Menu } from '@gravity-ui/uikit';
 import {Bars} from '@gravity-ui/icons';
diff --git a/lib/static/components/controls/selects/index.styl b/lib/static/components/controls/selects/index.styl
index a3815ab24..70848f7bb 100644
--- a/lib/static/components/controls/selects/index.styl
+++ b/lib/static/components/controls/selects/index.styl
@@ -1,4 +1,4 @@
-.custom-label
+.g-label.custom-label
     border-top-right-radius: 0
     border-bottom-right-radius: 0
 
diff --git a/lib/static/components/details.jsx b/lib/static/components/details.jsx
index 8322c2992..921848b12 100644
--- a/lib/static/components/details.jsx
+++ b/lib/static/components/details.jsx
@@ -4,14 +4,16 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {isEmpty, isFunction} from 'lodash';
+import {Card, Disclosure} from '@gravity-ui/uikit';
 
 export default class Details extends Component {
     static propTypes = {
+        type: PropTypes.oneOf(['text', 'image']),
         title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
         content: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.element, PropTypes.array]).isRequired,
         extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
         onClick: PropTypes.func,
-        asHtml: PropTypes.bool,
+        asHtml: PropTypes.bool
     };
 
     state = {isOpened: false};
@@ -28,10 +30,14 @@ export default class Details extends Component {
         });
     };
 
+    stopPropagation = (e) => {
+        e.stopPropagation();
+    };
+
     _getContent() {
         const content = this.props.content;
 
-        return isFunction(content) ? content() : content
+        return isFunction(content) ? content() : content;
     }
 
     _renderContent() {
@@ -44,11 +50,11 @@ export default class Details extends Component {
 
         return <div className='details__content' {...extraProps}>
             {children}
-        </div>
+        </div>;
     }
 
     render() {
-        const {title, content, extendClassNames} = this.props;
+        const {type, title, content, extendClassNames} = this.props;
         const className = classNames(
             'details',
             extendClassNames
@@ -60,12 +66,23 @@ export default class Details extends Component {
                     {title}
                 </div>
             ) : (
-                <details className={className}>
-                    <summary className='details__summary' onClick={this.handleClick}>
-                        {title}
-                    </summary>
-                    {this._renderContent()}
-                </details>
+                <Disclosure className={className} onUpdate={this.handleClick}
+                    size='l'>
+                    <Disclosure.Summary>
+                        {(props, defaultButton) => (
+                            <div className={classNames(className, 'details__summary')} {...props}>
+                                <div className='details__expand-button' onClick={this.stopPropagation}>
+                                    {defaultButton}
+                                </div>
+                                {title}
+                            </div>
+                        )}
+                    </Disclosure.Summary>
+                    {type === 'image' ? this._renderContent() :
+                        <Card className='details__card' view='filled'>
+                            {this._renderContent()}
+                        </Card>}
+                </Disclosure>
             )
         );
     }
diff --git a/lib/static/components/extension-point.jsx b/lib/static/components/extension-point.jsx
index 76323740e..8baf7ed7a 100644
--- a/lib/static/components/extension-point.jsx
+++ b/lib/static/components/extension-point.jsx
@@ -1,7 +1,7 @@
 import React, {Component, Fragment} from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from './error-boundary';
-import plugins from '../modules/plugins';
+import * as plugins from '../modules/plugins';
 
 export default class ExtensionPoint extends Component {
     static propTypes = {
diff --git a/lib/static/components/header/summary/dbSummary.jsx b/lib/static/components/header/summary/dbSummary.jsx
index 8e035df1e..51bf6597e 100644
--- a/lib/static/components/header/summary/dbSummary.jsx
+++ b/lib/static/components/header/summary/dbSummary.jsx
@@ -3,8 +3,7 @@ import {Dropdown} from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 import DbBtn from './dbBtn';
-import Popup from '../../popup';
-import { Popover } from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
 export default class DbSummaryKey extends Component {
     /*
@@ -39,15 +38,15 @@ export default class DbSummaryKey extends Component {
 
         return (
             <div className='db-info-container'>
-            <Popover
-            disablePortal
-            placement={'bottom'}
-                content={
-                    additionalInfo
+                <Popover
+                    disablePortal
+                    placement={'bottom'}
+                    content={
+                        additionalInfo
                     }
-            >
-                <DbBtn fetchDbDetails={fetchDbDetails} />
-            </Popover>
+                >
+                    <DbBtn fetchDbDetails={fetchDbDetails} />
+                </Popover>
             </div>
         );
     }
diff --git a/lib/static/components/icons/view-in-browser/index.jsx b/lib/static/components/icons/view-in-browser/index.jsx
index bd6193d27..cd656b61d 100644
--- a/lib/static/components/icons/view-in-browser/index.jsx
+++ b/lib/static/components/icons/view-in-browser/index.jsx
@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {Eye, EyeSlash} from '@gravity-ui/icons';
 
 import * as actions from '../../../modules/actions';
 import {getUrlWithBase} from '../../../../common-utils';
@@ -27,13 +28,13 @@ class ViewInBrowser extends Component {
     render() {
         const {suiteUrl, baseHost, extendClassNames} = this.props;
         const className = classNames(
-            'fa view-in-browser',
-            suiteUrl ? 'fa-eye view-in-browser_active' : 'fa-eye-slash view-in-browser_disabled',
+            'view-in-browser',
+            suiteUrl ? 'view-in-browser_active' : 'view-in-browser_disabled',
             extendClassNames
         );
 
         if (!suiteUrl) {
-            return <i className={className} aria-hidden="true" />;
+            return <i className={className} aria-hidden="true"><EyeSlash color='black'/></i> ;
         }
 
         return (
@@ -44,7 +45,7 @@ class ViewInBrowser extends Component {
                 title="view in browser"
                 target="_blank"
                 data-test-id='view-in-browser'
-            />
+            ><Eye color='black'/></a>
         );
     }
 }
diff --git a/lib/static/components/icons/view-in-browser/index.styl b/lib/static/components/icons/view-in-browser/index.styl
index b044f86ef..1781bece6 100644
--- a/lib/static/components/icons/view-in-browser/index.styl
+++ b/lib/static/components/icons/view-in-browser/index.styl
@@ -1,13 +1,8 @@
 .view-in-browser {
-    display: inline-block;
-    width: 16px;
-    height: 19px;
+    height: 16px;
     margin-left: 4px;
-    margin-right: 0;
-    padding: 0 2px;
-    border: none;
     color: black;
-    opacity: 0.3;
+    opacity: 0.6;
 
     &:visited {
         color: black;
diff --git a/lib/static/components/modals/modal.jsx b/lib/static/components/modals/modal.jsx
index abc9cad48..f3dfa03bb 100644
--- a/lib/static/components/modals/modal.jsx
+++ b/lib/static/components/modals/modal.jsx
@@ -1,27 +1,25 @@
 import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
+import { Portal } from '@gravity-ui/uikit';
 import './modal.css';
 
 export default class Modal extends Component {
     componentWillMount() {
-        this._root = document.createElement('div');
         document.body.classList.add('modal-open');
-        document.body.appendChild(this._root);
     }
 
     componentWillUnmount() {
         document.body.classList.remove('modal-open');
-        document.body.removeChild(this._root);
     }
 
     render() {
-        const {className} = this.props;
+        const {className, children} = this.props;
 
-        return ReactDOM.createPortal(
-            <div className={className}>
-                {this.props.children}
-            </div>,
-            this._root
-        );
+        return (
+            <Portal>
+                <div className={className}>
+                    {children}
+                </div>
+            </Portal>
+        )
     }
 }
diff --git a/lib/static/components/modals/screenshot-accepter/header.jsx b/lib/static/components/modals/screenshot-accepter/header.jsx
index d9008265c..97abb365a 100644
--- a/lib/static/components/modals/screenshot-accepter/header.jsx
+++ b/lib/static/components/modals/screenshot-accepter/header.jsx
@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 import {uniqBy} from 'lodash';
 
 import ProgressBar from '../../progress-bar';
-import Arrow from '../../icons/arrow';
-import ArrowsClose from '../../icons/arrows-close';
 import ControlButton from '../../controls/control-button';
 import ControlSelect from '../../controls/selects/control';
 import RetrySwitcher from '../../retry-switcher';
 import {DiffModes} from '../../../../constants/diff-modes';
+import {ChevronsExpandUpRight, ArrowUturnCcwDown, ArrowUp, ArrowDown, Check} from '@gravity-ui/icons';
 
 export default class ScreenshotAccepterHeader extends Component {
     static propTypes = {
@@ -121,7 +120,7 @@ export default class ScreenshotAccepterHeader extends Component {
                 <header className="screenshot-accepter__header container">
                     <div className="screenshot-accepter__controls state-controls">
                         <ControlButton
-                            label={<Arrow />}
+                            label={<ArrowUp />}
                             title="Show previous image (↑,w)"
                             isSuiteControl={true}
                             isDisabled={isArrowControlDisabed}
@@ -129,7 +128,7 @@ export default class ScreenshotAccepterHeader extends Component {
                             handler={this.handlePrevScreenshot}
                         />
                         <ControlButton
-                            label={<Arrow />}
+                            label={<ArrowDown />}
                             title="Show next image (↓,s)"
                             isSuiteControl={true}
                             isDisabled={isArrowControlDisabed}
@@ -137,7 +136,12 @@ export default class ScreenshotAccepterHeader extends Component {
                             handler={this.handleNextScreenshot}
                         />
                         <ControlButton
-                            label="✔ Accept"
+                            label={
+                                <Fragment>
+                                    <Check/>
+                                    Accept
+                                </Fragment>
+                            }
                             title="Accept image (Space,Enter)"
                             isSuiteControl={true}
                             isDisabled={images.length === 0}
@@ -146,7 +150,12 @@ export default class ScreenshotAccepterHeader extends Component {
                             dataTestId="screenshot-accepter-accept"
                         />
                         <ControlButton
-                            label="⎌ Undo"
+                            label={
+                                <Fragment>
+                                    <ArrowUturnCcwDown/>
+                                    Undo
+                                </Fragment>
+                            }
                             title="Revert last updated screenshot"
                             isDisabled={!acceptedImages}
                             isSuiteControl={true}
@@ -164,11 +173,12 @@ export default class ScreenshotAccepterHeader extends Component {
                             handler={onShowMeta}
                         />
                         <ControlSelect
+                            size="m"
                             label="Diff mode"
                             value={view.diffMode}
                             handler={actions.changeDiffMode}
                             options = {Object.values(DiffModes).map((dm) => {
-                                return {value: dm.id, text: dm.title};
+                                return {value: dm.id, content: dm.title};
                             })}
                             extendClassNames="screenshot-accepter__diff-mode-select"
                         />
@@ -180,7 +190,7 @@ export default class ScreenshotAccepterHeader extends Component {
                         />
                         <ControlButton
                             label={<Fragment>
-                                <ArrowsClose />
+                                <ChevronsExpandUpRight />
                                 Switch accept mode
                             </Fragment>}
                             title="Close mode with fast screenshot accepting (Escape)"
diff --git a/lib/static/components/modals/screenshot-accepter/style.css b/lib/static/components/modals/screenshot-accepter/style.css
index 99357b6ad..b1d690616 100644
--- a/lib/static/components/modals/screenshot-accepter/style.css
+++ b/lib/static/components/modals/screenshot-accepter/style.css
@@ -106,6 +106,8 @@
 
 .screenshot-accepter__title {
     font-size: 16px;
+    display: inline-flex;
+    align-items: center;
     line-height: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
diff --git a/lib/static/components/retry-switcher/item.jsx b/lib/static/components/retry-switcher/item.jsx
index 802b88c54..21ac03467 100644
--- a/lib/static/components/retry-switcher/item.jsx
+++ b/lib/static/components/retry-switcher/item.jsx
@@ -8,6 +8,7 @@ import {
     hasUnrelatedToScreenshotsErrors,
     isFailStatus
 } from '../../../common-utils';
+import {Button} from '@gravity-ui/uikit';
 
 class RetrySwitcherItem extends Component {
     static propTypes = {
@@ -24,16 +25,46 @@ class RetrySwitcherItem extends Component {
 
     render() {
         const {status, attempt, isActive, onClick, title, keyToGroupTestsBy, matchedSelectedGroup} = this.props;
+        const statusToView = {
+            success: {
+                view: 'flat-success',
+                selected: true
+            },
+            updated: {
+                view: 'flat-success',
+                selected: true
+            },
+            error: {
+                view: 'flat-danger',
+                selected: true
+            },
+            fail: {
+                view: 'flat-utility',
+                selected: true
+            },
+            // eslint-disable-next-line camelcase
+            fail_error: {
+                view: 'flat-utility',
+                selected: true
+            },
+            skipped: {
+                view: 'normal',
+                selected: false
+            },
+            running: {
+                view: 'outlined',
+                selected: false
+            }
+        };
 
         const className = classNames(
-            'state-button',
             'tab-switcher__button',
-            {[`tab-switcher__button_status_${status}`]: status},
             {'tab-switcher__button_active': isActive},
+            {[`tab-switcher__button_status_${status}`]: status},
             {'tab-switcher__button_non-matched': keyToGroupTestsBy && !matchedSelectedGroup}
         );
 
-        return <button title={title} className={className} onClick={onClick} data-test-id='retry-switcher'>{attempt + 1}</button>;
+        return <Button {...statusToView[status]} title={title} className={className} onClick={onClick} qa='retry-switcher'>{attempt + 1}</Button>;
     }
 }
 
diff --git a/lib/static/components/section/body/description.jsx b/lib/static/components/section/body/description.jsx
index 09073c170..3eff6e1b7 100644
--- a/lib/static/components/section/body/description.jsx
+++ b/lib/static/components/section/body/description.jsx
@@ -16,9 +16,9 @@ export default class Description extends Component {
 
     render() {
         return <Details
+            type='text'
             title='Description'
             content={this._renderDescription}
-            extendClassNames='details_type_text'
         />;
     }
 }
diff --git a/lib/static/components/section/body/history/index.jsx b/lib/static/components/section/body/history/index.jsx
index def3a0552..30ea9ae5f 100644
--- a/lib/static/components/section/body/history/index.jsx
+++ b/lib/static/components/section/body/history/index.jsx
@@ -5,16 +5,33 @@ import {isEmpty} from 'lodash';
 import Details from '../../../details';
 
 import './index.styl';
+import {List} from '@gravity-ui/uikit';
 
-const History = ({history}) => (
-    isEmpty(history)
-        ? null
-        : <Details
-            title='History'
-            content={history}
-            extendClassNames='details_type_text history'
-        />
-);
+const History = ({history}) => {
+    const renderHistoryItem = (item) => {
+        const [name, time] = item.split(' <- ');
+        return (
+            <div className='history-item'>
+                <span className='history-item__name'>{name}</span>
+                <span className='history-item__time'>{time}</span>
+            </div>
+        );
+    };
+    return (
+        isEmpty(history)
+            ? null
+            : <Details
+                type='text'
+                title='History'
+                content={
+                    <div style={{display: `flex`}}>
+                        <List items={history} renderItem={renderHistoryItem} filterable={false} virtualized={false}/>
+                    </div>
+                }
+                extendClassNames='history'
+            />
+    );
+};
 
 History.propTypes = {
     resultId: PropTypes.string.isRequired,
@@ -24,6 +41,5 @@ History.propTypes = {
 
 export default connect(({tree}, {resultId}) => {
     const {history = []} = tree.results.byId[resultId];
-
     return {history};
 })(History);
diff --git a/lib/static/components/section/body/history/index.styl b/lib/static/components/section/body/history/index.styl
index 0d6c789d0..b3eb69c55 100644
--- a/lib/static/components/section/body/history/index.styl
+++ b/lib/static/components/section/body/history/index.styl
@@ -1,4 +1,21 @@
 .history {
     white-space: pre-wrap;
     word-wrap: break-word;
+    
+    .history-item {
+        display: inline-flex;
+        padding-right: 8px;
+        padding-top: 1px;
+        padding-bottom: 1px;
+
+        gap: 4px;
+        .history-item__name {
+            user-select: text;
+        }
+
+        .history-item__time {
+            opacity: 0.5;
+            user-select: text;
+        }
+    }
 }
diff --git a/lib/static/components/section/body/index.jsx b/lib/static/components/section/body/index.jsx
index f34e4b437..465eac5c4 100644
--- a/lib/static/components/section/body/index.jsx
+++ b/lib/static/components/section/body/index.jsx
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {isNumber} from 'lodash';
@@ -9,6 +9,7 @@ import Result from './result';
 import * as actions from '../../../modules/actions';
 import ExtensionPoint from '../../extension-point';
 import {RESULT} from '../../../../constants/extension-points';
+import {ArrowRotateLeft} from '@gravity-ui/icons';
 
 class Body extends Component {
     static propTypes = {
@@ -63,7 +64,10 @@ class Body extends Component {
             ? (
                 <div className="controls__item">
                     <ControlButton
-                        label="↻ Retry"
+                        label={<Fragment>
+                            <ArrowRotateLeft/>
+                            Retry
+                        </Fragment>}
                         isSuiteControl={true}
                         isDisabled={running}
                         handler={this.onTestRetry}
diff --git a/lib/static/components/section/body/meta-info/content.jsx b/lib/static/components/section/body/meta-info/content.jsx
index b0477d632..a2807bab8 100644
--- a/lib/static/components/section/body/meta-info/content.jsx
+++ b/lib/static/components/section/body/meta-info/content.jsx
@@ -1,19 +1,10 @@
 import path from 'path';
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
-import { ClipboardButton } from '@gravity-ui/uikit';
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {DefinitionList} from '@gravity-ui/components';
 import PropTypes from 'prop-types';
-import { map, mapValues, isObject, omitBy, isEmpty } from 'lodash';
-import { isUrl, getUrlWithBase } from '../../../../../common-utils';
-
-const mkTextWithClipboardButton = (text, url) => {
-    return <Fragment>
-        {url ? <a data-suite-view-link={url} className="custom-icon_view-local" target="_blank" href={url}>
-            {text || url}
-        </a> : text}
-        <ClipboardButton text={url || text} size='s' className='copy-button' />
-    </Fragment>;
-}
+import {map, mapValues, isObject, omitBy, isEmpty} from 'lodash';
+import {isUrl, getUrlWithBase} from '../../../../../common-utils';
 
 const serializeMetaValues = (metaInfo) => mapValues(metaInfo, (v) => isObject(v) ? JSON.stringify(v) : v);
 
@@ -34,25 +25,34 @@ const resolveUrl = (baseUrl, value) => {
 };
 
 const metaToElements = (metaInfo, metaInfoBaseUrls) => {
-    return map(metaInfo, (value, key) => {
-        if (isUrl(value)) {
-            value = mkTextWithClipboardButton(value, value);
-        } else if (metaInfoBaseUrls[key]) {
-            const baseUrl = metaInfoBaseUrls[key];
-            const link = isUrl(baseUrl) ? resolveUrl(baseUrl, value) : path.join(baseUrl, value);
-            value = mkTextWithClipboardButton(value, link);
-        } else if (typeof value === 'boolean') {
-            value = value.toString();
-        }
-        else if (typeof value === 'string') {
-            value = mkTextWithClipboardButton(value);
-        }
-
-        return <div key={key} className="meta-info__item">
-            <span className="meta-info__item-key">{key}: </span>
-            <div className="meta-info__item-value">{value}</div>
-        </div>;
-    });
+    return <DefinitionList className='meta-info' itemClassName='meta-info__item' items={
+        map(metaInfo, (value, key) => {
+            let url = value.url;
+            value = value.content;
+
+            if (isUrl(value)) {
+                url = value;
+            } else if (metaInfoBaseUrls[key]) {
+                const baseUrl = metaInfoBaseUrls[key];
+                const link = isUrl(baseUrl) ? resolveUrl(baseUrl, value) : path.join(baseUrl, value);
+                url = link;
+            } else if (typeof value === 'boolean') {
+                value = value.toString();
+            }
+
+            if (url) {
+                value = <a data-suite-view-link={url} className="custom-icon_view-local" target="_blank" href={url} rel="noreferrer">
+                    {value}
+                </a>;
+            }
+
+            return {
+                name: key,
+                content: <div className="meta-info__item-value">{value}</div>,
+                copyText: url || value
+            };
+        })
+    }/>;
 };
 
 class MetaInfoContent extends Component {
@@ -73,17 +73,17 @@ class MetaInfoContent extends Component {
     };
 
     getExtraMetaInfo = () => {
-        const { testName, apiValues: { extraItems, metaInfoExtenders } } = this.props;
+        const {testName, apiValues: {extraItems, metaInfoExtenders}} = this.props;
 
         return omitBy(mapValues(metaInfoExtenders, (extender) => {
             const stringifiedFn = extender.startsWith('return') ? extender : `return ${extender}`;
 
-            return new Function(stringifiedFn)()({ testName }, extraItems);
+            return new Function(stringifiedFn)()({testName}, extraItems);
         }), isEmpty);
     };
 
     render() {
-        const { result, metaInfoBaseUrls, baseHost } = this.props;
+        const {result, metaInfoBaseUrls, baseHost} = this.props;
 
         const serializedMetaValues = serializeMetaValues(result.metaInfo);
         const extraMetaInfo = this.getExtraMetaInfo();
@@ -91,8 +91,12 @@ class MetaInfoContent extends Component {
             ...serializedMetaValues,
             ...extraMetaInfo
         };
+        Object.keys(formattedMetaInfo).forEach((key) => {
+            formattedMetaInfo[key] = {content: formattedMetaInfo[key]};
+        });
+
         if (result.suiteUrl) {
-            formattedMetaInfo.url = mkTextWithClipboardButton(result.metaInfo.url, getUrlWithBase(result.suiteUrl, baseHost));
+            formattedMetaInfo.url = {content: result.metaInfo.url || result.suiteUrl, url: getUrlWithBase(result.suiteUrl, baseHost)};
         }
 
         return metaToElements(formattedMetaInfo, metaInfoBaseUrls);
@@ -100,7 +104,7 @@ class MetaInfoContent extends Component {
 }
 
 export default connect(
-    ({ tree, config: { metaInfoBaseUrls }, apiValues, view }, { resultId }) => {
+    ({tree, config: {metaInfoBaseUrls}, apiValues, view}, {resultId}) => {
         const result = tree.results.byId[resultId];
         const browser = tree.browsers.byId[result.parentId];
 
diff --git a/lib/static/components/section/body/meta-info/index.jsx b/lib/static/components/section/body/meta-info/index.jsx
index 17851473d..4eb283020 100644
--- a/lib/static/components/section/body/meta-info/index.jsx
+++ b/lib/static/components/section/body/meta-info/index.jsx
@@ -19,9 +19,9 @@ class MetaInfo extends Component {
         const {resultId} = this.props;
 
         return <Details
+            type='text'
             title='Meta'
             content={<MetaInfoContent resultId={resultId}/>}
-            extendClassNames='details_type_text'
             onClick={this.onToggleMetaInfo}
         />;
     }
diff --git a/lib/static/components/section/body/page-screenshot.tsx b/lib/static/components/section/body/page-screenshot.tsx
index fafc15537..393e4db0a 100644
--- a/lib/static/components/section/body/page-screenshot.tsx
+++ b/lib/static/components/section/body/page-screenshot.tsx
@@ -10,9 +10,9 @@ interface PageScreenshotProps {
 export class PageScreenshot extends Component<PageScreenshotProps> {
     render(): JSX.Element {
         return <Details
+            type='image'
             title="Page screenshot"
             content={(): JSX.Element => <ResizedScreenshot image={this.props.image}/>}
-            extendClassNames="details_type_image"
         />;
     }
 }
diff --git a/lib/static/components/section/title/browser.jsx b/lib/static/components/section/title/browser.jsx
index c61917a90..0536f5663 100644
--- a/lib/static/components/section/title/browser.jsx
+++ b/lib/static/components/section/title/browser.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ClipboardButton from 'react-clipboard.js';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
@@ -11,9 +10,31 @@ import {EXPAND_ALL} from '../../../../constants/expand-modes';
 import {getToggledCheckboxState} from '../../../../common-utils';
 import ViewInBrowserIcon from '../../icons/view-in-browser';
 import Bullet from '../../bullet';
+import {ActionTooltip, Button, CopyToClipboard} from '@gravity-ui/uikit';
+import {ArrowShapeTurnUpRight} from '@gravity-ui/icons';
+
+const ShareButtonComponent = ({status, ...rest}) => {
+    return (
+        <ActionTooltip
+            title={status === 'success' ? 'Copied' : 'Copy test link'}
+        >
+            <Button
+                view='flat'
+                extraProps={{
+                    'aria-label': 'Copy test link'
+                }}
+                {...rest}
+            >
+                <Button.Icon>
+                    <ArrowShapeTurnUpRight/>
+                </Button.Icon>
+            </Button>
+        </ActionTooltip>
+    );
+};
 
 const BrowserTitle = (props) => {
-    const getTestUrl = () => {
+    const testUrl = React.useMemo(() => {
         return appendQuery(window.location.href, {
             browser: escapeRegExp(props.browserName),
             testNameFilter: escapeRegExp(props.testName),
@@ -22,7 +43,7 @@ const BrowserTitle = (props) => {
             viewModes: ViewMode.ALL,
             expand: EXPAND_ALL
         });
-    };
+    }, [props.browserName, props.testName, props.retryIndex]);
 
     const onCopyTestLink = (e) => {
         e.stopPropagation();
@@ -44,12 +65,9 @@ const BrowserTitle = (props) => {
             <Bullet status={props.checkStatus} onClick={onToggleCheckbox} />
             {props.title}
             <ViewInBrowserIcon resultId={props.lastResultId}/>
-            <ClipboardButton
-                className="button custom-icon custom-icon_share"
-                onClick={onCopyTestLink}
-                button-title="copy test link"
-                option-text={getTestUrl}>
-            </ClipboardButton>
+            <CopyToClipboard text={testUrl} timeout={1000}>
+                {(status) => <ShareButtonComponent onClick={onCopyTestLink} status={status}/>}
+            </CopyToClipboard>
         </div>
     );
 };
diff --git a/lib/static/components/section/title/simple.jsx b/lib/static/components/section/title/simple.jsx
index b3e1e2e40..506c568e9 100644
--- a/lib/static/components/section/title/simple.jsx
+++ b/lib/static/components/section/title/simple.jsx
@@ -4,13 +4,15 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
-import ClipboardButton from 'react-clipboard.js';
 import * as actions from '../../../modules/actions';
 import {mkGetTestsBySuiteId} from '../../../modules/selectors/tree';
 import {getToggledCheckboxState} from '../../../../common-utils';
 import Bullet from '../../bullet';
+import {Button, ClipboardButton, Spin} from '@gravity-ui/uikit';
+import {ArrowRotateLeft} from '@gravity-ui/icons';
+import {TestStatus} from '../../../../constants';
 
-const SectionTitle = ({name, suiteId, handler, gui, checkStatus, suiteTests, actions}) => {
+const SectionTitle = ({name, suiteId, handler, gui, checkStatus, suiteTests, actions, running, runningThis}) => {
     const onCopySuiteName = (e) => {
         e.stopPropagation();
 
@@ -35,18 +37,21 @@ const SectionTitle = ({name, suiteId, handler, gui, checkStatus, suiteTests, act
     const drawCopyButton = () => (
         <ClipboardButton
             onClick={onCopySuiteName}
-            className="button custom-icon custom-icon_copy-to-clipboard"
-            button-title="copy to clipboard"
-            data-clipboard-text={suiteId}>
+            title="copy to clipboard"
+            text={suiteId}>
         </ClipboardButton>
     );
 
     const drawRetryButton = () => (
-        <button
-            className="button custom-icon custom-icon_retry"
+        runningThis ? <Spin size='xs'/> : <Button
+            view='flat'
             title="retry suite"
-            onClick={onSuiteRetry}>
-        </button>
+            onClick={onSuiteRetry}
+            disabled={running}>
+            <Button.Icon>
+                <ArrowRotateLeft/>
+            </Button.Icon>
+        </Button>
     );
 
     return (
@@ -69,18 +74,24 @@ SectionTitle.propTypes = {
     suiteTests: PropTypes.arrayOf(PropTypes.shape({
         testName: PropTypes.string,
         browserName: PropTypes.string
-    })).isRequired
+    })).isRequired,
+    running: PropTypes.bool,
+    runningThis: PropTypes.bool
 };
 
 export default connect(
     () => {
         const getTestsBySuiteId = mkGetTestsBySuiteId();
 
-        return (state, {suiteId}) => ({
-            gui: state.gui,
-            checkStatus: state.tree.suites.stateById[suiteId].checkStatus,
-            suiteTests: getTestsBySuiteId(state, {suiteId})
-        });
+        return (state, {suiteId}) => {
+            return ({
+                gui: state.gui,
+                running: state.running,
+                runningThis: state.tree.suites.byId[suiteId].status === TestStatus.RUNNING,
+                checkStatus: state.tree.suites.stateById[suiteId].checkStatus,
+                suiteTests: getTestsBySuiteId(state, {suiteId})
+            });
+        };
     },
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(SectionTitle);
diff --git a/lib/static/components/state/error-details.jsx b/lib/static/components/state/error-details.jsx
index e12b18425..49e85abbd 100644
--- a/lib/static/components/state/error-details.jsx
+++ b/lib/static/components/state/error-details.jsx
@@ -13,6 +13,6 @@ export default class ErrorDetails extends Component {
         const {title, filePath} = this.props.errorDetails;
         const content = <div className="toggle-open__item"><a href={filePath} target="_blank">{title}</a></div>;
 
-        return <Details title='Error details' content={content} extendClassNames='details_type_text'/>;
+        return <Details type='text' title='Error details' content={content}/>;
     }
 }
diff --git a/lib/static/components/state/index.jsx b/lib/static/components/state/index.jsx
index ce7dcaba1..5233eaab4 100644
--- a/lib/static/components/state/index.jsx
+++ b/lib/static/components/state/index.jsx
@@ -11,10 +11,11 @@ import StateSuccess from './state-success';
 import StateFail from './state-fail';
 import ControlButton from '../controls/control-button';
 import FindSameDiffsButton from '../controls/find-same-diffs-button';
-import ArrowsOpen from '../icons/arrows-open';
 import {types as modalTypes} from '../modals';
 import {isAcceptable, isNodeSuccessful, isScreenRevertable} from '../../modules/utils';
 import {isSuccessStatus, isFailStatus, isErrorStatus, isUpdatedStatus, isIdleStatus} from '../../../common-utils';
+import {Disclosure} from '@gravity-ui/uikit';
+import {ChevronsExpandUpRight, Check, ArrowUturnCcwDown} from '@gravity-ui/icons';
 
 class State extends Component {
     static propTypes = {
@@ -81,10 +82,14 @@ class State extends Component {
         return (
             <div className="state-controls">
                 <ControlButton
-                    label="✔ Accept"
+                    label={<Fragment>
+                        <Check/>
+                        Accept
+                    </Fragment>}
                     isSuiteControl={true}
                     isDisabled={isAcceptDisabled}
                     handler={this.onTestAccept}
+                    dataTestId={'test-accept'}
                 />
                 <FindSameDiffsButton
                     imageId={imageId}
@@ -93,7 +98,7 @@ class State extends Component {
                 />
                 <ControlButton
                     label={<Fragment>
-                        <ArrowsOpen />
+                        <ChevronsExpandUpRight />
                         Switch accept mode
                     </Fragment>}
                     title="Open mode with fast screenshot accepting"
@@ -117,9 +122,15 @@ class State extends Component {
         return (
             <div className="state-controls">
                 <ControlButton
-                    label="⎌ Undo"
+                    label={
+                        <Fragment>
+                            <ArrowUturnCcwDown/>
+                            Undo
+                        </Fragment>
+                    }
                     isSuiteControl={true}
                     handler={this.onScreenshotUndo}
+                    dataTestId={'test-undo'}
                 />
             </div>
         );
@@ -131,7 +142,7 @@ class State extends Component {
         const percentThreshold = 0.01;
 
         if (percent < percentThreshold) {
-            return `< ${percentThreshold}`
+            return `< ${percentThreshold}`;
         }
 
         return String(percentRounded);
@@ -146,7 +157,6 @@ class State extends Component {
 
         const className = classNames(
             'state-title',
-            {'state-title_collapsed': !shouldImageBeOpened},
             `state-title_${image.status}`
         );
 
@@ -158,19 +168,10 @@ class State extends Component {
             displayedText += ` (diff: ${image.differentPixels}px, ${displayedDiffPercent}%)`;
         }
 
-        return <div className={className} onClick={this.onToggleStateResult}>{displayedText}</div>;
+        return <div className={className}>{displayedText}</div>;
     }
 
     render() {
-        if (!this.props.shouldImageBeOpened) {
-            return (
-                <Fragment>
-                    <hr className="tab__separator" />
-                    {this._getStateTitleWithDiffCount()}
-                </Fragment>
-            );
-        }
-
         const {node, result, image} = this.props;
         const {status, error} = node;
         let elem = null;
@@ -188,10 +189,16 @@ class State extends Component {
         return (
             <Fragment>
                 <hr className="tab__separator"/>
-                {this._getStateTitleWithDiffCount()}
-                {this._drawFailImageControls()}
-                {this._drawUpdatedImageControls()}
-                {elem ? <div className='image-box__container'>{elem}</div> : null}
+                {this._getStateTitleWithDiffCount() ? <Disclosure summary={this._getStateTitleWithDiffCount()}
+                    onUpdate={this.onToggleStateResult} size='l' defaultExpanded={this.props.shouldImageBeOpened}>
+                    {this._drawFailImageControls()}
+                    {this._drawUpdatedImageControls()}
+                    {elem ? <div className='image-box__container'>{elem}</div> : null}
+                </Disclosure> : <Fragment>
+                    {this._drawFailImageControls()}
+                    {this._drawUpdatedImageControls()}
+                    {elem ? <div className='image-box__container'>{elem}</div> : null}
+                </Fragment>}
             </Fragment>
         );
     }
diff --git a/lib/static/components/state/state-error.jsx b/lib/static/components/state/state-error.jsx
index 3e0223749..6f3b80e39 100644
--- a/lib/static/components/state/state-error.jsx
+++ b/lib/static/components/state/state-error.jsx
@@ -14,6 +14,7 @@ import ErrorDetails from './error-details';
 import Details from '../details';
 import {ERROR_TITLE_TEXT_LENGTH} from '../../../constants/errors';
 import {isAssertViewError, isImageDiffError, isNoRefImageError, mergeSnippetIntoErrorStack, trimArray} from '../../../common-utils';
+import { Card } from '@gravity-ui/uikit';
 
 ansiHtml.setColors({
     reset: ["#", "#"],
@@ -56,8 +57,8 @@ class StateError extends Component {
         return null;
     }
 
-    _wrapInPreformatted = (html) => {
-        return html ? `<pre>${html}</pre>` : html;
+    _wrapInDiv = (html) => {
+        return html ? `<div>${html}</div>` : html;
     }
 
     _errorToElements(error) {
@@ -88,7 +89,7 @@ class StateError extends Component {
                     content = content.join('\n');
                 }
 
-                content = this._wrapInPreformatted(ansiHtml(escapeHtml(content)));
+                content = this._wrapInDiv(ansiHtml(escapeHtml(content)));
             } else {
                 titleText = <span>show more</span>;
                 content = isFunction(value) ? value : () => value;
@@ -123,11 +124,12 @@ class StateError extends Component {
             <div className="image-box__image image-box__image_single">
                 {
                     this._shouldDrawErrorInfo(extendedError)
-                        ? <div
+                        ? <Card
+                            view='filled'
                             className="error"
                         >
                             {this._errorToElements(mergeSnippetIntoErrorStack(extendedError))}
-                        </div> : null
+                        </Card> : null
                 }
                 {errorDetails && <ErrorDetails errorDetails={errorDetails} />}
                 {this._drawImage()}
diff --git a/lib/static/components/state/state-fail/index.jsx b/lib/static/components/state/state-fail/index.jsx
index d87331323..83f851f66 100644
--- a/lib/static/components/state/state-fail/index.jsx
+++ b/lib/static/components/state/state-fail/index.jsx
@@ -13,6 +13,7 @@ import {types} from '../../modals';
 import useFitImages from './useFitImages';
 
 import './index.styl';
+import { Tabs } from '@gravity-ui/uikit';
 
 const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened}) => {
     const [diffMode, setDiffMode] = useState(diffModeProp);
@@ -22,32 +23,12 @@ const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened})
         setDiffMode(diffModeProp);
     }, [diffModeProp, setDiffMode]);
 
-    const renderDiffModeItem = (mode) => {
-        const className = classNames(
-            'diff-modes__item',
-            {'diff-modes__active': diffMode === mode.id}
-        );
-
-        return (
-            <li
-                key={mode.id}
-                title={mode.description}
-                className={className}
-                onClick={() => setDiffMode(mode.id)}
-            >
-                {mode.title}
-            </li>
-        );
-    };
-
     const renderDiffModeItems = () => {
-        const diffModeItems = Object.values(DiffModes).map(renderDiffModeItem);
-
         return (
-            <ul className="diff-modes">
-                {diffModeItems}
-            </ul>
-        );
+            <div className="diff-modes">
+                <Tabs activeTab={diffMode} items={Object.values(DiffModes)} onSelectTab={(mode) => setDiffMode(mode)} size='m'/>
+            </div>
+        )
     };
 
     const getLabelKey = () => {
diff --git a/lib/static/components/state/state-fail/index.styl b/lib/static/components/state/state-fail/index.styl
index d8c23530c..ade5aa816 100644
--- a/lib/static/components/state/state-fail/index.styl
+++ b/lib/static/components/state/state-fail/index.styl
@@ -1,21 +1,7 @@
 .diff-modes
     display: flex
     justify-content: center
-    border-bottom: 1px solid #ccc
-    padding: 5px 0
     margin: 10px auto
-    width: 520px
-
-    &__item
-        display: inline-block
-        padding: 0 5px
-        cursor: pointer
-
-    &__item:not(:last-child)
-        border-right: 1px solid #ccc
-
-    &__active
-        font-weight: bold
 
 .image-box__scaled
     display: flex
diff --git a/lib/static/components/state/state-fail/onion-skin-diff/index.jsx b/lib/static/components/state/state-fail/onion-skin-diff/index.jsx
index 37acb09b5..b863d0b46 100644
--- a/lib/static/components/state/state-fail/onion-skin-diff/index.jsx
+++ b/lib/static/components/state/state-fail/onion-skin-diff/index.jsx
@@ -4,6 +4,7 @@ import withSyncedScale from '../../screenshot/with-synced-scale';
 import {imageType, syncedImageType} from '../prop-types';
 
 import './index.styl';
+import {Slider} from '@gravity-ui/uikit';
 
 const DEFAULT_IMAGE_TRANSPARENCY = 0.5;
 
@@ -18,8 +19,8 @@ class OnionSkinDiff extends Component {
 
     state = {imgTransparency: DEFAULT_IMAGE_TRANSPARENCY};
 
-    _handleChangeTransparency = (e) => {
-        return this.setState({imgTransparency: parseFloat(e.target.value)});
+    _handleChangeTransparency = (value) => {
+        return this.setState({imgTransparency: value});
     };
 
     render() {
@@ -33,7 +34,7 @@ class OnionSkinDiff extends Component {
                     <FullScreenshot className='onion-skin-diff__img' image={image2} imgRef={syncedImage2.containerRef} style={{width: syncedImage2.width, opacity: imgTransparency}} />
                 </div>
                 <div className="onion-skin-diff__footer">
-                    <input className='onion-skin-diff__slider' type="range" min={0} max={1} step={0.01} value={imgTransparency} onChange={this._handleChangeTransparency} />
+                    <Slider className="onion-skin-diff__slider" min={0} max={1} step={0.01} value={imgTransparency} onUpdate={this._handleChangeTransparency} />
                 </div>
             </div>
         );
diff --git a/lib/static/gui.css b/lib/static/gui.css
index e93546965..88a6d7cae 100644
--- a/lib/static/gui.css
+++ b/lib/static/gui.css
@@ -3,28 +3,6 @@
     to {opacity: 0.3;}
 }
 
-.state-title:before,
-.bullet_type-simple:before {
-    display: inline-block;
-    content: '\25cf';
-    color: #ccc;
-    background-image: none;
-}
-
-.state-title:before {
-    margin-right: 6px;
-    vertical-align: middle;
-    width: auto;
-    height: auto;
-}
-
-.bullet_type-simple:before {
-    text-align: end;
-    line-height: 18px;
-    width: 18px;
-    height: 100%;
-}
-
 .custom-icon_retry:before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath transform='scale(0.027,-0.027) translate(0,-448)' d=' M500.333 448H452.922C446.069 448 440.608 442.271 440.9360000000001 435.426L444.9020000000001 352.6670000000001C399.416 406.101 331.6720000000001 440 256.001 440C119.34 440 7.899 328.474 8 191.813C8.101 54.932 119.096 -56 256 -56C319.926 -56 378.202 -31.813 422.178 7.908C427.291 12.526 427.532 20.469 422.6600000000001 25.341L388.689 59.312C384.223 63.778 377.0490000000001 64.029 372.3090000000001 59.855C341.308 32.552 300.606 16 256 16C158.733 16 80 94.716 80 192C80 289.267 158.716 368 256 368C316.892 368 370.506 337.142 402.099 290.2L300.574 295.065C293.729 295.3930000000001 288 289.932 288 283.079V235.668C288 229.041 293.373 223.668 300 223.668H500.333C506.96 223.668 512.333 229.041 512.333 235.668V436C512.333 442.627 506.96 448 500.333 448z'/%3E%3C/svg%3E");
 }
@@ -108,6 +86,14 @@
     margin-right: 10px;
 }
 
+.g-button__text {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
 .controls__item > .button_type_suite-controls {
     margin-right: 0;
 }
diff --git a/lib/static/modules/actions.js b/lib/static/modules/actions.js
index 5fce0d369..03d65ce30 100644
--- a/lib/static/modules/actions.js
+++ b/lib/static/modules/actions.js
@@ -9,7 +9,7 @@ import {DiffModes} from '../../constants/diff-modes';
 import {getHttpErrorMessage} from './utils';
 import {fetchDataFromDatabases, mergeDatabases, connectToDatabase, getMainDatabaseUrl, getSuitesTableRows} from '../../db-utils/client';
 import {setFilteredBrowsers} from './query-params';
-import plugins from './plugins';
+import * as plugins from './plugins';
 import performanceMarks from '../../constants/performance-marks';
 
 export const createNotification = (id, status, message, props = {}) => {
diff --git a/lib/static/modules/plugins.js b/lib/static/modules/plugins.js
index 769e4dd68..70b30e08f 100644
--- a/lib/static/modules/plugins.js
+++ b/lib/static/modules/plugins.js
@@ -3,7 +3,7 @@ import {loadPlugin, preloadPlugin} from './load-plugin';
 const plugins = Object.create(null);
 const loadedPluginConfigs = [];
 
-function preloadAll(config) {
+export function preloadAll(config) {
     if (!config || !config.pluginsEnabled || !Array.isArray(config.plugins)) {
         return;
     }
@@ -11,7 +11,7 @@ function preloadAll(config) {
     config.plugins.forEach(plugin => preloadPlugin(plugin.name));
 }
 
-async function loadAll(config) {
+export async function loadAll(config) {
     // if plugins are disabled, act like there are no plugins defined
     if (!config || !config.pluginsEnabled || !Array.isArray(config.plugins)) {
         return;
@@ -28,7 +28,7 @@ async function loadAll(config) {
     loadedPluginConfigs.push(...pluginConfigs.filter(Boolean));
 }
 
-function forEach(callback) {
+export function forEach(callback) {
     const visited = new Set();
     loadedPluginConfigs.forEach(({name}) => {
         if (!visited.has(name)) {
@@ -42,7 +42,7 @@ function forEach(callback) {
     });
 }
 
-function get(name, field) {
+export function get(name, field) {
     const plugin = plugins[name];
     if (!plugin) {
         throw new Error(`Plugin "${name}" is not loaded.`);
@@ -53,8 +53,6 @@ function get(name, field) {
     return plugins[name][field];
 }
 
-function getLoadedConfigs() {
+export function getLoadedConfigs() {
     return loadedPluginConfigs;
 }
-
-module.exports = {preloadAll, loadAll, getLoadedConfigs, forEach, get};
diff --git a/lib/static/modules/reducers/plugins.js b/lib/static/modules/reducers/plugins.js
index 6f59718c6..61effa9de 100644
--- a/lib/static/modules/reducers/plugins.js
+++ b/lib/static/modules/reducers/plugins.js
@@ -1,5 +1,5 @@
 import reduceReducers from 'reduce-reducers';
-import plugins from '../plugins';
+import * as plugins from '../plugins';
 import actionNames from '../action-names';
 
 const defaultPluginsReducers = state => state;
diff --git a/lib/static/modules/utils/index.js b/lib/static/modules/utils/index.js
index 4f1d80d62..79c47c1cc 100644
--- a/lib/static/modules/utils/index.js
+++ b/lib/static/modules/utils/index.js
@@ -1,37 +1,38 @@
 'use strict';
 
-const {isEmpty, find, isFunction, flatMap} = require('lodash');
-const {isIdleStatus, isSuccessStatus, isUpdatedStatus, isFailStatus, isErrorStatus, isSkippedStatus, isNoRefImageError} = require('../../../common-utils');
-const {ViewMode, SECTIONS, RESULT_KEYS, KEY_DELIMITER} = require('../../../constants');
-const {applyStateUpdate, ensureDiffProperty, getUpdatedProperty} = require('./state');
+import {isEmpty, find, isFunction, flatMap} from 'lodash';
+import {isIdleStatus, isSuccessStatus, isUpdatedStatus, isFailStatus, isErrorStatus, isSkippedStatus, isNoRefImageError} from '../../../common-utils';
+import {ViewMode, SECTIONS, RESULT_KEYS, KEY_DELIMITER} from '../../../constants';
+import default_ from './state';
+const {applyStateUpdate, ensureDiffProperty, getUpdatedProperty} = default_;
 
 const AVAILABLE_GROUP_SECTIONS = Object.values(SECTIONS);
 
-function isSuiteIdle(suite) {
+export function isSuiteIdle(suite) {
     return isIdleStatus(suite.status);
 }
 
-function isSuiteSuccessful(suite) {
+export function isSuiteSuccessful(suite) {
     return isSuccessStatus(suite.status);
 }
 
-function isNodeFailed(node) {
+export function isNodeFailed(node) {
     return isFailStatus(node.status) || isErrorStatus(node.status);
 }
 
-function isNodeSuccessful(node) {
+export function isNodeSuccessful(node) {
     return isSuccessStatus(node.status) || isUpdatedStatus(node.status);
 }
 
-function isAcceptable({status, error}) {
+export function isAcceptable({status, error}) {
     return isErrorStatus(status) && isNoRefImageError(error) || isFailStatus(status) || isSkippedStatus(status);
 }
 
-function isScreenRevertable({gui, image, isLastResult}) {
+export function isScreenRevertable({gui, image, isLastResult}) {
     return gui && image.stateName && isLastResult && isUpdatedStatus(image.status);
 }
 
-function dateToLocaleString(date) {
+export function dateToLocaleString(date) {
     if (!date) {
         return '';
     }
@@ -39,13 +40,13 @@ function dateToLocaleString(date) {
     return new Date(date).toLocaleString(lang);
 }
 
-function getHttpErrorMessage(error) {
+export function getHttpErrorMessage(error) {
     const {message, response} = error;
 
     return response ? `(${response.status}) ${response.data}` : message;
 }
 
-function isTestNameMatchFilters(testName, testNameFilter, strictMatchFilter) {
+export function isTestNameMatchFilters(testName, testNameFilter, strictMatchFilter) {
     if (!testNameFilter) {
         return true;
     }
@@ -57,7 +58,7 @@ function isTestNameMatchFilters(testName, testNameFilter, strictMatchFilter) {
         : new RegExp(filterRegExpStr).test(testName);
 }
 
-function isBrowserMatchViewMode(browser, lastResult, viewMode, diff = browser) {
+export function isBrowserMatchViewMode(browser, lastResult, viewMode, diff = browser) {
     const {status} = lastResult;
 
     if (viewMode === ViewMode.ALL) {
@@ -79,7 +80,7 @@ function isBrowserMatchViewMode(browser, lastResult, viewMode, diff = browser) {
     return status === viewMode;
 }
 
-function shouldShowBrowser(browser, filteredBrowsers, diff = browser) {
+export function shouldShowBrowser(browser, filteredBrowsers, diff = browser) {
     if (isEmpty(filteredBrowsers)) {
         return true;
     }
@@ -99,7 +100,7 @@ function shouldShowBrowser(browser, filteredBrowsers, diff = browser) {
     return browserVersionsToFilterBy.includes(getUpdatedProperty(browser, diff, 'version'));
 }
 
-function iterateSuites(node, {suiteCb, browserCb, browserIdsCb}) {
+export function iterateSuites(node, {suiteCb, browserCb, browserIdsCb}) {
     let resultFromBrowsers = [];
     let resultFromSuites = [];
 
@@ -116,7 +117,7 @@ function iterateSuites(node, {suiteCb, browserCb, browserIdsCb}) {
     return [...resultFromBrowsers, ...resultFromSuites];
 }
 
-function parseKeyToGroupTestsBy(key) {
+export function parseKeyToGroupTestsBy(key) {
     let [groupSection, ...groupKey] = key.split(KEY_DELIMITER);
     groupKey = groupKey.join(KEY_DELIMITER);
 
@@ -131,11 +132,11 @@ function parseKeyToGroupTestsBy(key) {
     return [groupSection, groupKey];
 }
 
-function preloadImage(url) {
+export function preloadImage(url) {
     new Image().src = url;
 }
 
-module.exports = {
+export default {
     applyStateUpdate,
     ensureDiffProperty,
     getUpdatedProperty,
diff --git a/lib/static/modules/utils/state.js b/lib/static/modules/utils/state.js
index 07610753a..3deb89b8a 100644
--- a/lib/static/modules/utils/state.js
+++ b/lib/static/modules/utils/state.js
@@ -1,4 +1,4 @@
-const {get, isPlainObject, isUndefined} = require('lodash');
+import {get, isPlainObject, isUndefined} from 'lodash';
 
 /**
  * Create new state from old state and diff object
@@ -6,7 +6,7 @@ const {get, isPlainObject, isUndefined} = require('lodash');
  * @param {Object} diff
  * @returns {Object} new state, created by overlaying diff to state
  */
-function applyStateUpdate(state, diff) {
+export function applyStateUpdate(state, diff) {
     const result = {...state};
 
     for (const key in diff) {
@@ -28,7 +28,7 @@ function applyStateUpdate(state, diff) {
  * @param {Object} diff
  * @param {Array<string>} path
  */
-function ensureDiffProperty(diff, path) {
+export function ensureDiffProperty(diff, path) {
     let state = diff;
 
     for (let i = 0; i < path.length; i++) {
@@ -47,13 +47,13 @@ function ensureDiffProperty(diff, path) {
  * @param {string|Array<string>} path - in _.get style
  * @returns result of _.get(diff, path) if exists, _.get(state, path) else
  */
-function getUpdatedProperty(state, diff, path) {
+export function getUpdatedProperty(state, diff, path) {
     const diffValue = get(diff, path);
 
     return isUndefined(diffValue) ? get(state, path) : diffValue;
 }
 
-module.exports = {
+export default {
     applyStateUpdate,
     ensureDiffProperty,
     getUpdatedProperty
diff --git a/lib/static/modules/web-vitals.js b/lib/static/modules/web-vitals.js
index a7e3e07b6..acf27f7af 100644
--- a/lib/static/modules/web-vitals.js
+++ b/lib/static/modules/web-vitals.js
@@ -1,6 +1,6 @@
 import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals';
 
-const measurePerformance = onPerfEntry => {
+export const measurePerformance = onPerfEntry => {
     if (onPerfEntry && onPerfEntry instanceof Function) {
         getCLS(onPerfEntry);
         getFID(onPerfEntry);
@@ -10,4 +10,3 @@ const measurePerformance = onPerfEntry => {
     }
 };
 
-module.exports = {measurePerformance};
diff --git a/lib/static/modules/yandex-metrika.js b/lib/static/modules/yandex-metrika.js
index 948b03299..3c9f645b3 100644
--- a/lib/static/modules/yandex-metrika.js
+++ b/lib/static/modules/yandex-metrika.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {isNumber, isFunction} = require('lodash');
+import {isNumber, isFunction} from 'lodash';
 
 const REACH_GOAL = 'reachGoal';
 const PARAMS = 'params';
@@ -9,7 +9,7 @@ const targets = {
     ACCEPT_OPENED_SCREENSHOTS: 'ACCEPT_OPENED_SCREENSHOTS'
 };
 
-module.exports = class YandexMetrika {
+class YandexMetrika {
     static create(config) {
         return new this(config);
     }
@@ -47,4 +47,6 @@ module.exports = class YandexMetrika {
     acceptOpenedScreenshots(params) {
         this._registerGoal(targets.ACCEPT_OPENED_SCREENSHOTS, params);
     }
-};
+}
+
+export default YandexMetrika;
diff --git a/lib/static/styles.css b/lib/static/styles.css
index fce08b877..589d810f2 100644
--- a/lib/static/styles.css
+++ b/lib/static/styles.css
@@ -193,7 +193,7 @@ main.container {
 .image-box__image {
     display: inline-block;
     vertical-align: top;
-    flex-basis: 33.333%;
+    flex-basis: calc(100% / 3);
     flex-grow: 1;
     box-sizing: border-box;
     max-width: 100%;
@@ -288,6 +288,9 @@ main.container {
     cursor: pointer;
     color: var(--text-color);
     margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
 
     user-select: none;
 }
@@ -342,14 +345,12 @@ main.container {
 }
 
 .section__body .section__title.section__title_type_browser {
+    display: flex;
+    align-items: center;
     font-weight: normal;
 }
 
-.section__title .bullet_type-simple:before,
 .tests-group__title .bullet_type-simple.tests-group__bullet:before,
-.state-title:after,
-.details__summary:after,
-.error .details__summary:before,
 .sticky-header__wrap:before {
     content: '';
     width: 18px;
@@ -383,33 +384,7 @@ main.container {
     flex-shrink: 0;
 }
 
-.state-title:after {
-    margin-right: 0;
-    margin-left: 5px;
-}
-
-.details__summary:after {
-    margin-right: 0;
-    margin-left: 5px;
-    transform: rotate(180deg);
-}
-
-.details__summary:before {
-    margin-right: 0;
-    margin-left: 0;
-    transform: rotate(180deg);
-}
-
-details[open] > .details__summary:after,
-details[open] > .details__summary:before {
-    transform: rotate(0deg);
-}
-
-.error .details__summary:after {
-    content: none;
-}
-
-.section_collapsed .section__title .bullet_type-simple:before,
+.section_collapsed .section__title .bullet_type-simple,
 .tests-group_collapsed .tests-group__title .tests-group__bullet:before,
 .state-title_collapsed.state-title:after {
     transform: rotate(180deg);
@@ -485,16 +460,11 @@ details[open] > .details__summary:before {
 }
 
 .custom-icon {
-    display: inline-block;
-    width: 16px;
-    height: 19px;
+    width: 18px;
+    height: 18px;
     vertical-align: top;
-    margin-right: 0;
-    padding: 0 2px;
-    border: none;
     opacity: 0.3;
     cursor: pointer;
-    background: transparent;
 }
 
 .section_root > .section__title > .custom-icon {
@@ -527,32 +497,16 @@ details[open] > .details__summary:before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath transform='scale(0.027,-0.027) translate(0,-448)' d=' M561.938 289.94L417.94 433.908C387.926 463.922 336 442.903 336 399.968V342.77C293.55 340.89 251.97 336.2200000000001 215.24 324.7800000000001C180.07 313.8300000000001 152.17 297.2000000000001 132.33 275.36C108.22 248.8 96 215.4 96 176.06C96 114.363 129.178 63.605 180.87 31.3C218.416 7.792 266.118 43.951 251.89 87.04C236.375 134.159 234.734 157.963 336 165.8V112C336 69.007 387.968 48.087 417.94 78.06L561.938 222.06C580.688 240.8 580.688 271.2 561.938 289.94zM384 112V215.84C255.309 213.918 166.492 192.65 206.31 72C176.79 90.45 144 123.92 144 176.06C144 285.394 273.14 295.007 384 295.91V400L528 256L384 112zM408.74 27.507A82.658 82.658 0 0 1 429.714 36.81C437.69 41.762 448 35.984 448 26.596V-16C448 -42.51 426.51 -64 400 -64H48C21.49 -64 0 -42.51 0 -16V336C0 362.51 21.49 384 48 384H180C186.627 384 192 378.627 192 372V367.514C192 362.597 189.013 358.145 184.431 356.362C170.729 351.031 158.035 344.825 146.381 337.777A12.138 12.138 0 0 0 140.101 336H54A6 6 0 0 1 48 330V-10A6 6 0 0 1 54 -16H394A6 6 0 0 1 400 -10V15.966C400 21.336 403.579 26.025 408.74 27.507z' /%3E%3C/svg%3E");
 }
 
-.meta-info__item {
-    display: flex;
-    word-wrap: break-word;
-    align-items: center;
-}
-
-.meta-info__item:last-child {
-    margin-bottom: 0;
-}
-
-.meta-info__item-key {
-    white-space: pre;
-    font-weight: bold;
-    flex-shrink: 0;
-}
-
 .meta-info__item-value {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
+    display: flex;
+    gap: 2px;
     align-items: center;
+    word-wrap: break-word;
 }
 
 .custom-icon_view-local{
     display: block;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
 }
 
@@ -569,9 +523,7 @@ details[open] > .details__summary:before {
 }
 
 .error {
-    background: #f0f2f5;
     padding: 10px;
-    border-radius: 5px;
 }
 
 .error:not(:last-child) {
@@ -587,6 +539,10 @@ details[open] > .details__summary:before {
     word-wrap: break-word;
 }
 
+.error__item .details__content {
+    font-family: monospace;
+}
+
 .state-button {
     font-family: inherit;
     font-size: 13px;
@@ -609,74 +565,29 @@ details[open] > .details__summary:before {
     user-select: none;
 }
 
-.tab-switcher__button_status_success,
-.tab-switcher__button_status_updated {
-    background-color: rgba(123, 204, 123, 1);
-    border-color: rgba(123, 204, 123, 1);
-}
-
-.tab-switcher__button_status_success.tab-switcher__button_non-matched,
-.tab-switcher__button_status_updated.tab-switcher__button_non-matched {
-    background-color: rgba(123, 204, 123, .25);
-    border-color: rgba(123, 204, 123, .25);
-}
-
-.tab-switcher__button_status_error {
-    background-color: rgba(255, 154, 154, 1);
-    border-color: rgba(255, 154, 154, 1);
+.tab-switcher__button {
+    --g-button-padding: 8px;
+    margin-right: 2px;
 }
 
-.tab-switcher__button_status_error.tab-switcher__button_non-matched {
-    background-color: rgba(255, 154, 154, .25);
-    border-color: rgba(255, 154, 154, .25);
+.tab-switcher__button_non-matched {
+    opacity: 0.5;
 }
 
 .tab-switcher__button_status_fail {
-    background-color: rgba(255, 197, 224, 1);
-    border-color: rgba(255, 197, 224, 1);
-}
-
-.tab-switcher__button_status_fail.tab-switcher__button_non-matched {
-    background-color: rgba(255, 197, 224, .25);
-    border-color: rgba(255, 197, 224, .25);
+    --g-button-background-color: #fce0ff;
+    --g-button-text-color: #bd1993;
+    --g-button-border-color: #bd1993;
 }
 
 .tab-switcher__button_status_fail_error {
-    background: linear-gradient(135deg, rgba(255, 197, 224, 1) 50%, rgba(255, 154, 154, 1) 50%);
-    border-left-color: rgba(255, 197, 224, 1);
-    border-top-color: rgba(255, 197, 224, 1);
-    border-right-color: rgba(255, 154, 154, 1);
-    border-bottom-color: rgba(255, 154, 154, 1);
-}
-
-.tab-switcher__button_status_fail_error.tab-switcher__button_non-matched {
-    background: linear-gradient(135deg, rgba(255, 197, 224, .25) 50%, rgba(255, 154, 154, .25) 50%);
-    border-left-color: rgba(255, 197, 224, .25);
-    border-top-color: rgba(255, 197, 224, .25);
-    border-right-color: rgba(255, 154, 154, .25);
-    border-bottom-color: rgba(255, 154, 154, .25);
-}
-
-.tab-switcher__button_status_skipped  {
-    background-color: rgba(204, 204, 204, 1);
-    border-color: rgba(204, 204, 204, 1);
-}
-
-.tab-switcher__button_status_skipped.tab-switcher__button_non-matched {
-    background-color: rgba(204, 204, 204, .25);
-    border-color: rgba(204, 204, 204, .25);
-}
-
-.tab-switcher__button_non-matched {
-    color: rgba(0, 0, 0, .25);
-}
-
-.tab-switcher .tab-switcher__button:hover {
-    border-color: #888;
+    --g-button-background-color: #fce0ff;
+    --g-button-text-color: #bd1993;
+    --g-button-border-color: #bd1993;
 }
 
 .tab-switcher__button.tab-switcher__button_active {
-    border-color: #000;
+    --g-button-border-width: 1px;
 }
 
 .collapsed,
@@ -739,33 +650,26 @@ a:active {
 }
 
 .details {
+    text-align: start;
     word-break: break-word;
 }
 
-.details + .details {
-    margin-top: 5px;
-}
-
-.error > .details + .details {
-    margin-top: 5px;
-}
-
 .details__summary {
-    display: block;
-    outline: none;
+    cursor: pointer;
 }
 
-.details__summary:hover {
-    cursor: pointer;
-    color: #a3a3a3;
+.details__expand-button {
+    display: inline-block;
+    vertical-align: text-bottom;
+    margin-right: 2px;
 }
 
-.details__summary::-webkit-details-marker {
-    display: none;
+.details + .details {
+    margin-top: 5px;
 }
 
-.details_type_text {
-    margin-bottom: 10px;
+.error > .details + .details {
+    margin-top: 5px;
 }
 
 .image-box .details_type_text:last-child {
@@ -776,11 +680,10 @@ a:active {
     margin: 5px 0;
 }
 
-.details_type_text .details__content {
-    margin: 5px 0;
-    background-color: #f0f2f5;
+.details__card {
+    margin-top: 5px;
     padding: 10px;
-    border-radius: 5px;
+    word-wrap: break-word;
 }
 
 .details_type_image .details__content {
@@ -872,6 +775,17 @@ a:active {
     padding: 0 !important;
 }
 
+.bullet-container {
+    width: 19px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+}
+
+.bullet_type-checkbox {
+    margin-right: 5px;
+}
+
 .menu-item__link {
     display: block;
     padding: 12px;
diff --git a/package-lock.json b/package-lock.json
index 9379741c7..42d76af1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
         "@babel/preset-react": "^7.22.5",
         "@babel/preset-typescript": "^7.22.5",
         "@gemini-testing/commander": "^2.15.3",
+        "@gravity-ui/components": "^3.7.0",
         "@gravity-ui/uikit": "^6.20.0",
         "@playwright/test": "^1.44.1",
         "@swc/core": "^1.3.64",
@@ -2790,6 +2791,36 @@
       "resolved": "https://registry.npmjs.org/@gemini-testing/sql.js/-/sql.js-2.0.0.tgz",
       "integrity": "sha512-FoslR6S5cxObp0fNtiFkQ6TvGZ5sd7+KomY7Hm3sH51uAHxyzJSQGvpsaiw5dmO/HHYEBF/bJMXHVWEQGfot7A=="
     },
+    "node_modules/@gravity-ui/components": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/components/-/components-3.7.0.tgz",
+      "integrity": "sha512-cWmVOa6rErZY+F3Ws9zD6vvKlU2nn4eUFzS17R0TlVa4uaIcT2WsPGwAracby/o3Ys1gpSK71AkpW/c8lgcvog==",
+      "dev": true,
+      "dependencies": {
+        "@bem-react/classname": "^1.6.0",
+        "@gravity-ui/date-utils": "^2.1.0",
+        "@gravity-ui/i18n": "^1.2.0",
+        "@gravity-ui/icons": "^2.8.1",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "universal-cookie": "^6.1.3"
+      },
+      "peerDependencies": {
+        "@gravity-ui/uikit": "^6.13.0",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@gravity-ui/date-utils": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/date-utils/-/date-utils-2.5.3.tgz",
+      "integrity": "sha512-WetzttqlW454yGsh/LBo0AxuqIFT0erENCMYAfemhu6qLiuqy35NdDGP6VA4iDkWiSPFuQ1sRoVU8tC+OwiPEg==",
+      "dev": true,
+      "dependencies": {
+        "dayjs": "1.11.10",
+        "lodash": "^4.17.0"
+      }
+    },
     "node_modules/@gravity-ui/i18n": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.5.1.tgz",
@@ -3744,6 +3775,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true
+    },
     "node_modules/@types/debug": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -12189,6 +12226,12 @@
         "node": "*"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
+      "dev": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -28519,6 +28562,25 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.3.tgz",
+      "integrity": "sha512-AETYRrhpRgl9T1YtnODmQE32G81U3A+f3HO3ZeK7efbXqe3x+RNOW4RTpV0iff7zJWhGYJA6EI0Mm+w50aFTAw==",
+      "dev": true,
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      }
+    },
+    "node_modules/universal-cookie/node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -31379,7 +31441,10 @@
     },
     "test/func/tests": {
       "name": "html-reporter-e2e-testplane-tests",
-      "version": "0.0.0"
+      "version": "0.0.0",
+      "devDependencies": {
+        "@gravity-ui/components": "^3.7.0"
+      }
     }
   },
   "dependencies": {
@@ -33119,6 +33184,31 @@
       "resolved": "https://registry.npmjs.org/@gemini-testing/sql.js/-/sql.js-2.0.0.tgz",
       "integrity": "sha512-FoslR6S5cxObp0fNtiFkQ6TvGZ5sd7+KomY7Hm3sH51uAHxyzJSQGvpsaiw5dmO/HHYEBF/bJMXHVWEQGfot7A=="
     },
+    "@gravity-ui/components": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/components/-/components-3.7.0.tgz",
+      "integrity": "sha512-cWmVOa6rErZY+F3Ws9zD6vvKlU2nn4eUFzS17R0TlVa4uaIcT2WsPGwAracby/o3Ys1gpSK71AkpW/c8lgcvog==",
+      "dev": true,
+      "requires": {
+        "@bem-react/classname": "^1.6.0",
+        "@gravity-ui/date-utils": "^2.1.0",
+        "@gravity-ui/i18n": "^1.2.0",
+        "@gravity-ui/icons": "^2.8.1",
+        "lodash": "^4.17.21",
+        "resize-observer-polyfill": "^1.5.1",
+        "universal-cookie": "^6.1.3"
+      }
+    },
+    "@gravity-ui/date-utils": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/date-utils/-/date-utils-2.5.3.tgz",
+      "integrity": "sha512-WetzttqlW454yGsh/LBo0AxuqIFT0erENCMYAfemhu6qLiuqy35NdDGP6VA4iDkWiSPFuQ1sRoVU8tC+OwiPEg==",
+      "dev": true,
+      "requires": {
+        "dayjs": "1.11.10",
+        "lodash": "^4.17.0"
+      }
+    },
     "@gravity-ui/i18n": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.5.1.tgz",
@@ -33809,6 +33899,12 @@
         "@types/node": "*"
       }
     },
+    "@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true
+    },
     "@types/debug": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -40393,6 +40489,12 @@
       "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
+      "dev": true
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -44190,7 +44292,10 @@
       "version": "file:test/func/packages/basic"
     },
     "html-reporter-e2e-testplane-tests": {
-      "version": "file:test/func/tests"
+      "version": "file:test/func/tests",
+      "requires": {
+        "@gravity-ui/components": "^3.7.0"
+      }
     },
     "html-reporter-menu-bar-plugin": {
       "version": "file:test/func/packages/menu-bar"
@@ -53067,6 +53172,24 @@
         "unist-util-is": "^4.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.3.tgz",
+      "integrity": "sha512-AETYRrhpRgl9T1YtnODmQE32G81U3A+f3HO3ZeK7efbXqe3x+RNOW4RTpV0iff7zJWhGYJA6EI0Mm+w50aFTAw==",
+      "dev": true,
+      "requires": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+          "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+          "dev": true
+        }
+      }
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
diff --git a/package.json b/package.json
index 7b73b7c4f..7d88300c0 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@gemini-testing/commander": "^2.15.3",
+    "@gravity-ui/components": "^3.7.0",
     "@gravity-ui/uikit": "^6.20.0",
     "@playwright/test": "^1.44.1",
     "@swc/core": "^1.3.64",
@@ -225,7 +226,6 @@
     "ts-node": "^10.9.1",
     "type-fest": "^3.13.1",
     "typescript": "^5.0.4",
-    "uglify-js": "^3.17.4",
     "web-vitals": "^1.1.2",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
diff --git a/test/func/docker/browser-utils/download-chromium.js b/test/func/docker/browser-utils/download-chromium.js
deleted file mode 100644
index 34cb39a36..000000000
--- a/test/func/docker/browser-utils/download-chromium.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const fs = require('fs');
-const os = require('os');
-const path = require('path');
-const {pipeline} = require('stream');
-const {promisify} = require('util');
-const AdmZip = require('adm-zip');
-const got = require('got');
-
-const streamPipeline = promisify(pipeline);
-
-const download = async (url) => {
-    // Create a temporary directory to store the downloaded file
-    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'chrome-download-'));
-
-    // Path for the downloaded zip file
-    const zipFilePath = path.join(tempDir, 'chrome-linux64.zip');
-
-    await streamPipeline(
-        got.stream(url),
-        fs.createWriteStream(zipFilePath)
-    );
-
-    return zipFilePath;
-};
-
-const extract = async (zipFilePath) => {
-    const zip = new AdmZip(zipFilePath);
-
-    const outPath = path.dirname(zipFilePath);
-
-    zip.extractAllTo(outPath);
-
-    return path.join(outPath, 'chrome-linux64');
-};
-
-(async () => {
-    // Available good versions of Chrome for testing: https://googlechromelabs.github.io/chrome-for-testing/known-good-versions.json
-    const CHROME_URL = 'https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/116.0.5845.49/linux64/chrome-linux64.zip';
-
-    const chromeZipPath = await download(CHROME_URL);
-    const chromePath = await extract(chromeZipPath);
-
-    console.log(chromePath);
-})();
diff --git a/test/func/docker/browser-utils/install-chromium.sh b/test/func/docker/browser-utils/install-chromium.sh
deleted file mode 100755
index 03bbabaed..000000000
--- a/test/func/docker/browser-utils/install-chromium.sh
+++ /dev/null
@@ -1,6 +0,0 @@
-#!/usr/bin/env bash
-
-CHROME_PATH=$(node ./download-chromium.js)
-mkdir ~/browsers
-mv $CHROME_PATH ~/browsers/chrome-linux
-chmod +x ~/browsers/chrome-linux/chrome
diff --git a/test/func/docker/browser-utils/package-lock.json b/test/func/docker/browser-utils/package-lock.json
deleted file mode 100644
index 94cc6e375..000000000
--- a/test/func/docker/browser-utils/package-lock.json
+++ /dev/null
@@ -1,553 +0,0 @@
-{
-  "name": "browser-utils",
-  "version": "0.0.0",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "browser-utils",
-      "version": "0.0.0",
-      "dependencies": {
-        "adm-zip": "^0.5.10",
-        "got": "^11.8.6"
-      }
-    },
-    "node_modules/@sindresorhus/is": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
-      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/is?sponsor=1"
-      }
-    },
-    "node_modules/@szmarczak/http-timer": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
-      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
-      "dependencies": {
-        "defer-to-connect": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@types/cacheable-request": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
-      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
-      "dependencies": {
-        "@types/http-cache-semantics": "*",
-        "@types/keyv": "^3.1.4",
-        "@types/node": "*",
-        "@types/responselike": "^1.0.0"
-      }
-    },
-    "node_modules/@types/http-cache-semantics": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
-      "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA=="
-    },
-    "node_modules/@types/keyv": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
-      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "20.10.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
-      "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "node_modules/@types/responselike": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
-      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/adm-zip": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz",
-      "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ==",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/cacheable-lookup": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
-      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
-      "engines": {
-        "node": ">=10.6.0"
-      }
-    },
-    "node_modules/cacheable-request": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
-      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
-      "dependencies": {
-        "clone-response": "^1.0.2",
-        "get-stream": "^5.1.0",
-        "http-cache-semantics": "^4.0.0",
-        "keyv": "^4.0.0",
-        "lowercase-keys": "^2.0.0",
-        "normalize-url": "^6.0.1",
-        "responselike": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/clone-response": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
-      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-      "dependencies": {
-        "mimic-response": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "dependencies": {
-        "mimic-response": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/decompress-response/node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/defer-to-connect": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
-      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dependencies": {
-        "once": "^1.4.0"
-      }
-    },
-    "node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/got": {
-      "version": "11.8.6",
-      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
-      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
-      "dependencies": {
-        "@sindresorhus/is": "^4.0.0",
-        "@szmarczak/http-timer": "^4.0.5",
-        "@types/cacheable-request": "^6.0.1",
-        "@types/responselike": "^1.0.0",
-        "cacheable-lookup": "^5.0.3",
-        "cacheable-request": "^7.0.2",
-        "decompress-response": "^6.0.0",
-        "http2-wrapper": "^1.0.0-beta.5.2",
-        "lowercase-keys": "^2.0.0",
-        "p-cancelable": "^2.0.0",
-        "responselike": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.19.0"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/got?sponsor=1"
-      }
-    },
-    "node_modules/http-cache-semantics": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
-    },
-    "node_modules/http2-wrapper": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
-      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
-      "dependencies": {
-        "quick-lru": "^5.1.1",
-        "resolve-alpn": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=10.19.0"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
-    },
-    "node_modules/keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "dependencies": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "node_modules/lowercase-keys": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/p-cancelable": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
-      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "node_modules/quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/resolve-alpn": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
-      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
-    },
-    "node_modules/responselike": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
-      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
-      "dependencies": {
-        "lowercase-keys": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-    }
-  },
-  "dependencies": {
-    "@sindresorhus/is": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
-      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw=="
-    },
-    "@szmarczak/http-timer": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
-      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
-      "requires": {
-        "defer-to-connect": "^2.0.0"
-      }
-    },
-    "@types/cacheable-request": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
-      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
-      "requires": {
-        "@types/http-cache-semantics": "*",
-        "@types/keyv": "^3.1.4",
-        "@types/node": "*",
-        "@types/responselike": "^1.0.0"
-      }
-    },
-    "@types/http-cache-semantics": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
-      "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA=="
-    },
-    "@types/keyv": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
-      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/node": {
-      "version": "20.10.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
-      "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
-      "requires": {
-        "undici-types": "~5.26.4"
-      }
-    },
-    "@types/responselike": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
-      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "adm-zip": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz",
-      "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ=="
-    },
-    "cacheable-lookup": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
-      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA=="
-    },
-    "cacheable-request": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
-      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
-      "requires": {
-        "clone-response": "^1.0.2",
-        "get-stream": "^5.1.0",
-        "http-cache-semantics": "^4.0.0",
-        "keyv": "^4.0.0",
-        "lowercase-keys": "^2.0.0",
-        "normalize-url": "^6.0.1",
-        "responselike": "^2.0.0"
-      }
-    },
-    "clone-response": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
-      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-      "requires": {
-        "mimic-response": "^1.0.0"
-      }
-    },
-    "decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "requires": {
-        "mimic-response": "^3.1.0"
-      },
-      "dependencies": {
-        "mimic-response": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
-        }
-      }
-    },
-    "defer-to-connect": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
-      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg=="
-    },
-    "end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "requires": {
-        "once": "^1.4.0"
-      }
-    },
-    "get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "requires": {
-        "pump": "^3.0.0"
-      }
-    },
-    "got": {
-      "version": "11.8.6",
-      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
-      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
-      "requires": {
-        "@sindresorhus/is": "^4.0.0",
-        "@szmarczak/http-timer": "^4.0.5",
-        "@types/cacheable-request": "^6.0.1",
-        "@types/responselike": "^1.0.0",
-        "cacheable-lookup": "^5.0.3",
-        "cacheable-request": "^7.0.2",
-        "decompress-response": "^6.0.0",
-        "http2-wrapper": "^1.0.0-beta.5.2",
-        "lowercase-keys": "^2.0.0",
-        "p-cancelable": "^2.0.0",
-        "responselike": "^2.0.0"
-      }
-    },
-    "http-cache-semantics": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
-    },
-    "http2-wrapper": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
-      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
-      "requires": {
-        "quick-lru": "^5.1.1",
-        "resolve-alpn": "^1.0.0"
-      }
-    },
-    "json-buffer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
-    },
-    "keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "requires": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "lowercase-keys": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
-    },
-    "mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
-    },
-    "normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "p-cancelable": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
-      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg=="
-    },
-    "pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
-    },
-    "resolve-alpn": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
-      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
-    },
-    "responselike": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
-      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
-      "requires": {
-        "lowercase-keys": "^2.0.0"
-      }
-    },
-    "undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-    }
-  }
-}
diff --git a/test/func/docker/browser-utils/package.json b/test/func/docker/browser-utils/package.json
deleted file mode 100644
index ff7565d4f..000000000
--- a/test/func/docker/browser-utils/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "browser-utils",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "install-chromium": "./install-chromium.sh"
-  },
-  "dependencies": {
-    "adm-zip": "^0.5.10",
-    "got": "^11.8.6"
-  }
-}
diff --git a/test/func/packages/webpack.common.js b/test/func/packages/webpack.common.js
index 209bd1235..f304e8e2b 100644
--- a/test/func/packages/webpack.common.js
+++ b/test/func/packages/webpack.common.js
@@ -32,9 +32,7 @@ module.exports = {
         minimizer: [
             new TerserPlugin({
                 parallel: true,
-                minify: TerserPlugin.uglifyJsMinify,
                 terserOptions: {
-                    annotations: false,
                     output: {
                         comments: false
                     }
diff --git a/test/func/tests/common-gui/index.testplane.js b/test/func/tests/common-gui/index.testplane.js
index 27a63cfdf..42ce3e60f 100644
--- a/test/func/tests/common-gui/index.testplane.js
+++ b/test/func/tests/common-gui/index.testplane.js
@@ -72,7 +72,7 @@ describe('GUI mode', () => {
             await browser.$(historySelector).click();
             const historyText = await browser.$(historySelector + '/div').getText();
 
-            expect(historyText.includes('<-')).toBeTruthy();
+            expect(historyText.length > 0).toBeTruthy();
         });
     });
 
@@ -95,7 +95,7 @@ describe('GUI mode', () => {
             it('should create a successful retry', async ({browser}) => {
                 const allRetryButtonsSelector =
                     getTestSectionByNameSelector(fullTestName) +
-                    '//button[@data-test-id="retry-switcher"]';
+                    '//button[@data-qa="retry-switcher"]';
                 const retrySwitcher = browser.$(`(${allRetryButtonsSelector})[last()]`);
                 await hideScreenshots(browser);
 
@@ -120,7 +120,7 @@ describe('GUI mode', () => {
                 // Verify green retry button
                 const allRetryButtonsSelector =
                     getTestSectionByNameSelector(fullTestName) +
-                    '//button[@data-test-id="retry-switcher"]';
+                    '//button[@data-qa="retry-switcher"]';
                 const retrySwitcher = browser.$(`(${allRetryButtonsSelector})[last()]`);
                 await hideScreenshots(browser);
 
diff --git a/test/func/tests/common-tinder/index.testplane.js b/test/func/tests/common-tinder/index.testplane.js
index 33be89237..b79b13075 100644
--- a/test/func/tests/common-tinder/index.testplane.js
+++ b/test/func/tests/common-tinder/index.testplane.js
@@ -67,7 +67,7 @@ describe('Tinder mode', () => {
         });
 
         it('should create a successful retry', async ({browser}) => {
-            const retrySwitcher = await browser.$(`(//button[@data-test-id="retry-switcher"])[last()]`);
+            const retrySwitcher = await browser.$(`(//button[@data-qa="retry-switcher"])[last()]`);
             await hideScreenshots(browser);
 
             await retrySwitcher.assertView('retry-switcher');
@@ -84,7 +84,7 @@ describe('Tinder mode', () => {
             await retryButton.waitForClickable({reverse: true, timeout: 10000});
             await retryButton.waitForClickable({timeout: 10000});
 
-            const retrySwitcher = await browser.$(`(//button[@data-test-id="retry-switcher"])[last()]`);
+            const retrySwitcher = await browser.$(`(//button[@data-qa="retry-switcher"])[last()]`);
             await hideScreenshots(browser);
 
             await retrySwitcher.assertView('retry-switcher');
diff --git a/test/func/tests/common/test-results-appearance.testplane.js b/test/func/tests/common/test-results-appearance.testplane.js
index 6248554c8..87f66b904 100644
--- a/test/func/tests/common/test-results-appearance.testplane.js
+++ b/test/func/tests/common/test-results-appearance.testplane.js
@@ -3,7 +3,8 @@ const {
     getImageSectionSelector,
     getTestStateByNameSelector,
     getElementWithTextSelector,
-    hideHeader, hideScreenshots
+    hideHeader, hideScreenshots,
+    getSpoilerByNameSelector
 } = require('../utils');
 
 describe('Test results appearance', () => {
@@ -16,7 +17,7 @@ describe('Test results appearance', () => {
         it('should have green retry selector', async ({browser}) => {
             const retrySelectorButton = await browser.$(
                 getTestSectionByNameSelector('successfully passed test') +
-                '//button[@data-test-id="retry-switcher"]'
+                '//button[@data-qa="retry-switcher"]'
             );
 
             await hideHeader(browser);
@@ -30,7 +31,7 @@ describe('Test results appearance', () => {
         it('should have pink retry selector', async ({browser}) => {
             const retrySelectorButton = await browser.$(
                 getTestSectionByNameSelector('test with image comparison diff') +
-                '//button[@data-test-id="retry-switcher"]'
+                '//button[@data-qa="retry-switcher"]'
             );
 
             await hideHeader(browser);
@@ -71,7 +72,7 @@ describe('Test results appearance', () => {
         it('should have pink retry selector', async ({browser}) => {
             const retrySelectorButton = await browser.$(
                 getTestSectionByNameSelector('test without screenshot') +
-                '//button[@data-test-id="retry-switcher"]'
+                '//button[@data-qa="retry-switcher"]'
             );
 
             await hideHeader(browser);
@@ -98,7 +99,7 @@ describe('Test results appearance', () => {
         it('should display actual screenshot', async ({browser}) => {
             const imageElement = browser.$(
                 getTestSectionByNameSelector('test without screenshot') +
-                getTestStateByNameSelector('header') +
+                '//' + getSpoilerByNameSelector('header') +
                 '//img'
             );
 
@@ -112,7 +113,7 @@ describe('Test results appearance', () => {
         it('should have red retry selector', async ({browser}) => {
             const retrySelectorButton = await browser.$(
                 getTestSectionByNameSelector('test with long error message') +
-                '//button[@data-test-id="retry-switcher"]'
+                '//button[@data-qa="retry-switcher"]'
             );
 
             await hideHeader(browser);
diff --git a/test/func/tests/common/tests-details.testplane.js b/test/func/tests/common/tests-details.testplane.js
index bf75f8cc9..6358ce29c 100644
--- a/test/func/tests/common/tests-details.testplane.js
+++ b/test/func/tests/common/tests-details.testplane.js
@@ -6,13 +6,14 @@ describe('Test details', function() {
     });
 
     it('should show details', async ({browser}) => {
-        await browser.$('div*=test with long error message').waitForDisplayed();
+        const selector = getTestSectionByNameSelector('test with long error message');
+        await browser.$(selector).waitForDisplayed();
 
-        const erroredTestSection = await browser.$('div*=test with long error message').$('../..');
+        const erroredTestSection = await browser.$(selector).$('../..');
 
         await erroredTestSection.$('.details__summary').click();
 
-        const fileMetaInfo = await erroredTestSection.$('div*=failed-describe').$('..');
+        const fileMetaInfo = await erroredTestSection.$('div.meta-info__item*=failed-describe').$('..');
 
         await expect(fileMetaInfo).toBeDisplayed();
         await expect(await fileMetaInfo.$('span*=file')).toBeDisplayed();
@@ -21,7 +22,7 @@ describe('Test details', function() {
     it('should prevent details summary overflow', async ({browser}) => {
         const selector =
             getTestSectionByNameSelector('test with long error message') +
-            `//summary[.${getElementWithTextSelector('span', 'stack')}/..]`;
+            `//section[contains(@class, 'error__item') and .${getElementWithTextSelector('span', 'stack')}/..]`;
 
         await browser.$(selector).waitForDisplayed();
         await browser.assertView('details summary', selector);
diff --git a/test/func/tests/package.json b/test/func/tests/package.json
index fbe26632a..8b21881bd 100644
--- a/test/func/tests/package.json
+++ b/test/func/tests/package.json
@@ -16,5 +16,8 @@
     "testplane:plugins": "PROJECT_UNDER_TEST=plugins SERVER_PORT=8064 npx testplane --set plugins",
     "testplane:testplane-tinder": "PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8084 npx testplane --set common-tinder",
     "test": "run-s testplane:*"
+  },
+  "devDependencies": {
+    "@gravity-ui/components": "^3.7.0"
   }
 }
diff --git a/test/func/tests/screens/0049570/chrome/retry-switcher.png b/test/func/tests/screens/0049570/chrome/retry-switcher.png
index 996698da7..22ebec71d 100644
Binary files a/test/func/tests/screens/0049570/chrome/retry-switcher.png and b/test/func/tests/screens/0049570/chrome/retry-switcher.png differ
diff --git a/test/func/tests/screens/07c99c0/chrome/retry-switcher.png b/test/func/tests/screens/07c99c0/chrome/retry-switcher.png
index 996698da7..22ebec71d 100644
Binary files a/test/func/tests/screens/07c99c0/chrome/retry-switcher.png and b/test/func/tests/screens/07c99c0/chrome/retry-switcher.png differ
diff --git a/test/func/tests/screens/1361a92/chrome/retry-selector.png b/test/func/tests/screens/1361a92/chrome/retry-selector.png
index 7432c9cd0..f3cf584c5 100644
Binary files a/test/func/tests/screens/1361a92/chrome/retry-selector.png and b/test/func/tests/screens/1361a92/chrome/retry-selector.png differ
diff --git a/test/func/tests/screens/1bb949f/chrome/retry-switcher.png b/test/func/tests/screens/1bb949f/chrome/retry-switcher.png
index 996698da7..22ebec71d 100644
Binary files a/test/func/tests/screens/1bb949f/chrome/retry-switcher.png and b/test/func/tests/screens/1bb949f/chrome/retry-switcher.png differ
diff --git a/test/func/tests/screens/3144090/chrome/menu bar plugins clicked.png b/test/func/tests/screens/3144090/chrome/menu bar plugins clicked.png
index 6dfeeb729..8bb948aae 100644
Binary files a/test/func/tests/screens/3144090/chrome/menu bar plugins clicked.png and b/test/func/tests/screens/3144090/chrome/menu bar plugins clicked.png differ
diff --git a/test/func/tests/screens/42ea26d/chrome/retry-selector.png b/test/func/tests/screens/42ea26d/chrome/retry-selector.png
index d78257ad8..9e1ce15b2 100644
Binary files a/test/func/tests/screens/42ea26d/chrome/retry-selector.png and b/test/func/tests/screens/42ea26d/chrome/retry-selector.png differ
diff --git a/test/func/tests/screens/45b9477/chrome/retry-switcher.png b/test/func/tests/screens/45b9477/chrome/retry-switcher.png
index cf2e130cb..8bef028a3 100644
Binary files a/test/func/tests/screens/45b9477/chrome/retry-switcher.png and b/test/func/tests/screens/45b9477/chrome/retry-switcher.png differ
diff --git a/test/func/tests/screens/5c90021/chrome/basic plugins.png b/test/func/tests/screens/5c90021/chrome/basic plugins.png
index 77595ada2..641f1b75f 100644
Binary files a/test/func/tests/screens/5c90021/chrome/basic plugins.png and b/test/func/tests/screens/5c90021/chrome/basic plugins.png differ
diff --git a/test/func/tests/screens/67cd8d8/chrome/retry-switcher.png b/test/func/tests/screens/67cd8d8/chrome/retry-switcher.png
index cf2e130cb..8bef028a3 100644
Binary files a/test/func/tests/screens/67cd8d8/chrome/retry-switcher.png and b/test/func/tests/screens/67cd8d8/chrome/retry-switcher.png differ
diff --git a/test/func/tests/screens/bdf4a21/chrome/retry-switcher.png b/test/func/tests/screens/bdf4a21/chrome/retry-switcher.png
index cf2e130cb..8bef028a3 100644
Binary files a/test/func/tests/screens/bdf4a21/chrome/retry-switcher.png and b/test/func/tests/screens/bdf4a21/chrome/retry-switcher.png differ
diff --git a/test/func/tests/screens/be4ff5b/chrome/basic plugins clicked.png b/test/func/tests/screens/be4ff5b/chrome/basic plugins clicked.png
index 18daa28f8..13a9f6c4c 100644
Binary files a/test/func/tests/screens/be4ff5b/chrome/basic plugins clicked.png and b/test/func/tests/screens/be4ff5b/chrome/basic plugins clicked.png differ
diff --git a/test/func/tests/screens/c0db305/chrome/details summary.png b/test/func/tests/screens/c0db305/chrome/details summary.png
index 9b727d925..8688382f9 100644
Binary files a/test/func/tests/screens/c0db305/chrome/details summary.png and b/test/func/tests/screens/c0db305/chrome/details summary.png differ
diff --git a/test/func/tests/screens/d8c5b8a/chrome/redux plugin clicked.png b/test/func/tests/screens/d8c5b8a/chrome/redux plugin clicked.png
index 76f389334..6f4ea7b68 100644
Binary files a/test/func/tests/screens/d8c5b8a/chrome/redux plugin clicked.png and b/test/func/tests/screens/d8c5b8a/chrome/redux plugin clicked.png differ
diff --git a/test/func/tests/screens/d90f7de/chrome/retry-selector.png b/test/func/tests/screens/d90f7de/chrome/retry-selector.png
index c74f4a81c..f12b062cf 100644
Binary files a/test/func/tests/screens/d90f7de/chrome/retry-selector.png and b/test/func/tests/screens/d90f7de/chrome/retry-selector.png differ
diff --git a/test/func/tests/screens/ff4deba/chrome/retry-selector.png b/test/func/tests/screens/ff4deba/chrome/retry-selector.png
index d78257ad8..9e1ce15b2 100644
Binary files a/test/func/tests/screens/ff4deba/chrome/retry-selector.png and b/test/func/tests/screens/ff4deba/chrome/retry-selector.png differ
diff --git a/test/func/tests/utils.js b/test/func/tests/utils.js
index 39f54053e..47eeeb197 100644
--- a/test/func/tests/utils.js
+++ b/test/func/tests/utils.js
@@ -16,7 +16,7 @@ const getImageSectionSelector = (status) => `//div[contains(text(), '${status}')
 const getElementWithTextSelector = (tagName, text) => `//${tagName}[contains(normalize-space(),'${text}')]`;
 
 /** Returns <details> element which has summary containing name */
-const getSpoilerByNameSelector = (name) => `details[.//summary[contains(text(), "${name}")]]`;
+const getSpoilerByNameSelector = (name) => `section[.//div[contains(text(), "${name}")]]`;
 
 const hideHeader = async (browser) => {
     await browser.execute(() => {
diff --git a/test/unit/lib/static/components/bullet.jsx b/test/unit/lib/static/components/bullet.jsx
index 0d35ca6bc..0e24eb479 100644
--- a/test/unit/lib/static/components/bullet.jsx
+++ b/test/unit/lib/static/components/bullet.jsx
@@ -39,28 +39,28 @@ describe('<Bullet />', () => {
         it('should be "checked" if status is CHECKED', () => {
             const component = mount(<Bullet status={CHECKED} />);
 
-            assert.isTrue(component.find('.checkbox.checked').exists());
+            assert.isTrue(component.find('.g-checkbox_checked').exists());
         });
 
         it('should be "indeterminate" if status is INDETERMINATE', () => {
             const component = mount(<Bullet status={INDETERMINATE} />);
 
-            assert.isTrue(component.find('.checkbox.indeterminate').exists());
+            assert.isTrue(component.find('.g-checkbox_indeterminate').exists());
         });
 
         it('should be "unchecked" if status is UNCHECKED', () => {
             const component = mount(<Bullet status={UNCHECKED} />);
 
-            assert.isTrue(component.find('.checkbox').exists());
-            assert.isFalse(component.find('.checkbox').hasClass('checked'));
-            assert.isFalse(component.find('.checkbox').hasClass('indeterminate'));
+            assert.isTrue(component.find('label.g-checkbox').exists());
+            assert.isFalse(component.find('label.g-checkbox').hasClass('.g-checkbox_checked'));
+            assert.isFalse(component.find('label.g-checkbox').hasClass('.g-checkbox_indeterminate'));
         });
 
         it('should call "onClick" callback', () => {
             const onClickStub = sandbox.stub();
             const component = mount(<Bullet onClick={onClickStub} />);
 
-            component.find('.checkbox').simulate('click');
+            component.find('label.g-checkbox').simulate('click');
 
             assert.calledOnce(onClickStub);
         });
diff --git a/test/unit/lib/static/components/controls/find-same-diffs-button.jsx b/test/unit/lib/static/components/controls/find-same-diffs-button.jsx
index c8ae923d5..040696313 100644
--- a/test/unit/lib/static/components/controls/find-same-diffs-button.jsx
+++ b/test/unit/lib/static/components/controls/find-same-diffs-button.jsx
@@ -47,13 +47,13 @@ describe('<FindSameDiffsButton />', () => {
     it('should be disabled if passed prop "isDisabled" is true', () => {
         const component = mkFindSameDiffsButton({isDisabled: true});
 
-        assert.isTrue(component.find('[label="🔍 Find same diffs"]').prop('isDisabled'));
+        assert.isTrue(component.find('[data-qa="find-same-diffs"]').prop('disabled'));
     });
 
     it('should be enabled if passed prop "isDisabled" is false', () => {
         const component = mkFindSameDiffsButton({isDisabled: false});
 
-        assert.isFalse(component.find('[label="🔍 Find same diffs"]').prop('isDisabled'));
+        assert.isFalse(component.find('[data-qa="find-same-diffs"]').prop('disabled'));
     });
 
     it('should call "findSameDiffs" action on click', () => {
@@ -76,7 +76,7 @@ describe('<FindSameDiffsButton />', () => {
             <FindSameDiffsButton imageId="img-1" browserId="browser-id" isDisabled={false} />,
             {state}
         );
-        component.find('[label="🔍 Find same diffs"]').simulate('click');
+        component.find('[data-qa="find-same-diffs"]').simulate('click');
 
         assert.calledOnceWith(actionsStub.findSameDiffs, 'img-1', failedOpenedImageIds, 'yabro');
     });
diff --git a/test/unit/lib/static/components/group-tests/item.jsx b/test/unit/lib/static/components/group-tests/item.jsx
index 8ac064978..fb8e6a97d 100644
--- a/test/unit/lib/static/components/group-tests/item.jsx
+++ b/test/unit/lib/static/components/group-tests/item.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import proxyquire from 'proxyquire';
 import {defaultsDeep, set} from 'lodash';
-import {Checkbox} from 'semantic-ui-react';
+import {Checkbox} from '@gravity-ui/uikit';
 import {CHECKED, UNCHECKED, INDETERMINATE} from 'lib/constants/checked-statuses';
 import {isCheckboxChecked} from 'lib/common-utils';
 import {mkConnectedComponent} from 'test/unit/lib/static/components/utils';
diff --git a/test/unit/lib/static/components/modals/screenshot-accepter/header.jsx b/test/unit/lib/static/components/modals/screenshot-accepter/header.jsx
index 93ab9f9f8..a73f26d62 100644
--- a/test/unit/lib/static/components/modals/screenshot-accepter/header.jsx
+++ b/test/unit/lib/static/components/modals/screenshot-accepter/header.jsx
@@ -196,13 +196,13 @@ describe('<ScreenshotAccepterHeader/>', () => {
         it('should be disabled if passed empty "images" array', () => {
             const component = mkHeaderComponent({images: []});
 
-            assert.isTrue(component.find('[label="✔ Accept"]').prop('isDisabled'));
+            assert.isTrue(component.find('[data-qa="screenshot-accepter-accept"]').prop('disabled'));
         });
 
         it('should be enabled if passed not empty "images" array', () => {
             const component = mkHeaderComponent({images: [{id: 'img-1', parentId: 'res-1'}]});
 
-            assert.isFalse(component.find('[label="✔ Accept"]').prop('isDisabled'));
+            assert.isFalse(component.find('[data-qa="screenshot-accepter-accept"]').prop('disabled'));
         });
 
         it('should call "onScreenshotAccept" handler with current image id on click', () => {
@@ -216,7 +216,7 @@ describe('<ScreenshotAccepterHeader/>', () => {
                 onScreenshotAccept
             });
 
-            component.find('[label="✔ Accept"]').simulate('click');
+            component.find('[data-qa="screenshot-accepter-accept"]').simulate('click');
 
             assert.calledOnceWith(onScreenshotAccept, 'img-2');
         });
@@ -375,7 +375,7 @@ describe('<ScreenshotAccepterHeader/>', () => {
             const onScreenshotUndo = sandbox.stub();
             const component = mkHeaderComponent({onScreenshotUndo, acceptedImages: 1});
 
-            component.find('[label="⎌ Undo"]').simulate('click');
+            component.find('[data-qa="screenshot-accepter-undo"]').simulate('click');
 
             assert.calledOnce(onScreenshotUndo);
         });
diff --git a/test/unit/lib/static/components/retry-switcher/item.jsx b/test/unit/lib/static/components/retry-switcher/item.jsx
index 5b2a73fad..7ad67e30d 100644
--- a/test/unit/lib/static/components/retry-switcher/item.jsx
+++ b/test/unit/lib/static/components/retry-switcher/item.jsx
@@ -58,8 +58,8 @@ describe('<RetrySwitcherItem />', () => {
 
                 const component = mkRetrySwitcherItem({resultId: 'result-1', isActive: true}, initialState);
 
-                assert.lengthOf(component.find('.tab-switcher__button'), 1);
-                assert.lengthOf(component.find(`.tab-switcher__button_status_${FAIL}`), 1);
+                assert.lengthOf(component.find('button.tab-switcher__button'), 1);
+                assert.lengthOf(component.find(`button.tab-switcher__button_status_${FAIL}`), 1);
             });
         });
 
@@ -77,8 +77,8 @@ describe('<RetrySwitcherItem />', () => {
 
             const component = mkRetrySwitcherItem({resultId: 'result-1', isActive: true}, initialState);
 
-            assert.lengthOf(component.find('.tab-switcher__button'), 1);
-            assert.lengthOf(component.find(`.tab-switcher__button_status_${FAIL}_${ERROR}`), 1);
+            assert.lengthOf(component.find('button.tab-switcher__button'), 1);
+            assert.lengthOf(component.find(`button.tab-switcher__button_status_${FAIL}_${ERROR}`), 1);
         });
 
         it('without non matched class if group is not selected', () => {
@@ -94,8 +94,8 @@ describe('<RetrySwitcherItem />', () => {
 
             const component = mkRetrySwitcherItem({resultId: 'result-1'}, initialState);
 
-            assert.lengthOf(component.find('.tab-switcher__button'), 1);
-            assert.lengthOf(component.find('.tab-switcher__button_non-matched'), 0);
+            assert.lengthOf(component.find('button.tab-switcher__button'), 1);
+            assert.lengthOf(component.find('button.tab-switcher__button_non-matched'), 0);
         });
 
         it('without non matched class if group is selected and result is matched on it', () => {
@@ -111,8 +111,8 @@ describe('<RetrySwitcherItem />', () => {
 
             const component = mkRetrySwitcherItem({resultId: 'result-1'}, initialState);
 
-            assert.lengthOf(component.find('.tab-switcher__button'), 1);
-            assert.lengthOf(component.find('.tab-switcher__button_non-matched'), 0);
+            assert.lengthOf(component.find('button.tab-switcher__button'), 1);
+            assert.lengthOf(component.find('button.tab-switcher__button_non-matched'), 0);
         });
 
         it('with non matched class if group is selected but result is not matched on it', () => {
@@ -128,8 +128,8 @@ describe('<RetrySwitcherItem />', () => {
 
             const component = mkRetrySwitcherItem({resultId: 'result-1'}, initialState);
 
-            assert.lengthOf(component.find('.tab-switcher__button'), 1);
-            assert.lengthOf(component.find('.tab-switcher__button_non-matched'), 1);
+            assert.lengthOf(component.find('button.tab-switcher__button'), 1);
+            assert.lengthOf(component.find('button.tab-switcher__button_non-matched'), 1);
         });
     });
 
@@ -146,7 +146,7 @@ describe('<RetrySwitcherItem />', () => {
         };
 
         const component = mkRetrySwitcherItem({resultId: 'result-1'}, initialState);
-        const text = component.find('.tab-switcher__button').text();
+        const text = component.find('button.tab-switcher__button').text();
 
         assert.equal(text, 100500);
     });
@@ -154,15 +154,15 @@ describe('<RetrySwitcherItem />', () => {
     it('should render button with correct active class name', () => {
         const component = mkRetrySwitcherItem({isActive: true});
 
-        assert.lengthOf(component.find('.tab-switcher__button'), 1);
-        assert.lengthOf(component.find('.tab-switcher__button_active'), 1);
+        assert.lengthOf(component.find('button.tab-switcher__button'), 1);
+        assert.lengthOf(component.find('button.tab-switcher__button_active'), 1);
     });
 
     it('should call "onClick" handler on click in button', () => {
         const onClick = sinon.stub();
 
         const component = mkRetrySwitcherItem({onClick});
-        component.find('.tab-switcher__button').simulate('click');
+        component.find('button.tab-switcher__button').simulate('click');
 
         assert.calledOnceWith(onClick);
     });
diff --git a/test/unit/lib/static/components/section/body/history.jsx b/test/unit/lib/static/components/section/body/history.jsx
index ed13dd7cc..547312e76 100644
--- a/test/unit/lib/static/components/section/body/history.jsx
+++ b/test/unit/lib/static/components/section/body/history.jsx
@@ -1,22 +1,9 @@
 import React from 'react';
 import {defaultsDeep, set} from 'lodash';
-import proxyquire from 'proxyquire';
+import History from 'lib/static/components/section/body/history'; 
 import {mkConnectedComponent} from '../../utils';
 
 describe('<History />', () => {
-    const sandbox = sinon.sandbox.create();
-    let History, Details;
-
-    beforeEach(() => {
-        Details = sinon.stub().returns(null);
-
-        History = proxyquire('lib/static/components/section/body/history', {
-            '../../../details': {default: Details}
-        }).default;
-    });
-
-    afterEach(() => sandbox.restore());
-
     const mkHistoryComponent = (props = {}, initialState = {}) => {
         props = defaultsDeep(props, {
             resultId: 'default-result'
@@ -28,24 +15,26 @@ describe('<History />', () => {
     it('should not render if history does not exists', () => {
         const initialState = set({}, 'tree.results.byId.default-result', {});
 
-        mkHistoryComponent({resultId: 'default-result'}, initialState);
+        const component = mkHistoryComponent({resultId: 'default-result'}, initialState);
 
-        assert.notCalled(Details);
+        assert.equal(component.find('.history').length, 0);
     });
 
     it('should render history if exists', () => {
-        const initialState = set({}, 'tree.results.byId.default-result.history', 'some-history');
+        const initialState = set({}, 'tree.results.byId.default-result.history', ['some-history']);
 
         const component = mkHistoryComponent({resultId: 'default-result'}, initialState);
 
-        assert.equal(component.find(Details).prop('content'), 'some-history');
+        component.find('.details__summary').simulate('click');
+
+        assert.equal(component.find('.history-item').text(), 'some-history');
     });
 
     it('should render with "History" title', () => {
-        const initialState = set({}, 'tree.results.byId.default-result.history', 'some-history');
+        const initialState = set({}, 'tree.results.byId.default-result.history', ['some-history']);
 
         const component = mkHistoryComponent({resultId: 'default-result'}, initialState);
 
-        assert.equal(component.find(Details).prop('title'), 'History');
+        assert.equal(component.find('.details__summary').text(), 'History');
     });
 });
diff --git a/test/unit/lib/static/components/section/body/index.jsx b/test/unit/lib/static/components/section/body/index.jsx
index cc7674f82..0532a7c0c 100644
--- a/test/unit/lib/static/components/section/body/index.jsx
+++ b/test/unit/lib/static/components/section/body/index.jsx
@@ -41,7 +41,7 @@ describe('<Body />', () => {
         it('should render if "gui" is running', () => {
             const component = mkBodyComponent({}, {gui: true});
 
-            assert.equal(component.find('.button_type_suite-controls').first().text(), '↻ Retry');
+            assert.equal(component.find('.button_type_suite-controls').first().text(), 'Retry');
         });
 
         it('should not render if "gui" is not running', () => {
@@ -53,13 +53,13 @@ describe('<Body />', () => {
         it('should be disabled while tests running', () => {
             const component = mkBodyComponent({}, {running: true});
 
-            assert.isTrue(component.find('[label="↻ Retry"]').prop('isDisabled'));
+            assert.isTrue(component.find('[data-qa="test-retry"]').prop('disabled'));
         });
 
         it('should be enabled if tests are not started yet', () => {
             const component = mkBodyComponent({}, {running: false});
 
-            assert.isFalse(component.find('[label="↻ Retry"]').prop('isDisabled'));
+            assert.isFalse(component.find('[data-qa="test-retry"]').prop('disabled'));
         });
 
         it('should call action "retryTest" on "handler" prop calling', () => {
@@ -67,7 +67,7 @@ describe('<Body />', () => {
             const browserName = 'yabro';
             const component = mkBodyComponent({testName, browserName}, {running: false});
 
-            component.find('[label="↻ Retry"]').simulate('click');
+            component.find('[data-qa="test-retry"]').simulate('click');
 
             assert.calledOnceWith(actionsStub.retryTest, {testName, browserName});
         });
diff --git a/test/unit/lib/static/components/section/body/meta-info/content.jsx b/test/unit/lib/static/components/section/body/meta-info/content.jsx
index 9dd557b09..124be3f0b 100644
--- a/test/unit/lib/static/components/section/body/meta-info/content.jsx
+++ b/test/unit/lib/static/components/section/body/meta-info/content.jsx
@@ -58,14 +58,19 @@ describe('<MetaInfoContent />', () => {
                 baz: ((data, extraItems) => `${data.testName}_${extraItems.baz}`).toString()
             }
         };
-        const expectedMetaInfo = ['foo: bar', 'baz: some-suite_qux', 'url: some-url'];
+        const expectedMetaInfo = [
+            ['foo', 'bar'],
+            ['baz', 'some-suite_qux'],
+            ['url', 'some-url']
+        ];
 
         const component = mkMetaInfoContentComponent({resultId: 'some-result'}, {tree, apiValues});
         const metaItems = component.find('.meta-info__item');
 
         assert.equal(metaItems.length, expectedMetaInfo.length);
         metaItems.forEach((node, i) => {
-            assert.equal(node.text(), expectedMetaInfo[i]);
+            assert.equal(node.find('.gc-definition-list__term-wrapper').text(), expectedMetaInfo[i][0]);
+            assert.equal(node.find('.gc-definition-list__definition').text(), expectedMetaInfo[i][1]);
         });
     });
 
@@ -92,9 +97,9 @@ describe('<MetaInfoContent />', () => {
             }
         };
         const expectedMetaInfo = [
-            'foo1: {"bar":"baz"}',
-            'foo2: [{"bar":"baz"}]',
-            'url: some-url'
+            ['foo1', '{"bar":"baz"}'],
+            ['foo2', '[{"bar":"baz"}]'],
+            ['url', 'some-url']
         ];
 
         const component = mkMetaInfoContentComponent({resultId: 'some-result'}, {tree});
@@ -102,7 +107,8 @@ describe('<MetaInfoContent />', () => {
 
         assert.equal(metaItems.length, expectedMetaInfo.length);
         metaItems.forEach((node, i) => {
-            assert.equal(node.text(), expectedMetaInfo[i]);
+            assert.equal(node.find('.gc-definition-list__term-wrapper').text(), expectedMetaInfo[i][0]);
+            assert.equal(node.find('.gc-definition-list__definition').text(), expectedMetaInfo[i][1]);
         });
     });
 
@@ -129,9 +135,9 @@ describe('<MetaInfoContent />', () => {
             }
         };
         const expectedMetaInfo = [
-            'foo1: true',
-            'foo2: false',
-            'url: some-url'
+            ['foo1', 'true'],
+            ['foo2', 'false'],
+            ['url', 'some-url']
         ];
 
         const component = mkMetaInfoContentComponent({resultId: 'some-result'}, {tree});
@@ -139,7 +145,8 @@ describe('<MetaInfoContent />', () => {
 
         assert.equal(metaItems.length, expectedMetaInfo.length);
         metaItems.forEach((node, i) => {
-            assert.equal(node.text(), expectedMetaInfo[i]);
+            assert.equal(node.find('.gc-definition-list__term-wrapper').text(), expectedMetaInfo[i][0]);
+            assert.equal(node.find('.gc-definition-list__definition').text(), expectedMetaInfo[i][1]);
         });
     });
 
@@ -223,7 +230,8 @@ describe('<MetaInfoContent />', () => {
             const config = {metaInfoBaseUrls: stub.metaInfoBaseUrls};
             const component = mkMetaInfoContentComponent({resultId: 'some-result'}, {tree, config});
 
-            assert.equal(component.find('.meta-info__item:first-child').text(), `file: ${stub.metaInfo.file}`);
+            assert.equal(component.find('.meta-info__item:first-child .gc-definition-list__term-wrapper').text(), `file`);
+            assert.equal(component.find('.meta-info__item:first-child .gc-definition-list__definition').text(), `${stub.metaInfo.file}`);
             assert.equal(component.find('.meta-info__item:first-child a').prop('href'), stub.expectedFileUrl);
         });
     });
diff --git a/test/unit/lib/static/components/section/title/browser-skipped.jsx b/test/unit/lib/static/components/section/title/browser-skipped.jsx
index c47f5f358..f95914c23 100644
--- a/test/unit/lib/static/components/section/title/browser-skipped.jsx
+++ b/test/unit/lib/static/components/section/title/browser-skipped.jsx
@@ -46,7 +46,7 @@ describe('<BrowserSkippedTitle/>', () => {
 
                 const component = mkBrowserSkippedTitleComponent({browserId: 'yabro'}, {tree});
 
-                assert.equal(component.find('.checkbox').exists(), show);
+                assert.equal(component.find('input[type="checkbox"]').exists(), show);
             });
         });
 
@@ -59,7 +59,7 @@ describe('<BrowserSkippedTitle/>', () => {
                 const tree = mkStateTree({browsersById, resultsById, browsersStateById});
                 const component = mkBrowserSkippedTitleComponent({browserId: 'yabro'}, {tree});
 
-                component.find('.checkbox').simulate('click');
+                component.find('input[type="checkbox"]').simulate('click');
 
                 assert.calledOnceWith(actionsStub.toggleBrowserCheckbox, {
                     suiteBrowserId: 'yabro',
diff --git a/test/unit/lib/static/components/section/title/browser.jsx b/test/unit/lib/static/components/section/title/browser.jsx
index 36908e8a8..165de49ae 100644
--- a/test/unit/lib/static/components/section/title/browser.jsx
+++ b/test/unit/lib/static/components/section/title/browser.jsx
@@ -60,7 +60,7 @@ describe('<BrowserTitle/>', () => {
 
                 const component = mkBrowserTitleComponent({browserId: 'yabro'}, {tree});
 
-                assert.equal(component.find('.checkbox').exists(), show);
+                assert.equal(component.find('input[type="checkbox"]').exists(), show);
             });
         });
 
@@ -73,7 +73,7 @@ describe('<BrowserTitle/>', () => {
                 const tree = mkStateTree({browsersById, resultsById, browsersStateById});
                 const component = mkBrowserTitleComponent({browserId: 'yabro'}, {tree});
 
-                component.find('.checkbox').simulate('click');
+                component.find('input[type="checkbox"]').simulate('click');
 
                 assert.calledOnceWith(actionsStub.toggleBrowserCheckbox, {
                     suiteBrowserId: 'yabro',
@@ -91,7 +91,7 @@ describe('<BrowserTitle/>', () => {
             const tree = mkStateTree({browsersById, resultsById, browsersStateById});
 
             const component = mkBrowserTitleComponent({browserId: 'yabro'}, {tree});
-            component.find('ClipboardButton').simulate('click');
+            component.find('button').simulate('click');
 
             assert.calledOnce(actionsStub.copyTestLink);
             assert.calledWithExactly(actionsStub.copyTestLink);
@@ -105,9 +105,6 @@ describe('<BrowserTitle/>', () => {
 
             const component = mkBrowserTitleComponent({browserId: 'yabro', browserName: 'yabro'}, {tree});
 
-            // call prop to simulate click due to multiple requires in ClipboardButton
-            component.find('ClipboardButton').prop('option-text')();
-
             assert.calledOnce(queryParams.appendQuery);
             assert.calledWithExactly(queryParams.appendQuery, 'about:blank', {
                 browser: 'yabro',
diff --git a/test/unit/lib/static/components/section/title/simple.jsx b/test/unit/lib/static/components/section/title/simple.jsx
index 7d2dc279a..bfbd48dfd 100644
--- a/test/unit/lib/static/components/section/title/simple.jsx
+++ b/test/unit/lib/static/components/section/title/simple.jsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import proxyquire from 'proxyquire';
 import {defaultsDeep, set} from 'lodash';
-import {Checkbox} from 'semantic-ui-react';
 import {mkConnectedComponent} from 'test/unit/lib/static/components/utils';
 import {mkStateTree} from 'test/unit/lib/static/state-utils';
 import {CHECKED, UNCHECKED, INDETERMINATE} from 'lib/constants/checked-statuses';
+import { Checkbox, Spin } from '@gravity-ui/uikit';
+import { TestStatus } from 'lib/constants';
 
 describe('<SuiteTitle/>', () => {
     const sandbox = sinon.sandbox.create();
     let SuiteTitle, actionsStub, useLocalStorageStub, mkGetTestsBySuiteIdStub;
 
-    const mkSuiteTitleComponent = (checkStatus) => {
+    const mkSuiteTitleComponent = (checkStatus, status) => {
         const props = {
             name: 'suiteName',
             suiteId: 'suiteId',
@@ -18,6 +19,7 @@ describe('<SuiteTitle/>', () => {
         };
         const initialState = defaultsDeep(
             set({}, 'tree.suites.stateById.suiteId.checkStatus', checkStatus),
+            set({}, 'tree.suites.byId.suiteId.status', status),
             set({}, 'tree', mkStateTree),
             set({}, 'gui', true)
         );
@@ -39,6 +41,20 @@ describe('<SuiteTitle/>', () => {
         }).default;
     });
 
+    describe('<Spin/>', () => {
+        it('should show spinner if running', () => {
+            const component = mkSuiteTitleComponent(CHECKED, TestStatus.RUNNING);
+
+            assert.equal(component.find(Spin).length, 1);
+        });
+
+        it('should not show spinner if not running', () => {
+            const component = mkSuiteTitleComponent(CHECKED, TestStatus.IDLE);
+
+            assert.equal(component.find(Spin).length, 0);
+        });
+    });
+
     describe('<Checkbox/>', () => {
         [CHECKED, UNCHECKED].forEach(show => {
             it(`should ${show ? '' : 'not '}exist if "showCheckboxes" is ${show ? '' : 'not '}set`, () => {
diff --git a/test/unit/lib/static/components/state/index.jsx b/test/unit/lib/static/components/state/index.jsx
index b4a4c2fcc..48d8a6a60 100644
--- a/test/unit/lib/static/components/state/index.jsx
+++ b/test/unit/lib/static/components/state/index.jsx
@@ -65,7 +65,7 @@ describe('<State/>', () => {
         it('should not render button in static report', () => {
             const stateComponent = mkStateComponent({}, {gui: false});
 
-            assert.lengthOf(stateComponent.find('[label="✔ Accept"]'), 0);
+            assert.lengthOf(stateComponent.find('[data-qa="test-accept"]'), 0);
         });
 
         it('should render button in gui report if image is acceptable', () => {
@@ -82,7 +82,7 @@ describe('<State/>', () => {
 
             const stateComponent = mkStateComponent({imageId: 'img-id'}, {gui: true, ...initialState});
 
-            assert.lengthOf(stateComponent.find('[label="✔ Accept"]'), 1);
+            assert.lengthOf(stateComponent.find('[data-qa="test-accept"]'), 1);
         });
 
         it('should not render button if image is not acceptable', () => {
@@ -99,7 +99,7 @@ describe('<State/>', () => {
 
             const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
 
-            assert.isEmpty(stateComponent.find('[label="✔ Accept"]'));
+            assert.isEmpty(stateComponent.find('[data-qa="test-accept"]'));
         });
 
         it('should be enabled if image is acceptable', () => {
@@ -116,7 +116,7 @@ describe('<State/>', () => {
 
             const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
 
-            assert.isFalse(stateComponent.find('[label="✔ Accept"]').prop('isDisabled'));
+            assert.isFalse(stateComponent.find('[data-qa="test-accept"]').prop('disabled'));
         });
 
         it('should call "acceptTest" action on button click', () => {
@@ -132,7 +132,7 @@ describe('<State/>', () => {
             utilsStub.isAcceptable.withArgs(image).returns(true);
 
             const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
-            stateComponent.find('[label="✔ Accept"]').simulate('click');
+            stateComponent.find('[data-qa="test-accept"]').simulate('click');
 
             assert.calledOnceWith(actionsStub.acceptTest, 'img-id');
         });
@@ -152,7 +152,7 @@ describe('<State/>', () => {
             };
             const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
 
-            assert.isFalse(stateComponent.find('[label="⎌ Undo"]').exists());
+            assert.isFalse(stateComponent.find('[data-qa="test-undo"]').exists());
         });
 
         it('should not exist, if not gui', () => {
@@ -168,7 +168,7 @@ describe('<State/>', () => {
             });
             const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
 
-            assert.isFalse(stateComponent.find('[label="⎌ Undo"]').exists());
+            assert.isFalse(stateComponent.find('[data-qa="test-undo"]').exists());
         });
 
         it('should call "undoAcceptImages" action on button click', () => {
@@ -184,7 +184,7 @@ describe('<State/>', () => {
             };
             const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
 
-            stateComponent.find('[label="⎌ Undo"]').simulate('click');
+            stateComponent.find('[data-qa="test-undo"]').simulate('click');
 
             assert.calledOnceWith(actionsStub.undoAcceptImage, 'img-id');
         });
diff --git a/test/unit/lib/static/components/state/state-error.jsx b/test/unit/lib/static/components/state/state-error.jsx
index ea65f3d01..3ae4850b4 100644
--- a/test/unit/lib/static/components/state/state-error.jsx
+++ b/test/unit/lib/static/components/state/state-error.jsx
@@ -103,7 +103,7 @@ describe('<StateError/> component', () => {
     });
 
     describe('error snippet', () => {
-        it('should be rendered in preformatted tags', () => {
+        it('should be rendered in div tags', () => {
             const error = {snippet: `\x1B[90m   . | // /some-file-path.js\x1B[39m")}
                 . |
                 9 | some line
@@ -113,9 +113,9 @@ describe('<StateError/> component', () => {
             const component = mkStateErrorComponent({result: {error}});
             component.find('.details__summary').last().simulate('click');
 
-            assert.isTrue(component.find('.details__content').html().startsWith('<div class="details__content"><pre>'));
+            assert.isTrue(component.find('.details__content').html().startsWith('<div class="details__content"><div>'));
             assert.isTrue(component.find('.details__content').html().includes('some line'));
-            assert.isTrue(component.find('.details__content').html().endsWith('</pre></div>'));
+            assert.isTrue(component.find('.details__content').html().endsWith('</div></div>'));
         });
 
         it('should resolve colors', () => {
diff --git a/test/unit/lib/static/modules/middlewares/metrika.js b/test/unit/lib/static/modules/middlewares/metrika.js
index c0a0942b1..b9ed4fffa 100644
--- a/test/unit/lib/static/modules/middlewares/metrika.js
+++ b/test/unit/lib/static/modules/middlewares/metrika.js
@@ -1,23 +1,18 @@
 import YandexMetrika from 'lib/static/modules/yandex-metrika';
 import actionNames from 'lib/static/modules/action-names';
-import webVitals from 'lib/static/modules/web-vitals';
+import proxyquire from 'proxyquire';
 
 // eslint-disable-next-line
 globalThis.performance = globalThis.performance; // node v14 stub
 
 describe('lib/static/modules/middlewares/metrika', () => {
     const sandbox = sinon.sandbox.create();
-    let next, metrikaMiddleware;
+    let next, metrikaMiddleware, measurePerformanceStub;
 
     const mkStore_ = (state = {}) => {
         return {getState: sandbox.stub().returns(state)};
     };
 
-    const requireUncached_ = (module) => {
-        delete require.cache[require.resolve(module)];
-        return require(module).default;
-    };
-
     const initReportWithMetrikaCounter = ({eventName = actionNames.INIT_GUI_REPORT, store = mkStore_()} = {}) => {
         const payload = {
             config: {
@@ -31,15 +26,18 @@ describe('lib/static/modules/middlewares/metrika', () => {
 
     beforeEach(() => {
         next = sandbox.stub();
+        measurePerformanceStub = sandbox.stub();
 
-        metrikaMiddleware = requireUncached_('lib/static/modules/middlewares/metrika');
+        metrikaMiddleware = proxyquire.noPreserveCache().noCallThru()('lib/static/modules/middlewares/metrika', {
+            '../web-vitals': {
+                measurePerformance: measurePerformanceStub
+            }
+        }).default;
 
         sandbox.stub(YandexMetrika, 'create').returns(Object.create(YandexMetrika.prototype));
         sandbox.stub(YandexMetrika.prototype, 'acceptScreenshot');
         sandbox.stub(YandexMetrika.prototype, 'acceptOpenedScreenshots');
         sandbox.stub(YandexMetrika.prototype, 'sendVisitParams');
-
-        sandbox.stub(webVitals, 'measurePerformance');
     });
 
     afterEach(() => sandbox.restore());
@@ -84,7 +82,7 @@ describe('lib/static/modules/middlewares/metrika', () => {
 
                     metrikaMiddleware(YandexMetrika)(store)(next)(action);
 
-                    assert.notCalled(webVitals.measurePerformance);
+                    assert.notCalled(measurePerformanceStub);
                 });
             });
 
@@ -125,7 +123,7 @@ describe('lib/static/modules/middlewares/metrika', () => {
                 describe('measure site performance', () => {
                     it('should send some performance info to y.metrika with rounded value', () => {
                         const action = {type: eventName, payload};
-                        webVitals.measurePerformance.callsFake(cb => cb({name: 'XXX', value: 100.999}));
+                        measurePerformanceStub.callsFake(cb => cb({name: 'XXX', value: 100.999}));
 
                         metrikaMiddleware(YandexMetrika)(store)(next)(action);
 
@@ -134,7 +132,7 @@ describe('lib/static/modules/middlewares/metrika', () => {
 
                     it('should send "CLS" performance info to y.metrika with multiplied by 1000 value', () => {
                         const action = {type: eventName, payload};
-                        webVitals.measurePerformance.callsFake(cb => cb({name: 'CLS', value: 0.99999}));
+                        measurePerformanceStub.callsFake(cb => cb({name: 'CLS', value: 0.99999}));
 
                         metrikaMiddleware(YandexMetrika)(store)(next)(action);
 
diff --git a/test/unit/lib/static/modules/yandex-metrika.js b/test/unit/lib/static/modules/yandex-metrika.js
index fd635ee43..83086a79d 100644
--- a/test/unit/lib/static/modules/yandex-metrika.js
+++ b/test/unit/lib/static/modules/yandex-metrika.js
@@ -1,4 +1,4 @@
-const YandexMetrika = require('lib/static/modules/yandex-metrika');
+import YandexMetrika from 'lib/static/modules/yandex-metrika';
 
 describe('YandexMetrika', () => {
     const sandbox = sinon.createSandbox();
diff --git a/webpack.common.js b/webpack.common.js
index c4de4521d..925f12041 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -114,12 +114,10 @@ module.exports = {
             new CssMinimizerPlugin(),
             new TerserPlugin({
                 parallel: true,
-                minify: TerserPlugin.uglifyJsMinify,
                 terserOptions: {
                     output: {
                         comments: false
-                    },
-                    annotations: false
+                    }
                 },
                 extractComments: false
             })