diff --git a/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx
index e6fa31ac..a8edbdff 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx
@@ -58,7 +58,7 @@ import {
 import { ListResourceRulesResponse } from "@server/routers/resource/listResourceRules";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { ArrowUpDown, Check, InfoIcon, X } from "lucide-react";
+import { ArrowUpDown, Check, InfoIcon, X, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 import {
     InfoSection,
     InfoSections,
@@ -99,6 +99,10 @@ export default function ResourceRules(props: {
     const [loading, setLoading] = useState(false);
     const [pageLoading, setPageLoading] = useState(true);
     const [rulesEnabled, setRulesEnabled] = useState(resource.applyRules);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 25
+    });
     const router = useRouter();
     const t = useTranslations();
 
@@ -558,11 +562,10 @@ export default function ResourceRules(props: {
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         state: {
-            pagination: {
-                pageIndex: 0,
-                pageSize: 1000
-            }
-        }
+            pagination
+        },
+        onPaginationChange: setPagination,
+        manualPagination: false
     });
 
     if (pageLoading) {
@@ -784,6 +787,84 @@ export default function ResourceRules(props: {
                             {/*     {t('rulesOrder')} */}
                             {/* </TableCaption> */}
                         </Table>
+
+                        {/* Pagination Controls */}
+                        {rules.length > 0 && (
+                            <div className="flex items-center justify-between space-x-2 py-4">
+                                <div className="flex-1 text-sm text-muted-foreground">
+                                    Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{" "}
+                                    {Math.min(
+                                        (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
+                                        table.getFilteredRowModel().rows.length
+                                    )}{" "}
+                                    of {table.getFilteredRowModel().rows.length} rules
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                    <div className="flex items-center space-x-2">
+                                        <p className="text-sm font-medium">Rows per page</p>
+                                        <Select
+                                            value={`${table.getState().pagination.pageSize}`}
+                                            onValueChange={(value) => {
+                                                table.setPageSize(Number(value));
+                                            }}
+                                        >
+                                            <SelectTrigger className="h-8 w-[70px]">
+                                                <SelectValue placeholder={table.getState().pagination.pageSize} />
+                                            </SelectTrigger>
+                                            <SelectContent side="top">
+                                                {[10, 25, 50, 100].map((pageSize) => (
+                                                    <SelectItem key={pageSize} value={`${pageSize}`}>
+                                                        {pageSize}
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                    <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+                                        Page {table.getState().pagination.pageIndex + 1} of{" "}
+                                        {table.getPageCount()}
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Button
+                                            variant="outline"
+                                            className="hidden h-8 w-8 p-0 lg:flex"
+                                            onClick={() => table.setPageIndex(0)}
+                                            disabled={!table.getCanPreviousPage()}
+                                        >
+                                            <span className="sr-only">Go to first page</span>
+                                            <ChevronsLeft className="h-4 w-4" />
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            className="h-8 w-8 p-0"
+                                            onClick={() => table.previousPage()}
+                                            disabled={!table.getCanPreviousPage()}
+                                        >
+                                            <span className="sr-only">Go to previous page</span>
+                                            <ChevronLeft className="h-4 w-4" />
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            className="h-8 w-8 p-0"
+                                            onClick={() => table.nextPage()}
+                                            disabled={!table.getCanNextPage()}
+                                        >
+                                            <span className="sr-only">Go to next page</span>
+                                            <ChevronRight className="h-4 w-4" />
+                                        </Button>
+                                        <Button
+                                            variant="outline"
+                                            className="hidden h-8 w-8 p-0 lg:flex"
+                                            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                                            disabled={!table.getCanNextPage()}
+                                        >
+                                            <span className="sr-only">Go to last page</span>
+                                            <ChevronsRight className="h-4 w-4" />
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
                     </div>
                 </SettingsSectionBody>
             </SettingsSection>
diff --git a/src/components/ruleTemplate/TemplateRulesManager.tsx b/src/components/ruleTemplate/TemplateRulesManager.tsx
index 1a9b4b7e..578b5d78 100644
--- a/src/components/ruleTemplate/TemplateRulesManager.tsx
+++ b/src/components/ruleTemplate/TemplateRulesManager.tsx
@@ -45,7 +45,7 @@ import {
     TableRow
 } from "@app/components/ui/table";
 import { isValidCIDR, isValidIP, isValidUrlGlobPattern } from "@server/lib/validators";
-import { ArrowUpDown, Trash2 } from "lucide-react";
+import { ArrowUpDown, Trash2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 
 const addRuleSchema = z.object({
     action: z.enum(["ACCEPT", "DROP"]),
@@ -75,6 +75,10 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
     const [rules, setRules] = useState<TemplateRule[]>([]);
     const [loading, setLoading] = useState(true);
     const [addingRule, setAddingRule] = useState(false);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: 25
+    });
 
     const RuleAction = {
         ACCEPT: t('alwaysAllow'),
@@ -324,11 +328,10 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         state: {
-            pagination: {
-                pageIndex: 0,
-                pageSize: 1000
-            }
-        }
+            pagination
+        },
+        onPaginationChange: setPagination,
+        manualPagination: false
     });
 
     if (loading) {
@@ -475,6 +478,84 @@ export function TemplateRulesManager({ templateId, orgId }: TemplateRulesManager
                     </TableBody>
                 </Table>
             </div>
+
+            {/* Pagination Controls */}
+            {rules.length > 0 && (
+                <div className="flex items-center justify-between space-x-2 py-4">
+                    <div className="flex-1 text-sm text-muted-foreground">
+                        Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{" "}
+                        {Math.min(
+                            (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
+                            table.getFilteredRowModel().rows.length
+                        )}{" "}
+                        of {table.getFilteredRowModel().rows.length} rules
+                    </div>
+                    <div className="flex items-center space-x-2">
+                        <div className="flex items-center space-x-2">
+                            <p className="text-sm font-medium">Rows per page</p>
+                            <Select
+                                value={`${table.getState().pagination.pageSize}`}
+                                onValueChange={(value) => {
+                                    table.setPageSize(Number(value));
+                                }}
+                            >
+                                <SelectTrigger className="h-8 w-[70px]">
+                                    <SelectValue placeholder={table.getState().pagination.pageSize} />
+                                </SelectTrigger>
+                                <SelectContent side="top">
+                                    {[10, 25, 50, 100].map((pageSize) => (
+                                        <SelectItem key={pageSize} value={`${pageSize}`}>
+                                            {pageSize}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+                            Page {table.getState().pagination.pageIndex + 1} of{" "}
+                            {table.getPageCount()}
+                        </div>
+                        <div className="flex items-center space-x-2">
+                            <Button
+                                variant="outline"
+                                className="hidden h-8 w-8 p-0 lg:flex"
+                                onClick={() => table.setPageIndex(0)}
+                                disabled={!table.getCanPreviousPage()}
+                            >
+                                <span className="sr-only">Go to first page</span>
+                                <ChevronsLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                className="h-8 w-8 p-0"
+                                onClick={() => table.previousPage()}
+                                disabled={!table.getCanPreviousPage()}
+                            >
+                                <span className="sr-only">Go to previous page</span>
+                                <ChevronLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                className="h-8 w-8 p-0"
+                                onClick={() => table.nextPage()}
+                                disabled={!table.getCanNextPage()}
+                            >
+                                <span className="sr-only">Go to next page</span>
+                                <ChevronRight className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                className="hidden h-8 w-8 p-0 lg:flex"
+                                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                                disabled={!table.getCanNextPage()}
+                            >
+                                <span className="sr-only">Go to last page</span>
+                                <ChevronsRight className="h-4 w-4" />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }