diff --git a/template/apps/api/src/resources/user/actions/list.ts b/template/apps/api/src/resources/user/actions/list.ts
index 15a90711..540a7f05 100644
--- a/template/apps/api/src/resources/user/actions/list.ts
+++ b/template/apps/api/src/resources/user/actions/list.ts
@@ -67,7 +67,7 @@ async function handler(ctx: AppKoaContext<ValidatedData>) {
     { sort },
   );
 
-  ctx.body = { ...result, results: result.results.map(userService.getPublic) };
+  ctx.body = { ...result, results: result.results.map(userService.getPublic), page };
 }
 
 export default (router: AppRouter) => {
diff --git a/template/apps/web/src/components/InfiniteScrollContainer/index.tsx b/template/apps/web/src/components/InfiniteScrollContainer/index.tsx
new file mode 100644
index 00000000..f8ca2b9a
--- /dev/null
+++ b/template/apps/web/src/components/InfiniteScrollContainer/index.tsx
@@ -0,0 +1,60 @@
+import { FC, ReactNode, UIEventHandler, useEffect } from 'react';
+import { Center, Loader, ScrollAreaAutosize, ScrollAreaProps, Stack } from '@mantine/core';
+import { useInViewport } from '@mantine/hooks';
+
+export interface InfiniteScrollProps extends ScrollAreaProps {
+  children: ReactNode;
+  fetchNextData: () => void;
+  hasMore: boolean;
+  maxContainerHeight?: number | string;
+  isFetchingNextPage: boolean;
+  isLoading: boolean;
+}
+
+const InfiniteScrollContainer: FC<InfiniteScrollProps> = ({
+  children,
+  maxContainerHeight,
+  hasMore,
+  fetchNextData,
+  isFetchingNextPage,
+  isLoading,
+  ...props
+}) => {
+  const { ref: loadMoreBlockRef, inViewport } = useInViewport();
+
+  useEffect(() => {
+    if (inViewport && hasMore && !isFetchingNextPage && !isLoading) {
+      fetchNextData();
+    }
+  }, [inViewport, hasMore, isLoading, isFetchingNextPage]);
+
+  const handleViewportScroll: UIEventHandler<HTMLDivElement> = (e) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+
+    if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1 && hasMore && !isLoading) {
+      fetchNextData();
+    }
+  };
+
+  return (
+    <ScrollAreaAutosize
+      mah={maxContainerHeight}
+      viewportProps={{
+        onScroll: handleViewportScroll,
+      }}
+      {...props}
+    >
+      {children}
+
+      <Stack ref={loadMoreBlockRef} />
+
+      {isFetchingNextPage && (
+        <Center mt="sm">
+          <Loader size="sm" />
+        </Center>
+      )}
+    </ScrollAreaAutosize>
+  );
+};
+
+export default InfiniteScrollContainer;
diff --git a/template/apps/web/src/components/index.ts b/template/apps/web/src/components/index.ts
index 56abcd12..cfd1bffc 100644
--- a/template/apps/web/src/components/index.ts
+++ b/template/apps/web/src/components/index.ts
@@ -1 +1,2 @@
+export { default as InfiniteScrollContainer } from './InfiniteScrollContainer';
 export { default as Table } from './Table';
