diff --git a/src/components/ConnectToDB/ConnectToDBDialog.tsx b/src/components/ConnectToDB/ConnectToDBDialog.tsx
index fe0a115678..e6636974ee 100644
--- a/src/components/ConnectToDB/ConnectToDBDialog.tsx
+++ b/src/components/ConnectToDB/ConnectToDBDialog.tsx
@@ -56,7 +56,7 @@ function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialo
                         language={activeTab}
                         text={snippet}
                         transparentBackground={false}
-                        withCopy
+                        withClipboardButton={{alwaysVisible: true}}
                     />
                 </div>
                 {docsLink ? (
diff --git a/src/components/DateRange/DateRange.scss b/src/components/DateRange/DateRange.scss
index 0344b04273..5e50fddff5 100644
--- a/src/components/DateRange/DateRange.scss
+++ b/src/components/DateRange/DateRange.scss
@@ -1,7 +1,7 @@
 .date-range {
     &__range-input {
         &_s {
-            width: 200px;
+            width: 130px;
         }
 
         &_m {
diff --git a/src/components/DateRange/DateRange.tsx b/src/components/DateRange/DateRange.tsx
index 14f1ef9cc3..a254ed1be9 100644
--- a/src/components/DateRange/DateRange.tsx
+++ b/src/components/DateRange/DateRange.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 
-import type {RelativeRangeDatePickerProps} from '@gravity-ui/date-components';
+import type {
+    RelativeRangeDatePickerProps,
+    RelativeRangeDatePickerValue,
+} from '@gravity-ui/date-components';
 import {RelativeRangeDatePicker} from '@gravity-ui/date-components';
 
 import {cn} from '../../utils/cn';
@@ -19,23 +22,13 @@ export interface DateRangeValues {
     to?: string;
 }
 
-const DEFAULT_VALUE = {
-    start: {
-        value: 'now-1h',
-        type: 'relative',
-    },
-    end: {
-        value: 'now',
-        type: 'relative',
-    },
-} as const;
-
 interface DateRangeProps extends DateRangeValues {
     className?: string;
+    defaultValue?: RelativeRangeDatePickerValue;
     onChange?: (value: DateRangeValues) => void;
 }
 
-export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
+export const DateRange = ({from, to, className, defaultValue, onChange}: DateRangeProps) => {
     const handleUpdate = React.useCallback<NonNullable<RelativeRangeDatePickerProps['onUpdate']>>(
         (pickerValue) => onChange?.(toDateRangeValues(pickerValue)),
         [onChange],
@@ -50,13 +43,14 @@ export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
 
     // eslint-disable-next-line new-cap
     const timeZoneString = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const currentValue = value || defaultValue;
     return (
         <div className={b(null, className)}>
             <RelativeRangeDatePicker
                 withPresets
-                className={b('range-input', {[getdatePickerSize(value)]: true})}
+                className={b('range-input', {[getdatePickerSize(currentValue)]: true})}
                 timeZone={timeZoneString}
-                value={value || DEFAULT_VALUE}
+                value={currentValue}
                 allowNullableValues
                 size="m"
                 format={i18n('date-time-format')}
diff --git a/src/components/ResizeableDataTable/ResizeableDataTable.scss b/src/components/ResizeableDataTable/ResizeableDataTable.scss
index 1c92185d00..762c6a6a8a 100644
--- a/src/components/ResizeableDataTable/ResizeableDataTable.scss
+++ b/src/components/ResizeableDataTable/ResizeableDataTable.scss
@@ -5,4 +5,13 @@
 
     // padding for easier resize of the last column
     padding-right: 20px;
+
+    &__row-skeleton {
+        width: 100%;
+        height: 50%;
+    }
+
+    &__row-skeleton::after {
+        animation: none !important;
+    }
 }
diff --git a/src/components/ResizeableDataTable/ResizeableDataTable.tsx b/src/components/ResizeableDataTable/ResizeableDataTable.tsx
index 77f63dc0ed..186b183154 100644
--- a/src/components/ResizeableDataTable/ResizeableDataTable.tsx
+++ b/src/components/ResizeableDataTable/ResizeableDataTable.tsx
@@ -1,5 +1,6 @@
-import type {DataTableProps, Settings} from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, Settings} from '@gravity-ui/react-data-table';
 import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
+import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {useTableResize} from '../../utils/hooks/useTableResize';
@@ -11,6 +12,7 @@ const b = cn('ydb-resizeable-data-table');
 export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'theme' | 'onResize'> {
     columnsWidthLSKey?: string;
     wrapperClassName?: string;
+    loading?: boolean;
 }
 
 export function ResizeableDataTable<T>({
@@ -18,11 +20,20 @@ export function ResizeableDataTable<T>({
     columns,
     settings,
     wrapperClassName,
+    loading,
     ...props
 }: ResizeableDataTableProps<T>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
 
-    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+    // If loading is true, override the render method of each column to display a Skeleton
+    const processedColumns = loading
+        ? columns.map((column: Column<T>) => ({
+              ...column,
+              render: () => <Skeleton className={b('row-skeleton')} />,
+          }))
+        : columns;
+
+    const updatedColumns = updateColumnsWidth(processedColumns, tableColumnsWidth);
 
     const newSettings: Settings = {
         ...settings,
diff --git a/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss b/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss
index 55a027d140..b549c666dc 100644
--- a/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss
+++ b/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss
@@ -16,5 +16,18 @@
         position: absolute;
         top: 13px;
         right: 14px;
+
+        pointer-events: all;
+
+        opacity: 0;
+
+        &_visible {
+            opacity: 1;
+        }
+    }
+
+    .data-table__row:hover &__copy,
+    .ydb-paginated-table__row:hover &__copy {
+        opacity: 1;
     }
 }
diff --git a/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx b/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx
index 8021ba93c9..b92fd2279e 100644
--- a/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx
+++ b/src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx
@@ -23,12 +23,20 @@ async function registerLanguage(lang: Language) {
     }
 }
 
+interface ClipboardButtonOptions {
+    alwaysVisible?: boolean;
+    copyText?: string;
+    withLabel?: boolean;
+}
+
+export type WithClipboardButtonProp = ClipboardButtonOptions | boolean;
+
 type YDBSyntaxHighlighterProps = {
     text: string;
     language: Language;
     className?: string;
     transparentBackground?: boolean;
-    withCopy?: boolean;
+    withClipboardButton?: WithClipboardButtonProp;
 };
 
 export function YDBSyntaxHighlighter({
@@ -36,7 +44,7 @@ export function YDBSyntaxHighlighter({
     language,
     className,
     transparentBackground = true,
-    withCopy,
+    withClipboardButton,
 }: YDBSyntaxHighlighterProps) {
     const [highlighterKey, setHighlighterKey] = React.useState('');
 
@@ -51,16 +59,27 @@ export function YDBSyntaxHighlighter({
     }, [language]);
 
     const renderCopyButton = () => {
-        if (withCopy) {
+        if (withClipboardButton) {
             return (
-                <div className={b('sticky-container')}>
+                <div className={b('sticky-container')} onClick={(e) => e.stopPropagation()}>
                     <ClipboardButton
                         view="flat-secondary"
                         size="s"
-                        className={b('copy')}
-                        text={text}
+                        className={b('copy', {
+                            visible:
+                                typeof withClipboardButton === 'object' &&
+                                withClipboardButton.alwaysVisible,
+                        })}
+                        text={
+                            (typeof withClipboardButton === 'object' &&
+                                withClipboardButton.copyText) ||
+                            text
+                        }
                     >
-                        {i18n('copy')}
+                        {typeof withClipboardButton === 'object' &&
+                        withClipboardButton.withLabel === false
+                            ? null
+                            : i18n('copy')}
                     </ClipboardButton>
                 </div>
             );
diff --git a/src/components/TruncatedQuery/TruncatedQuery.tsx b/src/components/TruncatedQuery/TruncatedQuery.tsx
index 952c2434a1..cf2bc61885 100644
--- a/src/components/TruncatedQuery/TruncatedQuery.tsx
+++ b/src/components/TruncatedQuery/TruncatedQuery.tsx
@@ -10,9 +10,16 @@ const b = cn('kv-truncated-query');
 interface TruncatedQueryProps {
     value?: string;
     maxQueryHeight?: number;
+    hasClipboardButton?: boolean;
+    clipboardButtonAlwaysVisible?: boolean;
 }
 
-export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryProps) => {
+export const TruncatedQuery = ({
+    value = '',
+    maxQueryHeight = 6,
+    hasClipboardButton,
+    clipboardButtonAlwaysVisible,
+}: TruncatedQueryProps) => {
     const lines = value.split('\n');
     const truncated = lines.length > maxQueryHeight;
 
@@ -22,10 +29,37 @@ export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryP
             '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
         return (
             <React.Fragment>
-                <YDBSyntaxHighlighter language="yql" className={b()} text={content} />
+                <YDBSyntaxHighlighter
+                    language="yql"
+                    className={b()}
+                    text={content}
+                    withClipboardButton={
+                        hasClipboardButton
+                            ? {
+                                  alwaysVisible: clipboardButtonAlwaysVisible,
+                                  copyText: value,
+                                  withLabel: false,
+                              }
+                            : false
+                    }
+                />
                 <span className={b('message', {color: 'secondary'})}>{message}</span>
             </React.Fragment>
         );
     }
-    return <YDBSyntaxHighlighter language="yql" text={value} />;
+    return (
+        <YDBSyntaxHighlighter
+            language="yql"
+            text={value}
+            withClipboardButton={
+                hasClipboardButton
+                    ? {
+                          alwaysVisible: clipboardButtonAlwaysVisible,
+                          copyText: value,
+                          withLabel: false,
+                      }
+                    : false
+            }
+        />
+    );
 };
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx
index 30c4c06362..afa9f2b982 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx
@@ -15,7 +15,10 @@ import {
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../../store/reducers/tenant/constants';
-import {TENANT_OVERVIEW_TABLES_SETTINGS} from '../../../../../utils/constants';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {parseQueryErrorToString} from '../../../../../utils/query';
@@ -45,7 +48,7 @@ export function TopQueries({tenantName}: TopQueriesProps) {
     }, []);
 
     const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
-        {database: tenantName},
+        {database: tenantName, timeFrame: 'hour', limit: TENANT_OVERVIEW_TABLES_LIMIT},
         {pollingInterval: autoRefreshInterval},
     );
 
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx
index 1d0e011c98..e63a8dbb0e 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx
+++ b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx
@@ -1,67 +1,112 @@
 import React from 'react';
 
+import type {Column} from '@gravity-ui/react-data-table';
+import {TableColumnSetup} from '@gravity-ui/uikit';
+
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import type {KeyValueRow} from '../../../../types/api/query';
+import {cn} from '../../../../utils/cn';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
+import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 import {parseQueryErrorToString} from '../../../../utils/query';
 
 import {getRunningQueriesColumns} from './columns/columns';
-import {RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
+import {
+    DEFAULT_RUNNING_QUERIES_COLUMNS,
+    QUERIES_COLUMNS_TITLES,
+    REQUIRED_RUNNING_QUERIES_COLUMNS,
+    RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY,
+    RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
+} from './columns/constants';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useRunningQueriesSort} from './utils';
 
-interface Props {
-    database: string;
+const b = cn('kv-top-queries');
+
+interface RunningQueriesDataProps {
+    tenantName: string;
+    renderQueryModeControl: () => React.ReactNode;
     onRowClick: (query: string) => void;
-    rowClassName: string;
+    handleTextSearchUpdate: (text: string) => void;
 }
 
-export const RunningQueriesData = ({database, onRowClick, rowClassName}: Props) => {
+export const RunningQueriesData = ({
+    tenantName,
+    renderQueryModeControl,
+    onRowClick,
+    handleTextSearchUpdate,
+}: RunningQueriesDataProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
 
-    const {tableSort, handleTableSort, backendSort} = useRunningQueriesSort();
+    // Get columns for running queries
+    const columns: Column<KeyValueRow>[] = React.useMemo(() => {
+        return getRunningQueriesColumns();
+    }, []);
 
-    const {currentData, isFetching, error} = topQueriesApi.useGetRunningQueriesQuery(
-        {
-            database,
-            filters,
-            sortOrder: backendSort,
-        },
-        {pollingInterval: autoRefreshInterval},
+    // Use selected columns hook
+    const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
+        columns,
+        RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
+        QUERIES_COLUMNS_TITLES,
+        DEFAULT_RUNNING_QUERIES_COLUMNS,
+        REQUIRED_RUNNING_QUERIES_COLUMNS,
     );
 
-    const loading = isFetching && currentData === undefined;
-
-    const data = currentData?.resultSets?.[0].result || [];
+    const {tableSort, handleTableSort, backendSort} = useRunningQueriesSort();
 
-    const columns = React.useMemo(() => {
-        return getRunningQueriesColumns();
-    }, []);
+    const {currentData, data, isFetching, isLoading, error} =
+        topQueriesApi.useGetRunningQueriesQuery(
+            {
+                database: tenantName,
+                filters,
+                sortOrder: backendSort,
+            },
+            {pollingInterval: autoRefreshInterval},
+        );
 
     const handleRowClick = (row: KeyValueRow) => {
         return onRowClick(row.QueryText as string);
     };
 
     return (
-        <React.Fragment>
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>
+                {renderQueryModeControl()}
+                <Search
+                    value={filters.text}
+                    onChange={handleTextSearchUpdate}
+                    placeholder={i18n('filter.text.placeholder')}
+                    className={b('search')}
+                />
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
+                />
+            </TableWithControlsLayout.Controls>
+
             {error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
-            <TableWithControlsLayout.Table loading={loading}>
+            <TableWithControlsLayout.Table loading={isLoading}>
                 <ResizeableDataTable
                     emptyDataMessage={i18n('no-data')}
                     columnsWidthLSKey={RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY}
-                    columns={columns}
-                    data={data}
+                    columns={columnsToShow}
+                    data={data?.resultSets?.[0].result || []}
+                    loading={isFetching && currentData === undefined}
                     settings={TOP_QUERIES_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
-                    rowClassName={() => rowClassName}
+                    rowClassName={() => b('row')}
                     sortOrder={tableSort}
                     onSort={handleTableSort}
                 />
             </TableWithControlsLayout.Table>
-        </React.Fragment>
+        </TableWithControlsLayout>
     );
 };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx
index 499a0d8cfb..1f430c4737 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx
+++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx
@@ -7,30 +7,26 @@ import {StringParam, useQueryParam} from 'use-query-params';
 import {z} from 'zod';
 
 import type {DateRangeValues} from '../../../../components/DateRange';
-import {DateRange} from '../../../../components/DateRange';
-import {Search} from '../../../../components/Search';
-import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {parseQuery} from '../../../../routes';
 import {setTopQueriesFilters} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
+import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types';
 import {changeUserInput, setIsDirty} from '../../../../store/reducers/query/query';
 import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../store/reducers/tenant/constants';
-import {cn} from '../../../../utils/cn';
-import {useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
+import {useTypedDispatch} from '../../../../utils/hooks';
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 
 import {RunningQueriesData} from './RunningQueriesData';
 import {TopQueriesData} from './TopQueriesData';
+import {TimeFrameIds} from './constants';
 import i18n from './i18n';
 
 import './TopQueries.scss';
 
-const b = cn('kv-top-queries');
-
 const QueryModeIds = {
     top: 'top',
     running: 'running',
@@ -52,6 +48,7 @@ const QUERY_MODE_OPTIONS: RadioButtonOption[] = [
 ];
 
 const queryModeSchema = z.nativeEnum(QueryModeIds).catch(QueryModeIds.top);
+const timeFrameSchema = z.nativeEnum(TimeFrameIds).catch(TimeFrameIds.hour);
 
 interface TopQueriesProps {
     tenantName: string;
@@ -62,13 +59,13 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
     const location = useLocation();
     const history = useHistory();
     const [_queryMode = QueryModeIds.top, setQueryMode] = useQueryParam('queryMode', StringParam);
+    const [_timeFrame = TimeFrameIds.hour, setTimeFrame] = useQueryParam('timeFrame', StringParam);
 
     const queryMode = queryModeSchema.parse(_queryMode);
+    const timeFrame = timeFrameSchema.parse(_timeFrame);
 
     const isTopQueries = queryMode === QueryModeIds.top;
 
-    const filters = useTypedSelector((state) => state.executeTopQueries);
-
     const applyRowClick = React.useCallback(
         (input: string) => {
             dispatch(changeUserInput({input}));
@@ -93,35 +90,36 @@ export const TopQueries = ({tenantName}: TopQueriesProps) => {
         dispatch(setTopQueriesFilters({text}));
     };
 
+    const handleTimeFrameChange = (value: string[]) => {
+        setTimeFrame(value[0] as TimeFrame, 'replaceIn');
+    };
+
     const handleDateRangeChange = (value: DateRangeValues) => {
         dispatch(setTopQueriesFilters(value));
     };
 
-    const DataComponent = isTopQueries ? TopQueriesData : RunningQueriesData;
-
-    return (
-        <TableWithControlsLayout>
-            <TableWithControlsLayout.Controls>
-                <RadioButton
-                    options={QUERY_MODE_OPTIONS}
-                    value={queryMode}
-                    onUpdate={setQueryMode}
-                />
-                <Search
-                    value={filters.text}
-                    onChange={handleTextSearchUpdate}
-                    placeholder={i18n('filter.text.placeholder')}
-                    className={b('search')}
-                />
-                {isTopQueries ? (
-                    <DateRange
-                        from={filters.from}
-                        to={filters.to}
-                        onChange={handleDateRangeChange}
-                    />
-                ) : null}
-            </TableWithControlsLayout.Controls>
-            <DataComponent database={tenantName} onRowClick={onRowClick} rowClassName={b('row')} />
-        </TableWithControlsLayout>
+    const renderQueryModeControl = React.useCallback(() => {
+        return (
+            <RadioButton options={QUERY_MODE_OPTIONS} value={queryMode} onUpdate={setQueryMode} />
+        );
+    }, [queryMode, setQueryMode]);
+
+    return isTopQueries ? (
+        <TopQueriesData
+            tenantName={tenantName}
+            timeFrame={timeFrame}
+            renderQueryModeControl={renderQueryModeControl}
+            onRowClick={onRowClick}
+            handleTimeFrameChange={handleTimeFrameChange}
+            handleDateRangeChange={handleDateRangeChange}
+            handleTextSearchUpdate={handleTextSearchUpdate}
+        />
+    ) : (
+        <RunningQueriesData
+            tenantName={tenantName}
+            renderQueryModeControl={renderQueryModeControl}
+            onRowClick={onRowClick}
+            handleTextSearchUpdate={handleTextSearchUpdate}
+        />
     );
 };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
index d447fbef81..debd299a6a 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
+++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx
@@ -1,66 +1,133 @@
 import React from 'react';
 
+import type {Column} from '@gravity-ui/react-data-table';
+import {Select, TableColumnSetup} from '@gravity-ui/uikit';
+
+import type {DateRangeValues} from '../../../../components/DateRange';
+import {DateRange} from '../../../../components/DateRange';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
+import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types';
 import type {KeyValueRow} from '../../../../types/api/query';
+import {cn} from '../../../../utils/cn';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
+import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 import {parseQueryErrorToString} from '../../../../utils/query';
 
 import {getTopQueriesColumns} from './columns/columns';
-import {TOP_QUERIES_COLUMNS_WIDTH_LS_KEY} from './columns/constants';
+import {
+    DEFAULT_TOP_QUERIES_COLUMNS,
+    QUERIES_COLUMNS_TITLES,
+    REQUIRED_TOP_QUERIES_COLUMNS,
+    TOP_QUERIES_COLUMNS_WIDTH_LS_KEY,
+    TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
+} from './columns/constants';
+import {DEFAULT_TIME_FILTER_VALUE, TIME_FRAME_OPTIONS} from './constants';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useTopQueriesSort} from './utils';
 
-interface Props {
-    database: string;
+const b = cn('kv-top-queries');
+
+interface TopQueriesDataProps {
+    tenantName: string;
+    timeFrame: TimeFrame;
+    renderQueryModeControl: () => React.ReactNode;
     onRowClick: (query: string) => void;
-    rowClassName: string;
+    handleTimeFrameChange: (value: string[]) => void;
+    handleDateRangeChange: (value: DateRangeValues) => void;
+    handleTextSearchUpdate: (text: string) => void;
 }
 
-export const TopQueriesData = ({database, onRowClick, rowClassName}: Props) => {
+export const TopQueriesData = ({
+    tenantName,
+    timeFrame,
+    renderQueryModeControl,
+    onRowClick,
+    handleTimeFrameChange,
+    handleDateRangeChange,
+    handleTextSearchUpdate,
+}: TopQueriesDataProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
 
+    // Get columns for top queries
+    const columns: Column<KeyValueRow>[] = React.useMemo(() => {
+        return getTopQueriesColumns();
+    }, []);
+
+    // Use selected columns hook
+    const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
+        columns,
+        TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
+        QUERIES_COLUMNS_TITLES,
+        DEFAULT_TOP_QUERIES_COLUMNS,
+        REQUIRED_TOP_QUERIES_COLUMNS,
+    );
+
     const {tableSort, handleTableSort, backendSort} = useTopQueriesSort();
 
-    const {currentData, isFetching, error} = topQueriesApi.useGetTopQueriesQuery(
+    const {currentData, data, isFetching, isLoading, error} = topQueriesApi.useGetTopQueriesQuery(
         {
-            database,
+            database: tenantName,
             filters,
             sortOrder: backendSort,
+            timeFrame,
         },
         {pollingInterval: autoRefreshInterval},
     );
-    const loading = isFetching && currentData === undefined;
-
-    const data = currentData?.resultSets?.[0]?.result || [];
-
-    const columns = React.useMemo(() => {
-        return getTopQueriesColumns();
-    }, []);
 
     const handleRowClick = (row: KeyValueRow) => {
         return onRowClick(row.QueryText as string);
     };
 
     return (
-        <React.Fragment>
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>
+                {renderQueryModeControl()}
+                <Select
+                    options={TIME_FRAME_OPTIONS}
+                    value={[timeFrame]}
+                    onUpdate={handleTimeFrameChange}
+                />
+                <DateRange
+                    from={filters.from}
+                    to={filters.to}
+                    onChange={handleDateRangeChange}
+                    defaultValue={DEFAULT_TIME_FILTER_VALUE}
+                />
+                <Search
+                    value={filters.text}
+                    onChange={handleTextSearchUpdate}
+                    placeholder={i18n('filter.text.placeholder')}
+                    className={b('search')}
+                />
+                <TableColumnSetup
+                    popupWidth={200}
+                    items={columnsToSelect}
+                    showStatus
+                    onUpdate={setColumns}
+                    sortable={false}
+                />
+            </TableWithControlsLayout.Controls>
+
             {error ? <ResponseError error={parseQueryErrorToString(error)} /> : null}
-            <TableWithControlsLayout.Table loading={loading}>
+            <TableWithControlsLayout.Table loading={isLoading}>
                 <ResizeableDataTable
                     emptyDataMessage={i18n('no-data')}
                     columnsWidthLSKey={TOP_QUERIES_COLUMNS_WIDTH_LS_KEY}
-                    columns={columns}
-                    data={data || []}
+                    columns={columnsToShow}
+                    data={data?.resultSets?.[0].result || []}
+                    loading={isFetching && currentData === undefined}
                     settings={TOP_QUERIES_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
-                    rowClassName={() => rowClassName}
+                    rowClassName={() => b('row')}
                     sortOrder={tableSort}
                     onSort={handleTableSort}
                 />
             </TableWithControlsLayout.Table>
-        </React.Fragment>
+        </TableWithControlsLayout>
     );
 };
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx b/src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx
index c110ef7872..b33825d715 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx
+++ b/src/containers/Tenant/Diagnostics/TopQueries/columns/columns.tsx
@@ -1,5 +1,5 @@
 import DataTable from '@gravity-ui/react-data-table';
-import type {Column} from '@gravity-ui/react-data-table';
+import type {Column, OrderType} from '@gravity-ui/react-data-table';
 
 import {YDBSyntaxHighlighter} from '../../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
 import {TruncatedQuery} from '../../../../../components/TruncatedQuery/TruncatedQuery';
@@ -11,8 +11,9 @@ import {formatToMs, parseUsToMs} from '../../../../../utils/timeParsers';
 import {MAX_QUERY_HEIGHT} from '../../../utils/constants';
 
 import {
-    TOP_QUERIES_COLUMNS_IDS,
-    TOP_QUERIES_COLUMNS_TITLES,
+    QUERIES_COLUMNS_IDS,
+    QUERIES_COLUMNS_TITLES,
+    isSortableRunningQueriesColumn,
     isSortableTopQueriesColumn,
 } from './constants';
 
@@ -21,132 +22,140 @@ import '../TopQueries.scss';
 const b = cn('kv-top-queries');
 
 const cpuTimeUsColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.CPUTime,
-    header: TOP_QUERIES_COLUMNS_TITLES.CPUTime,
-    sortAccessor: (row) => Number(row.CPUTimeUs),
+    name: QUERIES_COLUMNS_IDS.CPUTime,
+    header: QUERIES_COLUMNS_TITLES.CPUTime,
     render: ({row}) => formatToMs(parseUsToMs(row.CPUTimeUs ?? undefined)),
     width: 120,
     align: DataTable.RIGHT,
-    sortable: false,
 };
 
 const queryTextColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.QueryText,
-    header: TOP_QUERIES_COLUMNS_TITLES.QueryText,
-    sortAccessor: (row) => Number(row.CPUTimeUs),
+    name: QUERIES_COLUMNS_IDS.QueryText,
+    header: QUERIES_COLUMNS_TITLES.QueryText,
     render: ({row}) => (
         <div className={b('query')}>
-            <TruncatedQuery value={row.QueryText?.toString()} maxQueryHeight={MAX_QUERY_HEIGHT} />
+            <TruncatedQuery
+                value={row.QueryText?.toString()}
+                maxQueryHeight={MAX_QUERY_HEIGHT}
+                hasClipboardButton
+            />
         </div>
     ),
-    sortable: false,
     width: 500,
 };
 
 const endTimeColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.EndTime,
-    header: TOP_QUERIES_COLUMNS_TITLES.EndTime,
+    name: QUERIES_COLUMNS_IDS.EndTime,
+    header: QUERIES_COLUMNS_TITLES.EndTime,
     render: ({row}) => formatDateTime(new Date(row.EndTime as string).getTime()),
     align: DataTable.RIGHT,
     width: 200,
 };
 
 const readRowsColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.ReadRows,
-    header: TOP_QUERIES_COLUMNS_TITLES.ReadRows,
+    name: QUERIES_COLUMNS_IDS.ReadRows,
+    header: QUERIES_COLUMNS_TITLES.ReadRows,
     render: ({row}) => formatNumber(row.ReadRows),
-    sortAccessor: (row) => Number(row.ReadRows),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const readBytesColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.ReadBytes,
-    header: TOP_QUERIES_COLUMNS_TITLES.ReadBytes,
+    name: QUERIES_COLUMNS_IDS.ReadBytes,
+    header: QUERIES_COLUMNS_TITLES.ReadBytes,
     render: ({row}) => formatNumber(row.ReadBytes),
-    sortAccessor: (row) => Number(row.ReadBytes),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const userSIDColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.UserSID,
-    header: TOP_QUERIES_COLUMNS_TITLES.UserSID,
+    name: QUERIES_COLUMNS_IDS.UserSID,
+    header: QUERIES_COLUMNS_TITLES.UserSID,
     render: ({row}) => <div className={b('user-sid')}>{row.UserSID || '–'}</div>,
-    sortAccessor: (row) => String(row.UserSID),
     align: DataTable.LEFT,
+    width: 120,
 };
 
 const oneLineQueryTextColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
-    header: TOP_QUERIES_COLUMNS_TITLES.OneLineQueryText,
+    name: QUERIES_COLUMNS_IDS.OneLineQueryText,
+    header: QUERIES_COLUMNS_TITLES.OneLineQueryText,
     render: ({row}) => (
-        <YDBSyntaxHighlighter language="yql" text={row.QueryText?.toString() || ''} />
+        <YDBSyntaxHighlighter
+            language="yql"
+            text={row.QueryText?.toString() || ''}
+            withClipboardButton={{
+                withLabel: false,
+            }}
+        />
     ),
-    sortable: false,
     width: 500,
 };
 
 const queryHashColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
-    header: TOP_QUERIES_COLUMNS_TITLES.QueryHash,
+    name: QUERIES_COLUMNS_IDS.QueryHash,
+    header: QUERIES_COLUMNS_TITLES.QueryHash,
     render: ({row}) => generateHash(String(row.QueryText)),
     width: 130,
-    sortable: false,
 };
 
 const durationColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.Duration,
-    header: TOP_QUERIES_COLUMNS_TITLES.Duration,
+    name: QUERIES_COLUMNS_IDS.Duration,
+    header: QUERIES_COLUMNS_TITLES.Duration,
     render: ({row}) => formatToMs(parseUsToMs(row.Duration ?? undefined)),
-    sortAccessor: (row) => Number(row.Duration),
     align: DataTable.RIGHT,
     width: 150,
 };
 
 const queryStartColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.QueryStartAt,
-    header: TOP_QUERIES_COLUMNS_TITLES.QueryStartAt,
+    name: QUERIES_COLUMNS_IDS.QueryStartAt,
+    header: QUERIES_COLUMNS_TITLES.QueryStartAt,
     render: ({row}) => formatDateTime(new Date(row.QueryStartAt as string).getTime()),
-    sortable: true,
     resizeable: false,
-    defaultOrder: DataTable.DESCENDING,
+    width: 160,
+};
+
+const requestUnitsColumn: Column<KeyValueRow> = {
+    name: QUERIES_COLUMNS_IDS.RequestUnits,
+    header: QUERIES_COLUMNS_TITLES.RequestUnits,
+    render: ({row}) => formatNumber(row.RequestUnits),
+    align: DataTable.RIGHT,
+    width: 150,
 };
 
 const applicationColumn: Column<KeyValueRow> = {
-    name: TOP_QUERIES_COLUMNS_IDS.ApplicationName,
-    header: TOP_QUERIES_COLUMNS_TITLES.ApplicationName,
+    name: QUERIES_COLUMNS_IDS.ApplicationName,
+    header: QUERIES_COLUMNS_TITLES.ApplicationName,
     render: ({row}) => <div className={b('user-sid')}>{row.ApplicationName || '–'}</div>,
-    sortable: true,
 };
 
 export function getTopQueriesColumns() {
     const columns = [
         queryHashColumn,
         cpuTimeUsColumn,
+        durationColumn,
+        readBytesColumn,
+        requestUnitsColumn,
         queryTextColumn,
         endTimeColumn,
-        durationColumn,
         readRowsColumn,
-        readBytesColumn,
         userSIDColumn,
     ];
 
     return columns.map((column) => ({
         ...column,
         sortable: isSortableTopQueriesColumn(column.name),
+        defaultOrder: DataTable.DESCENDING as OrderType,
     }));
 }
 
 export function getTenantOverviewTopQueriesColumns() {
     return [queryHashColumn, oneLineQueryTextColumn, cpuTimeUsColumn];
 }
-
 export function getRunningQueriesColumns() {
     const columns = [userSIDColumn, queryStartColumn, queryTextColumn, applicationColumn];
 
     return columns.map((column) => ({
         ...column,
-        sortable: isSortableTopQueriesColumn(column.name),
+        sortable: isSortableRunningQueriesColumn(column.name),
     }));
 }
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/columns/constants.ts b/src/containers/Tenant/Diagnostics/TopQueries/columns/constants.ts
index 4725e829e4..eef617545a 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/columns/constants.ts
+++ b/src/containers/Tenant/Diagnostics/TopQueries/columns/constants.ts
@@ -4,8 +4,10 @@ import i18n from './i18n';
 
 export const TOP_QUERIES_COLUMNS_WIDTH_LS_KEY = 'topQueriesColumnsWidth';
 export const RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY = 'runningQueriesColumnsWidth';
+export const TOP_QUERIES_SELECTED_COLUMNS_LS_KEY = 'topQueriesSelectedColumns';
+export const RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY = 'runningQueriesSelectedColumns';
 
-export const TOP_QUERIES_COLUMNS_IDS = {
+export const QUERIES_COLUMNS_IDS = {
     CPUTime: 'CPUTime',
     QueryText: 'QueryText',
     EndTime: 'EndTime',
@@ -17,11 +19,34 @@ export const TOP_QUERIES_COLUMNS_IDS = {
     Duration: 'Duration',
     QueryStartAt: 'QueryStartAt',
     ApplicationName: 'ApplicationName',
+    RequestUnits: 'RequestUnits',
 } as const;
+export type QueriesColumnId = ValueOf<typeof QUERIES_COLUMNS_IDS>;
 
-type TopQueriesColumnId = ValueOf<typeof TOP_QUERIES_COLUMNS_IDS>;
+export const DEFAULT_TOP_QUERIES_COLUMNS: QueriesColumnId[] = [
+    'QueryHash',
+    'CPUTime',
+    'QueryText',
+    'EndTime',
+    'Duration',
+    'ReadRows',
+    'ReadBytes',
+    'RequestUnits',
+    'UserSID',
+];
+export const REQUIRED_TOP_QUERIES_COLUMNS: QueriesColumnId[] = ['CPUTime', 'QueryText'];
 
-export const TOP_QUERIES_COLUMNS_TITLES: Record<TopQueriesColumnId, string> = {
+export const DEFAULT_RUNNING_QUERIES_COLUMNS: QueriesColumnId[] = [
+    'UserSID',
+    'QueryStartAt',
+    'QueryText',
+    'ApplicationName',
+];
+
+// Required columns that must always be displayed for running queries
+export const REQUIRED_RUNNING_QUERIES_COLUMNS: QueriesColumnId[] = ['QueryStartAt', 'QueryText'];
+
+export const QUERIES_COLUMNS_TITLES: Record<QueriesColumnId, string> = {
     get CPUTime() {
         return i18n('cpu-time');
     },
@@ -55,26 +80,53 @@ export const TOP_QUERIES_COLUMNS_TITLES: Record<TopQueriesColumnId, string> = {
     get ApplicationName() {
         return i18n('application');
     },
+    get RequestUnits() {
+        return i18n('request-units');
+    },
 } as const;
 
-const TOP_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<TopQueriesColumnId, string | undefined> = {
+const TOP_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<QueriesColumnId, string | undefined> = {
     CPUTime: 'CPUTimeUs',
     QueryText: undefined,
-    EndTime: 'EndTime',
-    ReadRows: 'ReadRows',
+    EndTime: undefined,
+    ReadRows: undefined,
     ReadBytes: 'ReadBytes',
-    UserSID: 'UserSID',
+    UserSID: undefined,
     OneLineQueryText: undefined,
     QueryHash: undefined,
     Duration: 'Duration',
+    QueryStartAt: undefined,
+    ApplicationName: undefined,
+    RequestUnits: 'RequestUnits',
+} as const;
+
+// Define sort fields specifically for running queries
+const RUNNING_QUERIES_COLUMNS_TO_SORT_FIELDS: Record<QueriesColumnId, string | undefined> = {
+    CPUTime: undefined,
+    QueryText: undefined,
+    EndTime: undefined,
+    ReadRows: undefined,
+    ReadBytes: undefined,
+    UserSID: 'UserSID',
+    OneLineQueryText: undefined,
+    QueryHash: undefined,
+    Duration: undefined,
     QueryStartAt: 'QueryStartAt',
     ApplicationName: 'ApplicationName',
+    RequestUnits: undefined,
 } as const;
-
 export function getTopQueriesColumnSortField(columnId?: string) {
-    return TOP_QUERIES_COLUMNS_TO_SORT_FIELDS[columnId as TopQueriesColumnId];
+    return TOP_QUERIES_COLUMNS_TO_SORT_FIELDS[columnId as QueriesColumnId];
+}
+
+export function getRunningQueriesColumnSortField(columnId?: string) {
+    return RUNNING_QUERIES_COLUMNS_TO_SORT_FIELDS[columnId as QueriesColumnId];
 }
 
 export function isSortableTopQueriesColumn(columnId: string) {
     return Boolean(getTopQueriesColumnSortField(columnId));
 }
+
+export function isSortableRunningQueriesColumn(columnId: string) {
+    return Boolean(getRunningQueriesColumnSortField(columnId));
+}
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/columns/i18n/en.json b/src/containers/Tenant/Diagnostics/TopQueries/columns/i18n/en.json
index 7604088039..b5095769a7 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/columns/i18n/en.json
+++ b/src/containers/Tenant/Diagnostics/TopQueries/columns/i18n/en.json
@@ -1,12 +1,13 @@
 {
-  "cpu-time": "CPUTime",
-  "read-rows": "ReadRows",
-  "read-bytes": "ReadBytes",
-  "query-hash": "QueryHash",
+  "cpu-time": "CPU Time",
+  "read-rows": "Read Rows",
+  "read-bytes": "Read Bytes",
+  "query-hash": "Query Hash",
   "user": "User",
   "start-time": "Start time",
   "end-time": "End time",
   "duration": "Duration",
   "query-text": "Query text",
-  "application": "Application"
+  "application": "Application",
+  "request-units": "Request Units"
 }
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/constants.ts b/src/containers/Tenant/Diagnostics/TopQueries/constants.ts
new file mode 100644
index 0000000000..194d8e6847
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/TopQueries/constants.ts
@@ -0,0 +1,32 @@
+import type {SelectOption} from '@gravity-ui/uikit';
+
+import i18n from './i18n';
+
+export const TimeFrameIds = {
+    hour: 'hour',
+    minute: 'minute',
+} as const;
+
+export type TimeFrameId = keyof typeof TimeFrameIds;
+
+export const TIME_FRAME_OPTIONS: SelectOption[] = [
+    {
+        value: TimeFrameIds.hour,
+        content: i18n('timeframe_hour'),
+    },
+    {
+        value: TimeFrameIds.minute,
+        content: i18n('timeframe_minute'),
+    },
+];
+
+export const DEFAULT_TIME_FILTER_VALUE = {
+    start: {
+        value: 'now-6h',
+        type: 'relative',
+    },
+    end: {
+        value: 'now',
+        type: 'relative',
+    },
+} as const;
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json b/src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json
index cbdc83dc08..5dbcec47d9 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json
+++ b/src/containers/Tenant/Diagnostics/TopQueries/i18n/en.json
@@ -2,5 +2,7 @@
   "no-data": "No data",
   "filter.text.placeholder": "Search by query text or userSID...",
   "mode_top": "Top",
-  "mode_running": "Running"
+  "mode_running": "Running",
+  "timeframe_hour": "Per hour",
+  "timeframe_minute": "Per minute"
 }
diff --git a/src/containers/Tenant/Diagnostics/TopQueries/utils.ts b/src/containers/Tenant/Diagnostics/TopQueries/utils.ts
index 19126c690f..35660e3b7e 100644
--- a/src/containers/Tenant/Diagnostics/TopQueries/utils.ts
+++ b/src/containers/Tenant/Diagnostics/TopQueries/utils.ts
@@ -1,38 +1,54 @@
 import React from 'react';
 
 import type {Settings} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import {prepareBackendSortFieldsFromTableSort, useTableSort} from '../../../../utils/hooks';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
-import {TOP_QUERIES_COLUMNS_IDS, getTopQueriesColumnSortField} from './columns/constants';
+import {
+    QUERIES_COLUMNS_IDS,
+    getRunningQueriesColumnSortField,
+    getTopQueriesColumnSortField,
+} from './columns/constants';
 
 export const TOP_QUERIES_TABLE_SETTINGS: Settings = {
     ...QUERY_TABLE_SETTINGS,
     disableSortReset: true,
 };
 
-function useQueriesSort(initialSortColumn: string) {
+export function useTopQueriesSort() {
     const [tableSort, handleTableSort] = useTableSort({
-        initialSortColumn: initialSortColumn,
-        initialSortOrder: -1,
+        initialSortColumn: QUERIES_COLUMNS_IDS.CPUTime,
+        initialSortOrder: DataTable.DESCENDING,
         multiple: true,
+        fixedOrderType: DataTable.DESCENDING,
     });
 
-    const backendSort = React.useMemo(
-        () => prepareBackendSortFieldsFromTableSort(tableSort, getTopQueriesColumnSortField),
-        [tableSort],
-    );
-
     return {
         tableSort,
         handleTableSort,
-        backendSort,
+        backendSort: React.useMemo(
+            () => prepareBackendSortFieldsFromTableSort(tableSort, getTopQueriesColumnSortField),
+            [tableSort],
+        ),
     };
 }
-export function useTopQueriesSort() {
-    return useQueriesSort(TOP_QUERIES_COLUMNS_IDS.CPUTime);
-}
+
 export function useRunningQueriesSort() {
-    return useQueriesSort(TOP_QUERIES_COLUMNS_IDS.QueryStartAt);
+    const [tableSort, handleTableSort] = useTableSort({
+        initialSortColumn: QUERIES_COLUMNS_IDS.QueryStartAt,
+        initialSortOrder: DataTable.DESCENDING,
+        multiple: true,
+    });
+
+    return {
+        tableSort,
+        handleTableSort,
+        backendSort: React.useMemo(
+            () =>
+                prepareBackendSortFieldsFromTableSort(tableSort, getRunningQueriesColumnSortField),
+            [tableSort],
+        ),
+    };
 }
diff --git a/src/containers/Tenant/Diagnostics/TopShards/Filters/Filters.tsx b/src/containers/Tenant/Diagnostics/TopShards/Filters/Filters.tsx
index f99cd17a55..ad9f1ce00c 100644
--- a/src/containers/Tenant/Diagnostics/TopShards/Filters/Filters.tsx
+++ b/src/containers/Tenant/Diagnostics/TopShards/Filters/Filters.tsx
@@ -15,6 +15,17 @@ interface FiltersProps {
     className?: string;
 }
 
+const DEFAULT_TIME_FILTER_VALUE = {
+    start: {
+        value: 'now-1h',
+        type: 'relative',
+    },
+    end: {
+        value: 'now',
+        type: 'relative',
+    },
+} as const;
+
 export const Filters = ({value, onChange}: FiltersProps) => {
     const handleModeChange = (mode: string) => {
         if (!isEnumMember(EShardsWorkloadMode, mode)) {
@@ -45,7 +56,12 @@ export const Filters = ({value, onChange}: FiltersProps) => {
                     {i18n('filters.mode.history')}
                 </RadioButton.Option>
             </RadioButton>
-            <DateRange from={from} to={to} onChange={handleDateRangeChange} />
+            <DateRange
+                from={from}
+                to={to}
+                onChange={handleDateRangeChange}
+                defaultValue={DEFAULT_TIME_FILTER_VALUE}
+            />
         </React.Fragment>
     );
 };
diff --git a/src/store/reducers/executeTopQueries/constants.ts b/src/store/reducers/executeTopQueries/constants.ts
new file mode 100644
index 0000000000..d0ae3e2b05
--- /dev/null
+++ b/src/store/reducers/executeTopQueries/constants.ts
@@ -0,0 +1,19 @@
+// Define table names as constants
+export const TOP_QUERIES_TABLES = {
+    CPU_TIME: {
+        ONE_HOUR: '.sys/top_queries_by_cpu_time_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_cpu_time_one_minute',
+    },
+    DURATION: {
+        ONE_HOUR: '.sys/top_queries_by_duration_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_duration_one_minute',
+    },
+    READ_BYTES: {
+        ONE_HOUR: '.sys/top_queries_by_read_bytes_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_read_bytes_one_minute',
+    },
+    REQUEST_UNITS: {
+        ONE_HOUR: '.sys/top_queries_by_request_units_one_hour',
+        ONE_MINUTE: '.sys/top_queries_by_request_units_one_minute',
+    },
+};
diff --git a/src/store/reducers/executeTopQueries/executeTopQueries.ts b/src/store/reducers/executeTopQueries/executeTopQueries.ts
index b7a5a85202..aa50b3568e 100644
--- a/src/store/reducers/executeTopQueries/executeTopQueries.ts
+++ b/src/store/reducers/executeTopQueries/executeTopQueries.ts
@@ -8,7 +8,8 @@ import {prepareOrderByFromTableSort} from '../../../utils/hooks/useTableSort';
 import {isQueryErrorResponse, parseQueryAPIResponse} from '../../../utils/query';
 import {api} from '../api';
 
-import type {TopQueriesFilters} from './types';
+import {TOP_QUERIES_TABLES} from './constants';
+import type {TimeFrame, TopQueriesFilters} from './types';
 import {getFiltersConditions} from './utils';
 
 const initialState: TopQueriesFilters = {};
@@ -26,29 +27,58 @@ const slice = createSlice({
 export const {setTopQueriesFilters} = slice.actions;
 export default slice.reducer;
 
-const getQueryText = (filters?: TopQueriesFilters, sortOrder?: SortOrder[]) => {
-    const filterConditions = getFiltersConditions(filters);
-
+const getQueryText = (
+    timeFrame: TimeFrame,
+    filters?: TopQueriesFilters,
+    sortOrder?: SortOrder[],
+    limit?: number,
+) => {
     const orderBy = prepareOrderByFromTableSort(sortOrder);
 
+    // Determine the metric type based on sort field
+    let metricType = TOP_QUERIES_TABLES.CPU_TIME; // Default to CPU_TIME
+
+    if (sortOrder && sortOrder.length > 0) {
+        const primarySortField = sortOrder[0].columnId;
+
+        if (primarySortField === 'Duration') {
+            metricType = TOP_QUERIES_TABLES.DURATION;
+        } else if (primarySortField === 'ReadBytes') {
+            metricType = TOP_QUERIES_TABLES.READ_BYTES;
+        } else if (primarySortField === 'RequestUnits') {
+            metricType = TOP_QUERIES_TABLES.REQUEST_UNITS;
+        } else if (primarySortField === 'CPUTime') {
+            metricType = TOP_QUERIES_TABLES.CPU_TIME;
+        }
+    }
+
+    // Select the appropriate table based on timeFrame filter
+    const tableName = timeFrame === 'minute' ? metricType.ONE_MINUTE : metricType.ONE_HOUR;
+    const filterConditions = getFiltersConditions(tableName, filters);
+
     return `${QUERY_TECHNICAL_MARK}
-SELECT
-    CPUTime as CPUTimeUs,
-    QueryText,
-    IntervalEnd,
-    EndTime,
-    ReadRows,
-    ReadBytes,
-    UserSID,
-    Duration
-FROM \`.sys/top_queries_by_cpu_time_one_hour\`
+    SELECT
+        CPUTime as CPUTimeUs,
+        QueryText,
+        IntervalEnd,
+        EndTime,
+        ReadRows,
+        ReadBytes,
+        UserSID,
+        Duration,
+        RequestUnits
+FROM \`${tableName}\`
 WHERE ${filterConditions || 'true'} AND QueryText NOT LIKE '%${QUERY_TECHNICAL_MARK}%'
 ${orderBy}
-LIMIT 100
+LIMIT ${limit || 100}
 `;
 };
 
-function getRunningQueriesText(filters?: TopQueriesFilters, sortOrder?: SortOrder[]) {
+function getRunningQueriesText(
+    filters?: TopQueriesFilters,
+    sortOrder?: SortOrder[],
+    limit?: number,
+) {
     const filterConditions = filters?.text
         ? `Query ILIKE '%${filters.text}%' OR UserSID ILIKE '%${filters.text}%'`
         : '';
@@ -63,30 +93,38 @@ SELECT
     ApplicationName
 FROM \`.sys/query_sessions\`
 WHERE ${filterConditions || 'true'} AND Query NOT LIKE '%${QUERY_TECHNICAL_MARK}%'
-${orderBy}
-LIMIT 100`;
+AND QueryStartAt is not null ${orderBy}
+LIMIT ${limit || 100}`;
 }
 
-interface TopQueriesRequestParams {
+interface QueriesRequestParams {
     database: string;
     filters?: TopQueriesFilters;
     sortOrder?: SortOrder[];
+    limit?: number;
 }
 
+type TopQueriesRequestParams = QueriesRequestParams & {timeFrame: TimeFrame};
+
+type RunningQueriesRequestParams = QueriesRequestParams;
+
 export const topQueriesApi = api.injectEndpoints({
     endpoints: (build) => ({
         getTopQueries: build.query({
-            queryFn: async ({database, filters, sortOrder}: TopQueriesRequestParams, {signal}) => {
+            queryFn: async (
+                {database, filters, sortOrder, timeFrame, limit}: TopQueriesRequestParams,
+                {signal},
+            ) => {
                 const preparedFilters = {
                     ...filters,
-                    from: filters?.from || 'now-1h',
+                    from: filters?.from || 'now-6h',
                     to: filters?.to || 'now',
                 };
 
                 try {
                     const response = await window.api.viewer.sendQuery(
                         {
-                            query: getQueryText(preparedFilters, sortOrder),
+                            query: getQueryText(timeFrame, preparedFilters, sortOrder, limit),
                             database,
                             action: 'execute-scan',
                         },
@@ -118,11 +156,14 @@ export const topQueriesApi = api.injectEndpoints({
             providesTags: ['All'],
         }),
         getRunningQueries: build.query({
-            queryFn: async ({database, filters, sortOrder}: TopQueriesRequestParams, {signal}) => {
+            queryFn: async (
+                {database, filters, sortOrder, limit}: RunningQueriesRequestParams,
+                {signal},
+            ) => {
                 try {
                     const response = await window.api.viewer.sendQuery(
                         {
-                            query: getRunningQueriesText(filters, sortOrder),
+                            query: getRunningQueriesText(filters, sortOrder, limit),
                             database,
                             action: 'execute-scan',
                         },
diff --git a/src/store/reducers/executeTopQueries/types.ts b/src/store/reducers/executeTopQueries/types.ts
index 817dbc5355..874916bcea 100644
--- a/src/store/reducers/executeTopQueries/types.ts
+++ b/src/store/reducers/executeTopQueries/types.ts
@@ -1,3 +1,5 @@
+export type TimeFrame = 'minute' | 'hour';
+
 export interface TopQueriesFilters {
     /** ms from epoch */
     from?: string;
diff --git a/src/store/reducers/executeTopQueries/utils.ts b/src/store/reducers/executeTopQueries/utils.ts
index 03242cf0ad..214bca229b 100644
--- a/src/store/reducers/executeTopQueries/utils.ts
+++ b/src/store/reducers/executeTopQueries/utils.ts
@@ -5,13 +5,13 @@ import type {TopQueriesFilters} from './types';
 const endTimeColumn = 'EndTime';
 const intervalEndColumn = 'IntervalEnd';
 
-const getMaxIntervalSubquery = () => `(
+const getMaxIntervalSubquery = (tableName: string) => `(
     SELECT
         MAX(${intervalEndColumn})
-    FROM \`.sys/top_queries_by_cpu_time_one_hour\`
+    FROM \`${tableName}\`
 )`;
 
-export function getFiltersConditions(filters?: TopQueriesFilters) {
+export function getFiltersConditions(tableName: string, filters?: TopQueriesFilters) {
     const conditions: string[] = [];
     const to = dateTimeParse(Number(filters?.to) || filters?.to)?.valueOf();
     const from = dateTimeParse(Number(filters?.from) || filters?.from)?.valueOf();
@@ -33,7 +33,7 @@ export function getFiltersConditions(filters?: TopQueriesFilters) {
 
     // If there is no filters, return queries, that were executed in the last hour
     if (!from && !to) {
-        conditions.push(`${intervalEndColumn} IN ${getMaxIntervalSubquery()}`);
+        conditions.push(`${intervalEndColumn} IN ${getMaxIntervalSubquery(tableName)}`);
     }
 
     if (filters?.text) {
diff --git a/tests/suites/tenant/diagnostics/Diagnostics.ts b/tests/suites/tenant/diagnostics/Diagnostics.ts
index e0a6f04d23..f17cda1f5c 100644
--- a/tests/suites/tenant/diagnostics/Diagnostics.ts
+++ b/tests/suites/tenant/diagnostics/Diagnostics.ts
@@ -127,11 +127,52 @@ export enum QueriesSwitch {
     Running = 'Running',
 }
 
+export enum QueryPeriod {
+    PerHour = 'Per hour',
+    PerMinute = 'Per minute',
+}
+
 export enum TopShardsMode {
     Immediate = 'Immediate',
     Historical = 'Historical',
 }
 
+// Column names as they appear in the UI (based on QUERIES_COLUMNS_TITLES)
+export const QUERY_COLUMNS_IDS = {
+    QueryHash: 'Query Hash',
+    CPUTime: 'CPU Time',
+    Duration: 'Duration',
+    QueryText: 'Query text',
+    EndTime: 'End time',
+    StartTime: 'Start time',
+    ReadRows: 'Read Rows',
+    ReadBytes: 'Read Bytes',
+    RequestUnits: 'Request Units',
+    User: 'User',
+    Application: 'Application',
+} as const;
+
+// Default columns for the Top Queries mode (based on DEFAULT_TOP_QUERIES_COLUMNS)
+export const QueryTopColumns = [
+    QUERY_COLUMNS_IDS.QueryHash,
+    QUERY_COLUMNS_IDS.CPUTime,
+    QUERY_COLUMNS_IDS.Duration,
+    QUERY_COLUMNS_IDS.QueryText,
+    QUERY_COLUMNS_IDS.EndTime,
+    QUERY_COLUMNS_IDS.ReadRows,
+    QUERY_COLUMNS_IDS.ReadBytes,
+    QUERY_COLUMNS_IDS.RequestUnits,
+    QUERY_COLUMNS_IDS.User,
+];
+
+// Default columns for the Running Queries mode (based on DEFAULT_RUNNING_QUERIES_COLUMNS)
+export const QueryRunningColumns = [
+    QUERY_COLUMNS_IDS.User,
+    QUERY_COLUMNS_IDS.StartTime,
+    QUERY_COLUMNS_IDS.QueryText,
+    QUERY_COLUMNS_IDS.Application,
+];
+
 const TOP_SHARDS_COLUMNS_IDS = {
     TabletId: 'TabletId',
     CPUCores: 'CPUCores',
@@ -304,8 +345,28 @@ export class Diagnostics {
         await option.evaluate((el) => (el as HTMLElement).click());
     }
 
-    async getSelectedTopShardsMode(): Promise<string> {
+    async getSelectedTableMode(): Promise<string> {
         const checkedOption = this.tableRadioButton.locator('.g-radio-button__option_checked');
         return (await checkedOption.textContent())?.trim() || '';
     }
+
+    async selectQueryPeriod(period: QueryPeriod): Promise<void> {
+        // Click on the dropdown to open it
+        const periodSelect = this.tableControls.locator('.g-select');
+        await periodSelect.click();
+
+        // Select the specified period option
+        const optionLocator = periodSelect
+            .page()
+            .locator(`.g-select-list__option-default-label:has-text("${period}")`);
+        await optionLocator.click();
+    }
+
+    async getSelectedQueryPeriod(): Promise<string> {
+        const periodSelect = this.tableControls.locator('.g-select');
+        const selectedText = await periodSelect
+            .locator('.g-select-control__option-text')
+            .textContent();
+        return selectedText?.trim() || '';
+    }
 }
diff --git a/tests/suites/tenant/diagnostics/diagnostics.test.ts b/tests/suites/tenant/diagnostics/diagnostics.test.ts
deleted file mode 100644
index 2c47464813..0000000000
--- a/tests/suites/tenant/diagnostics/diagnostics.test.ts
+++ /dev/null
@@ -1,312 +0,0 @@
-import {expect, test} from '@playwright/test';
-
-import {dsVslotsSchema, tenantName} from '../../../utils/constants';
-import {DiagnosticsNodesTable} from '../../paginatedTable/paginatedTable';
-import {NavigationTabs, TenantPage} from '../TenantPage';
-import {longRunningQuery} from '../constants';
-import {QueryEditor} from '../queryEditor/models/QueryEditor';
-
-import {
-    Diagnostics,
-    DiagnosticsTab,
-    QueriesSwitch,
-    TopShardsHistoricalColumns,
-    TopShardsImmediateColumns,
-    TopShardsMode,
-} from './Diagnostics';
-import {setupTopShardsHistoryMock} from './mocks';
-
-test.describe('Diagnostics tab', async () => {
-    test('Info tab shows main page elements', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Info);
-        await expect(diagnostics.areInfoCardsVisible()).resolves.toBe(true);
-    });
-
-    test('Info tab shows resource utilization', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Info);
-
-        const utilization = await diagnostics.getResourceUtilization();
-        expect(utilization.cpu.system).toMatch(/\d+(\.\d+)? \/ \d+/);
-        expect(utilization.cpu.user).toMatch(/\d+(\.\d+)? \/ \d+/);
-        expect(utilization.cpu.ic).toMatch(/\d+(\.\d+)? \/ \d+/);
-        expect(utilization.storage).toBeTruthy();
-        expect(utilization.memory).toMatch(/\d+ \/ \d+\s*GB/);
-    });
-
-    test('Info tab shows healthcheck status', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Info);
-
-        const status = await diagnostics.getHealthcheckStatus();
-        expect(status).toBe('GOOD');
-    });
-
-    test('Storage tab shows Groups and Nodes views', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Storage);
-
-        // Check Groups view
-        await diagnostics.storage.selectEntityType('Groups');
-        await expect(diagnostics.storage.table).toBeVisible();
-
-        // Check Nodes view
-        await diagnostics.storage.selectEntityType('Nodes');
-        await expect(diagnostics.storage.table).toBeVisible();
-    });
-
-    test('Nodes tab shows nodes table with memory viewer', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Nodes);
-
-        // Check nodes table is visible
-        await expect(diagnostics.nodes.table).toBeVisible();
-
-        // Enable Memory column to show memory viewer
-        const paginatedTable = new DiagnosticsNodesTable(page);
-        await paginatedTable.waitForTableVisible();
-        await paginatedTable.waitForTableData();
-        const controls = paginatedTable.getControls();
-        await controls.openColumnSetup();
-        await controls.setColumnChecked('Memory');
-        await controls.applyColumnVisibility();
-
-        // Check memory viewer is present and visible
-        await diagnostics.memoryViewer.waitForVisible();
-        await expect(diagnostics.memoryViewer.isVisible()).resolves.toBe(true);
-    });
-
-    test('Primary keys header is visible in Schema tab', async ({page}) => {
-        const pageQueryParams = {
-            schema: dsVslotsSchema,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const objectSummary = new Diagnostics(page);
-
-        await objectSummary.clickTab(DiagnosticsTab.Schema);
-        await expect(objectSummary.isSchemaViewerVisible()).resolves.toBe(true);
-
-        await expect(objectSummary.getPrimaryKeys()).resolves.toEqual([
-            'NodeId',
-            'PDiskId',
-            'VSlotId',
-        ]);
-    });
-
-    test('No runnning queries in Queries if no queries are running', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Queries);
-        await diagnostics.clickRadioSwitch(QueriesSwitch.Running);
-        await diagnostics.table.hasNoData();
-    });
-
-    test('Running query is shown if query is running', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'query',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const queryEditor = new QueryEditor(page);
-
-        await queryEditor.setQuery(longRunningQuery);
-        await queryEditor.clickRunButton();
-        await page.waitForTimeout(500);
-        const statusElement = await queryEditor.getExecutionStatus();
-        await expect(statusElement).toBe('Running');
-        await tenantPage.selectNavigationTab(NavigationTabs.Diagnostics);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.clickTab(DiagnosticsTab.Queries);
-        await diagnostics.clickRadioSwitch(QueriesSwitch.Running);
-        expect(
-            await diagnostics.table.waitForCellValueByHeader(1, 'Query text', longRunningQuery),
-        ).toBe(true);
-    });
-
-    test('TopShards tab defaults to Immediate mode', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-            diagnosticsTab: 'topShards',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-
-        // Verify Immediate mode is selected by default
-        expect(await diagnostics.getSelectedTopShardsMode()).toBe(TopShardsMode.Immediate);
-    });
-
-    test('TopShards immediate tab shows all expected column headers', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-            diagnosticsTab: 'topShards',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-
-        // Verify table has data
-        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
-        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
-        // Verify column headers exist
-        await diagnostics.table.verifyHeaders(TopShardsImmediateColumns);
-    });
-
-    test('TopShards history tab shows all expected column headers', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-            diagnosticsTab: 'topShards',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.selectTopShardsMode(TopShardsMode.Historical);
-        // Verify table has data
-        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
-        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
-
-        // Verify column headers exist
-        await diagnostics.table.verifyHeaders(TopShardsHistoricalColumns);
-    });
-
-    test('TopShards tab first row has values for all columns in Immediate mode', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-            diagnosticsTab: 'topShards',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-
-        // Verify table has data
-        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
-        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
-
-        // Verify first row has non-empty values for all columns
-        for (const column of TopShardsImmediateColumns) {
-            const columnValue = await diagnostics.table.getCellValueByHeader(1, column);
-            expect(columnValue.trim()).toBeTruthy();
-        }
-    });
-
-    test('TopShards tab first row has values for all columns in History mode', async ({page}) => {
-        // Setup mock for TopShards tab in History mode
-        await setupTopShardsHistoryMock(page);
-
-        // Now navigate to diagnostics page to check topShards
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-            diagnosticsTab: 'topShards',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-        await diagnostics.selectTopShardsMode(TopShardsMode.Historical);
-
-        // Verify table has data
-        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
-        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
-
-        // Verify first row has non-empty values for all columns
-        for (const column of TopShardsHistoricalColumns) {
-            const columnValue = await diagnostics.table.getCellValueByHeader(1, column);
-            expect(columnValue.trim()).toBeTruthy();
-        }
-    });
-
-    test('TopShards tab can switch back to Immediate mode from Historical mode', async ({page}) => {
-        const pageQueryParams = {
-            schema: tenantName,
-            database: tenantName,
-            tenantPage: 'diagnostics',
-            diagnosticsTab: 'topShards',
-        };
-        const tenantPage = new TenantPage(page);
-        await tenantPage.goto(pageQueryParams);
-
-        const diagnostics = new Diagnostics(page);
-
-        // Switch to Historical mode
-        await diagnostics.selectTopShardsMode(TopShardsMode.Historical);
-        expect(await diagnostics.getSelectedTopShardsMode()).toBe(TopShardsMode.Historical);
-
-        // Switch back to Immediate mode
-        await diagnostics.selectTopShardsMode(TopShardsMode.Immediate);
-        expect(await diagnostics.getSelectedTopShardsMode()).toBe(TopShardsMode.Immediate);
-
-        // Verify table still has data after switching back
-        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
-        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
-    });
-});
diff --git a/tests/suites/tenant/diagnostics/tabs/info.test.ts b/tests/suites/tenant/diagnostics/tabs/info.test.ts
new file mode 100644
index 0000000000..75918464da
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/info.test.ts
@@ -0,0 +1,57 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../../utils/constants';
+import {TenantPage} from '../../TenantPage';
+import {Diagnostics, DiagnosticsTab} from '../Diagnostics';
+
+test.describe('Diagnostics Info tab', async () => {
+    test('Info tab shows main page elements', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Info);
+        await expect(diagnostics.areInfoCardsVisible()).resolves.toBe(true);
+    });
+
+    test('Info tab shows resource utilization', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Info);
+
+        const utilization = await diagnostics.getResourceUtilization();
+        expect(utilization.cpu.system).toMatch(/\d+(\.\d+)? \/ \d+/);
+        expect(utilization.cpu.user).toMatch(/\d+(\.\d+)? \/ \d+/);
+        expect(utilization.cpu.ic).toMatch(/\d+(\.\d+)? \/ \d+/);
+        expect(utilization.storage).toBeTruthy();
+        expect(utilization.memory).toMatch(/\d+ \/ \d+\s*GB/);
+    });
+
+    test('Info tab shows healthcheck status', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Info);
+
+        const status = await diagnostics.getHealthcheckStatus();
+        expect(status).toBe('GOOD');
+    });
+});
diff --git a/tests/suites/tenant/diagnostics/tabs/nodes.test.ts b/tests/suites/tenant/diagnostics/tabs/nodes.test.ts
new file mode 100644
index 0000000000..375e854ff7
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/nodes.test.ts
@@ -0,0 +1,37 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../../utils/constants';
+import {DiagnosticsNodesTable} from '../../../paginatedTable/paginatedTable';
+import {TenantPage} from '../../TenantPage';
+import {Diagnostics, DiagnosticsTab} from '../Diagnostics';
+
+test.describe('Diagnostics Nodes tab', async () => {
+    test('Nodes tab shows nodes table with memory viewer', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Nodes);
+
+        // Check nodes table is visible
+        await expect(diagnostics.nodes.table).toBeVisible();
+
+        // Enable Memory column to show memory viewer
+        const paginatedTable = new DiagnosticsNodesTable(page);
+        await paginatedTable.waitForTableVisible();
+        await paginatedTable.waitForTableData();
+        const controls = paginatedTable.getControls();
+        await controls.openColumnSetup();
+        await controls.setColumnChecked('Memory');
+        await controls.applyColumnVisibility();
+
+        // Check memory viewer is present and visible
+        await diagnostics.memoryViewer.waitForVisible();
+        await expect(diagnostics.memoryViewer.isVisible()).resolves.toBe(true);
+    });
+});
diff --git a/tests/suites/tenant/diagnostics/tabs/queries.test.ts b/tests/suites/tenant/diagnostics/tabs/queries.test.ts
new file mode 100644
index 0000000000..58d8c7189e
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/queries.test.ts
@@ -0,0 +1,182 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../../utils/constants';
+import {NavigationTabs, TenantPage} from '../../TenantPage';
+import {longRunningQuery} from '../../constants';
+import {QueryEditor} from '../../queryEditor/models/QueryEditor';
+import {
+    Diagnostics,
+    DiagnosticsTab,
+    QUERY_COLUMNS_IDS,
+    QueriesSwitch,
+    QueryPeriod,
+    QueryTopColumns,
+} from '../Diagnostics';
+
+test.describe('Diagnostics Queries tab', async () => {
+    test('No runnning queries in Queries if no queries are running', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Queries);
+        await diagnostics.clickRadioSwitch(QueriesSwitch.Running);
+        await diagnostics.table.hasNoData();
+    });
+
+    test('Running query is shown if query is running', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'query',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const queryEditor = new QueryEditor(page);
+
+        await queryEditor.setQuery(longRunningQuery);
+        await queryEditor.clickRunButton();
+        await page.waitForTimeout(500);
+        const statusElement = await queryEditor.getExecutionStatus();
+        await expect(statusElement).toBe('Running');
+        await tenantPage.selectNavigationTab(NavigationTabs.Diagnostics);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Queries);
+        await diagnostics.clickRadioSwitch(QueriesSwitch.Running);
+        expect(
+            await diagnostics.table.waitForCellValueByHeader(1, 'Query text', longRunningQuery),
+        ).toBe(true);
+    });
+
+    test('Query tab defaults to Top mode', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topQueries',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify Top mode is selected by default
+        const radioOption = await diagnostics.getSelectedTableMode();
+        expect(radioOption?.trim()).toBe(QueriesSwitch.Top);
+    });
+
+    test('Query Top tab shows expected column headers', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topQueries',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify table has data
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+
+        // Verify column headers exist - check at least some of the core columns
+        await diagnostics.table.verifyHeaders([
+            QUERY_COLUMNS_IDS.QueryHash,
+            QUERY_COLUMNS_IDS.CPUTime,
+            QUERY_COLUMNS_IDS.QueryText,
+            QUERY_COLUMNS_IDS.Duration,
+        ]);
+    });
+
+    test('Query tab first row has values for all columns in Top mode', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topQueries',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify table has data
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
+
+        // Verify first row has non-empty values for key columns (test first 4 columns)
+        for (const column of QueryTopColumns.slice(0, 4)) {
+            const columnValue = await diagnostics.table.getCellValueByHeader(1, column);
+            expect(columnValue.trim()).toBeTruthy();
+        }
+    });
+
+    test('Query tab can switch between Top and Running modes', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topQueries',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Switch to Running mode
+        await diagnostics.clickRadioSwitch(QueriesSwitch.Running);
+        let radioOption = await diagnostics.getSelectedTableMode();
+        expect(radioOption?.trim()).toBe(QueriesSwitch.Running);
+
+        // Switch back to Top mode
+        await diagnostics.clickRadioSwitch(QueriesSwitch.Top);
+        radioOption = await diagnostics.getSelectedTableMode();
+        expect(radioOption?.trim()).toBe(QueriesSwitch.Top);
+
+        // Verify table still has data after switching back
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+    });
+
+    test('Query tab allows changing between Per hour and Per minute views', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topQueries',
+        };
+
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify that we start with "Per hour" selected as default
+        expect(await diagnostics.getSelectedQueryPeriod()).toBe(QueryPeriod.PerHour);
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+
+        // Switch to "Per minute" view
+        await diagnostics.selectQueryPeriod(QueryPeriod.PerMinute);
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+
+        // Verify the view was updated - period text should change
+        expect(await diagnostics.getSelectedQueryPeriod()).toBe(QueryPeriod.PerMinute);
+
+        // The table should refresh with potentially different data
+        // Wait for the table to reload and then check a value
+        await page.waitForTimeout(500); // Small wait for UI update
+
+        // Switch back to "Per hour" view
+        await diagnostics.selectQueryPeriod(QueryPeriod.PerHour);
+
+        // Verify the view was updated back
+        expect(await diagnostics.getSelectedQueryPeriod()).toBe(QueryPeriod.PerHour);
+    });
+});
diff --git a/tests/suites/tenant/diagnostics/tabs/schema.test.ts b/tests/suites/tenant/diagnostics/tabs/schema.test.ts
new file mode 100644
index 0000000000..1501947138
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/schema.test.ts
@@ -0,0 +1,28 @@
+import {expect, test} from '@playwright/test';
+
+import {dsVslotsSchema, tenantName} from '../../../../utils/constants';
+import {TenantPage} from '../../TenantPage';
+import {Diagnostics, DiagnosticsTab} from '../Diagnostics';
+
+test.describe('Diagnostics Schema tab', async () => {
+    test('Primary keys header is visible in Schema tab', async ({page}) => {
+        const pageQueryParams = {
+            schema: dsVslotsSchema,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const objectSummary = new Diagnostics(page);
+
+        await objectSummary.clickTab(DiagnosticsTab.Schema);
+        await expect(objectSummary.isSchemaViewerVisible()).resolves.toBe(true);
+
+        await expect(objectSummary.getPrimaryKeys()).resolves.toEqual([
+            'NodeId',
+            'PDiskId',
+            'VSlotId',
+        ]);
+    });
+});
diff --git a/tests/suites/tenant/diagnostics/tabs/storage.test.ts b/tests/suites/tenant/diagnostics/tabs/storage.test.ts
new file mode 100644
index 0000000000..2be426183c
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/storage.test.ts
@@ -0,0 +1,28 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../../utils/constants';
+import {TenantPage} from '../../TenantPage';
+import {Diagnostics, DiagnosticsTab} from '../Diagnostics';
+
+test.describe('Diagnostics Storage tab', async () => {
+    test('Storage tab shows Groups and Nodes views', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.clickTab(DiagnosticsTab.Storage);
+
+        // Check Groups view
+        await diagnostics.storage.selectEntityType('Groups');
+        await expect(diagnostics.storage.table).toBeVisible();
+
+        // Check Nodes view
+        await diagnostics.storage.selectEntityType('Nodes');
+        await expect(diagnostics.storage.table).toBeVisible();
+    });
+});
diff --git a/tests/suites/tenant/diagnostics/tabs/topShards.test.ts b/tests/suites/tenant/diagnostics/tabs/topShards.test.ts
new file mode 100644
index 0000000000..ce0581f89d
--- /dev/null
+++ b/tests/suites/tenant/diagnostics/tabs/topShards.test.ts
@@ -0,0 +1,144 @@
+import {expect, test} from '@playwright/test';
+
+import {tenantName} from '../../../../utils/constants';
+import {TenantPage} from '../../TenantPage';
+import {
+    Diagnostics,
+    TopShardsHistoricalColumns,
+    TopShardsImmediateColumns,
+    TopShardsMode,
+} from '../Diagnostics';
+import {setupTopShardsHistoryMock} from '../mocks';
+
+test.describe('Diagnostics TopShards tab', async () => {
+    test('TopShards tab defaults to Immediate mode', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topShards',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify Immediate mode is selected by default
+        expect(await diagnostics.getSelectedTableMode()).toBe(TopShardsMode.Immediate);
+    });
+
+    test('TopShards immediate tab shows all expected column headers', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topShards',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify table has data
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
+        // Verify column headers exist
+        await diagnostics.table.verifyHeaders(TopShardsImmediateColumns);
+    });
+
+    test('TopShards history tab shows all expected column headers', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topShards',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.selectTopShardsMode(TopShardsMode.Historical);
+        // Verify table has data
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
+
+        // Verify column headers exist
+        await diagnostics.table.verifyHeaders(TopShardsHistoricalColumns);
+    });
+
+    test('TopShards tab first row has values for all columns in Immediate mode', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topShards',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Verify table has data
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
+
+        // Verify first row has non-empty values for all columns
+        for (const column of TopShardsImmediateColumns) {
+            const columnValue = await diagnostics.table.getCellValueByHeader(1, column);
+            expect(columnValue.trim()).toBeTruthy();
+        }
+    });
+
+    test('TopShards tab first row has values for all columns in History mode', async ({page}) => {
+        // Setup mock for TopShards tab in History mode
+        await setupTopShardsHistoryMock(page);
+
+        // Now navigate to diagnostics page to check topShards
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topShards',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+        await diagnostics.selectTopShardsMode(TopShardsMode.Historical);
+
+        // Verify table has data
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
+
+        // Verify first row has non-empty values for all columns
+        for (const column of TopShardsHistoricalColumns) {
+            const columnValue = await diagnostics.table.getCellValueByHeader(1, column);
+            expect(columnValue.trim()).toBeTruthy();
+        }
+    });
+
+    test('TopShards tab can switch back to Immediate mode from Historical mode', async ({page}) => {
+        const pageQueryParams = {
+            schema: tenantName,
+            database: tenantName,
+            tenantPage: 'diagnostics',
+            diagnosticsTab: 'topShards',
+        };
+        const tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+
+        const diagnostics = new Diagnostics(page);
+
+        // Switch to Historical mode
+        await diagnostics.selectTopShardsMode(TopShardsMode.Historical);
+        expect(await diagnostics.getSelectedTableMode()).toBe(TopShardsMode.Historical);
+
+        // Switch back to Immediate mode
+        await diagnostics.selectTopShardsMode(TopShardsMode.Immediate);
+        expect(await diagnostics.getSelectedTableMode()).toBe(TopShardsMode.Immediate);
+
+        // Verify table still has data after switching back
+        await expect(diagnostics.table.isVisible()).resolves.toBe(true);
+        await expect(diagnostics.table.getRowCount()).resolves.toBeGreaterThan(0);
+    });
+});