diff --git a/app/api/namespaces/product.ts b/app/api/namespaces/product.ts
index bd0f47e..d16d16a 100644
--- a/app/api/namespaces/product.ts
+++ b/app/api/namespaces/product.ts
@@ -68,6 +68,7 @@ export type ProductListAppliedSort = {
   value: 'asc' | 'desc'
 }[]
 
+export const ITEMS_PER_PAGE = 12
 export const PRODUCT_LIST_FILTER_TRUE = 'T'
 export const PRODUCT_LIST_FILTER_FALSE = 'F'
 export const PRODUCT_LIST_FILTER_NONE = 'none'
diff --git a/app/components/ui/Pagination.tsx b/app/components/ui/Pagination.tsx
new file mode 100644
index 0000000..2af9694
--- /dev/null
+++ b/app/components/ui/Pagination.tsx
@@ -0,0 +1,126 @@
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeft, ChevronsRight, MoreHorizontalIcon } from 'lucide-react'
+
+import { cn } from '~/utils/ui'
+import type { Button } from '~/components/ui/Button'
+import { buttonVariants } from '~/components/ui/Button'
+import type { ComponentProps, ReactElement } from 'react'
+
+export function Pagination({ className, ...properties }: ComponentProps<'nav'>): ReactElement {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center my-4', className)}
+      {...properties}
+    />
+  )
+}
+
+export function PaginationContent({ className, ...properties }: ComponentProps<'ul'>): ReactElement {
+  return (
+    <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...properties} />
+  )
+}
+
+export function PaginationItem({ ...properties }: ComponentProps<'li'>): ReactElement {
+  return <li data-slot="pagination-item" {...properties} />
+}
+
+type PaginationLinkProperties = {
+  isActive?: boolean
+} & Pick<ComponentProps<typeof Button>, 'size'> &
+  ComponentProps<'a'>
+
+export function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...properties
+}: PaginationLinkProperties): ReactElement {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size
+        }),
+        className
+      )}
+      {...properties}
+    />
+  )
+}
+
+export function PaginationPrevious({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...properties}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+export function PaginationNext({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...properties}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+export function PaginationStart({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to first page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...properties}
+    >
+      <ChevronsLeft />
+      <span className="hidden sm:block">Start</span>
+    </PaginationLink>
+  )
+}
+
+export function PaginationEnd({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to last page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...properties}
+    >
+      <span className="hidden sm:block">End</span>
+      <ChevronsRight />
+    </PaginationLink>
+  )
+}
+
+export function PaginationEllipsis({ className, ...properties }: ComponentProps<'span'>): ReactElement {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...properties}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
diff --git a/app/pages/catalog/AddToCartButton.tsx b/app/pages/catalog/AddToCartButton.tsx
new file mode 100644
index 0000000..0a614c4
--- /dev/null
+++ b/app/pages/catalog/AddToCartButton.tsx
@@ -0,0 +1,23 @@
+import { Check, ShoppingCart } from 'lucide-react'
+import type { ReactElement } from 'react'
+import { Button } from '~/components/ui/Button'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function AddToCartButton({ productId }: { productId: string }): ReactElement {
+  // TODO:
+  const isProductInCart = false
+
+  return (
+    <div onClick={(event) => event.stopPropagation()} className={isProductInCart ? 'cursor-auto' : 'cursor-pointer'}>
+      <Button
+        variant={isProductInCart ? 'secondary' : 'outline'}
+        size="icon"
+        className="relative cursor-pointer disabled:opacity-100"
+        disabled={isProductInCart}
+      >
+        <ShoppingCart size={16} />
+        {isProductInCart && <Check className="text-green-400 absolute bottom-0 right-0" />}
+      </Button>
+    </div>
+  )
+}
diff --git a/app/pages/catalog/FilterForm/Categories.tsx b/app/pages/catalog/FilterForm/Categories.tsx
index 23584f6..5636b61 100644
--- a/app/pages/catalog/FilterForm/Categories.tsx
+++ b/app/pages/catalog/FilterForm/Categories.tsx
@@ -9,18 +9,21 @@ import { ROUTES } from '~/routes'
 
 type LinkProperties = {
   category: ProductListCategory
+  onClick: () => void
 }
 
 type CategoriesProperties = {
   categories: ProductListCategory[]
+  onClick: () => void
 }
 