diff --git a/template/apps/web/src/hooks/index.ts b/template/apps/web/src/hooks/index.ts
new file mode 100644
index 00000000..087a9192
--- /dev/null
+++ b/template/apps/web/src/hooks/index.ts
@@ -0,0 +1,3 @@
+import { useMobile } from './use-mobile';
+
+export { useMobile };
diff --git a/template/apps/web/src/hooks/use-mobile.tsx b/template/apps/web/src/hooks/use-mobile.tsx
new file mode 100644
index 00000000..48c883d5
--- /dev/null
+++ b/template/apps/web/src/hooks/use-mobile.tsx
@@ -0,0 +1,8 @@
+import { em } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+export const useMobile = () => {
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
+
+  return isMobile;
+};
diff --git a/template/apps/web/src/pages/home/components/Filters/helpers.tsx b/template/apps/web/src/pages/home/components/Filters/helpers.tsx
new file mode 100644
index 00000000..081bf409
--- /dev/null
+++ b/template/apps/web/src/pages/home/components/Filters/helpers.tsx
@@ -0,0 +1,30 @@
+import { ComboboxItem } from '@mantine/core';
+
+export const getSortByOptions = (isMobile: boolean): ComboboxItem[] => {
+  return [
+    {
+      value: 'newest',
+      label: 'Newest',
+    },
+    {
+      value: 'oldest',
+      label: 'Oldest',
+    },
+    ...(isMobile
+      ? [
+          {
+            value: 'firstName',
+            label: 'First Name',
+          },
+          {
+            value: 'lastName',
+            label: 'Last Name',
+          },
+          {
+            value: 'email',
+            label: 'Email',
+          },
+        ]
+      : []),
+  ];
+};
diff --git a/template/apps/web/src/pages/home/components/Filters/index.tsx b/template/apps/web/src/pages/home/components/Filters/index.tsx
index 47b00058..caceaf78 100644
--- a/template/apps/web/src/pages/home/components/Filters/index.tsx
+++ b/template/apps/web/src/pages/home/components/Filters/index.tsx
@@ -1,30 +1,26 @@
 import { FC, useLayoutEffect, useState } from 'react';
-import { ActionIcon, ComboboxItem, Group, Select, TextInput } from '@mantine/core';
+import { ActionIcon, Group, Select, Stack, TextInput } from '@mantine/core';
 import { DatePickerInput, DatesRangeValue } from '@mantine/dates';
 import { useDebouncedValue, useInputState, useSetState } from '@mantine/hooks';
 import { IconSearch, IconSelector, IconX } from '@tabler/icons-react';
+import { useMobile } from 'hooks';
 import { set } from 'lodash';
 
 import { UserListParams } from 'resources/user';
 
