diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 1e6eb5a..d18d1a7 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -1,64 +1,90 @@
 import React from "react";
 
 interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  limit?: number;
+  onLimitChange?: (limit: number) => void;
+  limitOptions?: number[];
 }
 
-const Pagination: React.FC<PaginationProps> = ({
-    currentPage,
-    totalPages,
-    onPageChange,
-}) => {
-    const getPageNumbers = () => {
-        const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = 5;
+const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange, limit = 10, onLimitChange, limitOptions = [10, 20, 50] }) => {
+  const handleLimitChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onLimitChange?.(Number(event.target.value));
+    onPageChange(1);
+  };
 
-        if (totalPages <= maxVisiblePages) {
-            // اگر تعداد صفحات کم است، همه را نشان بده
-            for (let i = 1; i <= totalPages; i++) {
-                pageNumbers.push(i);
-            }
-        } else {
-            // همیشه صفحه اول را نشان بده
-            pageNumbers.push(1);
+  const getPageNumbers = () => {
+    const pageNumbers: (number | string)[] = [];
+    const maxVisiblePages = 5;
 
-            if (currentPage <= 3) {
-                // در صفحات اولیه (1, 2, 3)
-                for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
-                    pageNumbers.push(i);
-                }
-                if (totalPages > 5) {
-                    pageNumbers.push("...");
-                }
-                pageNumbers.push(totalPages);
-            } else if (currentPage >= totalPages - 2) {
-                // در صفحات آخر
-                pageNumbers.push("...");
-                for (let i = totalPages - 3; i <= totalPages; i++) {
-                    pageNumbers.push(i);
-                }
-            } else {
-                // در صفحات وسط
-                pageNumbers.push("...");
-                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-                    pageNumbers.push(i);
-                }
-                pageNumbers.push("...");
-                pageNumbers.push(totalPages);
-            }
+    if (totalPages <= maxVisiblePages) {
+      // اگر تعداد صفحات کم است، همه را نشان بده
+      for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(i);
+      }
+    } else {
+      // همیشه صفحه اول را نشان بده
+      pageNumbers.push(1);
+
+      if (currentPage <= 3) {
+        // در صفحات اولیه (1, 2, 3)
+        for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
+          pageNumbers.push(i);
         }
+        if (totalPages > 5) {
+          pageNumbers.push("...");
+        }
+        pageNumbers.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        // در صفحات آخر
+        pageNumbers.push("...");
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pageNumbers.push(i);
+        }
+      } else {
+        // در صفحات وسط
+        pageNumbers.push("...");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pageNumbers.push(i);
+        }
+        pageNumbers.push("...");
+        pageNumbers.push(totalPages);
+      }
+    }
 
-        return pageNumbers;
-    };
+    return pageNumbers;
+  };
 
-    const pageNumbers = getPageNumbers();
+  const pageNumbers = getPageNumbers();
 
