diff --git a/lib/static/constants/sort-tests.ts b/lib/static/constants/sort-tests.ts
new file mode 100644
index 00000000..ec5e7c2a
--- /dev/null
+++ b/lib/static/constants/sort-tests.ts
@@ -0,0 +1,5 @@
+import {SortByExpression, SortType} from '@/static/new-ui/types/store';
+
+export const SORT_BY_NAME: SortByExpression = {id: 'by-name', label: 'Name', type: SortType.ByName};
+export const SORT_BY_FAILED_RETRIES: SortByExpression = {id: 'by-failed-runs', label: 'Failed runs count', type: SortType.ByFailedRuns};
+export const SORT_BY_TESTS_COUNT: SortByExpression = {id: 'by-tests-count', label: 'Tests count', type: SortType.ByTestsCount};
diff --git a/lib/static/modules/action-names.ts b/lib/static/modules/action-names.ts
index be76a25e..6b6bd440 100644
--- a/lib/static/modules/action-names.ts
+++ b/lib/static/modules/action-names.ts
@@ -69,11 +69,14 @@ export default {
     SUITES_PAGE_SET_ALL_TREE_NODES: 'SUITES_PAGE_SET_ALL_TREE_NODES',
     SUITES_PAGE_REVEAL_TREE_NODE: 'SUITES_PAGE_REVEAL_TREE_NODE',
     SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED',
+    SUITES_PAGE_SET_TREE_VIEW_MODE: 'SUITES_PAGE_SET_TREE_VIEW_MODE',
     VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE: 'VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE',
     UPDATE_LOADING_PROGRESS: 'UPDATE_LOADING_PROGRESS',
     UPDATE_LOADING_VISIBILITY: 'UPDATE_LOADING_VISIBILITY',
     UPDATE_LOADING_TITLE: 'UPDATE_LOADING_TITLE',
     UPDATE_LOADING_IS_IN_PROGRESS: 'UPDATE_LOADING_IS_IN_PROGRESS',
     SELECT_ALL: 'SELECT_ALL',
-    DESELECT_ALL: 'DESELECT_ALL'
+    DESELECT_ALL: 'DESELECT_ALL',
+    SORT_TESTS_SET_CURRENT_EXPRESSION: 'SORT_TESTS_SET_CURRENT_EXPRESSION',
+    SORT_TESTS_SET_DIRECTION: 'SORT_TESTS_SET_DIRECTION'
 } as const;
diff --git a/lib/static/modules/actions/sort-tests.ts b/lib/static/modules/actions/sort-tests.ts
new file mode 100644
index 00000000..0b9087cb
--- /dev/null
+++ b/lib/static/modules/actions/sort-tests.ts
@@ -0,0 +1,19 @@
+import actionNames from '@/static/modules/action-names';
+import {Action} from '@/static/modules/actions/types';
+import {SortDirection} from '@/static/new-ui/types/store';
+
+type SetCurrentSortByExpressionAction = Action<typeof actionNames.SORT_TESTS_SET_CURRENT_EXPRESSION, {
+    expressionIds: string[];
+}>;
+export const setCurrentSortByExpression = (payload: SetCurrentSortByExpressionAction['payload']): SetCurrentSortByExpressionAction =>
+    ({type: actionNames.SORT_TESTS_SET_CURRENT_EXPRESSION, payload});
+
+type SetSortByDirectionAction = Action<typeof actionNames.SORT_TESTS_SET_DIRECTION, {
+    direction: SortDirection
+}>;
+export const setSortByDirection = (payload: SetSortByDirectionAction['payload']): SetSortByDirectionAction =>
+    ({type: actionNames.SORT_TESTS_SET_DIRECTION, payload});
+
+export type SortTestsAction =
+    | SetCurrentSortByExpressionAction
+    | SetSortByDirectionAction;
diff --git a/lib/static/modules/actions/suites-page.ts b/lib/static/modules/actions/suites-page.ts
index e3332800..7c918eed 100644
--- a/lib/static/modules/actions/suites-page.ts
+++ b/lib/static/modules/actions/suites-page.ts
@@ -1,5 +1,6 @@
 import actionNames from '@/static/modules/action-names';
 import {Action} from '@/static/modules/actions/types';
+import {TreeViewMode} from '@/static/new-ui/types/store';
 
 export type SuitesPageSetCurrentTreeNodeAction = Action<typeof actionNames.SUITES_PAGE_SET_CURRENT_SUITE, Partial<{
     treeNodeId: string;
@@ -43,10 +44,17 @@ type SetStepsExpandedStateAction = Action<typeof actionNames.SUITES_PAGE_SET_STE
 export const setStepsExpandedState = (payload: SetStepsExpandedStateAction['payload']): SetStepsExpandedStateAction =>
     ({type: actionNames.SUITES_PAGE_SET_STEPS_EXPANDED, payload});
 
+type SetTreeViewModeAction = Action<typeof actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE, {
+    treeViewMode: TreeViewMode;
+}>;
+export const setTreeViewMode = (payload: SetTreeViewModeAction['payload']): SetTreeViewModeAction =>
+    ({type: actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE, payload});
+
 export type SuitesPageAction =
     | SetTreeNodeExpandedStateAction
     | SetAllTreeNodesStateAction
     | SuitesPageSetCurrentTreeNodeAction
     | SetSectionExpandedStateAction
     | SetStepsExpandedStateAction
-    | RevealTreeNodeAction;
+    | RevealTreeNodeAction
+    | SetTreeViewModeAction;
diff --git a/lib/static/modules/actions/types.ts b/lib/static/modules/actions/types.ts
index d90ad9e6..1c4bb3f1 100644
--- a/lib/static/modules/actions/types.ts
+++ b/lib/static/modules/actions/types.ts
@@ -7,6 +7,7 @@ import {ThunkAction} from 'redux-thunk';
 import {State} from '@/static/new-ui/types/store';
 import {LifecycleAction} from '@/static/modules/actions/lifecycle';
 import {SuitesPageAction} from '@/static/modules/actions/suites-page';
+import {SortTestsAction} from '@/static/modules/actions/sort-tests';
 
 export type {Dispatch} from 'redux';
 
@@ -22,4 +23,5 @@ export type AppThunk<ReturnType = Promise<void>> = ThunkAction<ReturnType, State
 export type SomeAction =
     | GroupTestsAction
     | LifecycleAction
-    | SuitesPageAction;
+    | SuitesPageAction
+    | SortTestsAction;
diff --git a/lib/static/modules/default-state.ts b/lib/static/modules/default-state.ts
index 08144cf0..703d20cd 100644
--- a/lib/static/modules/default-state.ts
+++ b/lib/static/modules/default-state.ts
@@ -4,7 +4,7 @@ import {DiffModes} from '../../constants/diff-modes';
 import {EXPAND_ERRORS} from '../../constants/expand-modes';
 import {RESULT_KEYS} from '../../constants/group-tests';
 import {ToolName} from '../../constants';
-import {State} from '@/static/new-ui/types/store';
+import {SortDirection, State, TreeViewMode} from '@/static/new-ui/types/store';
 
 export default Object.assign({config: configDefaults}, {
     gui: true,
@@ -121,10 +121,16 @@ export default Object.assign({config: configDefaults}, {
             availableSections: [],
             availableExpressions: [],
             currentExpressionIds: []
+        },
+        sortTestsData: {
+            availableExpressions: [],
+            currentExpressionIds: [],
+            currentDirection: SortDirection.Asc
         }
     },
     ui: {
         suitesPage: {
+            treeViewMode: TreeViewMode.Tree,
             retryIndexByTreeNodeId: {},
             expandedSectionsById: {},
             expandedStepsByResultId: {},
diff --git a/lib/static/modules/reducers/index.js b/lib/static/modules/reducers/index.js
index dd613226..7866f9fa 100644
--- a/lib/static/modules/reducers/index.js
+++ b/lib/static/modules/reducers/index.js
@@ -30,6 +30,7 @@ import suitesPage from './suites-page';
 import visualChecksPage from './visual-checks-page';
 import isInitialized from './is-initialized';
 import newUiGroupedTests from './new-ui-grouped-tests';
+import sortTests from './sort-tests';
 
 // The order of specifying reducers is important.
 // At the top specify reducers that does not depend on other state fields.
@@ -60,6 +61,7 @@ export default reduceReducers(
     tree,
     groupedTests,
     newUiGroupedTests,
+    sortTests,
     plugins,
     progressBar,
     suitesPage,
diff --git a/lib/static/modules/reducers/new-ui-grouped-tests/index.ts b/lib/static/modules/reducers/new-ui-grouped-tests/index.ts
index 74950527..024c91fc 100644
--- a/lib/static/modules/reducers/new-ui-grouped-tests/index.ts
+++ b/lib/static/modules/reducers/new-ui-grouped-tests/index.ts
@@ -16,10 +16,10 @@ export default (state: State, action: SomeAction): State => {
         case actionNames.INIT_STATIC_REPORT: {
             const availableSections: GroupBySection[] = [{
                 id: 'meta',
-                label: 'meta'
+                label: 'Meta'
             }, {
                 id: 'error',
-                label: 'error'
+                label: 'Error'
             }];
 
             const availableExpressions: GroupByExpression[] = [];
diff --git a/lib/static/modules/reducers/new-ui-grouped-tests/utils.ts b/lib/static/modules/reducers/new-ui-grouped-tests/utils.ts
index 7e571d9e..a62d982a 100644
--- a/lib/static/modules/reducers/new-ui-grouped-tests/utils.ts
+++ b/lib/static/modules/reducers/new-ui-grouped-tests/utils.ts
@@ -12,6 +12,7 @@ import {isAssertViewError} from '@/common-utils';
 import stripAnsi from 'strip-ansi';
 import {IMAGE_COMPARISON_FAILED_MESSAGE, TestStatus} from '@/constants';
 import {stringify} from '@/static/new-ui/utils';
+import {EntityType} from '@/static/new-ui/features/suites/components/SuitesPage/types';
 
 const extractErrors = (result: ResultEntity, images: ImageEntity[]): string[] => {
     const errors = new Set<string>();
@@ -48,7 +49,8 @@ const extractErrors = (result: ResultEntity, images: ImageEntity[]): string[] =>
 const groupTestsByMeta = (expr: GroupByMetaExpression, resultsById: Record<string, ResultEntity>): Record<string, GroupEntity> => {
     const DEFAULT_GROUP = `__${GroupByType.Meta}__DEFAULT_GROUP`;
     const results = Object.values(resultsById);
-    const groups: Record<string | symbol, GroupEntity> = {};
+    const groupsById: Record<string | symbol, GroupEntity> = {};
+    const groupingKeyToId: Record<string, string> = {};
     let id = 1;
 
     for (const result of results) {
@@ -59,28 +61,35 @@ const groupTestsByMeta = (expr: GroupByMetaExpression, resultsById: Record<strin
             groupingKey = `${GroupByType.Meta}__${expr.key}__${stringify(result.metaInfo[expr.key])}`;
         }
 
-        if (!groups[groupingKey]) {
-            groups[groupingKey] = {
-                id: id.toString(),
+        if (!groupingKeyToId[groupingKey]) {
+            groupingKeyToId[groupingKey] = id.toString();
+            id++;
+        }
+
+        const groupId = groupingKeyToId[groupingKey];
+        if (!groupsById[groupId]) {
+            groupsById[groupId] = {
+                id: groupId,
                 key: expr.key,
                 label: stringify(result.metaInfo[expr.key]),
                 resultIds: [],
-                browserIds: []
+                browserIds: [],
+                type: EntityType.Group
             };
-            id++;
         }
 
-        groups[groupingKey].resultIds.push(result.id);
-        if (!groups[groupingKey].browserIds.includes(result.parentId)) {
-            groups[groupingKey].browserIds.push(result.parentId);
+        groupsById[groupId].resultIds.push(result.id);
+        if (!groupsById[groupId].browserIds.includes(result.parentId)) {
+            groupsById[groupId].browserIds.push(result.parentId);
         }
     }
 
-    return groups;
+    return groupsById;
 };
 
 const groupTestsByError = (resultsById: Record<string, ResultEntity>, imagesById: Record<string, ImageEntity>, errorPatterns: State['config']['errorPatterns']): Record<string, GroupEntity> => {
-    const groups: Record<string | symbol, GroupEntity> = {};
+    const groupsById: Record<string | symbol, GroupEntity> = {};
+    const groupingKeyToId: Record<string, string> = {};
     const results = Object.values(resultsById);
     let id = 1;
 
@@ -101,25 +110,31 @@ const groupTestsByError = (resultsById: Record<string, ResultEntity>, imagesById
                 groupingKey = `${GroupByType.Error}__${errorText}`;
             }
 
-            if (!groups[groupingKey]) {
-                groups[groupingKey] = {
-                    id: id.toString(),
+            if (!groupingKeyToId[groupingKey]) {
+                groupingKeyToId[groupingKey] = id.toString();
+                id++;
+            }
+
+            const groupId = groupingKeyToId[groupingKey];
+            if (!groupsById[groupId]) {
+                groupsById[groupId] = {
+                    id: groupId,
                     key: 'error',
                     label: stripAnsi(groupLabel),
                     resultIds: [],
-                    browserIds: []
+                    browserIds: [],
+                    type: EntityType.Group
                 };
-                id++;
             }
 
-            groups[groupingKey].resultIds.push(result.id);
-            if (!groups[groupingKey].browserIds.includes(result.parentId)) {
-                groups[groupingKey].browserIds.push(result.parentId);
+            groupsById[groupId].resultIds.push(result.id);
+            if (!groupsById[groupId].browserIds.includes(result.parentId)) {
+                groupsById[groupId].browserIds.push(result.parentId);
             }
         }
     }
 
-    return groups;
+    return groupsById;
 };
 
 export const groupTests = (groupByExpressions: GroupByExpression[], resultsById: Record<string, ResultEntity>, imagesById: Record<string, ImageEntity>, errorPatterns: State['config']['errorPatterns']): Record<string, GroupEntity> => {
diff --git a/lib/static/modules/reducers/sort-tests.ts b/lib/static/modules/reducers/sort-tests.ts
new file mode 100644
index 00000000..1e772233
--- /dev/null
+++ b/lib/static/modules/reducers/sort-tests.ts
@@ -0,0 +1,71 @@
+import {SortByExpression, SortDirection, State} from '@/static/new-ui/types/store';
+import {SomeAction} from '@/static/modules/actions/types';
+import actionNames from '@/static/modules/action-names';
+import {applyStateUpdate} from '@/static/modules/utils';
+import {SORT_BY_FAILED_RETRIES, SORT_BY_NAME, SORT_BY_TESTS_COUNT} from '@/static/constants/sort-tests';
+
+export default (state: State, action: SomeAction): State => {
+    switch (action.type) {
+        case actionNames.INIT_STATIC_REPORT:
+        case actionNames.INIT_GUI_REPORT: {
+            const availableExpressions: SortByExpression[] = [
+                SORT_BY_NAME,
+                SORT_BY_FAILED_RETRIES
+            ];
+
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        availableExpressions,
+                        currentDirection: SortDirection.Asc,
+                        currentExpressionIds: [availableExpressions[0].id]
+                    }
+                }
+            });
+        }
+        case actionNames.SORT_TESTS_SET_CURRENT_EXPRESSION: {
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        currentExpressionIds: action.payload.expressionIds
+                    }
+                }
+            });
+        }
+        case actionNames.SORT_TESTS_SET_DIRECTION: {
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        currentDirection: action.payload.direction
+                    }
+                }
+            });
+        }
+        case actionNames.GROUP_TESTS_SET_CURRENT_EXPRESSION: {
+            let availableExpressions: SortByExpression[];
+
+            if (action.payload.expressionIds.length > 0) {
+                availableExpressions = [
+                    SORT_BY_NAME,
+                    SORT_BY_FAILED_RETRIES,
+                    SORT_BY_TESTS_COUNT
+                ];
+            } else {
+                availableExpressions = [
+                    SORT_BY_NAME,
+                    SORT_BY_FAILED_RETRIES
+                ];
+            }
+
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        availableExpressions
+                    }
+                }
+            });
+        }
+        default:
+            return state;
+    }
+};
diff --git a/lib/static/modules/reducers/suites-page.ts b/lib/static/modules/reducers/suites-page.ts
index d03394ae..d7067663 100644
--- a/lib/static/modules/reducers/suites-page.ts
+++ b/lib/static/modules/reducers/suites-page.ts
@@ -9,10 +9,12 @@ export default (state: State, action: SomeAction): State => {
     switch (action.type) {
         case actionNames.INIT_STATIC_REPORT:
         case actionNames.INIT_GUI_REPORT:
+        case actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE:
+        case actionNames.CHANGE_VIEW_MODE as any: // eslint-disable-line @typescript-eslint/no-explicit-any
         case actionNames.GROUP_TESTS_SET_CURRENT_EXPRESSION: {
             const {allTreeNodeIds} = getTreeViewItems(state);
 
-            const expandedTreeNodesById: Record<string, boolean> = {};
+            const expandedTreeNodesById: Record<string, boolean> = Object.assign({}, state.ui.suitesPage.expandedTreeNodesById);
 
             for (const nodeId of allTreeNodeIds) {
                 expandedTreeNodesById[nodeId] = true;
@@ -20,7 +22,8 @@ export default (state: State, action: SomeAction): State => {
 
             let currentGroupId: string | null | undefined = null;
             let currentTreeNodeId: string | null | undefined;
-            if (action.type === actionNames.GROUP_TESTS_SET_CURRENT_EXPRESSION) {
+            let treeViewMode = state.ui.suitesPage.treeViewMode;
+            if (action.type === actionNames.GROUP_TESTS_SET_CURRENT_EXPRESSION || action.type === actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE) {
                 const {currentBrowserId} = state.app.suitesPage;
                 if (currentBrowserId) {
                     const {tree} = getTreeViewItems(state);
@@ -32,6 +35,10 @@ export default (state: State, action: SomeAction): State => {
                 }
             }
 
+            if (action.type === actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE) {
+                treeViewMode = action.payload.treeViewMode;
+            }
+
             return applyStateUpdate(state, {
                 app: {
                     suitesPage: {
@@ -41,7 +48,8 @@ export default (state: State, action: SomeAction): State => {
                 },
                 ui: {
                     suitesPage: {
-                        expandedTreeNodesById
+                        expandedTreeNodesById,
+                        treeViewMode
                     }
                 }
             });
diff --git a/lib/static/new-ui/components/AdaptiveSelect/index.module.css b/lib/static/new-ui/components/AdaptiveSelect/index.module.css
new file mode 100644
index 00000000..be45856f
--- /dev/null
+++ b/lib/static/new-ui/components/AdaptiveSelect/index.module.css
@@ -0,0 +1,39 @@
+.select-popup {
+    --g-color-text-info: #000;
+
+    font-size: var(--g-text-body-1-font-size);
+}
+
+.select :global(.g-select-control__label) {
+    margin-inline-end: 0;
+}
+
+.selected-option {
+    margin-inline-start: 4px;
+}
+
+.label-icons-container {
+    position: relative;
+    padding-right: 2px;
+}
+
+.label-dot {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 4px;
+    width: 4px;
+    border-radius: 100vh;
+    background-color: var(--g-color-private-red-600-solid);
+}
+
+@container (max-width: 450px) {
+    .select :global(.g-select-control__option-text) {
+        display: none;
+    }
+
+    .label-dot {
+        display: block;
+    }
+}
diff --git a/lib/static/new-ui/components/AdaptiveSelect/index.tsx b/lib/static/new-ui/components/AdaptiveSelect/index.tsx
new file mode 100644
index 00000000..08ab513a
--- /dev/null
+++ b/lib/static/new-ui/components/AdaptiveSelect/index.tsx
@@ -0,0 +1,61 @@
+import {Select, SelectProps, Tooltip} from '@gravity-ui/uikit';
+import React, {ReactElement, ReactNode, useRef} from 'react';
+
+import styles from './index.module.css';
+
+interface AdaptiveSelectProps {
+    currentValue: string[];
+    label: string;
+    // Determines whether select should show dot in its compact view
+    showDot?: boolean;
+    labelIcon: ReactNode;
+    autoClose?: boolean;
+    multiple?: boolean;
+    children: SelectProps['children'];
+}
+
+/* This component implements a select that has 2 states:
+   - Full size: icon + selected value
+   - Compact size: only icon is displayed */
+export function AdaptiveSelect(props: AdaptiveSelectProps): ReactNode {
+    const selectRef = useRef<HTMLButtonElement>(null);
+
+    const onUpdate = (): void => {
+        if (props.autoClose) {
+            selectRef.current?.click();
+        }
+    };
+
+    return <div className={styles.container}>
+        <Tooltip
+            disablePortal={true}
+            content={props.label}
+            contentClassName={styles.tooltip}
+            openDelay={0}
+            placement={'top'}
+        >
+            {/* This wrapper is crucial for the tooltip to position correctly */}
+            <div>
+                <Select
+                    ref={selectRef}
+                    renderSelectedOption={(option): ReactElement => option.title ? <span className={styles.selectedOption}>{option.title}</span> : <></>}
+                    className={styles.select}
+                    popupClassName={styles.selectPopup}
+                    view={'clear'}
+                    label={<>
+                        <div className={styles.labelIconsContainer}>
+                            {props.labelIcon}
+                            {props.showDot && <div className={styles.labelDot}></div>}
+                        </div>
+                    </> as unknown as string}
+                    onUpdate={onUpdate}
+                    getOptionHeight={(option): number => option.data?.height}
+                    multiple={props.multiple}
+                    value={props.currentValue}
+                >
+                    {props.children}
+                </Select>
+            </div>
+        </Tooltip>
+    </div>;
+}
diff --git a/lib/static/new-ui/components/AttemptPickerItem/index.tsx b/lib/static/new-ui/components/AttemptPickerItem/index.tsx
index 77075e3d..93096010 100644
--- a/lib/static/new-ui/components/AttemptPickerItem/index.tsx
+++ b/lib/static/new-ui/components/AttemptPickerItem/index.tsx
@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {hasUnrelatedToScreenshotsErrors, isFailStatus} from '@/common-utils';
 import {TestStatus} from '@/constants';
-import {ResultEntityError, State} from '@/static/new-ui/types/store';
+import {GroupEntity, ResultEntityError, State} from '@/static/new-ui/types/store';
 import styles from './index.module.css';
 import {get} from 'lodash';
 
@@ -86,7 +86,7 @@ function AttemptPickerItemInternal(props: AttemptPickerItemInternalProps): React
 export const AttemptPickerItem = connect(
     ({tree, view: {keyToGroupTestsBy}, app: {isNewUi, suitesPage: {currentGroupId}}}: State, {resultId}: AttemptPickerItemProps) => {
         const result = tree.results.byId[resultId];
-        const group = Object.values(tree.groups.byId).find(group => group.id === currentGroupId);
+        const group = tree.groups.byId[currentGroupId ?? ''] as GroupEntity | undefined;
         const matchedSelectedGroup = isNewUi ?
             Boolean(group?.resultIds.includes(resultId)) :
             get(tree.results.stateById[resultId], 'matchedSelectedGroup', false);
diff --git a/lib/static/new-ui/features/suites/components/GroupBySelect/index.tsx b/lib/static/new-ui/features/suites/components/GroupBySelect/index.tsx
index a7f978de..ef79fee5 100644
--- a/lib/static/new-ui/features/suites/components/GroupBySelect/index.tsx
+++ b/lib/static/new-ui/features/suites/components/GroupBySelect/index.tsx
@@ -1,40 +1,65 @@
+import {Cubes3Overlap} from '@gravity-ui/icons';
+import {Icon, Select} from '@gravity-ui/uikit';
+import React, {ReactNode, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
-import {Select, SelectOptionGroup, SelectProps} from '@gravity-ui/uikit';
+
 import {GroupByType} from '@/static/new-ui/types/store';
 import {setCurrentGroupByExpression} from '@/static/modules/actions';
-import React, {ReactNode} from 'react';
+import {AdaptiveSelect} from '@/static/new-ui/components/AdaptiveSelect';
 
-export function GroupBySelect(props: SelectProps): ReactNode {
+export function GroupBySelect(): ReactNode {
     const dispatch = useDispatch();
 
+    const NO_GROUPING = 'no-grouping';
+
     const groupByExpressionId = useSelector((state) => state.app.groupTestsData.currentExpressionIds)[0];
 
     const groupBySections = useSelector((state) => state.app.groupTestsData.availableSections);
     const groupByExpressions = useSelector((state) => state.app.groupTestsData.availableExpressions);
-    const groupByOptions = groupBySections
-        .map((section): SelectOptionGroup => ({
-            label: section.label,
-            options: groupByExpressions.filter(expr => expr.sectionId === section.id).map(expr => {
-                if (expr.type === GroupByType.Meta) {
-                    return {
-                        content: expr.key,
-                        value: expr.id
-                    };
-                }
-
-                return {
-                    content: 'message',
-                    value: expr.id
-                };
-            })
-        }));
-
-    const onGroupByUpdate = (value: string[]): void => {
-        const newGroupByExpressionId = value[0];
-        if (newGroupByExpressionId !== groupByExpressionId) {
-            dispatch(setCurrentGroupByExpression({expressionIds: newGroupByExpressionId ? [newGroupByExpressionId] : []}));
+
+    const [selectValue, setSelectValue] = useState<string>(NO_GROUPING);
+
+    const onOptionClick = (newGroupByExpressionId: string): void => {
+        if (newGroupByExpressionId === NO_GROUPING) {
+            setSelectValue(NO_GROUPING);
+            dispatch(setCurrentGroupByExpression({expressionIds: []}));
+        } else if (newGroupByExpressionId !== groupByExpressionId) {
+            setSelectValue(newGroupByExpressionId);
+            dispatch(setCurrentGroupByExpression({expressionIds: [newGroupByExpressionId]}));
         }
     };
 
-    return <Select view={'clear'} label='Group by' options={groupByOptions} onUpdate={onGroupByUpdate} value={[groupByExpressionId]} hasClear={Boolean(groupByExpressionId)} {...props}/>;
+    const groupByOptions = [<Select.OptionGroup label={'Group by'} key={'no-grouping'}>
+        <Select.Option value={NO_GROUPING}>
+            <div onClick={(): void => onOptionClick(NO_GROUPING)}>Nothing</div>
+        </Select.Option>
+    </Select.OptionGroup>];
+
+    groupByOptions.push(...groupBySections.map((section): React.JSX.Element =>
+        <Select.OptionGroup label={section.label} key={section.id}>
+            {groupByExpressions
+                .filter(expr => expr.sectionId === section.id)
+                .map(expr => {
+                    const title = expr.type === GroupByType.Meta ? expr.key : 'message';
+
+                    return <Select.Option
+                        key={expr.id}
+                        value={expr.id}
+                        title={title}
+                        content={<div onClick={(): void => onOptionClick(expr.id)}>{title}</div>}
+                    />;
+                })}
+        </Select.OptionGroup>
+    ));
+
+    return <AdaptiveSelect
+        multiple={true}
+        autoClose={true}
+        currentValue={[selectValue]}
+        label={'Group by'}
+        labelIcon={<Icon data={Cubes3Overlap}/>}
+        showDot={selectValue !== NO_GROUPING}
+    >
+        {groupByOptions}
+    </AdaptiveSelect>;
 }
diff --git a/lib/static/new-ui/features/suites/components/SortBySelect/index.module.css b/lib/static/new-ui/features/suites/components/SortBySelect/index.module.css
new file mode 100644
index 00000000..867579c7
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/SortBySelect/index.module.css
@@ -0,0 +1,13 @@
+.label-icon-right {
+    margin-left: -6px;
+}
+
+.option-content {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.option-icon {
+    color: var(--g-color-private-black-450-solid);
+}
diff --git a/lib/static/new-ui/features/suites/components/SortBySelect/index.tsx b/lib/static/new-ui/features/suites/components/SortBySelect/index.tsx
new file mode 100644
index 00000000..6f9382fa
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/SortBySelect/index.tsx
@@ -0,0 +1,85 @@
+import {
+    ArrowRotateLeft,
+    BarsAscendingAlignLeftArrowUp,
+    BarsDescendingAlignLeftArrowDown,
+    FontCase,
+    SquareLetterT
+} from '@gravity-ui/icons';
+import {Icon, Select, SelectProps} from '@gravity-ui/uikit';
+import React, {ReactNode} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+
+import {SortByExpression, SortDirection, SortType} from '@/static/new-ui/types/store';
+import {setCurrentSortByExpression, setSortByDirection} from '@/static/modules/actions/sort-tests';
+import {AdaptiveSelect} from '@/static/new-ui/components/AdaptiveSelect';
+import styles from './index.module.css';
+
+const getSortIcon = (sortByExpression: SortByExpression): ReactNode => {
+    let iconData;
+    switch (sortByExpression.type) {
+        case SortType.ByName:
+            iconData = FontCase;
+            break;
+        case SortType.ByFailedRuns:
+            iconData = ArrowRotateLeft;
+            break;
+        case SortType.ByTestsCount:
+            iconData = SquareLetterT;
+            break;
+    }
+    return <Icon data={iconData} className={styles.optionIcon} width={14} height={14} />;
+};
+
+export function SortBySelect(): ReactNode {
+    const dispatch = useDispatch();
+
+    const sortByExpressionId = useSelector((state) => state.app.sortTestsData.currentExpressionIds)[0];
+    const currentDirection = useSelector((state) => state.app.sortTestsData.currentDirection);
+
+    const onOptionClick = (newExpressionId: string): void => {
+        if (sortByExpressionId !== newExpressionId) {
+            dispatch(setCurrentSortByExpression({expressionIds: [newExpressionId]}));
+        } else {
+            dispatch(setSortByDirection({direction: currentDirection === SortDirection.Asc ? SortDirection.Desc : SortDirection.Asc}));
+        }
+    };
+
+    const onSetDirection = (direction: SortDirection): void => {
+        if (currentDirection !== direction) {
+            dispatch(setSortByDirection({direction}));
+        }
+    };
+
+    const options: SelectProps['children'] = [
+        <Select.OptionGroup label={'Sort by'} key={'sort-by'}>
+            {useSelector(state => state.app.sortTestsData.availableExpressions)
+                .map((expr, index): React.JSX.Element => (
+                    <Select.Option key={index} title={expr.label}
+                        content={<div className={styles.optionContent} onClick={(): void => onOptionClick(expr.id)}>
+                            {getSortIcon(expr)}
+                            <span className={styles.optionText}>{expr.label}</span>
+                        </div>} value={expr.id}/>))
+            }
+        </Select.OptionGroup>,
+        <Select.OptionGroup label={'Direction'} key={'sort-direction'}>
+            <Select.Option value={SortDirection.Asc} content={<div className={styles.optionContent} onClick={(): void => onSetDirection(SortDirection.Asc)}>
+                <Icon className={styles.optionIcon} data={BarsAscendingAlignLeftArrowUp} width={14} height={14} />
+                <span className={styles.optionText}>Ascending</span>
+            </div>}/>
+            <Select.Option value={SortDirection.Desc} content={<div className={styles.optionContent} onClick={(): void => onSetDirection(SortDirection.Desc)}>
+                <Icon className={styles.optionIcon} data={BarsDescendingAlignLeftArrowDown} width={14} height={14} />
+                <span className={styles.optionText}>Descending</span>
+            </div>}/>
+        </Select.OptionGroup>
+    ];
+
+    return <AdaptiveSelect
+        label={'Sort by'}
+        labelIcon={<Icon data={currentDirection === SortDirection.Asc ? BarsAscendingAlignLeftArrowUp : BarsDescendingAlignLeftArrowDown} />}
+        currentValue={[sortByExpressionId, currentDirection]}
+        autoClose={false}
+        multiple={true}
+    >
+        {options}
+    </AdaptiveSelect>;
+}
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 0b104149..d93c2ab1 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
@@ -2,9 +2,9 @@ import {TestStatus} from '@/constants';
 import {ImageEntity} from '@/static/new-ui/types/store';
 
 export enum EntityType {
-    Group,
-    Suite,
-    Browser,
+    Group = 'group',
+    Suite = 'suite',
+    Browser = 'browser',
 }
 
 export interface TreeViewItemData {
@@ -12,9 +12,9 @@ export interface TreeViewItemData {
     entityType: EntityType;
     entityId: string;
     prefix?: string;
-    title: string;
+    title: string[];
     status: TestStatus | null;
-    tags?: string[];
+    tags: string[];
     errorTitle?: string;
     errorStack?: string;
     images?: ImageEntity[];
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 aad97832..6cfb29f1 100644
--- a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx
+++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx
@@ -61,7 +61,18 @@ export const SuitesTreeView = forwardRef<SuitesTreeViewHandle, SuitesTreeViewPro
     const virtualizer = useVirtualizer({
         count: list.structure.visibleFlattenIds.length,
         getScrollElement: () => parentRef.current,
-        estimateSize: () => 32,
+        estimateSize: (index) => {
+            const id = list.structure.visibleFlattenIds[index];
+            const item = list.structure.itemsById[id];
+
+            // Groups on average take 3 lines: 2 lines of text (clamped) + 1 line for tags -> 73px in total
+            // Regular items on average take 1 line -> 32px
+            // Providing more precise estimates here greatly improves scrolling performance
+            const GROUP_ROW_HEIGHT = 73;
+            const REGULAR_ROW_HEIGHT = 32;
+
+            return item.entityType === EntityType.Group ? GROUP_ROW_HEIGHT : REGULAR_ROW_HEIGHT;
+        },
         getItemKey: useCallback((index: number) => list.structure.visibleFlattenIds[index], [list]),
         overscan: 50
     });
@@ -144,6 +155,9 @@ export const SuitesTreeView = forwardRef<SuitesTreeViewHandle, SuitesTreeViewPro
                         const classes = [
                             styles['tree-view__item'],
                             {
+                                // Global classes are useful for deeply nested elements like tags
+                                'current-tree-node': isSelected,
+                                'error-tree-node': item.entityType === EntityType.Browser && (item.status === TestStatus.FAIL || item.status === TestStatus.ERROR),
                                 [styles['tree-view__item--current']]: isSelected,
                                 [styles['tree-view__item--browser']]: item.entityType === EntityType.Browser,
                                 [styles['tree-view__item--error']]: item.entityType === EntityType.Browser && (item.status === TestStatus.FAIL || item.status === TestStatus.ERROR)
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 d39df0e1..c2646044 100644
--- a/lib/static/new-ui/features/suites/components/SuitesTreeView/selectors.ts
+++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/selectors.ts
@@ -1,12 +1,4 @@
 import {createSelector} from 'reselect';
-import {last} from 'lodash';
-import {
-    BrowserEntity,
-    GroupEntity,
-    isBrowserEntity,
-    isResultEntityError, isSuiteEntity,
-    SuiteEntity
-} from '@/static/new-ui/types/store';
 import {
     getAllRootGroupIds,
     getBrowsers,
@@ -14,12 +6,12 @@ import {
     getGroups,
     getImages,
     getResults,
-    getSuites
+    getSortTestsData,
+    getSuites,
+    getTreeViewMode
 } from '@/static/new-ui/store/selectors';
-import {trimArray} from '@/common-utils';
-import {isAcceptable} from '@/static/modules/utils';
-import {EntityType, TreeRoot, TreeNode} from '@/static/new-ui/features/suites/components/SuitesPage/types';
-import {getEntityType} from '@/static/new-ui/features/suites/utils';
+import {TreeNode} from '@/static/new-ui/features/suites/components/SuitesPage/types';
+import {buildTreeBottomUp, collectTreeLeafIds, formatEntityToTreeNodeData, sortTreeNodes} from './utils';
 
 interface TreeViewData {
     tree: TreeNode[];
@@ -29,174 +21,50 @@ interface TreeViewData {
 
 // Converts the existing store structure to the one that can be consumed by GravityUI
 export const getTreeViewItems = createSelector(
-    [getGroups, getSuites, getAllRootGroupIds, getBrowsers, getBrowsersState, getResults, getImages],
-    (groups, suites, rootGroupIds, browsers, browsersState, results, images): TreeViewData => {
-        const formatEntityToTreeNodeData = (entity: SuiteEntity | BrowserEntity, id: string, parentData?: TreeNode['data']): TreeNode['data'] => {
-            if (isSuiteEntity(entity)) {
-                return {
-                    id,
-                    entityType: getEntityType(entity),
-                    entityId: entity.id,
-                    title: entity.name,
-                    status: entity.status,
-                    parentData
-                };
-            }
-
-            const lastResult = results[last(entity.resultIds) as string];
-
-            const resultImages = lastResult.imageIds
-                .map(imageId => images[imageId])
-                .filter(imageEntity => isAcceptable(imageEntity));
-
-            let errorTitle, errorStack;
-            if (isResultEntityError(lastResult) && lastResult.error?.stack) {
-                errorTitle = lastResult.error?.name;
-
-                const stackLines = trimArray(lastResult.error.stack.split('\n'));
-                errorStack = stackLines.slice(0, 3).join('\n');
-            }
-
-            return {
-                id,
-                entityType: getEntityType(entity),
-                entityId: entity.id,
-                title: entity.name,
-                status: lastResult.status,
-                images: resultImages,
-                errorTitle,
-                errorStack,
-                parentData,
-                skipReason: lastResult.skipReason
-            };
-        };
-
-        const buildTreeBottomUp = (entities: (SuiteEntity | BrowserEntity)[], rootData?: TreeNode['data']): TreeRoot => {
-            const TREE_ROOT = Symbol();
-            const cache: Record<string | symbol, TreeNode | TreeRoot> = {};
+    [getGroups, getSuites, getAllRootGroupIds, getBrowsers, getBrowsersState, getResults, getImages, getTreeViewMode, getSortTestsData],
+    (groups, suites, rootGroupIds, browsers, browsersState, results, images, treeViewMode, sortTestsData): TreeViewData => {
+        const currentSortDirection = sortTestsData.currentDirection;
+        const currentSortExpression = sortTestsData.availableExpressions
+            .find(expr => expr.id === sortTestsData.currentExpressionIds[0])
+            ?? sortTestsData.availableExpressions[0];
 
-            const createTreeRoot = (): TreeRoot => ({
-                isRoot: true,
-                data: rootData
-            });
-
-            const build = (entity: SuiteEntity | BrowserEntity): TreeNode | TreeRoot => {
-                let parentNode: TreeNode | TreeRoot;
-
-                const {parentId} = entity;
-                if (parentId) {
-                    const parentEntity = (suites[parentId] as SuiteEntity | undefined) ?? browsers[parentId];
-                    parentNode = build(parentEntity);
-                } else {
-                    if (!cache[TREE_ROOT]) {
-                        cache[TREE_ROOT] = createTreeRoot();
-                    }
-                    parentNode = cache[TREE_ROOT];
-                }
-
-                if (isBrowserEntity(entity) && !browsersState[entity.id].shouldBeShown) {
-                    return parentNode;
-                }
-
-                const nodePartialId = isBrowserEntity(entity) ? entity.name : entity.suitePath[entity.suitePath.length - 1];
-                const currentId = parentNode.data ? `${parentNode.data.id}/${nodePartialId}` : nodePartialId;
-                if (cache[currentId]) {
-                    return cache[currentId];
-                }
-
-                const currentNode: TreeNode = {
-                    parentNode,
-                    data: formatEntityToTreeNodeData(entity, currentId, parentNode.data)
-                };
-                cache[currentId] = currentNode;
-
-                if (parentNode) {
-                    if (!parentNode.children) {
-                        parentNode.children = [];
-                    }
-
-                    parentNode.children.push(currentNode);
-                }
-
-                return currentNode;
-            };
+        const entitiesContext = {results, images, suites, treeViewMode, browsersState, browsers, groups, currentSortDirection, currentSortExpression};
 
-            for (const entity of entities) {
-                build(entity);
-            }
-
-            return cache[TREE_ROOT] as TreeRoot ?? createTreeRoot();
-        };
-
-        const formatGroup = (groupEntity: GroupEntity): TreeNode => {
-            const groupBrowserIds = groupEntity.browserIds.filter(browserId => browsersState[browserId].shouldBeShown);
-            const browserEntities = groupBrowserIds.map(browserId => browsers[browserId]);
-
-            const testsCount = groupBrowserIds.length;
-            const retriesCount = groupEntity.resultIds.filter(resultId => browserEntities.find(browser => browser.resultIds.includes(resultId))).length;
-
-            const groupNodeData: TreeNode['data'] = {
-                id: groupEntity.id,
-                entityType: EntityType.Group,
-                entityId: groupEntity.id,
-                prefix: `${groupEntity.key}:`,
-                title: groupEntity.label,
-                status: null,
-                tags: [
-                    `${testsCount} ${testsCount > 1 ? ' tests' : 'test'}`,
-                    `${retriesCount} ${retriesCount > 1 ? ' retries' : 'retry'}`
-                ]
-            };
-
-            const suitesTreeRoot = buildTreeBottomUp(browserEntities, groupNodeData);
-
-            return {
-                data: groupNodeData,
-                children: suitesTreeRoot.children
-            };
-        };
-
-        const allTreeNodeIds: string[] = [];
-        const visibleTreeNodeIds: string[] = [];
+        const isGroupingEnabled = rootGroupIds.length > 0;
+        if (isGroupingEnabled) {
+            const treeNodes = rootGroupIds
+                .map(rootId => {
+                    const groupEntity = groups[rootId];
 
-        const collectVisibleBrowserIds = (node: TreeNode | TreeRoot): void => {
-            if (node.data && node.data.id) {
-                allTreeNodeIds.push(node.data.id);
-            }
+                    const browserEntities = groupEntity.browserIds.flatMap(browserId => browsersState[browserId].shouldBeShown ? [browsers[browserId]] : []);
+                    const groupNodeData = formatEntityToTreeNodeData(entitiesContext, groupEntity, groupEntity.id);
 
-            if (!node.children) {
-                return;
-            }
+                    const suitesTreeRoot = buildTreeBottomUp(entitiesContext, browserEntities, groupNodeData);
 
-            for (const childNode of node.children) {
-                if (childNode.data.entityType === EntityType.Browser) {
-                    visibleTreeNodeIds.push(childNode.data.id);
-                } else if (childNode.children?.length) {
-                    collectVisibleBrowserIds(childNode);
-                }
-            }
-        };
-
-        if (rootGroupIds.length > 0) {
-            const treeNodes = rootGroupIds
-                .map(rootId => formatGroup(groups[rootId]))
+                    return {
+                        data: groupNodeData,
+                        children: suitesTreeRoot.children
+                    };
+                })
                 .filter(treeNode => treeNode.children?.length);
 
-            treeNodes.forEach(treeNode => collectVisibleBrowserIds(treeNode));
+            const sortedTreeNodes = sortTreeNodes(entitiesContext, treeNodes);
+            const {allTreeNodeIds, visibleTreeNodeIds} = collectTreeLeafIds(sortedTreeNodes);
 
             return {
-                tree: treeNodes,
+                tree: sortedTreeNodes,
                 allTreeNodeIds,
                 visibleTreeNodeIds
             };
         }
 
-        const suitesTreeRoot = buildTreeBottomUp(Object.values(browsers).filter(browser => browsersState[browser.id].shouldBeShown));
-        collectVisibleBrowserIds(suitesTreeRoot);
+        const suitesTreeRoot = buildTreeBottomUp(entitiesContext, Object.values(browsers).filter(browser => browsersState[browser.id].shouldBeShown));
+        suitesTreeRoot.children = sortTreeNodes(entitiesContext, suitesTreeRoot.children ?? []);
+        const {allTreeNodeIds, visibleTreeNodeIds} = collectTreeLeafIds([suitesTreeRoot]);
 
         return {
-            visibleTreeNodeIds,
             allTreeNodeIds,
+            visibleTreeNodeIds,
             tree: suitesTreeRoot.children ?? []
         };
     });
diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/utils.ts b/lib/static/new-ui/features/suites/components/SuitesTreeView/utils.ts
new file mode 100644
index 00000000..f7660e18
--- /dev/null
+++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/utils.ts
@@ -0,0 +1,419 @@
+import {last} from 'lodash';
+
+import {isErrorStatus, isFailStatus, trimArray} from '@/common-utils';
+import {NEW_ISSUE_LINK} from '@/constants';
+import {
+    BrowserEntity,
+    BrowserState,
+    GroupEntity,
+    ImageEntity,
+    isBrowserEntity,
+    isGroupEntity,
+    isResultEntityError,
+    isSuiteEntity,
+    ResultEntity,
+    SortByExpression,
+    SortDirection,
+    SortType,
+    SuiteEntity,
+    TreeViewMode
+} from '@/static/new-ui/types/store';
+import {EntityType, TreeNode, TreeRoot} from '@/static/new-ui/features/suites/components/SuitesPage/types';
+import {getEntityType, getGroupId} from '@/static/new-ui/features/suites/utils';
+import {isAcceptable} from '@/static/modules/utils';
+
+export const getTitlePath = (suites: Record<string, SuiteEntity>, entity: SuiteEntity | BrowserEntity | undefined): string[] => {
+    if (!entity) {
+        return [];
+    }
+
+    if (isSuiteEntity(entity)) {
+        return entity.suitePath;
+    }
+
+    return [...getTitlePath(suites, suites[entity.parentId]), entity.name];
+};
+
+interface EntitiesContext {
+    browsers: Record<string, BrowserEntity>;
+    browsersState: Record<string, BrowserState>;
+    results: Record<string, ResultEntity>;
+    images: Record<string, ImageEntity>;
+    suites: Record<string, SuiteEntity>;
+    groups: Record<string, GroupEntity>;
+    treeViewMode: TreeViewMode;
+    currentSortDirection: SortDirection;
+    currentSortExpression: SortByExpression;
+}
+
+export const formatEntityToTreeNodeData = ({results, images, suites, treeViewMode}: EntitiesContext, entity: SuiteEntity | BrowserEntity | GroupEntity, id: string, parentData?: TreeNode['data']): TreeNode['data'] => {
+    if (isSuiteEntity(entity)) {
+        return {
+            id,
+            entityType: getEntityType(entity),
+            entityId: entity.id,
+            title: [entity.name],
+            status: entity.status,
+            parentData,
+            tags: []
+        };
+    }
+
+    if (isGroupEntity(entity)) {
+        return {
+            id: entity.id,
+            entityType: EntityType.Group,
+            entityId: entity.id,
+            prefix: `${entity.key}:`,
+            title: [entity.label],
+            status: null,
+            tags: []
+        };
+    }
+
+    // Otherwise, it's BrowserEntity
+    const lastResult = results[last(entity.resultIds) as string];
+
+    const resultImages = lastResult.imageIds
+        .map(imageId => images[imageId])
+        .filter(imageEntity => isAcceptable(imageEntity));
+
+    let errorTitle, errorStack;
+    if (isResultEntityError(lastResult) && lastResult.error?.stack) {
+        errorTitle = lastResult.error?.name;
+
+        const stackLines = trimArray(lastResult.error.stack.split('\n'));
+        errorStack = stackLines.slice(0, 3).join('\n');
+    }
+
+    return {
+        id,
+        entityType: getEntityType(entity),
+        entityId: entity.id,
+        title: treeViewMode === TreeViewMode.Tree ? [entity.name] : getTitlePath(suites, entity),
+        status: lastResult.status,
+        images: resultImages,
+        errorTitle,
+        errorStack,
+        parentData,
+        skipReason: lastResult.skipReason,
+        tags: []
+    };
+};
+
+export const buildTreeBottomUp = (entitiesContext: EntitiesContext, entities: (SuiteEntity | BrowserEntity)[], rootData?: TreeNode['data']): TreeRoot => {
+    const {browsers, suites, browsersState, treeViewMode} = entitiesContext;
+
+    const TREE_ROOT = Symbol();
+    const cache: Record<string | symbol, TreeNode | TreeRoot> = {};
+
+    const createTreeRoot = (): TreeRoot => ({
+        isRoot: true,
+        data: rootData
+    });
+
+    const build = (entity: SuiteEntity | BrowserEntity): TreeNode | TreeRoot => {
+        let parentNode: TreeNode | TreeRoot;
+
+        const {parentId} = entity;
+        if (treeViewMode === TreeViewMode.Tree && parentId) {
+            const parentEntity = (suites[parentId] as SuiteEntity | undefined) ?? browsers[parentId];
+            parentNode = build(parentEntity);
+        } else {
+            if (!cache[TREE_ROOT]) {
+                cache[TREE_ROOT] = createTreeRoot();
+            }
+            parentNode = cache[TREE_ROOT];
+        }
+
+        if (isBrowserEntity(entity) && !browsersState[entity.id].shouldBeShown) {
+            return parentNode;
+        }
+
+        const nodePartialId = treeViewMode === TreeViewMode.Tree
+            ? (isBrowserEntity(entity) ? entity.name : entity.suitePath[entity.suitePath.length - 1])
+            : entity.id;
+        const currentId = parentNode.data ? `${parentNode.data.id}/${nodePartialId}` : nodePartialId;
+        if (cache[currentId]) {
+            return cache[currentId];
+        }
+
+        const currentNode: TreeNode = {
+            parentNode,
+            data: formatEntityToTreeNodeData(entitiesContext, entity, currentId, parentNode.data)
+        };
+        cache[currentId] = currentNode;
+
+        if (parentNode) {
+            if (!parentNode.children) {
+                parentNode.children = [];
+            }
+
+            parentNode.children.push(currentNode);
+        }
+
+        return currentNode;
+    };
+
+    for (const entity of entities) {
+        build(entity);
+    }
+
+    return cache[TREE_ROOT] as TreeRoot ?? createTreeRoot();
+};
+
+export const collectTreeLeafIds = (treeNodes: (TreeNode | TreeRoot)[]): {allTreeNodeIds: string[], visibleTreeNodeIds: string[]} => {
+    const allTreeNodeIds: string[] = [];
+    const visibleTreeNodeIds: string[] = [];
+
+    const collectBrowserIdsInternal = (node: TreeNode | TreeRoot): void => {
+        if (node.data && node.data.id) {
+            allTreeNodeIds.push(node.data.id);
+        }
+
+        if (!node.children) {
+            return;
+        }
+
+        for (const childNode of node.children) {
+            if (childNode.data.entityType === EntityType.Browser) {
+                visibleTreeNodeIds.push(childNode.data.id);
+            } else if (childNode.children?.length) {
+                collectBrowserIdsInternal(childNode);
+            }
+        }
+    };
+
+    treeNodes.forEach(treeNode => collectBrowserIdsInternal(treeNode));
+
+    return {allTreeNodeIds, visibleTreeNodeIds};
+};
+
+export const sortTreeNodes = (entitiesContext: EntitiesContext, treeNodes: TreeNode[]): TreeNode[] => {
+    const {groups, results, currentSortExpression, currentSortDirection, browsers, browsersState} = entitiesContext;
+
+    // Weight of a single node is an array, because sorting may be performed by multiple fields at once
+    // For example, sort by tests count, but if tests counts are equal, compare runs counts
+    // In this case weight for each node is [testsCount, runsCount]
+    type TreeNodeWeightValue = (number | string)[];
+    interface WeightMetadata {
+        testsCount: number;
+        runsCount: number;
+        failedRunsCount: number;
+    }
+
+    interface TreeNodeWeight {
+        value: TreeNodeWeightValue;
+        metadata: Partial<WeightMetadata>;
+    }
+
+    interface TreeWeightedSortResult {
+        sortedTreeNodes: TreeNode[];
+        weight: TreeNodeWeight;
+    }
+
+    const createWeight = (value: TreeNodeWeightValue, metadata?: Partial<WeightMetadata>): TreeNodeWeight => ({
+        value,
+        metadata: metadata ?? {}
+    });
+
+    const extractWeight = (treeNode: TreeNode, childrenWeight?: TreeNodeWeight): TreeNodeWeight => {
+        const notifyOfUnsuccessfulWeightComputation = (): void => {
+            console.warn('Failed to determine suite weight for tree node listed below. Please let us now at ' + NEW_ISSUE_LINK);
+            console.warn(treeNode);
+        };
+
+        switch (treeNode.data.entityType) {
+            case EntityType.Group: {
+                const group = groups[treeNode.data.entityId];
+
+                const browserEntities = group.browserIds.flatMap(browserId => browsersState[browserId].shouldBeShown ? [browsers[browserId]] : []);
+
+                const testsCount = browserEntities.length;
+                const runsCount = group.resultIds.filter(resultId => browsersState[results[resultId].parentId].shouldBeShown).length;
+
+                if (currentSortExpression.type === SortType.ByTestsCount) {
+                    return createWeight([0, testsCount, runsCount], {testsCount, runsCount});
+                } else if (currentSortExpression.type === SortType.ByName) {
+                    return createWeight([treeNode.data.title.join(' '), testsCount, runsCount], {testsCount, runsCount});
+                } else if (currentSortExpression.type === SortType.ByFailedRuns) {
+                    if (!childrenWeight) {
+                        notifyOfUnsuccessfulWeightComputation();
+                        return createWeight([0, 0, 0]);
+                    }
+
+                    // For now, we assume there are no nested groups and suite/test weights are always 1 dimensional
+                    return createWeight([childrenWeight.value[0], testsCount, runsCount], Object.assign({}, {testsCount, runsCount}, childrenWeight.metadata));
+                }
+                break;
+            }
+            case EntityType.Suite: {
+                if (currentSortExpression.type === SortType.ByName) {
+                    return createWeight([treeNode.data.title.join(' ')]);
+                } else if (currentSortExpression.type === SortType.ByFailedRuns) {
+                    if (!childrenWeight) {
+                        notifyOfUnsuccessfulWeightComputation();
+                        return createWeight([0]);
+                    }
+
+                    return childrenWeight;
+                } else if (currentSortExpression.type === SortType.ByTestsCount) {
+                    if (!childrenWeight) {
+                        notifyOfUnsuccessfulWeightComputation();
+                        return createWeight([0]);
+                    }
+
+                    return childrenWeight;
+                }
+                break;
+            }
+            case EntityType.Browser: {
+                if (currentSortExpression.type === SortType.ByName) {
+                    return createWeight([treeNode.data.title.join(' ')]);
+                } else if (currentSortExpression.type === SortType.ByFailedRuns) {
+                    const browser = browsers[treeNode.data.entityId];
+                    const groupId = getGroupId(treeNode.data);
+
+                    const failedRunsCount = browser.resultIds.filter(resultId =>
+                        (isFailStatus(results[resultId].status) || isErrorStatus(results[resultId].status)) &&
+                        (!groupId || groups[groupId].resultIds.includes(resultId))
+                    ).length;
+
+                    return createWeight([failedRunsCount], {failedRunsCount});
+                } else if (currentSortExpression.type === SortType.ByTestsCount) {
+                    const browser = browsers[treeNode.data.entityId];
+                    const groupId = getGroupId(treeNode.data);
+                    const runsCount = groupId ? browser.resultIds.filter(resultId => groups[groupId].resultIds.includes(resultId)).length : browser.resultIds.length;
+
+                    return createWeight([1, runsCount], {runsCount});
+                }
+                break;
+            }
+        }
+
+        notifyOfUnsuccessfulWeightComputation();
+        return createWeight([0]);
+    };
+
+    const aggregateWeights = (weights: TreeNodeWeight[]): TreeNodeWeight => {
+        if (!currentSortExpression || currentSortExpression.type === SortType.ByName) {
+            return createWeight([0]);
+        }
+
+        if (currentSortExpression.type === SortType.ByFailedRuns || currentSortExpression.type === SortType.ByTestsCount) {
+            return weights.reduce<TreeNodeWeight>((accWeight, weight) => {
+                const newAccWeight = createWeight(accWeight.value.slice(0), accWeight.metadata);
+                for (let i = 0; i < weight.value.length; i++) {
+                    newAccWeight.value[i] = Number(accWeight.value[i] ?? 0) + Number(weight.value[i]);
+                }
+
+                if (weight.metadata.testsCount !== undefined) {
+                    newAccWeight.metadata.testsCount = (newAccWeight.metadata.testsCount ?? 0) + weight.metadata.testsCount;
+                }
+                if (weight.metadata.runsCount !== undefined) {
+                    newAccWeight.metadata.runsCount = (newAccWeight.metadata.runsCount ?? 0) + weight.metadata.runsCount;
+                }
+                if (weight.metadata.failedRunsCount !== undefined) {
+                    newAccWeight.metadata.failedRunsCount = (newAccWeight.metadata.failedRunsCount ?? 0) + weight.metadata.failedRunsCount;
+                }
+
+                return newAccWeight;
+            }, createWeight(new Array(weights[0]?.value?.length)));
+        }
+
+        return createWeight([0]);
+    };
+
+    const generateTagsForWeight = (weight: TreeNodeWeight): string[] => {
+        const tags: string[] = [];
+
+        const testsCount = weight.metadata.testsCount;
+        if (testsCount !== undefined) {
+            tags.push(`${testsCount} ${(testsCount === 1 ? 'test' : 'tests')}`);
+        }
+
+        const runsCount = weight.metadata.runsCount;
+        if (runsCount !== undefined) {
+            tags.push(`${runsCount} ${(runsCount === 1 ? 'run' : 'runs')}`);
+        }
+
+        const failedRunsCount = weight.metadata.failedRunsCount;
+        if (failedRunsCount !== undefined) {
+            tags.push(`${failedRunsCount} ${(failedRunsCount === 1 ? 'failed run' : 'failed runs')}`);
+        }
+
+        return tags;
+    };
+
+    // Recursive tree sort. At each level of the tree, it does the following:
+    // 1. Compute weights of the current branch
+    // 2. Sort current level according to weights
+    // 3. Return sorted current level and aggregate of all weights at current level
+    const sortAndGetWeight = (treeNodes: TreeNode[]): TreeWeightedSortResult => {
+        const treeNodesCopy = treeNodes.slice(0);
+        const weights: Record<string, TreeNodeWeight> = {};
+
+        treeNodesCopy.forEach((treeNode, index) => {
+            if (treeNode.data.entityType === EntityType.Group && treeNode.children?.length) {
+                const sortResult = sortAndGetWeight(treeNode.children);
+
+                const weight = extractWeight(treeNode, sortResult.weight);
+
+                const newTreeNode = Object.assign({}, treeNode, {
+                    children: sortResult.sortedTreeNodes
+                });
+                newTreeNode.data.tags.push(...generateTagsForWeight(weight));
+
+                weights[treeNode.data.id] = weight;
+                treeNodesCopy[index] = newTreeNode;
+            } else if (treeNode.data.entityType === EntityType.Suite && treeNode.children?.length) {
+                const sortResult = sortAndGetWeight(treeNode.children);
+
+                const weight = extractWeight(treeNode, sortResult.weight);
+
+                const newTreeNode = Object.assign({}, treeNode, {
+                    children: sortResult.sortedTreeNodes
+                });
+                newTreeNode.data.tags.push(...generateTagsForWeight(weight));
+
+                weights[treeNode.data.id] = weight;
+                treeNodesCopy[index] = newTreeNode;
+            } else if (treeNode.data.entityType === EntityType.Browser) {
+                const weight = extractWeight(treeNode);
+
+                const newTreeNode = Object.assign({}, treeNode);
+                newTreeNode.data.tags.push(...generateTagsForWeight(weight));
+
+                weights[treeNode.data.id] = weight;
+                treeNodesCopy[index] = newTreeNode;
+            }
+        });
+
+        const sortedTreeNodes = treeNodesCopy.sort((a, b): number => {
+            const direction = currentSortDirection === SortDirection.Desc ? -1 : 1;
+
+            for (let i = 0; i < weights[a.data.id].value.length; i++) {
+                const aWeight = weights[a.data.id].value[i];
+                const bWeight = weights[b.data.id].value[i];
+                if (aWeight === bWeight) {
+                    continue;
+                }
+
+                if (typeof aWeight === 'string' || typeof bWeight === 'string') {
+                    return aWeight.toString().localeCompare(bWeight.toString()) * direction;
+                }
+
+                return (aWeight - bWeight) * direction;
+            }
+
+            return 0;
+        });
+
+        return {
+            sortedTreeNodes: sortedTreeNodes,
+            weight: aggregateWeights(Object.values(weights))
+        };
+    };
+
+    return sortAndGetWeight(treeNodes).sortedTreeNodes;
+};
diff --git a/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.module.css b/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.module.css
index b07deb50..7a56bb45 100644
--- a/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.module.css
+++ b/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.module.css
@@ -1,10 +1,14 @@
 .container {
+    --g-color-text-info: #000;
     --divider-color: rgba(0, 0, 0, 0.1);
     --g-text-accent-font-weight: 500;
 
     display: flex;
     gap: 4px;
     position: relative;
+    container-type: inline-size;
+    /* This makes toolbar select popups stay on top of tree view */
+    z-index: 1;
 }
 
 .buttons-container {
diff --git a/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.tsx b/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.tsx
index cb4dda3a..08957597 100644
--- a/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.tsx
+++ b/lib/static/new-ui/features/suites/components/TreeActionsToolbar/index.tsx
@@ -9,7 +9,9 @@ import {
     Play,
     Square,
     SquareCheck,
-    SquareDashed
+    SquareDashed,
+    ListUl,
+    Hierarchy
 } from '@gravity-ui/icons';
 import React, {ReactNode, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
@@ -19,12 +21,13 @@ import {
     acceptOpened,
     deselectAll,
     retrySuite,
-    selectAll, setAllTreeNodesState,
+    selectAll,
+    setAllTreeNodesState, setTreeViewMode,
     staticAccepterStageScreenshot,
     staticAccepterUnstageScreenshot,
     undoAcceptImages
 } from '@/static/modules/actions';
-import {ImageEntity} from '@/static/new-ui/types/store';
+import {ImageEntity, TreeViewMode} from '@/static/new-ui/types/store';
 import {CHECKED, INDETERMINATE} from '@/constants/checked-statuses';
 import {IconButton} from '@/static/new-ui/components/IconButton';
 import {
@@ -43,6 +46,7 @@ import {isAcceptable, isScreenRevertable} from '@/static/modules/utils';
 import {EditScreensFeature, RunTestsFeature} from '@/constants';
 import {getTreeViewItems} from '@/static/new-ui/features/suites/components/SuitesTreeView/selectors';
 import {GroupBySelect} from '@/static/new-ui/features/suites/components/GroupBySelect';
+import {SortBySelect} from '@/static/new-ui/features/suites/components/SortBySelect';
 
 interface TreeActionsToolbarProps {
     onHighlightCurrentTest?: () => void;
@@ -86,6 +90,7 @@ export function TreeActionsToolbar(props: TreeActionsToolbarProps): ReactNode {
     const selectedImages: ImageEntity[] = useSelector(getSelectedImages);
     const activeImages = isSelectedAtLeastOne ? selectedImages : visibleImages;
 
+    const treeViewMode = useSelector(state => state.ui.suitesPage.treeViewMode);
     const currentTreeNodeId = useSelector(state => state.app.suitesPage.currentTreeNodeId);
     const {visibleTreeNodeIds} = useSelector(getTreeViewItems);
     const isFocusAvailable = isInitialized && currentTreeNodeId && visibleTreeNodeIds.includes(currentTreeNodeId);
@@ -152,6 +157,10 @@ export function TreeActionsToolbar(props: TreeActionsToolbarProps): ReactNode {
         }
     };
 
+    const handleToggleTreeView = (): void => {
+        dispatch(setTreeViewMode({treeViewMode: treeViewMode === TreeViewMode.Tree ? TreeViewMode.List : TreeViewMode.Tree}));
+    };
+
     const selectedOrVisible = isSelectedAtLeastOne ? 'selected' : 'visible';
     const areActionsDisabled = isRunning || !isInitialized;
 
@@ -165,6 +174,12 @@ export function TreeActionsToolbar(props: TreeActionsToolbarProps): ReactNode {
                 <IconButton className={styles.iconButton} icon={<Icon data={Check} />} tooltip={`Accept ${selectedOrVisible} screenshots`} view={'flat'} onClick={handleAccept} disabled={areActionsDisabled || !isAtLeastOneAcceptable}></IconButton>
         )}
         {(isRunTestsAvailable || isEditScreensAvailable) && <div className={styles.buttonsDivider}></div>}
+        <IconButton
+            icon={<Icon data={treeViewMode === TreeViewMode.Tree ? ListUl : Hierarchy} height={14}/>}
+            tooltip={treeViewMode === TreeViewMode.Tree ? 'Switch to list view' : 'Switch to tree view'}
+            view={'flat'}
+            onClick={handleToggleTreeView}
+            disabled={!isInitialized} />
         <IconButton icon={<Icon data={SquareDashed} height={14}/>} tooltip={'Focus on active test'} view={'flat'} onClick={props.onHighlightCurrentTest} disabled={!isFocusAvailable}/>
         <IconButton icon={<Icon data={ChevronsExpandVertical} height={14}/>} tooltip={'Expand all'} view={'flat'} onClick={handleExpandAll} disabled={!isInitialized}/>
         <IconButton icon={<Icon data={ChevronsCollapseVertical} height={14}/>} tooltip={'Collapse all'} view={'flat'} onClick={handleCollapseAll} disabled={!isInitialized}/>
@@ -172,7 +187,8 @@ export function TreeActionsToolbar(props: TreeActionsToolbarProps): ReactNode {
     </>;
 
     return <div className={styles.container}>
-        <GroupBySelect/>
+        <GroupBySelect />
+        <SortBySelect />
         <div className={styles.buttonsContainer}>
             {viewButtons}
         </div>
diff --git a/lib/static/new-ui/features/suites/components/TreeViewItemSubtitle/index.tsx b/lib/static/new-ui/features/suites/components/TreeViewItemSubtitle/index.tsx
index 7e283cad..81a6ad53 100644
--- a/lib/static/new-ui/features/suites/components/TreeViewItemSubtitle/index.tsx
+++ b/lib/static/new-ui/features/suites/components/TreeViewItemSubtitle/index.tsx
@@ -38,7 +38,7 @@ export function TreeViewItemSubtitle(props: TreeViewItemSubtitleProps): ReactNod
         </div>;
     } else if (props.item.errorStack) {
         return <div className={classNames(styles['tree-view-item-subtitle__error-stack'], props.className)}>
-            {stripAnsi(props.item.errorStack)}
+            {(props.item.errorTitle + '\n' + stripAnsi(props.item.errorStack)).trim()}
         </div>;
     }
 
diff --git a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.module.css b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.module.css
index 2e0b59ea..7b456274 100644
--- a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.module.css
+++ b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.module.css
@@ -29,8 +29,18 @@
     margin-right: 8px;
 }
 
+.title-part {
+    opacity: 0.7;
+}
+
+.title-separator {
+    opacity: 0.5;
+    margin: 0 4px;
+}
+
 .tags-container {
     display: inline-block;
+    height: 20px;
 }
 
 .tag {
@@ -43,6 +53,28 @@
     padding: 0 4px;
 }
 
+:global(.error-tree-node) .tag {
+    background: var(--g-color-private-red-50);
+    color: var(--g-color-private-red-500-solid);
+}
+
+:global(.current-tree-node) .tag {
+    background-color: rgba(255, 255, 255, .15);
+    color: rgba(255, 255, 255, .7);
+}
+
 .tag:last-child {
     margin-right: 0;
 }
+
+.title-container--clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.title-container--inline {
+    display: inline;
+}
diff --git a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx
index d6549b80..c7908efe 100644
--- a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx
+++ b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/index.tsx
@@ -1,21 +1,22 @@
-import React, {useEffect, useRef} from 'react';
-import {EntityType, TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
-import styles from './index.module.css';
-import classNames from 'classnames';
+import {ChevronRight} from '@gravity-ui/icons';
 import {Checkbox} from '@gravity-ui/uikit';
+import classNames from 'classnames';
+import React, {useEffect, useRef} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
-import {toggleBrowserCheckbox, toggleGroupCheckbox, toggleSuiteCheckbox} from '@/static/modules/actions';
+
 import {getToggledCheckboxState, isCheckboxChecked, isCheckboxIndeterminate} from '@/common-utils';
+import {EntityType, TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
+import {toggleBrowserCheckbox, toggleGroupCheckbox, toggleSuiteCheckbox} from '@/static/modules/actions';
 import {getAreCheckboxesNeeded} from '@/static/new-ui/store/selectors';
 import {getItemCheckStatus} from '@/static/new-ui/features/suites/components/TreeViewItemTitle/selectors';
-import {GroupEntity} from '@/static/new-ui/types/store';
+import styles from './index.module.css';
 
 interface TreeViewItemTitleProps {
     className?: string;
     item: TreeViewItemData;
 }
 
-export function TreeViewItemTitle({item, className}: TreeViewItemTitleProps): React.JSX.Element {
+export function TreeViewItemTitle({item}: TreeViewItemTitleProps): React.JSX.Element {
     const dispatch = useDispatch();
     const areCheckboxesNeeded = useSelector(getAreCheckboxesNeeded);
     const groups = useSelector(state => state.tree.groups.byId);
@@ -28,7 +29,7 @@ export function TreeViewItemTitle({item, className}: TreeViewItemTitleProps): Re
                 e.stopPropagation();
 
                 if (item.entityType === EntityType.Group) {
-                    const group = Object.values(groups).find(group => group.id === item.entityId) as GroupEntity;
+                    const group = groups[item.entityId];
 
                     dispatch(toggleGroupCheckbox({
                         browserIds: group.browserIds,
@@ -49,21 +50,32 @@ export function TreeViewItemTitle({item, className}: TreeViewItemTitleProps): Re
         }
     }, [ref, item, checkStatus]);
 
+    const headTitleParts = item.title.slice(0, -1);
+    const tailTitlePart = item.title[item.title.length - 1];
+
+    const titleContainerClassName = classNames({
+        [styles['title-container--clamped']]: item.entityType === EntityType.Group,
+        [styles['title-container--inline']]: item.entityType !== EntityType.Group
+    });
+
     return <div className={styles.container}>
         <div>
-            {item.prefix && <span className={styles.titlePrefix}>{item.prefix}</span>}
-            <span className={styles.title}>{item.title}</span>
+            <div className={titleContainerClassName}>
+                {item.prefix && <span className={styles.titlePrefix}>{item.prefix}</span>}
+                <span className={styles.title}>
+                    {headTitleParts.map((titlePart, index) => <React.Fragment key={index}>
+                        <span className={index !== headTitleParts.length - 1 ? styles.titlePart : ''}>{titlePart}</span>
+                        <ChevronRight height={12} className={styles.titleSeparator}/>
+                    </React.Fragment>)}
+                    <span className={headTitleParts.length > 0 ? styles.titlePart : ''}>{tailTitlePart}</span>
+                </span>
+            </div>
             {item.tags && item.tags.length > 0 &&
                 <div className={styles.tagsContainer}>
                     {item.tags.map((tag, index) => <span key={index} className={styles.tag}>{tag}</span>)}
                 </div>
             }
         </div>
-        {
-            item.entityType === EntityType.Browser &&
-            item.errorTitle &&
-            <span className={classNames(styles['tree-view-item__error-title'], className)}>{item.errorTitle}</span>
-        }
         {areCheckboxesNeeded && <Checkbox checked={isCheckboxChecked(checkStatus)} indeterminate={isCheckboxIndeterminate(checkStatus)} className={styles.checkbox} size={'m'} controlRef={ref}/>}
     </div>;
 }
diff --git a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/selectors.ts b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/selectors.ts
index 943ba717..189aa341 100644
--- a/lib/static/new-ui/features/suites/components/TreeViewItemTitle/selectors.ts
+++ b/lib/static/new-ui/features/suites/components/TreeViewItemTitle/selectors.ts
@@ -1,7 +1,7 @@
 import {createSelector} from 'reselect';
 import {CheckStatus, INDETERMINATE, UNCHECKED} from '@/constants/checked-statuses';
 import {EntityType, TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
-import {GroupEntity, State} from '@/static/new-ui/types/store';
+import {State} from '@/static/new-ui/types/store';
 import {getBrowsersState, getGroups, getSuitesState} from '@/static/new-ui/store/selectors';
 import {NEW_ISSUE_LINK} from '@/constants';
 
@@ -13,7 +13,7 @@ export const getItemCheckStatus = createSelector(
         } else if (item.entityType === EntityType.Browser) {
             return browsersStateById[item.entityId].checkStatus;
         } else if (item.entityType === EntityType.Group) {
-            const group = Object.values(groups).find(group => group.id === item.entityId) as GroupEntity;
+            const group = groups[item.entityId];
             const childCount = group.browserIds.length;
             const checkedCount = group.browserIds.reduce((sum, browserId) => {
                 return sum + browsersStateById[browserId].checkStatus;
diff --git a/lib/static/new-ui/features/suites/selectors.ts b/lib/static/new-ui/features/suites/selectors.ts
index d56e7607..29e00216 100644
--- a/lib/static/new-ui/features/suites/selectors.ts
+++ b/lib/static/new-ui/features/suites/selectors.ts
@@ -23,8 +23,8 @@ export const getCurrentResultId = (state: State): string | null => {
     const treeNodeRetryResultId = resultIds[state.ui.suitesPage.retryIndexByTreeNodeId[treeNodeId] ?? -1];
 
     let lastMatchedGroupResultId: string | undefined;
-    const group = Object.values(state.tree.groups.byId).find(group => group.id === groupId);
-    if (groupId && group) {
+    if (groupId) {
+        const group = state.tree.groups.byId[groupId];
         lastMatchedGroupResultId = resultIds.findLast(resultId => group.resultIds.includes(resultId));
     }
 
diff --git a/lib/static/new-ui/store/selectors.ts b/lib/static/new-ui/store/selectors.ts
index 44e5ba30..c465a05b 100644
--- a/lib/static/new-ui/store/selectors.ts
+++ b/lib/static/new-ui/store/selectors.ts
@@ -5,7 +5,7 @@ import {
     ResultEntity,
     SuiteEntity,
     SuiteState,
-    BrowserState, GroupEntity
+    BrowserState, GroupEntity, TreeViewMode
 } from '@/static/new-ui/types/store';
 import {EditScreensFeature, RunTestsFeature} from '@/constants';
 
@@ -24,5 +24,7 @@ export const getImages = (state: State): Record<string, ImageEntity> => state.tr
 export const getIsInitialized = (state: State): boolean => state.app.isInitialized;
 export const getIsStaticImageAccepterEnabled = (state: State): boolean => state.staticImageAccepter.enabled;
 export const getIsGui = (state: State): boolean => state.gui;
+export const getTreeViewMode = (state: State): TreeViewMode => state.ui.suitesPage.treeViewMode;
+export const getSortTestsData = (state: State): State['app']['sortTestsData'] => state.app.sortTestsData;
 
 export const getAreCheckboxesNeeded = (state: State): boolean => state.app.availableFeatures.includes(RunTestsFeature) || state.app.availableFeatures.includes(EditScreensFeature);
diff --git a/lib/static/new-ui/types/store.ts b/lib/static/new-ui/types/store.ts
index dad16c69..80746980 100644
--- a/lib/static/new-ui/types/store.ts
+++ b/lib/static/new-ui/types/store.ts
@@ -1,3 +1,4 @@
+import {CoordBounds} from 'looks-same';
 import {DiffModeId, Feature, TestStatus, ViewMode} from '@/constants';
 import {
     BrowserItem,
@@ -8,10 +9,10 @@ import {
     TestStepCompressed
 } from '@/types';
 import {HtmlReporterValues} from '@/plugin-api';
-import {CoordBounds} from 'looks-same';
 import {Point} from '@/static/new-ui/types/index';
 import {AcceptableImage} from '@/static/modules/static-image-accepter';
 import {CheckStatus} from '@/constants/checked-statuses';
+import {EntityType} from '@/static/new-ui/features/suites/components/SuitesPage/types';
 
 export interface GroupEntity {
     id: string;
@@ -21,6 +22,7 @@ export interface GroupEntity {
     label: string;
     resultIds: string[];
     browserIds: string[];
+    type: EntityType.Group;
 }
 
 export interface SuiteEntityNode {
@@ -53,8 +55,9 @@ export interface BrowserEntity {
     parentId: string;
 }
 
-export const isSuiteEntity = (entity: SuiteEntity | BrowserEntity): entity is SuiteEntity => Boolean((entity as SuiteEntity).suitePath);
+export const isSuiteEntity = (entity: SuiteEntity | BrowserEntity | GroupEntity): entity is SuiteEntity => Boolean((entity as SuiteEntity).suitePath);
 export const isBrowserEntity = (entity: SuiteEntity | BrowserEntity): entity is BrowserEntity => Boolean((entity as BrowserEntity).resultIds);
+export const isGroupEntity = (entity: SuiteEntity | BrowserEntity | GroupEntity): entity is GroupEntity => (entity as GroupEntity).type === EntityType.Group;
 
 export interface ResultEntityCommon {
     id: string;
@@ -206,6 +209,28 @@ export interface GroupByErrorExpression {
 
 export type GroupByExpression = GroupByMetaExpression | GroupByErrorExpression;
 
+export enum SortType {
+    ByName,
+    ByFailedRuns,
+    ByTestsCount
+}
+
+export enum SortDirection {
+    Asc = 'asc',
+    Desc = 'desc'
+}
+
+export interface SortByExpression {
+    id: string;
+    type: SortType;
+    label: string;
+}
+
+export enum TreeViewMode {
+    Tree,
+    List
+}
+
 export interface State {
     app: {
         isNewUi: boolean;
@@ -236,9 +261,15 @@ export interface State {
             availableExpressions: GroupByExpression[];
             currentExpressionIds: string[];
         };
+        sortTestsData: {
+            availableExpressions: SortByExpression[];
+            currentExpressionIds: string[];
+            currentDirection: SortDirection;
+        }
     };
     ui: {
         suitesPage: {
+            treeViewMode: TreeViewMode;
             retryIndexByTreeNodeId: Record<string, number | null>;
             expandedTreeNodesById: Record<string, boolean>;
             expandedSectionsById: Record<string, boolean>;