diff --git a/lib/static/modules/action-names.ts b/lib/static/modules/action-names.ts
index 1ffb5ad53..5361f5be2 100644
--- a/lib/static/modules/action-names.ts
+++ b/lib/static/modules/action-names.ts
@@ -62,5 +62,6 @@ export default {
     TOGGLE_BROWSER_CHECKBOX: 'TOGGLE_BROWSER_CHECKBOX',
     SUITES_PAGE_SET_CURRENT_SUITE: 'SUITES_PAGE_SET_CURRENT_SUITE',
     SUITES_PAGE_SET_SECTION_EXPANDED: 'SUITES_PAGE_SET_SECTION_EXPANDED',
-    SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED'
+    SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED',
+    VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE: 'VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE'
 } as const;
diff --git a/lib/static/modules/actions/index.js b/lib/static/modules/actions/index.js
index 4054b0bc2..59fd6a466 100644
--- a/lib/static/modules/actions/index.js
+++ b/lib/static/modules/actions/index.js
@@ -15,6 +15,7 @@ import performanceMarks from '../../../constants/performance-marks';
 export * from './static-accepter';
 export * from './suites-page';
 export * from './suites';
+export * from './visual-checks-page';
 
 export const createNotification = (id, status, message, props = {}) => {
     const notificationProps = {
diff --git a/lib/static/modules/actions/visual-checks-page.ts b/lib/static/modules/actions/visual-checks-page.ts
new file mode 100644
index 000000000..553335a1a
--- /dev/null
+++ b/lib/static/modules/actions/visual-checks-page.ts
@@ -0,0 +1,13 @@
+import actionNames from '@/static/modules/action-names';
+import {Action} from '@/static/modules/actions/types';
+
+export type VisualChecksPageSetCurrentNamedImageAction = Action<typeof actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, {
+    namedImageId: string;
+}>;
+
+export const visualChecksPageSetCurrentNamedImage = (namedImageId: string): VisualChecksPageSetCurrentNamedImageAction => {
+    return {type: actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, payload: {namedImageId}};
+};
+
+export type VisualChecksPageAction =
+    | VisualChecksPageSetCurrentNamedImageAction;
diff --git a/lib/static/modules/default-state.ts b/lib/static/modules/default-state.ts
index b97d08a9c..9ca2b983e 100644
--- a/lib/static/modules/default-state.ts
+++ b/lib/static/modules/default-state.ts
@@ -94,7 +94,12 @@ export default Object.assign({config: configDefaults}, {
     },
     app: {
         isInitialized: false,
-        currentSuiteId: null
+        suitesPage: {
+            currentBrowserId: null
+        },
+        visualChecksPage: {
+            currentNamedImageId: null
+        }
     },
     ui: {
         suitesPage: {
diff --git a/lib/static/modules/reducers/index.js b/lib/static/modules/reducers/index.js
index 6867e4cbf..3dc21a5cf 100644
--- a/lib/static/modules/reducers/index.js
+++ b/lib/static/modules/reducers/index.js
@@ -27,6 +27,7 @@ import stopping from './stopping';
 import progressBar from './bottom-progress-bar';
 import staticImageAccepter from './static-image-accepter';
 import suitesPage from './suites-page';
+import visualChecksPage from './visual-checks-page';
 import isInitialized from './is-initialized';
 
 // The order of specifying reducers is important.
@@ -60,5 +61,6 @@ export default reduceReducers(
     plugins,
     progressBar,
     suitesPage,
+    visualChecksPage,
     isInitialized
 );
diff --git a/lib/static/modules/reducers/suites-page.ts b/lib/static/modules/reducers/suites-page.ts
index c6db2ef02..910e5d7a7 100644
--- a/lib/static/modules/reducers/suites-page.ts
+++ b/lib/static/modules/reducers/suites-page.ts
@@ -6,7 +6,7 @@ import {applyStateUpdate} from '@/static/modules/utils/state';
 export default (state: State, action: SuitesPageAction): State => {
     switch (action.type) {
         case actionNames.SUITES_PAGE_SET_CURRENT_SUITE:
-            return applyStateUpdate(state, {app: {currentSuiteId: action.payload.suiteId}}) as State;
+            return applyStateUpdate(state, {app: {suitesPage: {currentBrowserId: action.payload.suiteId}}}) as State;
         case actionNames.SUITES_PAGE_SET_SECTION_EXPANDED: {
             return applyStateUpdate(state, {
                 ui: {
diff --git a/lib/static/modules/reducers/visual-checks-page.ts b/lib/static/modules/reducers/visual-checks-page.ts
new file mode 100644
index 000000000..777d34772
--- /dev/null
+++ b/lib/static/modules/reducers/visual-checks-page.ts
@@ -0,0 +1,13 @@
+import {State} from '@/static/new-ui/types/store';
+import actionNames from '@/static/modules/action-names';
+import {applyStateUpdate} from '@/static/modules/utils/state';
+import {VisualChecksPageAction} from '@/static/modules/actions';
+
+export default (state: State, action: VisualChecksPageAction): State => {
+    switch (action.type) {
+        case actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE:
+            return applyStateUpdate(state, {app: {visualChecksPage: {currentNamedImageId: action.payload.namedImageId}}}) as State;
+        default:
+            return state;
+    }
+};
diff --git a/lib/static/new-ui/components/AttemptPicker/index.tsx b/lib/static/new-ui/components/AttemptPicker/index.tsx
index e21d60667..51d314459 100644
--- a/lib/static/new-ui/components/AttemptPicker/index.tsx
+++ b/lib/static/new-ui/components/AttemptPicker/index.tsx
@@ -46,7 +46,7 @@ function AttemptPickerInternal(props: AttemptPickerInternalProps): ReactNode {
 export const AttemptPicker = connect((state: State) => {
     let resultIds: string[] = [];
     let currentResultId = '';
-    const browserId = state.app.currentSuiteId;
+    const browserId = state.app.suitesPage.currentBrowserId;
 
     if (browserId && state.tree.browsers.byId[browserId]) {
         resultIds = state.tree.browsers.byId[browserId].resultIds;
diff --git a/lib/static/new-ui/components/Card/TextHintCard.module.css b/lib/static/new-ui/components/Card/TextHintCard.module.css
new file mode 100644
index 000000000..e3cfdfc2f
--- /dev/null
+++ b/lib/static/new-ui/components/Card/TextHintCard.module.css
@@ -0,0 +1,11 @@
+.card {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hint {
+    color: var(--g-color-private-black-400);
+    font-weight: 500;
+}
diff --git a/lib/static/new-ui/components/Card/TextHintCard.tsx b/lib/static/new-ui/components/Card/TextHintCard.tsx
new file mode 100644
index 000000000..80b67167f
--- /dev/null
+++ b/lib/static/new-ui/components/Card/TextHintCard.tsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+
+import {Card, CardProps} from '.';
+import styles from './TextHintCard.module.css';
+
+interface TextHintCardProps extends CardProps {
+    hint: string;
+}
+
+export function TextHintCard(props: TextHintCardProps): ReactNode {
+    return <Card className={classNames(styles.card, props.className)}>
+        <span className={styles.hint}>{props.hint}</span>
+    </Card>;
+}
diff --git a/lib/static/new-ui/components/Card/UiCard.module.css b/lib/static/new-ui/components/Card/UiCard.module.css
new file mode 100644
index 000000000..e691bde34
--- /dev/null
+++ b/lib/static/new-ui/components/Card/UiCard.module.css
@@ -0,0 +1,8 @@
+.card {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px 20px 20px;
+    overflow: scroll;
+    position: relative;
+}
diff --git a/lib/static/new-ui/components/Card/UiCard.tsx b/lib/static/new-ui/components/Card/UiCard.tsx
new file mode 100644
index 000000000..6a71096af
--- /dev/null
+++ b/lib/static/new-ui/components/Card/UiCard.tsx
@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+
+import {Card, CardProps} from '.';
+import styles from './UiCard.module.css';
+
+export function UiCard(props: CardProps): ReactNode {
+    return <Card className={classNames(styles.card, props.className)}>{props.children}</Card>;
+}
diff --git a/lib/static/new-ui/components/Card/index.module.css b/lib/static/new-ui/components/Card/index.module.css
index 87848e2f7..29f960a1e 100644
--- a/lib/static/new-ui/components/Card/index.module.css
+++ b/lib/static/new-ui/components/Card/index.module.css
@@ -3,10 +3,8 @@
     position: relative;
 }
 
-.card {
-    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(9, 9, 11, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
-}
-
 .wrapper {
     overflow: hidden;
+    box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(9, 9, 11, 0.05) 0 0 0 1px, rgba(0, 0, 0, 0.05) 0 1px 2px 0;
+    border-radius: 10px;
 }
diff --git a/lib/static/new-ui/components/Card/index.tsx b/lib/static/new-ui/components/Card/index.tsx
index fecc3b7fa..da212b11f 100644
--- a/lib/static/new-ui/components/Card/index.tsx
+++ b/lib/static/new-ui/components/Card/index.tsx
@@ -3,14 +3,14 @@ import classNames from 'classnames';
 
 import styles from './index.module.css';
 
-interface CardProps {
+export interface CardProps {
     className?: string;
     children?: React.ReactNode;
 }
 
 export function Card(props: CardProps): React.ReactNode {
     return <div className={styles.wrapper}>
-        <div className={classNames(styles.commonCard, styles.card, props.className)}>
+        <div className={classNames(styles.commonCard, props.className)}>
             {props.children}
         </div>
     </div>;
diff --git a/lib/static/new-ui/components/SuiteTitle/index.module.css b/lib/static/new-ui/components/SuiteTitle/index.module.css
new file mode 100644
index 000000000..4e9616654
--- /dev/null
+++ b/lib/static/new-ui/components/SuiteTitle/index.module.css
@@ -0,0 +1,73 @@
+.container {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+
+@container (max-width: 500px) {
+    .container {
+        flex-wrap: wrap-reverse;
+    }
+}
+
+.breadcrumbs {
+    font-weight: 500;
+    color: var(--g-color-private-black-400);
+    font-size: 15px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.separator {
+    margin: 0 4px;
+    display: inline-block;
+    width: 16px;
+    position: relative;
+}
+
+.invisible-space {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+}
+
+.content {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+}
+
+.title-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 4px;
+}
+
+.labels-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.label :global(.g-label__content) {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 4px;
+    font-size: 15px;
+}
+
+.pagination-container {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.counter {
+    font-weight: 500;
+    color: var(--g-color-private-black-400);
+    font-size: 15px;
+}
diff --git a/lib/static/new-ui/components/SuiteTitle/index.tsx b/lib/static/new-ui/components/SuiteTitle/index.tsx
new file mode 100644
index 000000000..78f23814e
--- /dev/null
+++ b/lib/static/new-ui/components/SuiteTitle/index.tsx
@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+import {Button, Icon, Label} from '@gravity-ui/uikit';
+import {Camera, ChevronRight, PlanetEarth, ChevronUp, ChevronDown} from '@gravity-ui/icons';
+
+import styles from './index.module.css';
+
+interface SuiteTitleProps {
+    className?: string;
+}
+
+interface SuiteTitlePropsInternal extends SuiteTitleProps {
+    suitePath: string[];
+    browserName: string;
+    stateName?: string;
+    index: number;
+    totalItems: number;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+
+export function SuiteTitle(props: SuiteTitlePropsInternal): ReactNode {
+    const suiteName = props.suitePath[props.suitePath.length - 1];
+    const suitePath = props.suitePath.slice(0, -1);
+
+    return <div className={classNames(styles.container, props.className)}>
+        <div className={styles.content}>
+            <div className={classNames(styles.breadcrumbs)}>
+                {suitePath.map((item, index) => (
+                    <div key={index} className={styles.breadcrumbsItem}>
+                        {item}
+                        {index !== suitePath.length - 1 &&
+                            <div className={styles.separator}>
+                                <ChevronRight height={12}/>
+                                <span className={styles.invisibleSpace}>&nbsp;</span>
+                            </div>}
+                    </div>
+                ))}
+            </div>
+            <div className={styles.titleContainer}>
+                <h2 className={classNames('text-display-1')}>
+                    {suiteName ?? 'Unknown Suite'}
+                </h2>
+                <div className={styles.labelsContainer}>
+                    <Label theme={'normal'} size={'xs'} className={styles.label}><PlanetEarth/>{props.browserName}
+                    </Label>
+                    {props.stateName && <Label theme='utility' size={'xs'} className={classNames(styles.label)}><Camera/>{props.stateName}</Label>}
+                </div>
+            </div>
+        </div>
+        <div className={styles.paginationContainer}>
+            <span className={styles.counter}>{props.index === -1 ? '–' : props.index + 1}/{props.totalItems}</span>
+            <Button view={'flat'} disabled={props.index <= 0} onClick={props.onPrevious}><Icon
+                data={ChevronUp}/></Button>
+            <Button view={'flat'} disabled={props.index < 0 || props.index === props.totalItems - 1} onClick={props.onNext}><Icon
+                data={ChevronDown}/></Button>
+        </div>
+    </div>;
+}
diff --git a/lib/static/new-ui/components/TreeViewItem/index.tsx b/lib/static/new-ui/components/TreeViewItem/index.tsx
index 0f3a3eccd..a2de64e7a 100644
--- a/lib/static/new-ui/components/TreeViewItem/index.tsx
+++ b/lib/static/new-ui/components/TreeViewItem/index.tsx
@@ -26,6 +26,9 @@ interface TreeListItemProps<T> {
 }
 
 export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
+    const indent = props.list.structure.itemsState[props.id].indentation;
+    const hasChildren = (props.list.structure.itemsById[props.id] as {hasChildren?: boolean}).hasChildren;
+
     return <Box
         spacing={{pt: 1}}
     >
@@ -34,7 +37,7 @@ export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
                 [styles['tree-view-item--error']]: props.isFailed
             }])}
             activeOnHover={true}
-            style={{'--indent': props.list.structure.itemsState[props.id].indentation} as React.CSSProperties}
+            style={{'--indent': indent + Number(!hasChildren)} as React.CSSProperties}
             {...getItemRenderState({
                 id: props.id,
                 list: props.list,
diff --git a/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.module.css b/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.module.css
new file mode 100644
index 000000000..c7394f6f3
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.module.css
@@ -0,0 +1,3 @@
+.icon {
+    opacity: .6;
+}
diff --git a/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.tsx b/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.tsx
index 568f60aab..55d8f2156 100644
--- a/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.tsx
+++ b/lib/static/new-ui/features/suites/components/BrowsersSelect/BrowserIcon.tsx
@@ -1,6 +1,8 @@
 import {isString} from 'lodash';
 import React, {ReactNode} from 'react';
 
+import styles from './BrowserIcon.module.css';
+
 const valueToIcon = {
     google: 'chrome',
     chrome: 'chrome',
@@ -19,7 +21,7 @@ const valueToIcon = {
 } as const;
 
 export function BrowserIcon({name: browser}: {name: string}): ReactNode {
-    const getIcon = (iconName: string): ReactNode => <i className={`fa fa-${iconName}`} aria-hidden="true" />;
+    const getIcon = (iconName: string): ReactNode => <i className={`fa fa-${iconName} ${styles.icon}`} aria-hidden="true" />;
 
     if (!isString(browser)) {
         return getIcon('browser');
diff --git a/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx b/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx
index 31037b105..3598e427d 100644
--- a/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx
+++ b/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx
@@ -1,5 +1,5 @@
-import {Globe} from '@gravity-ui/icons';
-import {Button, Flex, Select, SelectRenderControlProps, SelectRenderOption} from '@gravity-ui/uikit';
+import {PlanetEarth} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Select, SelectRenderControlProps, SelectRenderOption} from '@gravity-ui/uikit';
 import React, {useState, useEffect, ReactNode} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
@@ -109,8 +109,8 @@ function BrowsersSelectInternal({browsers, filteredBrowsers, actions}: BrowsersS
     };
 
     const renderControl = ({onClick, onKeyDown, ref}: SelectRenderControlProps): React.JSX.Element => {
-        return <Button ref={ref} onClick={onClick} extraProps={{onKeyDown}} view={'outlined'} style={{width: 28}}>
-            <Globe/>
+        return <Button ref={ref} onClick={onClick} extraProps={{onKeyDown}} view={'outlined'}>
+            <Icon data={PlanetEarth}/>
         </Button>;
     };
 
diff --git a/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx
index e5e4decdb..b29ed13a8 100644
--- a/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx
+++ b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx
@@ -42,7 +42,7 @@ export function CollapsibleSectionInternal(props: CollapsibleSectionInternalProp
 }
 
 export const CollapsibleSection = connect((state: State, props: CollapsibleSectionProps) => {
-    const browserId = state.app.currentSuiteId;
+    const browserId = state.app.suitesPage.currentBrowserId;
     let sectionId = '';
 
     if (browserId && state.tree.browsers.byId[browserId]) {
diff --git a/lib/static/new-ui/features/suites/components/SuiteTitle/index.module.css b/lib/static/new-ui/features/suites/components/SuiteTitle/index.module.css
deleted file mode 100644
index fa41fdf77..000000000
--- a/lib/static/new-ui/features/suites/components/SuiteTitle/index.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.heading {}
-
-.heading:hover .copy-button {
-    opacity: 1;
-}
-
-.separator {
-    margin: 0 4px;
-    display: inline-block;
-    width: 16px;
-    position: relative;
-}
-
-.invisible-space {
-    position: absolute;
-}
-
-.copy-button {
-    margin-left: 8px;
-    opacity: 0;
-    transition: opacity 0.1s ease;
-}
-
-.title-part-wrapper {}
-
-.title-part-wrapper:last-child {
-    align-items: center;
-    display: inline-flex;
-    white-space: nowrap;
-}
diff --git a/lib/static/new-ui/features/suites/components/SuiteTitle/index.tsx b/lib/static/new-ui/features/suites/components/SuiteTitle/index.tsx
deleted file mode 100644
index c9cd05ffc..000000000
--- a/lib/static/new-ui/features/suites/components/SuiteTitle/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {ReactNode} from 'react';
-import {connect} from 'react-redux';
-import {State} from '@/static/new-ui/types/store';
-import {ClipboardButton, Flex} from '@gravity-ui/uikit';
-import {ChevronRight} from '@gravity-ui/icons';
-
-import styles from './index.module.css';
-import classNames from 'classnames';
-
-interface SuiteTitleProps {
-    className?: string;
-}
-
-interface SuiteTitlePropsInternal extends SuiteTitleProps {
-    suitePath: string[];
-}
-
-function SuiteTitleInternal(props: SuiteTitlePropsInternal): ReactNode {
-    return <Flex wrap={true}>
-        <h2 className={classNames('text-display-1', styles.heading, props.className)}>
-            {props.suitePath.map((item, index) => (
-                <span key={index} className={styles.titlePartWrapper}>
-                    {item}
-                    {index !== props.suitePath.length - 1 ?
-                        <div className={styles.separator}><ChevronRight /><span className={styles.invisibleSpace}>&nbsp;</span></div> :
-                        <ClipboardButton className={styles.copyButton} text={props.suitePath.join(' ')} view={'flat'} size={'s'} />}
-                </span>
-            ))}
-        </h2>
-    </Flex>;
-}
-
-export const SuiteTitle = connect((state: State) => {
-    let suitePath: string[] = [];
-    const browserId = state.app.currentSuiteId;
-
-    if (browserId && state.tree.browsers.byId[browserId]) {
-        const browserName = state.tree.browsers.byId[browserId].name;
-        const suiteId = state.tree.browsers.byId[browserId].parentId;
-
-        suitePath = [...state.tree.suites.byId[suiteId].suitePath, browserName];
-    }
-
-    return {suitePath};
-})(SuiteTitleInternal);
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
index c05519eb9..aed678de5 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
@@ -16,18 +16,12 @@
 }
 
 .card {
-    background-color: #fff;
-    display: flex;
-    flex-direction: column;
-    padding: 0 20px 20px 20px;
-    overflow: hidden;
-    position: relative;
     height: calc(100vh - 20px);
 }
 
 .card__title {
-    margin-bottom: 8px !important;
-    padding-top: 15px;
+    margin-bottom: 8px;
+    padding-top: 20px;
 }
 
 .tree-view-card {
@@ -37,6 +31,7 @@
 .test-view-card {
     gap: 12px;
     overflow: scroll;
+    container-type: size;
 }
 
 .sticky-header {
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
index 8e8544039..0d3928d03 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
@@ -1,33 +1,41 @@
 import {Flex} from '@gravity-ui/uikit';
+import classNames from 'classnames';
 import React, {ReactNode} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
+import {TestSteps} from '@/static/new-ui/features/suites/components/TestSteps';
+import {UiCard} from '@/static/new-ui/components/Card/UiCard';
+import {getCurrentResult} from '@/static/new-ui/features/suites/selectors';
+import {getTreeViewItems} from '@/static/new-ui/features/suites/components/SuitesTreeView/selectors';
 import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
 import {TestNameFilter} from '@/static/new-ui/features/suites/components/TestNameFilter';
 import {SuitesTreeView} from '@/static/new-ui/features/suites/components/SuitesTreeView';
 import {TestStatusFilter} from '@/static/new-ui/features/suites/components/TestStatusFilter';
 import {BrowsersSelect} from '@/static/new-ui/features/suites/components/BrowsersSelect';
-import {SuiteTitle} from '@/static/new-ui/features/suites/components/SuiteTitle';
+import {SuiteTitle} from '../../../../components/SuiteTitle';
 import * as actions from '@/static/modules/actions';
 import {CollapsibleSection} from '@/static/new-ui/features/suites/components/CollapsibleSection';
 import {MetaInfo} from '@/static/new-ui/components/MetaInfo';
-import {State} from '@/static/new-ui/types/store';
-import {Card} from '@/static/new-ui/components/Card';
+import {ResultEntity, State} from '@/static/new-ui/types/store';
 import {AttemptPicker} from '../../../../components/AttemptPicker';
+import {TextHintCard} from '@/static/new-ui/components/Card/TextHintCard';
 
 import styles from './index.module.css';
-import classNames from 'classnames';
-import {TestSteps} from '@/static/new-ui/features/suites/components/TestSteps';
 
 interface SuitesPageProps {
     actions: typeof actions;
-    currentResultId: string;
+    currentResult: ResultEntity | null;
+    visibleBrowserIds: string[];
 }
 
-function SuitesPageInternal(props: SuitesPageProps): ReactNode {
+function SuitesPageInternal({currentResult, actions, visibleBrowserIds}: SuitesPageProps): ReactNode {
+    const currentIndex = visibleBrowserIds.indexOf(currentResult?.parentId as string);
+    const onPreviousSuiteHandler = (): void => void actions.suitesPageSetCurrentSuite(visibleBrowserIds[currentIndex - 1]);
+    const onNextSuiteHandler = (): void => void actions.suitesPageSetCurrentSuite(visibleBrowserIds[currentIndex + 1]);
+
     return <SplitViewLayout sections={[
-        <Card key='tree-view' className={classNames(styles.card, styles.treeViewCard)}>
+        <UiCard key='tree-view' className={classNames(styles.card, styles.treeViewCard)}>
             <h2 className={classNames('text-display-1', styles['card__title'])}>Suites</h2>
             <Flex gap={2}>
                 <TestNameFilter/>
@@ -35,33 +43,36 @@ function SuitesPageInternal(props: SuitesPageProps): ReactNode {
             </Flex>
             <TestStatusFilter/>
             <SuitesTreeView/>
-        </Card>,
-        <Card key='test-view' className={classNames(styles.card, styles.testViewCard)}>
-            <div className={styles.stickyHeader}>
-                <SuiteTitle className={styles['card__title']} />
-                <AttemptPicker onChange={(browserId, _, retryIndex): unknown => props.actions.changeTestRetry({browserId, retryIndex})} />
-            </div>
-            <CollapsibleSection className={styles['collapsible-section-overview']} title={'Overview'} body={props.currentResultId && <div className={styles['collapsible-section__body']}>
-                <MetaInfo resultId={props.currentResultId} />
-            </div>} id={'overview'}/>
-            <TestSteps />
-        </Card>
+        </UiCard>,
+        currentResult ?
+            <UiCard key='test-view' className={classNames(styles.card, styles.testViewCard)}>
+                <div className={styles.stickyHeader}>
+                    <SuiteTitle
+                        className={styles['card__title']}
+                        suitePath={currentResult.suitePath}
+                        browserName={currentResult.name}
+                        index={currentIndex}
+                        totalItems={visibleBrowserIds.length}
+                        onNext={onNextSuiteHandler}
+                        onPrevious={onPreviousSuiteHandler} />
+                    <AttemptPicker onChange={(browserId, _, retryIndex): unknown => actions.changeTestRetry({browserId, retryIndex})} />
+                </div>
+                <CollapsibleSection className={styles['collapsible-section-overview']} title={'Overview'} body={currentResult && <div className={styles['collapsible-section__body']}>
+                    <MetaInfo resultId={currentResult.id} />
+                </div>} id={'overview'}/>
+                <TestSteps />
+            </UiCard> :
+            <TextHintCard className={styles.card} hint={'Select a test to see details'}/>
     ]} />;
 }
 
 export const SuitesPage = connect(
     (state: State) => {
-        let resultIds: string[] = [];
-        let currentResultId = '';
-        const browserId = state.app.currentSuiteId;
-
-        if (browserId && state.tree.browsers.byId[browserId]) {
-            resultIds = state.tree.browsers.byId[browserId].resultIds;
-            currentResultId = resultIds[state.tree.browsers.stateById[browserId].retryIndex];
-        }
+        const currentResult = getCurrentResult(state);
 
         return {
-            currentResultId
+            currentResult,
+            visibleBrowserIds: getTreeViewItems(state).visibleBrowserIds
         };
     },
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/types.ts b/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
index a7ae0e80b..1cfb3f237 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
@@ -1,11 +1,6 @@
 import {TestStatus} from '@/constants';
 import {ImageFile} from '@/types';
 
-export interface TreeViewItem<T> {
-    data: T;
-    children?: TreeViewItem<T>[];
-}
-
 export enum TreeViewItemType {
     Suite,
     Browser,
diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css
index dc3005388..396a611c8 100644
--- a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css
+++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css
@@ -75,7 +75,7 @@
         }
 
         .tree-view__item--browser {
-            padding-left: 8px;
+            padding-left: 24px;
         }
 
         .tree-view__item--error {
diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx
index e77a7eab7..02f5bbda9 100644
--- a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx
+++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx
@@ -15,7 +15,6 @@ import {bindActionCreators} from 'redux';
 import * as actions from '@/static/modules/actions';
 import {
     TreeViewBrowserData,
-    TreeViewItem,
     TreeViewItemType,
     TreeViewSuiteData
 } from '@/static/new-ui/features/suites/components/SuitesPage/types';
@@ -30,18 +29,19 @@ import styles from './index.module.css';
 import {TestStatus} from '@/constants';
 import {TreeViewItemIcon} from '../../../../components/TreeViewItemIcon';
 import {getIconByStatus} from '@/static/new-ui/utils';
+import {TreeViewItem} from '@/static/new-ui/types';
 
 interface SuitesTreeViewProps {
     treeViewItems: TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[];
     treeViewExpandedById: Record<string, boolean>;
     actions: typeof actions;
     isInitialized: boolean;
-    currentSuiteId: string | null;
+    currentBrowserId: string | null;
 }
 
 function SuitesTreeViewInternal(props: SuitesTreeViewProps): ReactNode {
     const navigate = useNavigate();
-    const {suiteId} = useParams();
+    const {browserId} = useParams();
 
     const list = useList({
         items: props.treeViewItems,
@@ -74,9 +74,9 @@ function SuitesTreeViewInternal(props: SuitesTreeViewProps): ReactNode {
 
         props.actions.setStrictMatchFilter(false);
 
-        if (suiteId) {
-            props.actions.suitesPageSetCurrentSuite(suiteId);
-            virtualizer.scrollToIndex(list.structure.visibleFlattenIds.indexOf(suiteId), {align: 'start'});
+        if (browserId) {
+            props.actions.suitesPageSetCurrentSuite(browserId);
+            virtualizer.scrollToIndex(list.structure.visibleFlattenIds.indexOf(browserId), {align: 'start'});
         }
     }, [props.isInitialized]);
 
@@ -105,7 +105,7 @@ function SuitesTreeViewInternal(props: SuitesTreeViewProps): ReactNode {
                 >
                     {virtualizedItems.map((virtualRow) => {
                         const item = list.structure.itemsById[virtualRow.key];
-                        const isSelected = item.fullTitle === props.currentSuiteId;
+                        const isSelected = item.fullTitle === props.currentBrowserId;
                         const classes = [
                             styles['tree-view__item'],
                             {
@@ -146,8 +146,8 @@ function SuitesTreeViewInternal(props: SuitesTreeViewProps): ReactNode {
 
 export const SuitesTreeView = connect((state: State) => ({
     isInitialized: state.app.isInitialized,
-    currentSuiteId: state.app.currentSuiteId,
-    treeViewItems: getTreeViewItems(state),
+    currentBrowserId: state.app.suitesPage.currentBrowserId,
+    treeViewItems: getTreeViewItems(state).tree,
     treeViewExpandedById: getTreeViewExpandedById(state)
 }),
 (dispatch) => ({actions: bindActionCreators(actions, dispatch)}))(SuitesTreeViewInternal);
diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/selectors.ts b/lib/static/new-ui/features/suites/components/SuitesTreeView/selectors.ts
index 6634952e0..5d473f80d 100644
--- a/lib/static/new-ui/features/suites/components/SuitesTreeView/selectors.ts
+++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/selectors.ts
@@ -3,13 +3,13 @@ import {get, last} from 'lodash';
 import {
     isImageEntityFail,
     isResultEntityError,
-    isSuiteEntityLeaf,
+    hasBrowsers,
+    hasSuites,
     BrowserEntity,
     SuiteEntity
 } from '@/static/new-ui/types/store';
 import {
     TreeViewBrowserData,
-    TreeViewItem,
     TreeViewItemType,
     TreeViewSuiteData
 } from '@/static/new-ui/features/suites/components/SuitesPage/types';
@@ -25,11 +25,17 @@ import {
 import {trimArray} from '@/common-utils';
 import {ImageFile} from '@/types';
 import {getFullTitleByTitleParts} from '@/static/new-ui/utils';
+import {TreeViewItem} from '@/static/new-ui/types';
+
+interface TreeViewData {
+    tree: TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[];
+    visibleBrowserIds: string[];
+}
 
 // Converts the existing store structure to the one that can be consumed by GravityUI
 export const getTreeViewItems = createSelector(
     [getSuites, getSuitesState, getAllRootSuiteIds, getBrowsers, getBrowsersState, getResults, getImages],
-    (suites, suitesState, rootSuiteIds, browsers, browsersState, results, images): TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[] => {
+    (suites, suitesState, rootSuiteIds, browsers, browsersState, results, images): TreeViewData => {
         const EMPTY_SUITE: TreeViewSuiteData = {
             type: TreeViewItemType.Suite,
             title: '',
@@ -37,6 +43,8 @@ export const getTreeViewItems = createSelector(
             status: TestStatus.IDLE
         };
 
+        const visibleBrowserIds: string[] = [];
+
         const formatBrowser = (browserData: BrowserEntity, parentSuite: TreeViewSuiteData): TreeViewItem<TreeViewBrowserData> | null => {
             // Assuming test in concrete browser always has at least one result, even never launched (idle result)
             const lastResult = results[last(browserData.resultIds) as string];
@@ -66,6 +74,8 @@ export const getTreeViewItems = createSelector(
                 return null;
             }
 
+            visibleBrowserIds.push(data.fullTitle);
+
             return {data};
         };
 
@@ -81,28 +91,31 @@ export const getTreeViewItems = createSelector(
                 return null;
             }
 
-            if (isSuiteEntityLeaf(suiteData)) {
-                return {
-                    data,
-                    children: suiteData.browserIds
-                        .map((browserId) => formatBrowser(browsers[browserId], data))
-                        .filter(Boolean) as TreeViewItem<TreeViewBrowserData>[]
-                };
-            } else {
-                return {
-                    data,
-                    children: suiteData.suiteIds
-                        .map((suiteId) => formatSuite(suites[suiteId], data))
-                        .filter(Boolean) as TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[]
-                };
+            let children: TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[] = [];
+            if (hasBrowsers(suiteData)) {
+                children = suiteData.browserIds
+                    .map((browserId) => formatBrowser(browsers[browserId], data))
+                    .filter(Boolean) as TreeViewItem<TreeViewBrowserData>[];
+            }
+            if (hasSuites(suiteData)) {
+                children = suiteData.suiteIds
+                    .map((suiteId) => formatSuite(suites[suiteId], data))
+                    .filter(Boolean) as TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[];
             }
+
+            return {data, children};
         };
 
-        return rootSuiteIds
+        const tree = rootSuiteIds
             .map((rootId) => {
                 return formatSuite(suites[rootId], EMPTY_SUITE);
             })
             .filter(Boolean) as TreeViewItem<TreeViewSuiteData | TreeViewBrowserData>[];
+
+        return {
+            visibleBrowserIds,
+            tree
+        };
     });
 
 export const getTreeViewExpandedById = createSelector(
diff --git a/lib/static/new-ui/features/suites/components/TestSteps/index.tsx b/lib/static/new-ui/features/suites/components/TestSteps/index.tsx
index 1f4ddb2fb..ccd3623a4 100644
--- a/lib/static/new-ui/features/suites/components/TestSteps/index.tsx
+++ b/lib/static/new-ui/features/suites/components/TestSteps/index.tsx
@@ -15,7 +15,7 @@ import {TestStepArgs} from '@/static/new-ui/features/suites/components/TestStepA
 import {getIconByStatus} from '@/static/new-ui/utils';
 import {ErrorInfo} from '@/static/new-ui/components/ErrorInfo';
 import * as actions from '@/static/modules/actions';
-import {getCurrentResultId} from '@/static/new-ui/store/selectors';
+import {getCurrentResultId} from '@/static/new-ui/features/suites/selectors';
 import {getStepsExpandedById, getTestSteps} from './selectors';
 import {Step, StepType} from './types';
 import {ListItemViewContentType, TreeViewItem} from '../../../../components/TreeViewItem';
diff --git a/lib/static/new-ui/features/suites/components/TestSteps/selectors.ts b/lib/static/new-ui/features/suites/components/TestSteps/selectors.ts
index 06c00db7e..609bb9a9a 100644
--- a/lib/static/new-ui/features/suites/components/TestSteps/selectors.ts
+++ b/lib/static/new-ui/features/suites/components/TestSteps/selectors.ts
@@ -1,5 +1,4 @@
 import {createSelector} from 'reselect';
-import {getCurrentResult, getCurrentResultImages, getExpandedStepsById} from '@/static/new-ui/store/selectors';
 import {AssertViewResult, Attachment, ErrorInfo, Step, StepType} from './types';
 import {TestStepCompressed, TestStepKey} from '@/types';
 import {unstable_ListTreeItemType as ListTreeItemType} from '@gravity-ui/uikit/unstable';
@@ -7,6 +6,11 @@ import {TestStatus} from '@/constants';
 import {isAssertViewError, isImageDiffError, mergeSnippetIntoErrorStack} from '@/common-utils';
 import {traverseTree} from '@/static/new-ui/features/suites/components/TestSteps/utils';
 import {ImageEntityError} from '@/static/new-ui/types/store';
+import {
+    getCurrentResult,
+    getCurrentResultImages,
+    getExpandedStepsById
+} from '@/static/new-ui/features/suites/selectors';
 
 export const getTestSteps = createSelector(
     [getCurrentResult, getCurrentResultImages],
@@ -17,6 +21,8 @@ export const getTestSteps = createSelector(
 
         const formatTestSteps = (steps: TestStepCompressed[], parentId?: string): ListTreeItemType<Step>[] => {
             return steps.map((step, index): ListTreeItemType<Step> => {
+                const hasChildren = Boolean(step[TestStepKey.Children] && step[TestStepKey.Children]?.length > 0);
+
                 const formattedStep: ListTreeItemType<Step> = {
                     id: `${parentId} ${index}`,
                     data: {
@@ -25,12 +31,13 @@ export const getTestSteps = createSelector(
                         duration: step[TestStepKey.Duration],
                         status: step[TestStepKey.IsFailed] ? TestStatus.ERROR : TestStatus.SUCCESS,
                         args: step[TestStepKey.Args],
-                        isGroup: step[TestStepKey.IsGroup]
+                        isGroup: step[TestStepKey.IsGroup],
+                        hasChildren
                     }
                 };
 
-                if (step[TestStepKey.Children] && step[TestStepKey.Children]?.length > 0) {
-                    formattedStep.children = formatTestSteps(step[TestStepKey.Children], formattedStep.id);
+                if (hasChildren) {
+                    formattedStep.children = formatTestSteps(step[TestStepKey.Children] as TestStepCompressed[], formattedStep.id);
                 }
 
                 return formattedStep;
@@ -69,7 +76,8 @@ export const getTestSteps = createSelector(
                     id: `${lastErroredStep.id} error`,
                     data: {
                         type: StepType.Attachment,
-                        title: 'Error'
+                        title: 'Error',
+                        hasChildren: true
                     } satisfies Attachment,
                     children: [errorAttachment]
                 });
@@ -92,7 +100,11 @@ export const getTestSteps = createSelector(
                 }
             });
 
-            if (!matchedStep) {
+            if (matchedStep) {
+                if (matchedStep.data.type === StepType.Action) {
+                    matchedStep.data.hasChildren = true;
+                }
+            } else {
                 matchedStep = {
                     id: `${image.id} assertView`,
                     data: {
@@ -100,7 +112,8 @@ export const getTestSteps = createSelector(
                         title: 'assertView',
                         status: image.status,
                         args: [image.stateName],
-                        isGroup: false
+                        isGroup: false,
+                        hasChildren: true
                     }
                 };
                 steps.push(matchedStep);
@@ -119,7 +132,8 @@ export const getTestSteps = createSelector(
                     id: `${image.id} assertView error`,
                     data: {
                         type: StepType.Attachment,
-                        title: 'Error'
+                        title: 'Error',
+                        hasChildren: true
                     } satisfies Attachment,
                     children: [errorInfo]
                 };
@@ -148,7 +162,8 @@ export const getTestSteps = createSelector(
                     id: `${matchedStep.id} attachment`,
                     data: {
                         type: StepType.Attachment,
-                        title: 'Screenshots'
+                        title: 'Screenshots',
+                        hasChildren: true
                     },
                     children: [imageStep]
                 });
@@ -164,7 +179,8 @@ export const getTestSteps = createSelector(
                 id: 'page-screenshot',
                 data: {
                     type: StepType.Attachment,
-                    title: 'Page Screenshot'
+                    title: 'Page Screenshot',
+                    hasChildren: true
                 },
                 children: [{
                     id: 'page-screenshot-image',
diff --git a/lib/static/new-ui/features/suites/components/TestSteps/types.ts b/lib/static/new-ui/features/suites/components/TestSteps/types.ts
index 3887420ab..6f388bd65 100644
--- a/lib/static/new-ui/features/suites/components/TestSteps/types.ts
+++ b/lib/static/new-ui/features/suites/components/TestSteps/types.ts
@@ -17,11 +17,13 @@ export interface Action {
     args: string[];
     duration?: number;
     isGroup: boolean;
+    hasChildren: boolean;
 }
 
 export interface Attachment {
     type: StepType.Attachment;
     title: string;
+    hasChildren: boolean;
 }
 
 export interface ErrorInfo {
diff --git a/lib/static/new-ui/features/suites/selectors.ts b/lib/static/new-ui/features/suites/selectors.ts
new file mode 100644
index 000000000..c662f47a0
--- /dev/null
+++ b/lib/static/new-ui/features/suites/selectors.ts
@@ -0,0 +1,34 @@
+import {ImageEntity, ResultEntity, State} from '@/static/new-ui/types/store';
+
+export const getCurrentResultId = (state: State): string | null => {
+    const browserId = state.app.suitesPage.currentBrowserId;
+    if (!browserId) {
+        return null;
+    }
+
+    const resultIds = state.tree.browsers.byId[browserId].resultIds;
+
+    return resultIds[state.tree.browsers.stateById[browserId].retryIndex];
+};
+
+export const getCurrentResult = (state: State): ResultEntity | null => {
+    const resultId = getCurrentResultId(state);
+
+    if (!resultId) {
+        return null;
+    }
+
+    return state.tree.results.byId[resultId];
+};
+
+export const getExpandedStepsById = (state: State): Record<string, boolean> => {
+    const resultId = getCurrentResultId(state);
+
+    return resultId ? state.ui.suitesPage.expandedStepsByResultId[resultId] ?? {} : {};
+};
+
+export const getCurrentResultImages = (state: State): ImageEntity[] => {
+    const result = getCurrentResult(state);
+
+    return result?.imageIds.map(imageId => state.tree.images.byId[imageId]) ?? [];
+};
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage.tsx
deleted file mode 100644
index 1ff92dc0a..000000000
--- a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React, {ReactNode} from 'react';
-import {Box} from '@gravity-ui/uikit';
-
-export function VisualChecksPage(): ReactNode {
-    return <Box spacing={{p: 2}}>
-        <h2 className="text-display-1">Visual Checks</h2>
-    </Box>;
-}
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.module.css b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.module.css
new file mode 100644
index 000000000..5f48448b9
--- /dev/null
+++ b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.module.css
@@ -0,0 +1,8 @@
+.card {
+    height: calc(100vh - 20px);
+}
+
+.card__title {
+    margin-bottom: 8px;
+    padding-top: 20px;
+}
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx
new file mode 100644
index 000000000..ef9c49ed4
--- /dev/null
+++ b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx
@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
+import {ImageEntity, State} from '@/static/new-ui/types/store';
+import * as actions from '@/static/modules/actions';
+import {UiCard} from '@/static/new-ui/components/Card/UiCard';
+import {
+    getCurrentImage,
+    getCurrentNamedImage,
+    getVisibleNamedImageIds,
+    NamedImageEntity
+} from '@/static/new-ui/features/visual-checks/selectors';
+import {SuiteTitle} from '@/static/new-ui/components/SuiteTitle';
+import {AssertViewResult} from '@/static/new-ui/components/AssertViewResult';
+import styles from './index.module.css';
+
+interface VisualChecksPageProps {
+    currentNamedImage: NamedImageEntity | null;
+    currentImage: ImageEntity | null;
+    visibleNamedImageIds: string[];
+    actions: typeof actions;
+}
+
+export function VisualChecksPageInternal({currentNamedImage, currentImage, visibleNamedImageIds, actions}: VisualChecksPageProps): ReactNode {
+    const currentNamedImageIndex = visibleNamedImageIds.indexOf(currentNamedImage?.id as string);
+    const onPreviousImageHandler = (): void => void actions.visualChecksPageSetCurrentNamedImage(visibleNamedImageIds[currentNamedImageIndex - 1]);
+    const onNextImageHandler = (): void => void actions.visualChecksPageSetCurrentNamedImage(visibleNamedImageIds[currentNamedImageIndex + 1]);
+
+    return <SplitViewLayout sections={[
+        <UiCard key="tree-view" className={classNames(styles.card, styles.treeViewCard)}>
+            <h2 className={classNames('text-display-1', styles['card__title'])}>Visual Checks</h2>
+        </UiCard>,
+        <UiCard key="test-view" className={classNames(styles.card, styles.testViewCard)}>
+            <div className={styles.stickyHeader}>
+                {currentNamedImage && <SuiteTitle
+                    className={styles['card__title']}
+                    suitePath={currentNamedImage.suitePath}
+                    browserName={currentNamedImage.browserName}
+                    index={currentNamedImageIndex}
+                    totalItems={visibleNamedImageIds.length}
+                    onPrevious={onPreviousImageHandler}
+                    stateName={currentNamedImage.stateName}
+                    onNext={onNextImageHandler}/>}
+            </div>
+            {currentImage && <AssertViewResult result={currentImage}/>}
+        </UiCard>
+    ]}/>;
+}
+
+export const VisualChecksPage = connect(
+    (state: State) => {
+        const currentNamedImage = getCurrentNamedImage(state);
+        const currentImage = getCurrentImage(state);
+
+        return {
+            currentNamedImage,
+            currentImage,
+            visibleNamedImageIds: getVisibleNamedImageIds(state)
+        };
+    },
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
+)(VisualChecksPageInternal);
diff --git a/lib/static/new-ui/features/visual-checks/selectors.ts b/lib/static/new-ui/features/visual-checks/selectors.ts
new file mode 100644
index 000000000..24fa07422
--- /dev/null
+++ b/lib/static/new-ui/features/visual-checks/selectors.ts
@@ -0,0 +1,116 @@
+import {createSelector} from 'reselect';
+
+import {getBrowsers, getImages, getResults} from '@/static/new-ui/store/selectors';
+import {TestStatus} from '@/constants';
+import {ImageEntity, State} from '@/static/new-ui/types/store';
+
+/** @note NamedImageEntity describes visual assertion, not bound to specific attempt */
+export interface NamedImageEntity {
+    id: string;
+    suitePath: string[];
+    browserName: string;
+    browserId: string;
+    stateName: string;
+    status: TestStatus;
+    /** Image ids corresponding to other attempts */
+    imageIds: string[];
+}
+
+type NamedImageGroup = Omit<NamedImageEntity, 'imageIds' | 'status'> & {
+    images: (ImageEntity & {timestamp: number})[]
+};
+
+export const getNamedImages = createSelector(
+    [getImages, getBrowsers, getResults],
+    (images, browsers, results): Record<string, NamedImageEntity> => {
+        const imageGroups: Record<string, NamedImageGroup> = {};
+
+        for (const image of Object.values(images)) {
+            const result = results[image.parentId];
+            if (!image.stateName || !result) {
+                continue;
+            }
+
+            const browser = browsers[result.parentId];
+            if (!browser) {
+                continue;
+            }
+
+            const key = `${browser.id} ${image.stateName}`;
+
+            if (!imageGroups[key]) {
+                imageGroups[key] = {
+                    id: key,
+                    browserId: browser.id,
+                    images: [],
+                    suitePath: result.suitePath,
+                    browserName: browser.name,
+                    stateName: image.stateName
+                };
+            }
+
+            imageGroups[key].images.push(Object.assign({}, image, {timestamp: result.timestamp}));
+        }
+
+        const finalGroups: Record<string, NamedImageEntity> = {};
+        for (const [key, group] of Object.entries(imageGroups)) {
+            // We want to drop stateNames that are not present in the last test run. It means that user removed this
+            // stateName from test, so images with such stateName are obsolete.
+            const browser = browsers[group.browserId];
+            const lastResultId = browser.resultIds[browser.resultIds.length - 1];
+            const lastResult = results[lastResultId];
+            if (!lastResult.imageIds.find(imageId => images[imageId].stateName === group.stateName)) {
+                continue;
+            }
+
+            group.images.sort((a, b) => a.timestamp - b.timestamp);
+
+            finalGroups[key] = {
+                id: group.id,
+                suitePath: group.suitePath,
+                browserId: group.browserId,
+                browserName: group.browserName,
+                stateName: group.stateName,
+                imageIds: group.images.map(img => img.id),
+                status: group.images[group.images.length - 1].status
+            };
+        }
+
+        return finalGroups;
+    }
+);
+
+export const getCurrentNamedImage = (state: State): NamedImageEntity | null => {
+    const currentNamedImageId = state.app.visualChecksPage.currentNamedImageId;
+    const namedImages = getNamedImages(state);
+
+    if (!currentNamedImageId) {
+        return Object.values(namedImages)[0];
+    }
+
+    return namedImages[currentNamedImageId];
+};
+
+export const getCurrentImage = (state: State): ImageEntity | null => {
+    const currentNamedImage = getCurrentNamedImage(state);
+    if (!currentNamedImage) {
+        return null;
+    }
+
+    const retryIndex = state.tree.browsers.stateById[currentNamedImage.browserId].retryIndex;
+    const currentImageId = currentNamedImage.imageIds.find(imageId => {
+        const resultId = state.tree.images.byId[imageId].parentId;
+
+        return state.tree.results.byId[resultId].attempt === retryIndex;
+    });
+
+    if (!currentImageId) {
+        return null;
+    }
+
+    return getImages(state)[currentImageId];
+};
+
+export const getVisibleNamedImageIds = createSelector([getNamedImages], (namedImages): string[] => {
+    return Object.values(namedImages).map(namedImage => namedImage.id);
+});
diff --git a/lib/static/new-ui/store/selectors.ts b/lib/static/new-ui/store/selectors.ts
index 74ebbff4c..e858daf57 100644
--- a/lib/static/new-ui/store/selectors.ts
+++ b/lib/static/new-ui/store/selectors.ts
@@ -16,35 +16,3 @@ export const getBrowsersState = (state: State): Record<string, BrowserState> =>
 export const getAllBrowserIds = (state: State): string[] => state.tree.browsers.allIds;
 export const getResults = (state: State): Record<string, ResultEntity> => state.tree.results.byId;
 export const getImages = (state: State): Record<string, ImageEntity> => state.tree.images.byId;
-export const getCurrentResultId = (state: State): string | null => {
-    const browserId = state.app.currentSuiteId;
-    if (!browserId) {
-        return null;
-    }
-
-    const resultIds = state.tree.browsers.byId[browserId].resultIds;
-
-    return resultIds[state.tree.browsers.stateById[browserId].retryIndex];
-};
-
-export const getCurrentResult = (state: State): ResultEntity | null => {
-    const resultId = getCurrentResultId(state);
-
-    if (!resultId) {
-        return null;
-    }
-
-    return state.tree.results.byId[resultId];
-};
-
-export const getExpandedStepsById = (state: State): Record<string, boolean> => {
-    const resultId = getCurrentResultId(state);
-
-    return resultId ? state.ui.suitesPage.expandedStepsByResultId[resultId] ?? {} : {};
-};
-
-export const getCurrentResultImages = (state: State): ImageEntity[] => {
-    const result = getCurrentResult(state);
-
-    return result?.imageIds.map(imageId => state.tree.images.byId[imageId]) ?? [];
-};
diff --git a/lib/static/new-ui/types/index.ts b/lib/static/new-ui/types/index.ts
new file mode 100644
index 000000000..46b3378e4
--- /dev/null
+++ b/lib/static/new-ui/types/index.ts
@@ -0,0 +1,4 @@
+export interface TreeViewItem<T> {
+    data: T;
+    children?: TreeViewItem<T>[];
+}
diff --git a/lib/static/new-ui/types/store.ts b/lib/static/new-ui/types/store.ts
index 57b75bcda..f374849a2 100644
--- a/lib/static/new-ui/types/store.ts
+++ b/lib/static/new-ui/types/store.ts
@@ -21,7 +21,8 @@ export interface SuiteEntityLeaf {
 
 export type SuiteEntity = SuiteEntityNode | SuiteEntityLeaf;
 
-export const isSuiteEntityLeaf = (suite: SuiteEntity): suite is SuiteEntityLeaf => Boolean((suite as SuiteEntityLeaf).browserIds);
+export const hasBrowsers = (suite: SuiteEntity): suite is SuiteEntityLeaf => Boolean((suite as SuiteEntityLeaf).browserIds);
+export const hasSuites = (suite: SuiteEntity): suite is SuiteEntityNode => Boolean((suite as SuiteEntityNode).suiteIds);
 
 export interface BrowserEntity {
     id: string;
@@ -41,6 +42,9 @@ export interface ResultEntityCommon {
     suiteUrl?: string;
     history?: TestStepCompressed[];
     error?: TestError;
+    suitePath: string[];
+    /** @note Browser Name/ID, e.g. `chrome-desktop` */
+    name: string;
 }
 
 export interface ResultEntityError extends ResultEntityCommon {
@@ -128,13 +132,18 @@ export interface TreeEntity {
 export interface State {
     app: {
         isInitialized: boolean;
-        currentSuiteId: string | null;
+        suitesPage: {
+            currentBrowserId: string | null;
+        };
+        visualChecksPage: {
+            currentNamedImageId: string | null;
+        }
     };
     ui: {
         suitesPage: {
             expandedSectionsById: Record<string, boolean>;
             expandedStepsByResultId: Record<string, Record<string, boolean>>;
-        }
+        },
     };
     browsers: BrowserItem[];
     tree: TreeEntity;
diff --git a/lib/static/styles.css b/lib/static/styles.css
index c39757817..92bc3a233 100644
--- a/lib/static/styles.css
+++ b/lib/static/styles.css
@@ -923,12 +923,15 @@ a:active {
 }
 
 /* Gravity UI Font Styles */
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
 .text-display-1 {
     font-family: Jost, sans-serif;
     font-weight: 500;
     font-size: 24px;
     line-height: 28px;
-    margin: 0;
 }
 
 .text-display-2 {
@@ -936,7 +939,6 @@ a:active {
     font-weight: 500;
     font-size: 18px;
     line-height: 24px;
-    margin: 0;
 }
 
 .text-display-3 {
@@ -944,7 +946,6 @@ a:active {
     font-weight: 500;
     font-size: var(--g-text-display-3-font-size);
     line-height: var(--g-text-display-3-line-height);
-    margin: 0;
 }
 
 .text-header-1 {
@@ -952,7 +953,6 @@ a:active {
     font-weight: 500;
     font-size: var(--g-text-header-1-font-size);
     line-height: var(--g-text-header-1-line-height);
-    margin: 0;
 }
 
 .text-subheader-1 {
diff --git a/package-lock.json b/package-lock.json
index 9d1dcd55a..b46da168a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "html-reporter",
-      "version": "10.6.7",
+      "version": "10.7.0",
       "license": "MIT",
       "workspaces": [
         "test/func/fixtures/*",
@@ -63,7 +63,7 @@
         "@babel/preset-react": "^7.22.5",
         "@babel/preset-typescript": "^7.22.5",
         "@gravity-ui/components": "^3.7.0",
-        "@gravity-ui/uikit": "^6.23.1",
+        "@gravity-ui/uikit": "^6.27.2",
         "@playwright/test": "^1.44.1",
         "@react-hook/resize-observer": "^2.0.1",
         "@swc/core": "^1.3.64",
@@ -2862,9 +2862,9 @@
       }
     },
     "node_modules/@gravity-ui/i18n": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.5.1.tgz",
-      "integrity": "sha512-ZvaQtRUf4Yl9zi0+SMzjlDeHp9+p5IXkNu2k6RtW04c+RYKA1jX+umeKNwzft4iR3+KxDlpLX2trTFEW6W7HKQ=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.6.0.tgz",
+      "integrity": "sha512-ftMLGZy7migLEtPkZa8jM6onipIeEOnEg9976RRpg3f39H+Q2bYYAGMjU+NJpWQ90ZDp6ztYLt5WAMEg248tEg=="
     },
     "node_modules/@gravity-ui/icons": {
       "version": "2.10.0",
@@ -2897,12 +2897,12 @@
       }
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.23.1.tgz",
-      "integrity": "sha512-hR/ckbTlmW9xuFzcjvdCBHhsH0MP1LOdCwylZQnZjUIiismExymQBeWFDpI51OFTas6aZS8jWmkRlKRMzAsKmw==",
+      "version": "6.27.2",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.27.2.tgz",
+      "integrity": "sha512-aDLEcGMjVQF4y/REjODem8O2vL3e3xeKp84V/08I7cATD9lqkzArj+pAsRkX3QfOtqB+uJTSMh2MRLoPtk4fdg==",
       "dependencies": {
         "@bem-react/classname": "^1.6.0",
-        "@gravity-ui/i18n": "^1.3.0",
+        "@gravity-ui/i18n": "^1.6.0",
         "@gravity-ui/icons": "^2.8.1",
         "@popperjs/core": "^2.11.8",
         "blueimp-md5": "^2.19.0",
@@ -31358,9 +31358,9 @@
       }
     },
     "@gravity-ui/i18n": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.5.1.tgz",
-      "integrity": "sha512-ZvaQtRUf4Yl9zi0+SMzjlDeHp9+p5IXkNu2k6RtW04c+RYKA1jX+umeKNwzft4iR3+KxDlpLX2trTFEW6W7HKQ=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.6.0.tgz",
+      "integrity": "sha512-ftMLGZy7migLEtPkZa8jM6onipIeEOnEg9976RRpg3f39H+Q2bYYAGMjU+NJpWQ90ZDp6ztYLt5WAMEg248tEg=="
     },
     "@gravity-ui/icons": {
       "version": "2.10.0",
@@ -31378,12 +31378,12 @@
       }
     },
     "@gravity-ui/uikit": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.23.1.tgz",
-      "integrity": "sha512-hR/ckbTlmW9xuFzcjvdCBHhsH0MP1LOdCwylZQnZjUIiismExymQBeWFDpI51OFTas6aZS8jWmkRlKRMzAsKmw==",
+      "version": "6.27.2",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.27.2.tgz",
+      "integrity": "sha512-aDLEcGMjVQF4y/REjODem8O2vL3e3xeKp84V/08I7cATD9lqkzArj+pAsRkX3QfOtqB+uJTSMh2MRLoPtk4fdg==",
       "requires": {
         "@bem-react/classname": "^1.6.0",
-        "@gravity-ui/i18n": "^1.3.0",
+        "@gravity-ui/i18n": "^1.6.0",
         "@gravity-ui/icons": "^2.8.1",
         "@popperjs/core": "^2.11.8",
         "blueimp-md5": "^2.19.0",
diff --git a/package.json b/package.json
index 436dd6cd9..2da169156 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@gravity-ui/components": "^3.7.0",
-    "@gravity-ui/uikit": "^6.23.1",
+    "@gravity-ui/uikit": "^6.27.2",
     "@playwright/test": "^1.44.1",
     "@react-hook/resize-observer": "^2.0.1",
     "@swc/core": "^1.3.64",
diff --git a/test/unit/lib/static/components/controls/menu-bar.jsx b/test/unit/lib/static/components/controls/menu-bar.jsx
index ad98ca7ed..25ff78c70 100644
--- a/test/unit/lib/static/components/controls/menu-bar.jsx
+++ b/test/unit/lib/static/components/controls/menu-bar.jsx
@@ -11,7 +11,7 @@ describe('<MenuBar />', () => {
             initialState: {apiValues: {extraItems: {some: 'link'}}}
         });
 
-        await user.click(component.getByRole('button'));
+        await user.click(component.getByTestId('menu-bar').querySelector('button'));
 
         expect(component.getByText('some')).to.exist;
         expect(component.getByText('some').href).to.equal('http://localhost/link');
@@ -22,6 +22,6 @@ describe('<MenuBar />', () => {
             initialState: {apiValues: {extraItems: {}}}
         });
 
-        expect(component.queryByRole('button')).to.not.exist;
+        expect(component.queryByTestId('menu-bar')).to.not.exist;
     });
 });
diff --git a/test/unit/lib/static/utils.tsx b/test/unit/lib/static/utils.tsx
index 721599ccd..d72ff0ae4 100644
--- a/test/unit/lib/static/utils.tsx
+++ b/test/unit/lib/static/utils.tsx
@@ -101,7 +101,9 @@ export const addResultToTree = ({tree, suiteName, browserName, attempt, metaInfo
         imageIds: [],
         metaInfo,
         status: TestStatus.IDLE,
-        timestamp: 0
+        timestamp: 0,
+        suitePath: [],
+        name: browserName
     };
     tree.results.stateById[fullId] = {
         matchedSelectedGroup: false