diff --git a/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx b/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
index dd0912c6..dfb4aa4d 100644
--- a/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
+++ b/app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx
@@ -102,8 +102,9 @@ export default async function RoutePage(props: PageParams<{
                         organizationSlug={organization.slug}
                         // @ts-ignore
                         cardItem={ProjectDatabaseCard}
-                        cardsPerPage={6}
+                        cardsPerPage={20}
                         numberOfColumns={3}
+                        pageSizeOptions={[10, 20, 50]}
                         extendedProps={proj}
                     />
                 ) : (
diff --git a/app/(customer)/dashboard/(organization)/projects/page.tsx b/app/(customer)/dashboard/(organization)/projects/page.tsx
index 4f1cfd44..1296356c 100644
--- a/app/(customer)/dashboard/(organization)/projects/page.tsx
+++ b/app/(customer)/dashboard/(organization)/projects/page.tsx
@@ -66,8 +66,9 @@ export default async function RoutePage(props: PageParams<{}>) {
                         organizationSlug={organization.slug}
                         data={projects}
                         cardItem={ProjectCard}
-                        cardsPerPage={9}
+                        cardsPerPage={12}
                         numberOfColumns={3}
+                        pageSizeOptions={[12, 24, 48]}
                     />
                 ) : isMember ? (
                     <EmptyStatePlaceholder text="No project available"/>
diff --git a/src/components/wrappers/common/cards-with-pagination.tsx b/src/components/wrappers/common/cards-with-pagination.tsx
index e186ce61..2d4c8a12 100644
--- a/src/components/wrappers/common/cards-with-pagination.tsx
+++ b/src/components/wrappers/common/cards-with-pagination.tsx
@@ -4,6 +4,7 @@ import React, { ComponentType, useState } from "react";
 import { cn } from "@/lib/utils";
 
 import { PaginationNavigation } from "@/components/wrappers/common/pagination/pagination-navigation";
+import { PaginationSize } from "@/components/wrappers/common/pagination/pagination-size";
 
 interface CardsWithPaginationProps<T> {
     className?: string;
@@ -13,19 +14,21 @@ interface CardsWithPaginationProps<T> {
     cardsPerPage?: number;
     numberOfColumns?: number;
     maxVisiblePages?: number;
+    pageSizeOptions?: number[];
     [key: string]: any;
 }
 
 export function CardsWithPagination<T>(props: CardsWithPaginationProps<T>) {
-    const { className, organizationSlug, data, cardItem, cardsPerPage = 5, numberOfColumns = 1, maxVisiblePages = 3, ...rest } = props;
+    const { className, organizationSlug, data, cardItem, cardsPerPage = 5, numberOfColumns = 1, maxVisiblePages = 3, pageSizeOptions, ...rest } = props;
 
     const CardItem = cardItem;
 
+    const [pageSize, setPageSize] = useState(cardsPerPage);
     const [currentPage, setCurrentPage] = useState(1);
-    const totalPages = Math.ceil(data.length / cardsPerPage);
+    const totalPages = Math.ceil(data.length / pageSize);
 
-    const indexOfLastCard = currentPage * cardsPerPage;
-    const indexOfFirstCard = indexOfLastCard - cardsPerPage;
+    const indexOfLastCard = currentPage * pageSize;
+    const indexOfFirstCard = indexOfLastCard - pageSize;
     const currentCards = data.slice(indexOfFirstCard, indexOfLastCard);
 
     const goToPage = (pageNumber: number) => {
@@ -40,6 +43,14 @@ export function CardsWithPagination<T>(props: CardsWithPaginationProps<T>) {
         goToPage(Math.min(totalPages, currentPage + 1));
     };
 
+    const handlePageSizeChange = (newSize: number) => {
+        if (!Number.isFinite(newSize) || newSize < 1) return;
+        setPageSize(newSize);
+        setCurrentPage(1);
+    };
+
+    const showSizeSelector = pageSizeOptions && pageSizeOptions.length > 0;
+
     return (
         <div className={cn("flex flex-col h-full justify-between", className)}>
             <div className={cn(`grid h-max auto-rows-min gap-4 md:grid-cols-${numberOfColumns}`)}>
@@ -47,15 +58,24 @@ export function CardsWithPagination<T>(props: CardsWithPaginationProps<T>) {
                     <CardItem key={key} data={card} organizationSlug={organizationSlug}  {...rest} />
                 ))}
             </div>
-            <PaginationNavigation
-                className="justify-end mt-4"
-                totalPages={totalPages}
-                currentPage={currentPage}
-                goToPage={goToPage}
-                goToPrevPage={goToPrevPage}
-                goToNextPage={goToNextPage}
-                maxVisiblePages={maxVisiblePages}
-            />
+            <div className="flex items-center justify-end mt-4 gap-4">
+                {showSizeSelector && (
+                    <PaginationSize
+                        pageSize={pageSize}
+                        onPageSizeChange={handlePageSizeChange}
+                        pageSizeOptions={pageSizeOptions}
+                    />
+                )}
+                <PaginationNavigation
+                    className="justify-end"
+                    totalPages={totalPages}
+                    currentPage={currentPage}
+                    goToPage={goToPage}
+                    goToPrevPage={goToPrevPage}
+                    goToNextPage={goToNextPage}
+                    maxVisiblePages={maxVisiblePages}
+                />
+            </div>
         </div>
     );
 }
diff --git a/src/components/wrappers/common/pagination/pagination-size.tsx b/src/components/wrappers/common/pagination/pagination-size.tsx
new file mode 100644
index 00000000..67f631f9
--- /dev/null
+++ b/src/components/wrappers/common/pagination/pagination-size.tsx
@@ -0,0 +1,35 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+export type PaginationSizeProps = {
+    className?: string;
+    pageSize: number;
+    onPageSizeChange: (size: number) => void;
+    pageSizeOptions?: number[];
+};
+
+export const PaginationSize = (props: PaginationSizeProps) => {
+    const { className, onPageSizeChange, pageSizeOptions = [10, 20, 30, 40, 50] } = props;
+    const effectivePageSize = pageSizeOptions.includes(props.pageSize) ? props.pageSize : pageSizeOptions[0];
+
+    return (
+        <div className={cn("flex items-center justify-end sm:justify-center space-x-2", className)}>
+            <p className="whitespace-nowrap text-sm font-medium hidden md:block">Cards per page</p>
+            <Select
+                value={`${effectivePageSize}`}
+                onValueChange={(value) => onPageSizeChange(Number(value))}
+            >
+                <SelectTrigger className="h-8 w-[4.5rem]" aria-label="Cards per page">
+                    <SelectValue placeholder={effectivePageSize} />
+                </SelectTrigger>
+                <SelectContent side="top">
+                    {pageSizeOptions.map((size) => (
+                        <SelectItem key={size} value={`${size}`}>
+                            {size}
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+};