-function Link({ category }: LinkProperties): ReactElement {
+function Link({ category, onClick }: LinkProperties): ReactElement {
   const navigate = useNavigate()
   const { categoryId } = useParams()
 
   const handleClick = async (event: MouseEvent, categoryId: string): Promise<void> => {
     event.preventDefault()
+    onClick()
     return navigate(generatePath(ROUTES.CATEGORY, { categoryId }))
   }
 
@@ -35,7 +38,7 @@ function Link({ category }: LinkProperties): ReactElement {
   )
 }
 
-export function Categories({ categories }: CategoriesProperties): ReactElement {
+export function Categories({ categories, onClick }: CategoriesProperties): ReactElement {
   const [open, setOpen] = useState<Record<string, boolean>>(() =>
     Object.fromEntries(categories.map((category) => [category.id, true]))
   )
@@ -52,7 +55,7 @@ export function Categories({ categories }: CategoriesProperties): ReactElement {
                 onOpenChange={() => setOpen((previous) => ({ ...previous, [category.id]: !previous[category.id] }))}
               >
                 <div className="flex justify-between items-center cursor-pointer">
-                  <Link category={category} />
+                  <Link category={category} onClick={onClick} />
                   <CollapsibleTrigger asChild>
                     <Button type="button" variant="ghost" size="icon" className="size-8 cursor-pointer">
                       <ChevronsUpDown />
@@ -61,12 +64,12 @@ export function Categories({ categories }: CategoriesProperties): ReactElement {
                 </div>
                 <CollapsibleContent>
                   <div className="pl-3">
-                    <Categories categories={category.subCategories} />
+                    <Categories categories={category.subCategories} onClick={onClick} />
                   </div>
                 </CollapsibleContent>
               </Collapsible>
             ) : (
-              <Link category={category} />
+              <Link category={category} onClick={onClick} />
             )}
           </li>
         ))}