-    return (
-        <div className="flex gap-2 text-xs justify-center items-center mt-4">
-            {/* دکمه قبلی */}
-            {/* <button
+  return (
+    <div className="flex flex-wrap gap-4 text-xs justify-center items-center mt-4">
+      {onLimitChange && (
+        <label className="flex items-center gap-2 text-gray-600">
+          <span>تعداد در صفحه</span>
+          <select
+            aria-label="تعداد آیتم در صفحه"
+            className="h-8 rounded-md border border-[#EAECF5] bg-white px-2 outline-none focus:border-primary"
+            value={limit}
+            onChange={handleLimitChange}
+          >
+            {limitOptions.map((option) => (
+              <option
+                key={option}
+                value={option}
+              >
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+
+      <div className="flex gap-2 items-center">
+        {/* دکمه قبلی */}
+        {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === 1
                         ? "text-gray-400 cursor-not-allowed"
                         : "text-blue-600 hover:bg-gray-100"
@@ -69,28 +95,28 @@ const Pagination: React.FC<PaginationProps> = ({
                 قبلی
             </button> */}
 
-            {/* شماره صفحات */}
-            {pageNumbers.map((page, index) =>
-                typeof page === "number" ? (
-                    <button
-                        key={`page-${page}`}
-                        className={`size-8 rounded-md ${currentPage === page
-                            ? "bg-primary text-white"
-                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
-                            }`}
-                        onClick={() => onPageChange(page)}
-                    >
-                        {page}
-                    </button>
-                ) : (
-                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
-                        {page}
-                    </span>
-                )
-            )}
+        {/* شماره صفحات */}
+        {pageNumbers.map((page, index) =>
+          typeof page === "number" ? (
+            <button
+              key={`page-${page}`}
+              className={`size-8 rounded-md ${currentPage === page ? "bg-primary text-white" : "text-primary bg-[#EAECF5] hover:bg-gray-100"}`}
+              onClick={() => onPageChange(page)}
+            >
+              {page}
+            </button>
+          ) : (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-3 py-1 text-gray-500"
+            >
+              {page}
+            </span>
+          ),
+        )}
 
-            {/* دکمه بعدی */}
-            {/* <button
+        {/* دکمه بعدی */}
+        {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === totalPages
                         ? "text-gray-400 cursor-not-allowed"
                         : "text-blue-600 hover:bg-gray-100"
@@ -100,8 +126,9 @@ const Pagination: React.FC<PaginationProps> = ({
             >
                 بعدی
             </button> */}
-        </div>
-    );
+      </div>
+    </div>
+  );
 };
 
-export default Pagination;
\ No newline at end of file
+export default Pagination;
diff --git a/src/pages/customer/List.tsx b/src/pages/customer/List.tsx
index a0a8fc4..7bb8eac 100644
--- a/src/pages/customer/List.tsx
+++ b/src/pages/customer/List.tsx
@@ -1,134 +1,134 @@
-import { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
-import Select from '../../components/Select'
-import Input from '../../components/Input'
-import Td from '../../components/Td'
-import { Link } from 'react-router-dom'
-import { Pages } from '../../config/Pages'
-import { useGetCustomers } from './hooks/useCustomerData'
-import PageLoading from '../../components/PageLoading'
-import { CustomerItemType } from './types/CustomerTypes'
-import Pagination from '../../components/Pagination'
+import { Add, Eye } from "iconsax-react";
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+import PageLoading from "../../components/PageLoading";
+import Pagination from "../../components/Pagination";
+import Select from "../../components/Select";
+import Td from "../../components/Td";
+import { Pages } from "../../config/Pages";
+import { useGetCustomers } from "./hooks/useCustomerData";
+import { CustomerItemType } from "./types/CustomerTypes";
 
 const CustomerList: FC = () => {
+  const { t } = useTranslation("global");
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const getCustomers = useGetCustomers(page, limit);
 
-    const { t } = useTranslation('global')
-    const [page, setPage] = useState(1)
-    const getCustomers = useGetCustomers(page)
-
-    return (
-        <div className='mt-4'>
-            <div className='flex w-full justify-between items-center'>
-                <div>
-                    {t('customer.customer_list')}
-                </div>
-                <Link to={Pages.customer.create}>
-                    <Button
-                        className='px-5'
-                    >
-                        <div className='flex gap-2'>
-                            <Add
-                                className='size-5'
-                                color='#fff'
-                            />
-                            <div>{t('customer.add_cutomer')}</div>
-                        </div>
-                    </Button>
-                </Link>
+  return (
+    <div className="mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("customer.customer_list")}</div>
+        <Link to={Pages.customer.create}>
+          <Button className="px-5">
+            <div className="flex gap-2">
+              <Add
+                className="size-5"
+                color="#fff"
+              />
+              <div>{t("customer.add_cutomer")}</div>
             </div>
+          </Button>
+        </Link>
+      </div>
 
-            <div className='flex justify-between items-center mt-12'>
-                <div className='flex gap-4'>
-                    <Select
-                        className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        placeholder={t('service.category')}
-                    />
-                    <Select
-                        className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        placeholder={t('service.status')}
-                    />
-                </div>
-                <div>
-                    <Input
-                        variant='search'
-                        placeholder={t('service.search')}
-                        className='bg-white border border-border'
-                    />
-                </div>
-            </div>
-
-            {
-                getCustomers.isPending ?
-                    <PageLoading />
-                    :
-                    <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                        <table className='w-full text-sm '>
-                            <thead className='thead'>
-                                <tr>
-                                    <Td text={t('customer.name')} />
-                                    <Td text={t('customer.company')} />
-                                    <Td text={t('customer.email')} />
-                                    <Td text={t('customer.active_services')} />
-                                    <Td text={t('customer.factor')} />
-                                    <Td text={t('customer.tickets')} />
-                                    <Td text={t('customer.detail')} />
-                                    <Td text={''} />
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {
-                                    getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
-                                        return (
-                                            <tr key={item.id} className='tr'>
-                                                <Td text={item.firstName + ' ' + item.lastName} />
-                                                <Td text={item?.legalUser?.registrationName} />
-                                                <Td text={item.email ? item.email : ''} />
-                                                <Td text={item.subscriptionsCount} />
-                                                <Td text={''}>
-                                                    <Link to={Pages.receipts.index + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.invoicesCount} صورت حساب</div>
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''}>
-                                                    <Link to={Pages.ticket.list + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.ticketsCount} تیکت</div>
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''}>
-                                                    <Link to={Pages.customer.update + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''} />
-                                            </tr>
-                                        )
-                                    })
-                                }
-
-                            </tbody>
-                        </table>
-
-                        <Pagination
-                            totalPages={getCustomers.data?.data?.pager?.totalPages}
-                            currentPage={page}
-                            onPageChange={setPage}
-                        />
-                    </div>
-            }
+      <div className="flex justify-between items-center mt-12">
+        <div className="flex gap-4">
+          <Select
+            className="w-36"
+            items={[
+              { label: "All", value: "all" },
+              { label: "Active", value: "active" },
+              { label: "Inactive", value: "inactive" },
+            ]}
+            placeholder={t("service.category")}
+          />
+          <Select
+            className="w-36"
+            items={[
+              { label: "All", value: "all" },
+              { label: "Active", value: "active" },
+              { label: "Inactive", value: "inactive" },
+            ]}
+            placeholder={t("service.status")}
+          />
         </div>
-    )
-}
+        <div>
+          <Input
+            variant="search"
+            placeholder={t("service.search")}
+            className="bg-white border border-border"
+          />
+        </div>
+      </div>
 
