diff --git a/frontend/src/App/Login/LoginByGithubCallback/index.tsx b/frontend/src/App/Login/LoginByGithubCallback/index.tsx
index af88aa72f1..45be311b6b 100644
--- a/frontend/src/App/Login/LoginByGithubCallback/index.tsx
+++ b/frontend/src/App/Login/LoginByGithubCallback/index.tsx
@@ -41,7 +41,7 @@ export const LoginByGithubCallback: React.FC = () => {
                         .then(async ({ creds: { token } }) => {
                             dispatch(setAuthData({ token }));
                             if (process.env.UI_VERSION === 'sky') {
-                                const result = await getProjects().unwrap();
+                                const result = await getProjects({}).unwrap();
                                 if (result?.length === 0) {
                                     navigate(ROUTES.PROJECT.ADD);
                                     return;
diff --git a/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts b/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
index d91b78a3b1..b330358b46 100644
--- a/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
+++ b/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
@@ -5,9 +5,12 @@ import { useGetOnlyNoFleetsProjectsQuery, useGetProjectsQuery } from 'services/p
 type Args = { projectNames?: IProject['project_name'][] };
 
 export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
-    const { data: projectsData } = useGetProjectsQuery(undefined, {
-        skip: !!projectNames?.length,
-    });
+    const { data: projectsData } = useGetProjectsQuery(
+        {},
+        {
+            skip: !!projectNames?.length,
+        },
+    );
 
     const { data: noFleetsProjectsData } = useGetOnlyNoFleetsProjectsQuery();
 
@@ -16,8 +19,8 @@ export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
             return projectNames;
         }
 
-        if (projectsData) {
-            return projectsData.map((project) => project.project_name);
+        if (projectsData?.data) {
+            return projectsData.data.map((project) => project.project_name);
         }
 
         return [];
diff --git a/frontend/src/hooks/useInfiniteScroll.ts b/frontend/src/hooks/useInfiniteScroll.ts
index 727586ab00..b11115d63f 100644
--- a/frontend/src/hooks/useInfiniteScroll.ts
+++ b/frontend/src/hooks/useInfiniteScroll.ts
@@ -9,10 +9,14 @@ const SCROLL_POSITION_GAP = 400;
 type InfinityListArgs = Partial<Record<string, unknown>>;
 
 type ListResponse<DataItem> = DataItem[];
+type ResponseWithDataProp<DataItem> = { data: ListResponse<DataItem>; total_count: number };
+
+type LazyQueryResponse<DataItem> = ResponseWithDataProp<DataItem> | ListResponse<DataItem>;
 
 type UseInfinityParams<DataItem, Args extends InfinityListArgs> = {
-    useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, ListResponse<DataItem>, any>>;
+    useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, LazyQueryResponse<DataItem>, any>>;
     args: { limit?: number } & Args;
+    getResponseItems?: (listItem: DataItem) => Partial<Args>;
     getPaginationParams: (listItem: DataItem) => Partial<Args>;
     skip?: boolean;
     // options?: UseQueryStateOptions<QueryDefinition<Args, any, any, Data[], any>, Record<string, any>>;
@@ -26,22 +30,31 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     skip,
 }: UseInfinityParams<DataItem, Args>) => {
     const [data, setData] = useState<ListResponse<DataItem>>([]);
+    const [totalCount, setTotalCount] = useState<number | void>();
     const scrollElement = useRef<HTMLElement>(document.documentElement);
     const isLoadingRef = useRef<boolean>(false);
+    const isDisabledMoreRef = useRef<boolean>(false);
     const lastRequestParams = useRef<Args | undefined>(undefined);
-    const [disabledMore, setDisabledMore] = useState(false);
     const { limit, ...argsProp } = args;
     const lastArgsProps = useRef<Partial<Args>>(null);
 
     const [getItems, { isLoading, isFetching }] = useLazyQuery({ ...args } as Args);
 
     const getDataRequest = (params: Args) => {
-        lastRequestParams.current = params;
+        if (isEqual(params, lastRequestParams.current)) {
+            return Promise.reject();
+        }
 
-        return getItems({
+        const request = getItems({
             limit,
             ...params,
         } as Args).unwrap();
+
+        request.then(() => {
+            lastRequestParams.current = { ...params };
+        });
+
+        return request;
     };
 
     const getEmptyList = () => {
@@ -49,9 +62,18 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
 
         setData([]);
 
-        getDataRequest(argsProp as Args).then((result) => {
-            setDisabledMore(false);
-            setData(result as ListResponse<DataItem>);
+        getDataRequest(argsProp as Args).then((result: LazyQueryResponse<DataItem>) => {
+            // setDisabledMore(false);
+            isDisabledMoreRef.current = false;
+
+            if ('data' in result) {
+                setData(result.data as ListResponse<DataItem>);
+                setTotalCount(result.total_count);
+            } else {
+                setData(result as ListResponse<DataItem>);
+                setTotalCount();
+            }
+
             isLoadingRef.current = false;
         });
     };
@@ -64,7 +86,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     }, [argsProp, lastArgsProps, skip]);
 
     const getMore = async () => {
-        if (isLoadingRef.current || disabledMore || skip) {
+        if (isLoadingRef.current || isDisabledMoreRef.current || skip) {
             return;
         }
 
@@ -76,10 +98,20 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
                 ...getPaginationParams(data[data.length - 1]),
             } as Args);
 
-            if (result.length > 0) {
-                setData((prev) => [...prev, ...result]);
+            let listResponse: ListResponse<DataItem>;
+
+            if ('data' in result) {
+                listResponse = result.data;
+                setTotalCount(result.total_count);
+            } else {
+                listResponse = result;
+                setTotalCount();
+            }
+
+            if (listResponse.length > 0) {
+                setData((prev) => [...prev, ...listResponse]);
             } else {
-                setDisabledMore(true);
+                isDisabledMoreRef.current = true;
             }
         } catch (e) {
             console.log(e);
@@ -87,7 +119,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
 
         setTimeout(() => {
             isLoadingRef.current = false;
-        }, 10);
+        }, 50);
     };
 
     useLayoutEffect(() => {
@@ -101,7 +133,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     }, [data]);
 
     const onScroll = useCallback(() => {
-        if (disabledMore || isLoadingRef.current) {
+        if (isDisabledMoreRef.current || isLoadingRef.current) {
             return;
         }
 
@@ -112,7 +144,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
         if (scrollPositionFromBottom < SCROLL_POSITION_GAP) {
             getMore().catch(console.log);
         }
-    }, [disabledMore, getMore]);
+    }, [getMore]);
 
     useEffect(() => {
         document.addEventListener('scroll', onScroll);
@@ -126,6 +158,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
 
     return {
         data,
+        totalCount,
         isLoading: isLoading || (data.length === 0 && isFetching),
         isLoadingMore,
         refreshList: getEmptyList,
diff --git a/frontend/src/hooks/useProjectFilter.ts b/frontend/src/hooks/useProjectFilter.ts
index b4573b1f8e..58e573d31d 100644
--- a/frontend/src/hooks/useProjectFilter.ts
+++ b/frontend/src/hooks/useProjectFilter.ts
@@ -16,20 +16,20 @@ export const useProjectFilter = ({ localStorePrefix }: Args) => {
         null,
     );
 
-    const { data: projectsData } = useGetProjectsQuery();
+    const { data: projectsData } = useGetProjectsQuery({});
 
     const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
+        if (!projectsData?.data?.length) return [];
 
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
+        return projectsData.data.map((project) => ({ label: project.project_name, value: project.project_name }));
     }, [projectsData]);
 
     useEffect(() => {
-        if (!projectsData || !selectedProject) {
+        if (!projectsData?.data || !selectedProject) {
             return;
         }
 
-        const hasSelectedProject = projectsData.some(({ project_name }) => selectedProject?.value === project_name);
+        const hasSelectedProject = projectsData.data.some(({ project_name }) => selectedProject?.value === project_name);
 
         if (!hasSelectedProject) {
             setSelectedProject(null);
diff --git a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
index d3a465fcb5..543eb07a7e 100644
--- a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
+++ b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
@@ -44,7 +44,7 @@ export const useTutorials = () => {
     } = useAppSelector(selectTutorialPanel);
 
     const { data: userBillingData } = useGetUserBillingInfoQuery({ username: useName ?? '' }, { skip: !useName });
-    const { data: projectData } = useGetProjectsQuery();
+    const { data: projectData } = useGetProjectsQuery({});
     const { data: runsData } = useGetRunsQuery({
         limit: 1,
     });
@@ -54,14 +54,14 @@ export const useTutorials = () => {
     useEffect(() => {
         if (
             userBillingData &&
-            projectData &&
+            projectData?.data &&
             runsData &&
             !completeIsChecked.current &&
             location.pathname !== ROUTES.PROJECT.ADD
         ) {
             const billingCompleted = userBillingData.balance > 0;
             const configureCLICompleted = runsData.length > 0;
-            const createProjectCompleted = projectData.length > 0;
+            const createProjectCompleted = projectData.data.length > 0;
 
             let tempHideStartUp = hideStartUp;
 
@@ -88,7 +88,7 @@ export const useTutorials = () => {
     }, [userBillingData, runsData, projectData, location.pathname]);
 
     useEffect(() => {
-        if (projectData && projectData.length > 0 && !createProjectCompleted) {
+        if (projectData?.data && projectData.data.length > 0 && !createProjectCompleted) {
             dispatch(
                 updateTutorialPanelState({
                     createProjectCompleted: true,
@@ -114,8 +114,8 @@ export const useTutorials = () => {
     }, []);
 
     const startConfigCliTutorial = useCallback(() => {
-        if (projectData?.length) {
-            navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(projectData[0].project_name));
+        if (projectData?.data?.length) {
+            navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(projectData.data[0].project_name));
         }
     }, [projectData]);
 
diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
index a3d510718f..4b7d38d085 100644
--- a/frontend/src/pages/Events/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -69,8 +69,8 @@ const targetTypes = [
 
 export const useFilters = () => {
     const [searchParams, setSearchParams] = useSearchParams();
-    const { data: projectsData } = useGetProjectsQuery();
-    const { data: usersData } = useGetUserListQuery();
+    const { data: projectsData } = useGetProjectsQuery({});
+    const { data: usersData } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
@@ -84,7 +84,7 @@ export const useFilters = () => {
     const filteringOptions = useMemo(() => {
         const options: PropertyFilterProps.FilteringOption[] = [];
 
-        projectsData?.forEach(({ project_name }) => {
+        projectsData?.data?.forEach(({ project_name }) => {
             options.push({
                 propertyKey: filterKeys.TARGET_PROJECTS,
                 value: project_name,
@@ -96,7 +96,7 @@ export const useFilters = () => {
             });
         });
 
-        usersData?.forEach(({ username }) => {
+        usersData?.data?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.TARGET_USERS,
                 value: username,
@@ -229,14 +229,16 @@ export const useFilters = () => {
             ...(params[filterKeys.TARGET_PROJECTS] && Array.isArray(params[filterKeys.TARGET_PROJECTS])
                 ? {
                       [filterKeys.TARGET_PROJECTS]: params[filterKeys.TARGET_PROJECTS]?.map(
-                          (name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
+                          (name: string) =>
+                              projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
                       ),
                   }
                 : {}),
             ...(params[filterKeys.WITHIN_PROJECTS] && Array.isArray(params[filterKeys.WITHIN_PROJECTS])
                 ? {
                       [filterKeys.WITHIN_PROJECTS]: params[filterKeys.WITHIN_PROJECTS]?.map(
-                          (name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
+                          (name: string) =>
+                              projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
                       ),
                   }
                 : {}),
@@ -244,7 +246,7 @@ export const useFilters = () => {
             ...(params[filterKeys.TARGET_USERS] && Array.isArray(params[filterKeys.TARGET_USERS])
                 ? {
                       [filterKeys.TARGET_USERS]: params[filterKeys.TARGET_USERS]?.map(
-                          (name: string) => usersData?.find(({ username }) => username === name)?.['id'],
+                          (name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
                       ),
                   }
                 : {}),
@@ -252,7 +254,7 @@ export const useFilters = () => {
             ...(params[filterKeys.ACTORS] && Array.isArray(params[filterKeys.ACTORS])
                 ? {
                       [filterKeys.ACTORS]: params[filterKeys.ACTORS]?.map(
-                          (name: string) => usersData?.find(({ username }) => username === name)?.['id'],
+                          (name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
                       ),
                   }
                 : {}),
diff --git a/frontend/src/pages/Models/List/hooks.tsx b/frontend/src/pages/Models/List/hooks.tsx
index 912875b394..461bf28a3b 100644
--- a/frontend/src/pages/Models/List/hooks.tsx
+++ b/frontend/src/pages/Models/List/hooks.tsx
@@ -129,7 +129,7 @@ const filterKeys: Record<string, RequestParamsKeys> = {
 export const useFilters = (localStorePrefix = 'models-list-page') => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { projectOptions } = useProjectFilter({ localStorePrefix });
-    const { data: usersData } = useGetUserListQuery();
+    const { data: usersData } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
@@ -151,7 +151,7 @@ export const useFilters = (localStorePrefix = 'models-list-page') => {
                 });
         });
 
-        usersData?.forEach(({ username }) => {
+        usersData?.data?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.USER_NAME,
                 value: username,
diff --git a/frontend/src/pages/Project/List/index.tsx b/frontend/src/pages/Project/List/index.tsx
index af4afcf5dc..eb896df91d 100644
--- a/frontend/src/pages/Project/List/index.tsx
+++ b/frontend/src/pages/Project/List/index.tsx
@@ -1,44 +1,36 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { get as _get } from 'lodash';
-
-import {
-    Button,
-    ButtonWithConfirmation,
-    Header,
-    ListEmptyMessage,
-    Pagination,
-    SpaceBetween,
-    Table,
-    TextFilter,
-} from 'components';
-
-import { useBreadcrumbs, useCollection } from 'hooks';
+
+import { Button, ButtonWithConfirmation, Header, ListEmptyMessage, Loader, SpaceBetween, Table, TextFilter } from 'components';
+
+import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
+import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
 import { ROUTES } from 'routes';
-import { useGetProjectsQuery } from 'services/project';
+import { useLazyGetProjectsQuery } from 'services/project';
 
 import { useCheckAvailableProjectPermission } from '../hooks/useCheckAvailableProjectPermission';
 import { useDeleteProject } from '../hooks/useDeleteProject';
 import { useColumnsDefinitions } from './hooks';
 
-const SEARCHABLE_COLUMNS = ['project_name', 'owner.username'];
-
 export const ProjectList: React.FC = () => {
     const { t } = useTranslation();
 
-    const { isLoading, isFetching, data, refetch } = useGetProjectsQuery();
     const { isAvailableDeletingPermission, isAvailableProjectManaging } = useCheckAvailableProjectPermission();
     const { deleteProject, deleteProjects, isDeleting } = useDeleteProject();
+    const [filteringText, setFilteringText] = useState('');
+    const [namePattern, setNamePattern] = useState<string>('');
     const navigate = useNavigate();
 
-    const sortedData = useMemo<IProject[]>(() => {
-        if (!data) return [];
+    const { data, isLoading, refreshList, isLoadingMore, totalCount } = useInfiniteScroll<IProject, TGetProjectListParams>({
+        useLazyQuery: useLazyGetProjectsQuery,
+        args: { name_pattern: namePattern, limit: DEFAULT_TABLE_PAGE_SIZE },
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return [...data].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-    }, [data]);
+        getPaginationParams: (lastProject) => ({
+            prev_created_at: lastProject.created_at,
+            prev_id: lastProject.project_id,
+        }),
+    });
 
     useBreadcrumbs([
         {
@@ -51,7 +43,24 @@ export const ProjectList: React.FC = () => {
         navigate(ROUTES.PROJECT.ADD);
     };
 
+    const onClearFilter = () => {
+        setNamePattern('');
+        setFilteringText('');
+    };
+
     const renderEmptyMessage = (): React.ReactNode => {
+        if (isLoading) {
+            return null;
+        }
+
+        if (filteringText) {
+            return (
+                <ListEmptyMessage title={t('projects.nomatch_message_title')} message={t('projects.nomatch_message_text')}>
+                    <Button onClick={onClearFilter}>{t('projects.nomatch_message_button_label')}</Button>
+                </ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('projects.empty_message_title')} message={t('projects.empty_message_text')}>
                 {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.create')}</Button>}
@@ -59,28 +68,10 @@ export const ProjectList: React.FC = () => {
         );
     };
 
-    const renderNoMatchMessage = (onClearFilter: () => void): React.ReactNode => {
-        return (
-            <ListEmptyMessage title={t('projects.nomatch_message_title')} message={t('projects.nomatch_message_text')}>
-                <Button onClick={onClearFilter}>{t('projects.nomatch_message_button_label')}</Button>
-            </ListEmptyMessage>
-        );
-    };
-
-    const { items, actions, filteredItemsCount, collectionProps, filterProps, paginationProps } = useCollection(sortedData, {
+    const { items, collectionProps } = useCollection(data, {
         filtering: {
             empty: renderEmptyMessage(),
-            noMatch: renderNoMatchMessage(() => actions.setFiltering('')),
-
-            filteringFunction: (projectItem: IProject, filteringText) => {
-                const filteringTextLowerCase = filteringText.toLowerCase();
-
-                return SEARCHABLE_COLUMNS.map((key) => _get(projectItem, key)).some(
-                    (value) => typeof value === 'string' && value.trim().toLowerCase().indexOf(filteringTextLowerCase) > -1,
-                );
-            },
         },
-        pagination: { pageSize: 20 },
         selection: {},
     });
 
@@ -104,9 +95,9 @@ export const ProjectList: React.FC = () => {
     });
 
     const renderCounter = () => {
-        if (!data?.length) return '';
+        if (typeof totalCount !== 'number') return '';
 
-        return `(${data.length})`;
+        return `(${totalCount})`;
     };
 
     return (
@@ -116,7 +107,7 @@ export const ProjectList: React.FC = () => {
                 variant="full-page"
                 columnDefinitions={columns}
                 items={items}
-                loading={isLoading || isFetching}
+                loading={isLoading}
                 loadingText={t('common.loading')}
                 selectionType={isAvailableProjectManaging ? 'multi' : undefined}
                 stickyHeader={true}
@@ -141,9 +132,9 @@ export const ProjectList: React.FC = () => {
 
                                     <Button
                                         iconName="refresh"
-                                        disabled={isLoading || isFetching}
+                                        disabled={isLoading}
                                         ariaLabel={t('common.refresh')}
-                                        onClick={refetch}
+                                        onClick={refreshList}
                                     />
                                 </SpaceBetween>
                             )
@@ -154,13 +145,14 @@ export const ProjectList: React.FC = () => {
                 }
                 filter={
                     <TextFilter
-                        {...filterProps}
-                        filteringPlaceholder={t('projects.search_placeholder') || ''}
-                        countText={t('common.match_count_with_value', { count: filteredItemsCount }) ?? ''}
+                        filteringText={filteringText}
+                        onChange={({ detail }) => setFilteringText(detail.filteringText)}
+                        onDelayedChange={() => setNamePattern(filteringText)}
                         disabled={isLoading}
+                        filteringPlaceholder={t('projects.search_placeholder') || ''}
                     />
                 }
-                pagination={<Pagination {...paginationProps} disabled={isLoading} />}
+                footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
             />
         </>
     );
diff --git a/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx b/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
index fdb7d9ff8c..7cd2dd7541 100644
--- a/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
+++ b/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
@@ -14,12 +14,12 @@ type AutosuggestOption = { value: string; label?: string };
 export const UserAutosuggest: React.FC<Props> = ({ optionsFilter, onSelect: onSelectProp, ...props }) => {
     const { t } = useTranslation();
     const [value, setValue] = useState<string>('');
-    const { data: usersData, isLoading: isUsersLoading } = useGetUserListQuery();
+    const { data: usersData, isLoading: isUsersLoading } = useGetUserListQuery({});
 
     const options: AutosuggestOption[] = useMemo(() => {
         if (!usersData) return [];
 
-        return usersData.map((user) => ({
+        return usersData?.data.map((user) => ({
             value: user.username,
         }));
     }, [usersData]);
diff --git a/frontend/src/pages/Project/Members/index.tsx b/frontend/src/pages/Project/Members/index.tsx
index 007c64b9d7..d68916c6d8 100644
--- a/frontend/src/pages/Project/Members/index.tsx
+++ b/frontend/src/pages/Project/Members/index.tsx
@@ -32,7 +32,7 @@ import styles from './styles.module.scss';
 export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, readonly, isAdmin, project }) => {
     const { t } = useTranslation();
     const [selectedItems, setSelectedItems] = useState<TProjectMemberWithIndex[]>([]);
-    const { data: usersData } = useGetUserListQuery();
+    const { data: usersData } = useGetUserListQuery({});
     const userData = useAppSelector(selectUserData);
     const { handleJoinProject, handleLeaveProject, isMemberActionLoading } = useProjectMemberActions();
     const [pushNotification] = useNotifications();
@@ -96,7 +96,7 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
             return;
         }
 
-        const selectedUser = usersData?.find((u) => u.username === username);
+        const selectedUser = usersData?.data?.find((u) => u.username === username);
 
         if (selectedUser) {
             append({
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts b/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts
index 70ec4d5342..7815d1daca 100644
--- a/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts
+++ b/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts
@@ -56,6 +56,7 @@ export const useGetRunSpecFromYaml = ({ projectName = '' }) => {
 
             try {
                 await getRepo({ project_name: projectName, repo_id: repoId, include_creds: true }).unwrap();
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (_) {
                 await initRepo({
                     project_name: projectName,
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx b/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
index af52513760..fcac5194af 100644
--- a/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
+++ b/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
@@ -53,6 +53,7 @@ const envValidationSchema = yup.object({
         is: true,
         then: yup
             .string()
+            // eslint-disable-next-line no-useless-escape
             .matches(/^(https?):\/\/([^\s\/?#]+)((?:\/[^\s?#]*)*)(?::\/(.*))?$/i, urlFormatError)
             .required(requiredFieldError),
     }),
diff --git a/frontend/src/pages/Runs/List/hooks/useFilters.ts b/frontend/src/pages/Runs/List/hooks/useFilters.ts
index d675f78ea5..82f1ca40bd 100644
--- a/frontend/src/pages/Runs/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Runs/List/hooks/useFilters.ts
@@ -23,7 +23,7 @@ export const useFilters = ({ localStorePrefix }: Args) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const [onlyActive, setOnlyActive] = useState(() => searchParams.get('only_active') === 'true');
     const { projectOptions } = useProjectFilter({ localStorePrefix });
-    const { data: usersData } = useGetUserListQuery();
+    const { data: usersData } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
@@ -46,7 +46,7 @@ export const useFilters = ({ localStorePrefix }: Args) => {
                 });
         });
 
-        usersData?.forEach(({ username }) => {
+        usersData?.data?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.USER_NAME,
                 value: username,
diff --git a/frontend/src/pages/User/Details/Projects/index.tsx b/frontend/src/pages/User/Details/Projects/index.tsx
index d1370aec93..2cb9885ab3 100644
--- a/frontend/src/pages/User/Details/Projects/index.tsx
+++ b/frontend/src/pages/User/Details/Projects/index.tsx
@@ -18,7 +18,7 @@ export const UserProjectList: React.FC = () => {
     const params = useParams();
     const paramUserName = params.userName ?? '';
 
-    const { isLoading, isFetching, data } = useGetProjectsQuery();
+    const { isLoading, isFetching, data } = useGetProjectsQuery({ limit: 200 });
 
     useBreadcrumbs([
         {
@@ -41,11 +41,10 @@ export const UserProjectList: React.FC = () => {
     };
 
     const filteredData = useMemo<IProject[]>(() => {
-        if (!data) return [];
+        if (!data?.data) return [];
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return [...data]
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        return [...data?.data]
             .filter((p) => p.owner.username === paramUserName)
             .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
     }, [data]);
diff --git a/frontend/src/pages/User/List/hooks.tsx b/frontend/src/pages/User/List/hooks.tsx
new file mode 100644
index 0000000000..7f9f24549c
--- /dev/null
+++ b/frontend/src/pages/User/List/hooks.tsx
@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+
+import { Link, NavigateLink } from 'components';
+
+import { DATE_TIME_FORMAT } from 'consts';
+import { ROUTES } from 'routes';
+
+export const useColumnDefinitions = () => {
+    const { t } = useTranslation();
+
+    return useMemo(() => {
+        return [
+            {
+                id: 'name',
+                header: t('users.user_name'),
+                cell: (item: IUser) => (
+                    <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(item.username)}>{item.username}</NavigateLink>
+                ),
+            },
+            {
+                id: 'email',
+                header: t('users.email'),
+                cell: (item: IUser) => (item.email ? <Link href={`mailto:${item.email}`}>{item.email}</Link> : '-'),
+            },
+            {
+                id: 'global_role',
+                header: t('users.global_role'),
+                cell: (item: IUser) => t(`roles.${item.global_role}`),
+            },
+            process.env.UI_VERSION === 'sky' && {
+                id: 'created_at',
+                header: t('users.created_at'),
+                cell: (item: IUser) => format(new Date(item.created_at), DATE_TIME_FORMAT),
+            },
+        ].filter(Boolean);
+    }, []);
+};
diff --git a/frontend/src/pages/User/List/index.tsx b/frontend/src/pages/User/List/index.tsx
index 61d14e83fc..66d5e2e46f 100644
--- a/frontend/src/pages/User/List/index.tsx
+++ b/frontend/src/pages/User/List/index.tsx
@@ -1,47 +1,38 @@
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { format } from 'date-fns';
-
-import {
-    Box,
-    Button,
-    ConfirmationDialog,
-    Header,
-    Link,
-    ListEmptyMessage,
-    NavigateLink,
-    Pagination,
-    SpaceBetween,
-    Table,
-    TextFilter,
-} from 'components';
-
-import { DATE_TIME_FORMAT } from 'consts';
-import { useAppSelector, useBreadcrumbs, useCollection, useNotifications } from 'hooks';
-import { getServerError, includeSubString } from 'libs';
+
+import { Box, Button, ConfirmationDialog, Header, ListEmptyMessage, Loader, SpaceBetween, Table, TextFilter } from 'components';
+
+import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
+import { useAppSelector, useBreadcrumbs, useCollection, useInfiniteScroll, useNotifications } from 'hooks';
+import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
-import { useDeleteUsersMutation, useGetUserListQuery } from 'services/user';
+import { useDeleteUsersMutation, useLazyGetUserListQuery } from 'services/user';
 
 import { selectUserData } from 'App/slice';
 
+import { useColumnDefinitions } from './hooks';
+
 export const UserList: React.FC = () => {
     const { t } = useTranslation();
     const [showDeleteConfirm, setShowConfirmDelete] = useState(false);
+    const [filteringText, setFilteringText] = useState('');
+    const [namePattern, setNamePattern] = useState<string>('');
     const userData = useAppSelector(selectUserData);
     const userGlobalRole = userData?.global_role ?? '';
-    const { isLoading, isFetching, data, refetch } = useGetUserListQuery();
     const [deleteUsers, { isLoading: isDeleting }] = useDeleteUsersMutation();
     const navigate = useNavigate();
     const [pushNotification] = useNotifications();
 
-    const sortedData = useMemo<IUser[]>(() => {
-        if (!data) return [];
+    const { data, isLoading, refreshList, isLoadingMore, totalCount } = useInfiniteScroll<IUser, TGetUserListParams>({
+        useLazyQuery: useLazyGetUserListQuery,
+        args: { name_pattern: namePattern, limit: DEFAULT_TABLE_PAGE_SIZE },
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return [...data].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-    }, [data]);
+        getPaginationParams: (lastUser) => ({
+            prev_created_at: lastUser.created_at,
+        }),
+    });
 
     useBreadcrumbs([
         {
@@ -50,30 +41,7 @@ export const UserList: React.FC = () => {
         },
     ]);
 
-    const COLUMN_DEFINITIONS = [
-        {
-            id: 'name',
-            header: t('users.user_name'),
-            cell: (item: IUser) => (
-                <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(item.username)}>{item.username}</NavigateLink>
-            ),
-        },
-        {
-            id: 'email',
-            header: t('users.email'),
-            cell: (item: IUser) => (item.email ? <Link href={`mailto:${item.email}`}>{item.email}</Link> : '-'),
-        },
-        {
-            id: 'global_role',
-            header: t('users.global_role'),
-            cell: (item: IUser) => t(`roles.${item.global_role}`),
-        },
-        process.env.UI_VERSION === 'sky' && {
-            id: 'created_at',
-            header: t('users.created_at'),
-            cell: (item: IUser) => format(new Date(item.created_at), DATE_TIME_FORMAT),
-        },
-    ].filter(Boolean);
+    const columns = useColumnDefinitions();
 
     const toggleDeleteConfirm = () => {
         setShowConfirmDelete((val) => !val);
@@ -83,7 +51,24 @@ export const UserList: React.FC = () => {
         navigate(ROUTES.USER.ADD);
     };
 
+    const onClearFilter = () => {
+        setNamePattern('');
+        setFilteringText('');
+    };
+
     const renderEmptyMessage = (): React.ReactNode => {
+        if (isLoading) {
+            return null;
+        }
+
+        if (filteringText) {
+            return (
+                <ListEmptyMessage title={t('users.nomatch_message_title')} message={t('users.nomatch_message_text')}>
+                    <Button onClick={onClearFilter}>{t('common.clearFilter')}</Button>
+                </ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('users.empty_message_title')} message={t('projects.empty_message_text')}>
                 <Button onClick={addUserHandler}>{t('common.add')}</Button>
@@ -91,22 +76,10 @@ export const UserList: React.FC = () => {
         );
     };
 
-    const renderNoMatchMessage = (onClearFilter: () => void): React.ReactNode => {
-        return (
-            <ListEmptyMessage title={t('users.nomatch_message_title')} message={t('users.nomatch_message_text')}>
-                <Button onClick={onClearFilter}>{t('common.clearFilter')}</Button>
-            </ListEmptyMessage>
-        );
-    };
-
-    const { items, actions, filteredItemsCount, collectionProps, filterProps, paginationProps } = useCollection(sortedData, {
+    const { items, actions, collectionProps } = useCollection(data, {
         filtering: {
             empty: renderEmptyMessage(),
-            noMatch: renderNoMatchMessage(() => actions.setFiltering('')),
-            filteringFunction: (user, filteringText) =>
-                includeSubString(user.username, filteringText) || includeSubString(user.email ?? '', filteringText),
         },
-        pagination: { pageSize: 20 },
         selection: {},
     });
 
@@ -145,13 +118,9 @@ export const UserList: React.FC = () => {
     }, [collectionProps.selectedItems]);
 
     const renderCounter = () => {
-        const { selectedItems } = collectionProps;
-
-        if (!data?.length) return '';
-
-        if (selectedItems?.length) return `(${selectedItems?.length}/${data?.length ?? 0})`;
+        if (typeof totalCount !== 'number') return '';
 
-        return `(${data.length})`;
+        return `(${totalCount})`;
     };
 
     return (
@@ -160,9 +129,11 @@ export const UserList: React.FC = () => {
                 {...collectionProps}
                 variant="full-page"
                 isItemDisabled={getIsTableItemDisabled}
-                columnDefinitions={COLUMN_DEFINITIONS}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                columnDefinitions={columns}
                 items={items}
-                loading={isLoading || isFetching}
+                loading={isLoading}
                 loadingText={t('common.loading')}
                 selectionType="multi"
                 stickyHeader={true}
@@ -186,9 +157,9 @@ export const UserList: React.FC = () => {
 
                                 <Button
                                     iconName="refresh"
-                                    disabled={isLoading || isFetching}
+                                    disabled={isLoading}
                                     ariaLabel={t('common.refresh')}
-                                    onClick={refetch}
+                                    onClick={refreshList}
                                 />
                             </SpaceBetween>
                         }
@@ -198,13 +169,14 @@ export const UserList: React.FC = () => {
                 }
                 filter={
                     <TextFilter
-                        {...filterProps}
+                        filteringText={filteringText}
+                        onChange={({ detail }) => setFilteringText(detail.filteringText)}
+                        onDelayedChange={() => setNamePattern(filteringText)}
                         filteringPlaceholder={t('users.search_placeholder')}
-                        countText={t('common.match_count_with_value', { count: filteredItemsCount })}
                         disabled={isLoading}
                     />
                 }
-                pagination={<Pagination {...paginationProps} disabled={isLoading} />}
+                footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
             />
 
             <ConfirmationDialog
diff --git a/frontend/src/services/project.ts b/frontend/src/services/project.ts
index 8875c48df6..56612110dc 100644
--- a/frontend/src/services/project.ts
+++ b/frontend/src/services/project.ts
@@ -23,20 +23,27 @@ export const projectApi = createApi({
     tagTypes: ['Projects', 'NoFleetsProject', 'ProjectRepos', 'ProjectLogs', 'Backends'],
 
     endpoints: (builder) => ({
-        getProjects: builder.query<IProject[], void>({
-            query: () => {
+        getProjects: builder.query<TGetProjectListResponse, TGetProjectListParams>({
+            query: (body) => {
                 return {
                     url: API.PROJECTS.LIST(),
                     method: 'POST',
+                    body: {
+                        ...body,
+                        return_total_count: true,
+                    },
                 };
             },
 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            transformResponse: (response: any[]): IProject[] => response.map(transformProjectResponse),
+            transformResponse: (response: any): TGetProjectListResponse => ({
+                ...response,
+                data: response.projects.map(transformProjectResponse),
+            }),
 
             providesTags: (result) =>
                 result
-                    ? [...result.map(({ project_name }) => ({ type: 'Projects' as const, id: project_name })), 'Projects']
+                    ? [...result.data.map(({ project_name }) => ({ type: 'Projects' as const, id: project_name })), 'Projects']
                     : ['Projects'],
         }),
 
@@ -201,8 +208,8 @@ export const projectApi = createApi({
 
 export const {
     useGetProjectsQuery,
-    useGetOnlyNoFleetsProjectsQuery,
     useLazyGetProjectsQuery,
+    useGetOnlyNoFleetsProjectsQuery,
     useGetProjectQuery,
     useCreateProjectMutation,
     useCreateWizardProjectMutation,
diff --git a/frontend/src/services/user.ts b/frontend/src/services/user.ts
index 05b589adc5..68aa5cb84b 100644
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -37,16 +37,26 @@ export const userApi = createApi({
             },
         }),
 
-        getUserList: builder.query<IUser[], void>({
-            query: () => {
+        getUserList: builder.query<TGetUserListResponse, TGetUserListParams>({
+            query: (body) => {
                 return {
                     url: API.USERS.LIST(),
                     method: 'POST',
+                    body: {
+                        ...body,
+                        return_total_count: true,
+                    },
                 };
             },
 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            transformResponse: (response: any): TGetUserListResponse => ({
+                ...response,
+                data: response.users,
+            }),
+
             providesTags: (result) =>
-                result ? [...result.map(({ username }) => ({ type: 'User' as const, id: username })), 'User'] : ['User'],
+                result ? [...result.data.map(({ username }) => ({ type: 'User' as const, id: username })), 'User'] : ['User'],
         }),
 
         getUser: builder.query<IUserWithCreds, { name: IUser['username'] }>({
@@ -194,6 +204,7 @@ export const userApi = createApi({
 export const {
     useGetUserDataQuery,
     useGetUserListQuery,
+    useLazyGetUserListQuery,
     useGetUserQuery,
     useCheckAuthTokenMutation,
     useCreateUserMutation,
diff --git a/frontend/src/types/project.d.ts b/frontend/src/types/project.d.ts
index babb4dab7a..8853a1a839 100644
--- a/frontend/src/types/project.d.ts
+++ b/frontend/src/types/project.d.ts
@@ -7,9 +7,15 @@ declare type TCreateWizardProjectParams = {
     };
 };
 
-declare type TGetProjectsParams = {
-    only_no_fleets?: boolean;
+declare type TGetProjectListParams = TBaseRequestListParams & {
     include_not_joined?: boolean;
+    return_total_count?: boolean;
+    name_pattern?: string;
+};
+
+declare type TGetProjectListResponse = {
+    total_count: number;
+    data: IProject[];
 };
 
 declare type TProjectBackend = {
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
index 6e4b443bc1..cafda2920a 100644
--- a/frontend/src/types/user.d.ts
+++ b/frontend/src/types/user.d.ts
@@ -2,12 +2,24 @@ declare type TUserRole = 'user' | 'admin';
 declare type TUserPermission = 'CAN_CREATE_PROJECTS';
 declare type TUserPermissionKeys = 'can_create_projects';
 
+declare type TGetUserListParams = TBaseRequestListParams & {
+    return_total_count?: boolean;
+    name_pattern?: string;
+};
+
+declare type TGetUserListResponse = {
+    total_count: number;
+    data: IUser[];
+};
+
 declare interface IUserResponseData {
     id: string;
     username: string;
     global_role: TUserRole;
     email: string | null;
     permissions: Record<TUserPermissionKeys, boolean>;
+    created_at: string;
+    active: boolean;
 }
 
 declare interface IUser {