diff --git a/app/pages/catalog/FilterForm/FilterFormBody.tsx b/app/pages/catalog/FilterForm/FilterFormBody.tsx
index a56d2a0..f191f7f 100644
--- a/app/pages/catalog/FilterForm/FilterFormBody.tsx
+++ b/app/pages/catalog/FilterForm/FilterFormBody.tsx
@@ -11,7 +11,8 @@ import {
   PRODUCT_LIST_SORT_ASC,
   PRODUCT_LIST_SORT_DESC,
   type ProductListCategory,
-  PRODUCT_LIST_DEFAULT_APPLIED_FILTERS
+  PRODUCT_LIST_DEFAULT_APPLIED_FILTERS,
+  ITEMS_PER_PAGE
 } from '~/api/namespaces/product'
 import {
   Sidebar,
@@ -34,6 +35,7 @@ type FilterFormBodyProperties = {
   filters: ProductListFilter[]
   categories: ProductListCategory[]
   fetch: UseCatalogDataResult['fetchProducts']
+  onApply: () => void
 }
 
 const SORT_KEY_PREFIX = 'sort_'
@@ -161,16 +163,18 @@ function FilterFormFields({
   )
 }
 
-export function FilterFormBody({ filters, categories, fetch }: FilterFormBodyProperties): ReactElement {
+export function FilterFormBody({ filters, categories, fetch, onApply }: FilterFormBodyProperties): ReactElement {
   const defaultValues = getDefaultFormValues(filters, sorts)
   const form = useForm<FormValues>({ defaultValues })
 
-  const handleApply = (data: FormValues): Promise<void> =>
-    fetch(
-      { limit: PRODUCTS_LIMIT },
+  const handleApply = (data: FormValues): Promise<void> => {
+    onApply()
+    return fetch(
+      { limit: ITEMS_PER_PAGE },
       convertFormValuesToAppliedFilters(data, filters),
       convertFormValuesToSort(data, sorts)
     )
+  }
 
   const handleReset = (): Promise<void> => {
     form.reset(defaultValues)
@@ -182,7 +186,7 @@ export function FilterFormBody({ filters, categories, fetch }: FilterFormBodyPro
       <Sidebar>
         <SidebarContent className="p-4">
           <form onSubmit={(event) => void form.handleSubmit(handleApply)(event)} className="space-y-4">
-            <Categories categories={categories} />
+            <Categories categories={categories} onClick={onApply} />
             <FilterFormFields filters={filters} form={form} />
             <SidebarGroup>
               <div className="flex justify-between">
diff --git a/app/pages/catalog/NoProductsFound.tsx b/app/pages/catalog/NoProductsFound.tsx
new file mode 100644
index 0000000..6b6eade
--- /dev/null
+++ b/app/pages/catalog/NoProductsFound.tsx
@@ -0,0 +1,13 @@
+import { Sparkles } from 'lucide-react'
+import type { ReactElement } from 'react'
+
+export function NoProductsFound(): ReactElement {
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
+        <Sparkles size={60} className="text-sky-200" />
+        <p className="text-sm">We couldn’t find any products matching your search.</p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/catalog/PaginationControls.tsx b/app/pages/catalog/PaginationControls.tsx
new file mode 100644
index 0000000..f51c121
--- /dev/null
+++ b/app/pages/catalog/PaginationControls.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEnd,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationStart
+} from '~/components/ui/Pagination'
+
+type PaginationControlsProperties = {
+  page: number
+  totalPage: number
+  onPageChange: (page: number) => void
+}
+
+export function PaginationControls({ page, totalPage, onPageChange }: PaginationControlsProperties): ReactElement {
+  const isFirstPage = page === 1
+  const isLastPage = page === totalPage
+  const classNamesDisabled = 'pointer-events-none opacity-50'
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationStart
+            onClick={() => !isFirstPage && onPageChange(1)}
+            className={isFirstPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => !isFirstPage && onPageChange(page - 1)}
+            className={isFirstPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+        <PaginationItem className="px-2.5 sm:pl-2.5 border rounded-sm">
+          {page} / {totalPage}
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext
+            onClick={() => !isLastPage && onPageChange(page + 1)}
+            className={isLastPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEnd
+            onClick={() => !isLastPage && onPageChange(totalPage)}
+            className={isLastPage ? classNamesDisabled : ''}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/app/pages/catalog/ProductItem.tsx b/app/pages/catalog/ProductItem.tsx
index 06d29cb..27b9eb3 100644
--- a/app/pages/catalog/ProductItem.tsx
+++ b/app/pages/catalog/ProductItem.tsx
@@ -2,12 +2,11 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { type ReactElement } from 'react'
 import { generatePath, useNavigate } from 'react-router'
 import { Card, CardContent, CardDescription, CardTitle } from '~/components/ui/Card'
-import { ShoppingCart } from 'lucide-react'
-import { Button } from '~/components/ui/Button'
 import { SaleBadge } from '~/components/product/SaleBadge'
 import { AspectRatio } from '~/components/ui/AspectRatio'
 import { ProductPrice } from '~/components/product/ProductPrice'
 import { ROUTES } from '~/routes'
+import { AddToCartButton } from './AddToCartButton'
 
 type ProductItemProperties = { product: ProductProjection }
 
@@ -26,7 +25,7 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
 
   return (
     <Card
-      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 cursor-pointer hover:bg-stone-50"
+      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 hover:bg-stone-50 cursor-pointer"
       onClick={() => void navigateTo(product.id)}
     >
       <CardContent className="space-y-0 h-full flex flex-col justify-between gap-y-2 relative">
@@ -39,9 +38,7 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
         <CardDescription className="flex-1 line-clamp-2">{description}</CardDescription>
         <div className="flex justify-between items-center">
           <ProductPrice startPrice={price} discountPrice={discountPrice} />
-          <Button variant="outline" size="icon">
-            <ShoppingCart size={16} />
-          </Button>
+          <AddToCartButton productId={product.id} />
         </div>
       </CardContent>
     </Card>
diff --git a/app/pages/catalog/ProductList.tsx b/app/pages/catalog/ProductList.tsx
index a221454..50f5bb4 100644
--- a/app/pages/catalog/ProductList.tsx
+++ b/app/pages/catalog/ProductList.tsx
@@ -3,10 +3,7 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { Skeleton } from '~/components/ui/Skeleton'
 import { ProductItem } from './ProductItem'
 import { CATALOG_STATUS } from './hooks/useCatalogData'
-import { Sparkles } from 'lucide-react'
-
-// TODO: items per page
-const SKELETON_COUNT = 8
+import { ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 type ProductListProperties = {
   products: ProductProjection[]
@@ -15,25 +12,12 @@ type ProductListProperties = {
 
 export function ProductList({ products, status }: ProductListProperties): ReactElement {
   const isNotReady = status !== CATALOG_STATUS.READY
-  const isEmpty = !isNotReady && products.length === 0
-
-  if (isEmpty) {
-    // TODO: move to separate component
-    return (
-      <div className="w-full h-full flex items-center justify-center">
-        <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
-          <Sparkles size={60} className="text-sky-200" />
-          <p className="text-sm">We couldn’t find any products matching your search.</p>
-        </div>
-      </div>
-    )
-  }
 
   return (
     <div className="flex gap-3 flex-wrap px-2 pt-1 pb-3">
       {isNotReady
         ? // TODO: move to separate component
-          Array.from({ length: SKELETON_COUNT }).map((_, index) => (
+          Array.from({ length: ITEMS_PER_PAGE }).map((_, index) => (
             <Skeleton className="w-2xs aspect-[3/4] mx-auto" key={index} />
           ))
         : products.map((product) => <ProductItem product={product} key={product.id} />)}
diff --git a/app/pages/catalog/SearchForm/SearchFomBody.tsx b/app/pages/catalog/SearchForm/SearchFomBody.tsx
index 7a86ec1..afe0dbd 100644
--- a/app/pages/catalog/SearchForm/SearchFomBody.tsx
+++ b/app/pages/catalog/SearchForm/SearchFomBody.tsx
@@ -3,19 +3,23 @@ import { useForm } from 'react-hook-form'
 import { Search } from 'lucide-react'
 import { Input } from '~/components/ui/Input'
 import { Button } from '~/components/ui/Button'
-import { PRODUCTS_LIMIT } from '../FilterForm/FilterFormBody'
 import { type UseCatalogDataResult } from '../hooks/useCatalogData'
+import { ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 type SearchFormBodyProperties = {
   fetch: UseCatalogDataResult['fetchProducts']
+  setSearch: (search: string) => void
+  onSearch: () => void
 }
 
-export function SearchFormBody({ fetch }: SearchFormBodyProperties): ReactElement {
+export function SearchFormBody({ fetch, setSearch, onSearch }: SearchFormBodyProperties): ReactElement {
   const { register, handleSubmit, getValues } = useForm<{ search: string }>()
 
-  function onSubmit(): void {
+  const onSubmit = (): Promise<void> => {
+    onSearch()
     const { search } = getValues()
-    void fetch({ limit: PRODUCTS_LIMIT }, [], [], search)
+    setSearch(search)
+    return fetch({ limit: ITEMS_PER_PAGE }, [], [], search)
   }
 
   return (
diff --git a/app/pages/catalog/hooks/useCatalogData.ts b/app/pages/catalog/hooks/useCatalogData.ts
index 1a16112..b344dec 100644
--- a/app/pages/catalog/hooks/useCatalogData.ts
+++ b/app/pages/catalog/hooks/useCatalogData.ts
@@ -16,6 +16,7 @@ export type UseCatalogDataResult = {
   products: UseCatalogProductsDataResult['products']
   categories: UseCatalogCategoriesDataResult['categories']
   status: CATALOG_STATUS
+  total: number
 }
 
 export function useCatalogData(): UseCatalogDataResult {
@@ -24,12 +25,12 @@ export function useCatalogData(): UseCatalogDataResult {
   const { categoryId = '' } = useParams()
 
   const { categories, fetchCategories } = useCatalogCategoriesData({ setStatus })
-  const { products, fetchProducts } = useCatalogProductsData({ setStatus })
+  const { products, fetchProducts, total } = useCatalogProductsData({ setStatus })
   const { filters, fetchFilters } = useCatalogFiltersData({ setStatus })
 
   useEffect(() => void Promise.all([fetchFilters(), fetchProducts(), fetchCategories()]), [])
 
   useEffect(() => void fetchProducts(), [categoryId])
 
-  return { products, filters, categories, status, fetchProducts }
+  return { products, filters, categories, status, total, fetchProducts }
 }
diff --git a/app/pages/catalog/hooks/useCatalogProductsData.ts b/app/pages/catalog/hooks/useCatalogProductsData.ts
index e10aa84..bb34cdb 100644
--- a/app/pages/catalog/hooks/useCatalogProductsData.ts
+++ b/app/pages/catalog/hooks/useCatalogProductsData.ts
@@ -3,6 +3,7 @@ import { useParams } from 'react-router'
 import { type ProductProjection } from '@commercetools/platform-sdk'
 import { toast } from 'sonner'
 import {
+  ITEMS_PER_PAGE,
   PRODUCT_LIST_DEFAULT_APPLIED_FILTERS,
   PRODUCT_LIST_DEFAULT_APPLIED_SORT,
   productApi,
@@ -20,6 +21,7 @@ export type UseCatalogProductsDataResult = {
     sort?: ProductListAppliedSort,
     searchText?: string
   ) => Promise<void>
+  total: number
 }
 
 export type ProductListAppliedPayload = {
@@ -46,6 +48,7 @@ export function useCatalogProductsData({
   setStatus: Dispatch<SetStateAction<CATALOG_STATUS>>
 }): UseCatalogProductsDataResult {
   const [products, setProducts] = useState<ProductProjection[]>([])
+  const [total, setTotal] = useState<number>(0)
   const { categoryId = '' } = useParams()
 
   const fetchProducts = async (
@@ -60,14 +63,14 @@ export function useCatalogProductsData({
 
     try {
       const response = await productApi.getProducts(
-        { ...parameters, limit: 100 },
+        { ...parameters, limit: ITEMS_PER_PAGE },
         cache.filters,
         cache.sort,
         searchText,
         categoryId
       )
-
       setProducts(response.body.results)
+      setTotal(response.body.total ?? 0)
       setStatus(CATALOG_STATUS.READY)
     } catch (error) {
       setStatus(CATALOG_STATUS.ERROR)
@@ -76,5 +79,5 @@ export function useCatalogProductsData({
     }
   }
 
-  return { products, fetchProducts }
+  return { products, fetchProducts, total }
 }
diff --git a/app/pages/catalog/index.tsx b/app/pages/catalog/index.tsx
index 14573e0..c65bb76 100644
--- a/app/pages/catalog/index.tsx
+++ b/app/pages/catalog/index.tsx
@@ -1,26 +1,50 @@
-import { type ReactElement } from 'react'
+import { useState, type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
 import { Loading } from '~/components/Loading'
 import { ProductList } from './ProductList'
 import { FilterFormBody } from './FilterForm/FilterFormBody'
-import { useCatalogData } from './hooks/useCatalogData'
+import { CATALOG_STATUS, useCatalogData } from './hooks/useCatalogData'
 import { SearchFormBody } from './SearchForm/SearchFomBody'
+import { NoProductsFound } from './NoProductsFound'
+import { PaginationControls } from './PaginationControls'
+import { ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 export default function Catalog(): ReactElement {
   useTitle('Catalog')
+  const { products, filters, status, categories, fetchProducts, total } = useCatalogData()
+  const hasNoProducts = status === CATALOG_STATUS.READY && products.length === 0
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const [searchText, setSearchText] = useState<string>('')
+  const pagesCount = Math.ceil(total / ITEMS_PER_PAGE)
 
-  const { products, filters, status, categories, fetchProducts } = useCatalogData()
-
+  const handlePageChange = (page: number): void => {
+    setCurrentPage(page)
+    void fetchProducts({ limit: ITEMS_PER_PAGE, offset: (page - 1) * ITEMS_PER_PAGE }, [], [], searchText)
+  }
   if (filters.length === 0) {
     return <Loading />
   }
-
   return (
     <div className="flex h-full w-full">
-      <FilterFormBody filters={filters} categories={categories} fetch={fetchProducts} />
+      <FilterFormBody
+        filters={filters}
+        categories={categories}
+        fetch={fetchProducts}
+        onApply={() => {
+          setCurrentPage(1)
+          setSearchText('')
+        }}
+      />
       <div className="flex-grow">
-        <SearchFormBody fetch={fetchProducts} />
-        <ProductList products={products} status={status} />
+        <SearchFormBody fetch={fetchProducts} setSearch={setSearchText} onSearch={() => setCurrentPage(1)} />
+        {hasNoProducts ? (
+          <NoProductsFound />
+        ) : (
+          <div>
+            <ProductList products={products} status={status} />
+            <PaginationControls page={currentPage} totalPage={pagesCount} onPageChange={handlePageChange} />
+          </div>
+        )}
       </div>
     </div>
   )