-const selectOptions: ComboboxItem[] = [
-  {
-    value: 'newest',
-    label: 'Newest',
-  },
-  {
-    value: 'oldest',
-    label: 'Oldest',
-  },
-];
+import { getSortByOptions } from './helpers';
 
 interface FiltersProps {
   setParams: ReturnType<typeof useSetState<UserListParams>>[1];
 }
 
 const Filters: FC<FiltersProps> = ({ setParams }) => {
+  const isMobile = useMobile();
+
+  const sortByOptions = getSortByOptions(isMobile);
+
   const [search, setSearch] = useInputState('');
-  const [sortBy, setSortBy] = useState<string | null>(selectOptions[0].value);
+  const [sortBy, setSortBy] = useState<string | null>(sortByOptions[0].value);
   const [filterDate, setFilterDate] = useState<DatesRangeValue>();
 
   const [debouncedSearch] = useDebouncedValue(search, 500);
@@ -57,9 +53,9 @@ const Filters: FC<FiltersProps> = ({ setParams }) => {
 
   return (
     <Group wrap="nowrap" justify="space-between">
-      <Group wrap="nowrap">
+      <Group wrap="nowrap" component={isMobile ? Stack : undefined} flex={isMobile ? 1 : undefined}>
         <TextInput
-          w={350}
+          w={isMobile ? '100%' : 350}
           size="md"
           value={search}
           onChange={setSearch}
@@ -75,9 +71,9 @@ const Filters: FC<FiltersProps> = ({ setParams }) => {
         />
 
         <Select
-          w={200}
+          w={isMobile ? '100%' : 200}
           size="md"
-          data={selectOptions}
+          data={sortByOptions}
           value={sortBy}
           onChange={handleSort}
           allowDeselect={false}
@@ -92,7 +88,14 @@ const Filters: FC<FiltersProps> = ({ setParams }) => {
           }}
         />
 
-        <DatePickerInput type="range" size="md" placeholder="Pick date" value={filterDate} onChange={handleFilter} />
+        <DatePickerInput
+          valueFormat={isMobile ? 'YYYY-MM-DD' : undefined}
+          type="range"
+          size="md"
+          placeholder="Pick date"
+          value={filterDate}
+          onChange={handleFilter}
+        />
       </Group>
     </Group>
   );
diff --git a/template/apps/web/src/pages/home/components/UserCard/constants.ts b/template/apps/web/src/pages/home/components/UserCard/constants.ts
new file mode 100644
index 00000000..04b21d5b
--- /dev/null
+++ b/template/apps/web/src/pages/home/components/UserCard/constants.ts
@@ -0,0 +1,16 @@
+import { UserCardField } from './types';
+
+export const USER_CARD_FIELDS: UserCardField[] = [
+  {
+    label: 'First Name',
+    key: 'firstName',
+  },
+  {
+    label: 'Last Name',
+    key: 'lastName',
+  },
+  {
+    label: 'Email',
+    key: 'email',
+  },
+];
diff --git a/template/apps/web/src/pages/home/components/UserCard/index.tsx b/template/apps/web/src/pages/home/components/UserCard/index.tsx
new file mode 100644
index 00000000..5246265e
--- /dev/null
+++ b/template/apps/web/src/pages/home/components/UserCard/index.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { Card, Grid, Stack, Text } from '@mantine/core';
+
+import { User } from 'types';
+
+import { USER_CARD_FIELDS } from './constants';
+
+interface UserCardProps {
+  user: User;
+  onClick: (user: User) => void;
+}
+
+const UserCard: FC<UserCardProps> = ({ user, onClick }) => {
+  const userCardFields = USER_CARD_FIELDS.map((field) => {
+    return (
+      <Grid key={field.key}>
+        <Grid.Col span={6}>
+          <Text fw={500}>{field.label}</Text>
+        </Grid.Col>
+
+        <Grid.Col span={6}>
+          <Text truncate maw={150}>
+            {user[field.key] as string}
+          </Text>
+        </Grid.Col>
+      </Grid>
+    );
+  });
+
+  return (
+    <Card shadow="sm" radius="md" withBorder onClick={() => onClick(user)}>
+      <Stack gap="sm">{userCardFields}</Stack>
+    </Card>
+  );
+};
+
+export default UserCard;
diff --git a/template/apps/web/src/pages/home/components/UserCard/types.ts b/template/apps/web/src/pages/home/components/UserCard/types.ts
new file mode 100644
index 00000000..3dc87d9c
--- /dev/null
+++ b/template/apps/web/src/pages/home/components/UserCard/types.ts
@@ -0,0 +1,6 @@
+import { User } from 'types';
+
+export interface UserCardField {
+  label: string;
+  key: keyof User;
+}
diff --git a/template/apps/web/src/pages/home/index.tsx b/template/apps/web/src/pages/home/index.tsx
index e27f86f5..36a22103 100644
--- a/template/apps/web/src/pages/home/index.tsx
+++ b/template/apps/web/src/pages/home/index.tsx
@@ -1,24 +1,37 @@
+import { useMemo } from 'react';
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { Stack, Title } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { SortDirection } from '@tanstack/react-table';
+import { useMobile } from 'hooks';
 import { pick } from 'lodash';
 
 import { userApi, UserListParams } from 'resources/user';
 
-import { Table } from 'components';
+import { InfiniteScrollContainer, Table } from 'components';
 
 import { User } from 'types';
 
 import Filters from './components/Filters';
+import UserCard from './components/UserCard';
 import { COLUMNS, DEFAULT_PAGE, DEFAULT_PARAMS, EXTERNAL_SORT_FIELDS, PER_PAGE } from './constants';
 
 const Home: NextPage = () => {
   const [params, setParams] = useSetState<UserListParams>(DEFAULT_PARAMS);
 
-  const { data: users, isLoading: isUserListLoading } = userApi.useList(params);
+  const isMobile = useMobile();
+
+  const { data: users, isLoading: isUserListLoading } = userApi.useList(params, { enabled: !isMobile });
+
+  const {
+    data: usersInfinityListData,
+    isLoading: isUserInfinityListLoading,
+    hasNextPage: hasUsersInfinityListNextPage,
+    fetchNextPage: fetchUsersInfinityListNextPage,
+    isFetchingNextPage: isFetchingUsersInfinityListNextPage,
+  } = userApi.useInfinityList(params, { enabled: isMobile });
 
   const onSortingChange = (sort: Record<string, SortDirection>) => {
     setParams((prev) => {
@@ -28,7 +41,7 @@ const Home: NextPage = () => {
     });
   };
 
-  const onRowClick = (user: User) => {
+  const onUserClick = (user: User) => {
     showNotification({
       title: 'Success',
       message: `You clicked on the row for the user with the email address ${user.email}.`,
@@ -36,6 +49,16 @@ const Home: NextPage = () => {
     });
   };
 
+  const displayedUsersCards = useMemo(() => {
+    if (!isMobile) {
+      return null;
+    }
+
+    return usersInfinityListData?.pages
+      .flatMap((p) => p.results)
+      .map((user) => <UserCard key={user._id} user={user} onClick={onUserClick} />);
+  }, [isMobile, usersInfinityListData?.pages]);
+
   return (
     <>
       <Head>
@@ -47,18 +70,31 @@ const Home: NextPage = () => {
 
         <Filters setParams={setParams} />
 
-        <Table<User>
-          data={users?.results}
-          totalCount={users?.count}
-          pageCount={users?.pagesCount}
-          page={DEFAULT_PAGE}
-          perPage={PER_PAGE}
-          columns={COLUMNS}
-          isLoading={isUserListLoading}
-          onPageChange={(page) => setParams({ page })}
-          onSortingChange={onSortingChange}
-          onRowClick={onRowClick}
-        />
+        {isMobile && (
+          <InfiniteScrollContainer
+            isLoading={isUserInfinityListLoading}
+            isFetchingNextPage={isFetchingUsersInfinityListNextPage}
+            hasMore={hasUsersInfinityListNextPage}
+            fetchNextData={fetchUsersInfinityListNextPage}
+          >
+            <Stack>{displayedUsersCards}</Stack>
+          </InfiniteScrollContainer>
+        )}
+
+        {!isMobile && (
+          <Table<User>
+            data={users?.results}
+            totalCount={users?.count}
+            pageCount={users?.pagesCount}
+            page={DEFAULT_PAGE}
+            perPage={PER_PAGE}
+            columns={COLUMNS}
+            isLoading={isUserListLoading}
+            onPageChange={(page) => setParams({ page })}
+            onSortingChange={onSortingChange}
+            onRowClick={onUserClick}
+          />
+        )}
       </Stack>
     </>
   );
diff --git a/template/apps/web/src/pages/profile/index.page.tsx b/template/apps/web/src/pages/profile/index.page.tsx
index 9fa472e8..6383e78e 100644
--- a/template/apps/web/src/pages/profile/index.page.tsx
+++ b/template/apps/web/src/pages/profile/index.page.tsx
@@ -77,7 +77,7 @@ const Profile: NextPage = () => {
         <title>Profile</title>
       </Head>
 
-      <Stack w={408} m="auto" pt={48} gap={32}>
+      <Stack w={{ lg: 408, md: 408, sm: '100%', xs: '100%' }} m="auto" pt={48} gap={32}>
         <Title order={1}>Profile</Title>
 
         <FormProvider {...methods}>
diff --git a/template/apps/web/src/resources/user/index.ts b/template/apps/web/src/resources/user/index.ts
index 88e99bad..b539c0db 100644
--- a/template/apps/web/src/resources/user/index.ts
+++ b/template/apps/web/src/resources/user/index.ts
@@ -1,5 +1,5 @@
 import * as userApi from './user.api';
 
-export type * from './user.api';
+export * from './user.types';
 
 export { userApi };
diff --git a/template/apps/web/src/resources/user/user.api.ts b/template/apps/web/src/resources/user/user.api.ts
index 713297d8..09e6ecc3 100644
--- a/template/apps/web/src/resources/user/user.api.ts
+++ b/template/apps/web/src/resources/user/user.api.ts
@@ -1,25 +1,32 @@
-import { DateValue } from '@mantine/dates';
-import { useQuery, UseQueryOptions } from '@tanstack/react-query';
+import { useInfiniteQuery, useQuery, UseQueryOptions } from '@tanstack/react-query';
 
 import { apiService } from 'services';
 
-import { ListParams, ListResult, User } from 'types';
+import { ApiError, InfinityQueryOptions, ListResult, User } from 'types';
 
-export interface UserListFilterParams {
-  createdOn?: {
-    startDate: DateValue;
-    endDate: DateValue;
-  };
-}
+import { UserListParams, UserListResponse } from '.';
 
-export type UserListSortFields = 'createdOn' | 'firstName' | 'lastName';
-
-export type UserListParams = ListParams<UserListFilterParams, Pick<User, UserListSortFields>>;
-export type UserListResponse = ListResult<User>;
+const BASE_URL = '/users';
 
 export const useList = <T extends UserListParams>(params: T, options?: Partial<UseQueryOptions<UserListResponse>>) =>
   useQuery<UserListResponse>({
     queryKey: ['users', params],
-    queryFn: () => apiService.get('/users', params),
+    queryFn: () => apiService.get(BASE_URL, params),
     ...options,
   });
+
+export const useInfinityList = <T extends UserListParams>(
+  params: T,
+  options?: InfinityQueryOptions<ListResult<User>, ApiError>,
+) => {
+  const queryFn = (pageParam: number): Promise<ListResult<User>> =>
+    apiService.get(BASE_URL, { ...params, page: pageParam });
+
+  return useInfiniteQuery<ListResult<User>, ApiError>({
+    queryKey: ['users-infinity-list', params],
+    queryFn: ({ pageParam = 1 }) => queryFn(pageParam as number),
+    getNextPageParam: (lastPage) => (lastPage.pagesCount > lastPage.page! ? lastPage.page! + 1 : undefined),
+    initialPageParam: 1,
+    ...(options || {}),
+  });
+};
diff --git a/template/apps/web/src/resources/user/user.types.ts b/template/apps/web/src/resources/user/user.types.ts
new file mode 100644
index 00000000..ba62bbe9
--- /dev/null
+++ b/template/apps/web/src/resources/user/user.types.ts
@@ -0,0 +1,15 @@
+import { DateValue } from '@mantine/dates';
+
+import { ListParams, ListResult, User } from 'types';
+
+export interface UserListFilterParams {
+  createdOn?: {
+    startDate: DateValue;
+    endDate: DateValue;
+  };
+}
+
+export type UserListSortFields = 'createdOn' | 'firstName' | 'lastName';
+
+export type UserListParams = ListParams<UserListFilterParams, Pick<User, UserListSortFields>>;
+export type UserListResponse = ListResult<User>;
diff --git a/template/apps/web/src/types.ts b/template/apps/web/src/types.ts
index 0b791d4b..ca5e918b 100644
--- a/template/apps/web/src/types.ts
+++ b/template/apps/web/src/types.ts
@@ -1,3 +1,5 @@
+import { InfiniteData, UseInfiniteQueryOptions } from '@tanstack/react-query';
+
 export * from 'app-types';
 export type { ApiError } from 'services/api.service';
 
@@ -7,6 +9,7 @@ export interface ListResult<T> {
   results: T[];
   pagesCount: number;
   count: number;
+  page?: number;
 }
 
 export type SortOrder = 'asc' | 'desc';
@@ -22,3 +25,9 @@ export interface ListParams<T, F> {
   filter?: T;
   sort?: SortParams<F>;
 }
+
+export interface InfinityQueryOptions<T, E>
+  extends Omit<
+    UseInfiniteQueryOptions<T, E, InfiniteData<T>>,
+    'queryKey' | 'queryFn' | 'getNextPageParam' | 'initialPageParam'
+  > {}