-export default CustomerList
\ No newline at end of file
+      {getCustomers.isPending ? (
+        <PageLoading />
+      ) : (
+        <div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
+          <table className="w-full text-sm ">
+            <thead className="thead">
+              <tr>
+                <Td text={t("customer.name")} />
+                <Td text={t("customer.company")} />
+                <Td text={t("customer.email")} />
+                <Td text={t("customer.active_services")} />
+                <Td text={t("customer.factor")} />
+                <Td text={t("customer.tickets")} />
+                <Td text={t("customer.detail")} />
+                <Td text={""} />
+              </tr>
+            </thead>
+            <tbody>
+              {getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
+                return (
+                  <tr
+                    key={item.id}
+                    className="tr"
+                  >
+                    <Td text={item.firstName + " " + item.lastName} />
+                    <Td text={item?.legalUser?.registrationName} />
+                    <Td text={item.email ? item.email : ""} />
+                    <Td text={item.subscriptionsCount} />
+                    <Td text={""}>
+                      <Link to={Pages.receipts.index + `?user=${item.id}`}>
+                        <div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
+                      </Link>
+                    </Td>
+                    <Td text={""}>
+                      <Link to={Pages.ticket.list + `?user=${item.id}`}>
+                        <div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
+                      </Link>
+                    </Td>
+                    <Td text={""}>
+                      <Link to={Pages.customer.update + item.id}>
+                        <Eye
+                          size={20}
+                          color="#8C90A3"
+                        />
+                      </Link>
+                    </Td>
+                    <Td text={""} />
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+
+          <Pagination
+            totalPages={getCustomers.data?.data?.pager?.totalPages}
+            currentPage={page}
+            onPageChange={setPage}
+            limit={limit}
+            onLimitChange={setLimit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomerList;
diff --git a/src/pages/customer/hooks/useCustomerData.ts b/src/pages/customer/hooks/useCustomerData.ts
index 432879b..1deb715 100644
--- a/src/pages/customer/hooks/useCustomerData.ts
+++ b/src/pages/customer/hooks/useCustomerData.ts
@@ -1,11 +1,11 @@
-import * as api from "../service/CustomerService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/CustomerService";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const useGetCustomers = (page: number, withoutPaginate?: boolean) => {
+export const useGetCustomers = (page: number, limit: number, withoutPaginate?: boolean) => {
   return useQuery({
-    queryKey: ["customers", page],
-    queryFn: () => api.getCustomers(page, withoutPaginate),
+    queryKey: ["customers", page, limit],
+    queryFn: () => api.getCustomers(page, limit, withoutPaginate),
   });
 };
 
@@ -27,8 +27,7 @@ export const useGetCities = (provincesId: string) => {
 export const useCreateCustomer = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
-      api.createCustomer(variables),
+    mutationFn: (variables: CreateCustomerType) => api.createCustomer(variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],
@@ -48,8 +47,7 @@ export const useGetCustomerDetail = (id?: string) => {
 export const useUpdateCustomer = (id: string) => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
-      api.updateCustomer(id, variables),
+    mutationFn: (variables: CreateCustomerType) => api.updateCustomer(id, variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],
diff --git a/src/pages/customer/service/CustomerService.ts b/src/pages/customer/service/CustomerService.ts
index c7ffce8..fdd9c45 100644
--- a/src/pages/customer/service/CustomerService.ts
+++ b/src/pages/customer/service/CustomerService.ts
@@ -1,10 +1,8 @@
 import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const getCustomers = async (page: number, withoutPaginate?: boolean) => {
-  const { data } = await axios.get(
-    `/users/customers?page=${page}&paginate=${withoutPaginate ? "0" : "1"}`
-  );
+export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean) => {
+  const { data } = await axios.get(`/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}`);
   return data;
 };
 
@@ -28,10 +26,7 @@ export const getDetailCustomer = async (id: string) => {
   return data;
 };
 
-export const updateCustomer = async (
-  id: string,
-  params: CreateCustomerType
-) => {
+export const updateCustomer = async (id: string, params: CreateCustomerType) => {
   const { data } = await axios.patch(`/users/customers/${id}`, params);
   return data;
 };