diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 9a6e12d13..ef2aa9d6f 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 
 interface PaginationProps {
@@ -6,7 +7,8 @@ interface PaginationProps {
   itemsPerPage: number;
   onPageChange: (page: number) => void;
   onItemsPerPageChange: (itemsPerPage: number) => void;
-  itemLabel?: string; // e.g., "programs", "classes", "residents"
+  itemLabel?: string;
+  instanceId?: string;
 }
 
 export function Pagination({
@@ -15,8 +17,11 @@ export function Pagination({
   itemsPerPage,
   onPageChange,
   onItemsPerPageChange,
-  itemLabel = 'items'
+  itemLabel = 'items',
+  instanceId
 }: PaginationProps) {
+  const generatedId = useId();
+  const itemsPerPageId = `${instanceId ?? `pagination-${generatedId}`}-items-per-page`;
   const totalPages = Math.ceil(totalItems / itemsPerPage);
   const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
   const endItem = Math.min(currentPage * itemsPerPage, totalItems);
@@ -71,15 +76,14 @@ export function Pagination({
           </p>
 
           <div className="flex items-center gap-2">
-            <label htmlFor="items-per-page" className="text-sm text-gray-600 dark:text-gray-400">
+            <label htmlFor={itemsPerPageId} className="text-sm text-gray-600 dark:text-gray-400">
               Items per page:
             </label>
             <select
-              id="items-per-page"
+              id={itemsPerPageId}
               value={itemsPerPage}
               onChange={(e) => {
                 onItemsPerPageChange(Number(e.target.value));
-                onPageChange(1); // Reset to first page when changing items per page
               }}
               className="bg-white dark:bg-[#262626] text-gray-900 dark:text-white px-3 py-1.5 rounded border border-gray-200 dark:border-[#404040] text-sm focus:outline-none focus:ring-2 focus:ring-[#556830] dark:focus:ring-[#8fb55e]"
             >
diff --git a/frontend/src/components/shared/Pagination.tsx b/frontend/src/components/shared/Pagination.tsx
deleted file mode 100644
index 23b951876..000000000
--- a/frontend/src/components/shared/Pagination.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface PaginationProps {
-    currentPage: number;
-    totalItems: number;
-    itemsPerPage: number;
-    onPageChange: (page: number) => void;
-    onItemsPerPageChange: (itemsPerPage: number) => void;
-    itemLabel?: string;
-}
-
-function getPageNumbers(currentPage: number, totalPages: number) {
-    const pages: (number | string)[] = [];
-
-    if (totalPages <= 7) {
-        for (let i = 1; i <= totalPages; i++) pages.push(i);
-        return pages;
-    }
-
-    pages.push(1);
-    if (currentPage > 3) pages.push('...');
-
-    const start = Math.max(2, currentPage - 1);
-    const end = Math.min(totalPages - 1, currentPage + 1);
-    for (let i = start; i <= end; i++) pages.push(i);
-
-    if (currentPage < totalPages - 2) pages.push('...');
-    pages.push(totalPages);
-
-    return pages;
-}
-
-export function Pagination({
-    currentPage,
-    totalItems,
-    itemsPerPage,
-    onPageChange,
-    onItemsPerPageChange,
-    itemLabel = 'items'
-}: PaginationProps) {
-    const totalPages = Math.ceil(totalItems / itemsPerPage);
-    const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
-    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-
-    return (
-        <div className="bg-white dark:bg-[#171717] border-t border-gray-200 dark:border-[#262626] px-6 py-4 rounded-b-lg">
-            <div className="flex items-center justify-between">
-                <div className="flex items-center gap-6">
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Showing{' '}
-                        <span className="font-medium text-gray-900 dark:text-white">
-                            {startItem}-{endItem}
-                        </span>{' '}
-                        of{' '}
-                        <span className="font-medium text-gray-900 dark:text-white">
-                            {totalItems}
-                        </span>{' '}
-                        {itemLabel}
-                    </p>
-                    <div className="flex items-center gap-2">
-                        <label
-                            htmlFor="items-per-page"
-                            className="text-sm text-gray-600 dark:text-gray-400"
-                        >
-                            Items per page:
-                        </label>
-                        <select
-                            id="items-per-page"
-                            value={itemsPerPage}
-                            onChange={(e) => {
-                                onItemsPerPageChange(Number(e.target.value));
-                                onPageChange(1);
-                            }}
-                            className="bg-white dark:bg-[#262626] text-gray-900 dark:text-white px-3 py-1.5 rounded border border-gray-200 dark:border-[#404040] text-sm focus:outline-none focus:ring-2 focus:ring-[#556830] dark:focus:ring-[#8fb55e]"
-                        >
-                            <option value={20}>20</option>
-                            <option value={40}>40</option>
-                            <option value={80}>80</option>
-                        </select>
-                    </div>
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <button
-                        onClick={() => onPageChange(currentPage - 1)}
-                        disabled={currentPage <= 1}
-                        className="p-2 rounded-lg border border-gray-200 dark:border-[#404040] text-gray-600 dark:text-gray-400 hover:bg-[#E2E7EA] dark:hover:bg-[#262626] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                        aria-label="Previous page"
-                    >
-                        <ChevronLeft className="size-5" />
-                    </button>
-
-                    <div className="flex items-center gap-1">
-                        {getPageNumbers(currentPage, totalPages).map(
-                            (page, index) => {
-                                if (page === '...') {
-                                    return (
-                                        <span
-                                            key={`ellipsis-${index}`}
-                                            className="px-3 py-2 text-gray-600 dark:text-gray-400"
-                                        >
-                                            ...
-                                        </span>
-                                    );
-                                }
-                                const num = page as number;
-                                return (
-                                    <button
-                                        key={num}
-                                        onClick={() => onPageChange(num)}
-                                        className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                                            num === currentPage
-                                                ? 'bg-[#556830] text-white'
-                                                : 'text-gray-600 dark:text-gray-400 hover:bg-[#E2E7EA] dark:hover:bg-[#262626]'
-                                        }`}
-                                    >
-                                        {num}
-                                    </button>
-                                );
-                            }
-                        )}
-                    </div>
-
-                    <button
-                        onClick={() => onPageChange(currentPage + 1)}
-                        disabled={currentPage >= totalPages}
-                        className="p-2 rounded-lg border border-gray-200 dark:border-[#404040] text-gray-600 dark:text-gray-400 hover:bg-[#E2E7EA] dark:hover:bg-[#262626] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                        aria-label="Next page"
-                    >
-                        <ChevronRight className="size-5" />
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/components/shared/index.ts b/frontend/src/components/shared/index.ts
index d1abb2c24..28c4161f4 100644
--- a/frontend/src/components/shared/index.ts
+++ b/frontend/src/components/shared/index.ts
@@ -6,4 +6,3 @@ export { ConfirmDialog } from './ConfirmDialog';
 export { FormModal } from './FormModal';
 export { DataTable } from './DataTable';
 export type { Column } from './DataTable';
-export { Pagination } from './Pagination';
diff --git a/frontend/src/components/student/ActivityHistoryCard.tsx b/frontend/src/components/student/ActivityHistoryCard.tsx
index 04908c85b..63a64b5fd 100644
--- a/frontend/src/components/student/ActivityHistoryCard.tsx
+++ b/frontend/src/components/student/ActivityHistoryCard.tsx
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import useSWR from 'swr';
 import { Calendar } from 'lucide-react';
 import {
@@ -53,8 +54,7 @@ export default function ActivityHistoryCard({
     programId,
     residentId
 }: ActivityHistoryCardProps) {
-    const [page, setPage] = useState(1);
-    const [perPage, setPerPage] = useState(20);
+    const { page, perPage, setPage, setPerPage } = useUrlPagination(1, 20, 'activity');
     const [filterQuery, setFilterQuery] = useState('');
 
     const endpoint = residentId
@@ -67,9 +67,14 @@ export default function ActivityHistoryCard({
         ServerResponseMany<ActivityHistoryResponse>
     >(endpoint);
 
+    const isFirstRender = useRef(true);
     useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
         setPage(1);
-    }, [filterQuery]);
+    }, [filterQuery, setPage]);
 
     const heading = programId ? 'Program History' : 'Account Overview';
     const entries = data?.data ?? [];
@@ -146,16 +151,13 @@ export default function ActivityHistoryCard({
                     })}
                 </div>
             )}
-            {total >= perPage && (
+            {total > 0 && (
                 <Pagination
                     currentPage={page}
                     totalItems={total}
                     itemsPerPage={perPage}
                     onPageChange={setPage}
-                    onItemsPerPageChange={(val) => {
-                        setPerPage(val);
-                        setPage(1);
-                    }}
+                    onItemsPerPageChange={setPerPage}
                     itemLabel="entries"
                 />
             )}
diff --git a/frontend/src/hooks/useUrlPagination.ts b/frontend/src/hooks/useUrlPagination.ts
index 984db6c61..ef2dad34a 100644
--- a/frontend/src/hooks/useUrlPagination.ts
+++ b/frontend/src/hooks/useUrlPagination.ts
@@ -1,29 +1,36 @@
+import { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-export function useUrlPagination(defaultPage = 1, defaultPerPage = 20) {
+export function useUrlPagination(defaultPage = 1, defaultPerPage = 20, prefix = '') {
     const [searchParams, setSearchParams] = useSearchParams();
 
-    const page = parseInt(
-        searchParams.get('page') ?? defaultPage.toString(),
-        10
-    );
-    const perPage = parseInt(
-        searchParams.get('per_page') ?? defaultPerPage.toString(),
-        10
-    );
+    const pageKey = prefix ? `${prefix}_page` : 'page';
+    const perPageKey = prefix ? `${prefix}_per_page` : 'per_page';
+
+    const parsedPage = parseInt(searchParams.get(pageKey) ?? '', 10);
+    const page = Number.isFinite(parsedPage) && parsedPage >= 1 ? parsedPage : defaultPage;
 
-    const setPage = (newPage: number, options?: { replace?: boolean }) => {
-        const params = new URLSearchParams(searchParams);
-        params.set('page', newPage.toString());
-        setSearchParams(params, { replace: options?.replace ?? false });
-    };
+    const parsedPerPage = parseInt(searchParams.get(perPageKey) ?? '', 10);
+    const perPage = Number.isFinite(parsedPerPage) && parsedPerPage >= 1 ? parsedPerPage : defaultPerPage;
 
-    const setPerPage = (newPerPage: number) => {
-        const params = new URLSearchParams(searchParams);
-        params.set('per_page', newPerPage.toString());
-        params.set('page', '1');
-        setSearchParams(params, { replace: false });
-    };
+    const setPage = useCallback(
+        (newPage: number, options?: { replace?: boolean }) => {
+            const params = new URLSearchParams(searchParams);
+            params.set(pageKey, newPage.toString());
+            setSearchParams(params, { replace: options?.replace ?? false });
+        },
+        [searchParams, setSearchParams, pageKey]
+    );
+
+    const setPerPage = useCallback(
+        (newPerPage: number) => {
+            const params = new URLSearchParams(searchParams);
+            params.set(perPageKey, newPerPage.toString());
+            params.set(pageKey, '1');
+            setSearchParams(params, { replace: false });
+        },
+        [searchParams, setSearchParams, pageKey, perPageKey]
+    );
 
     return { page, perPage, setPage, setPerPage };
 }
diff --git a/frontend/src/pages/ClassesPage.tsx b/frontend/src/pages/ClassesPage.tsx
index 59b252b0e..c868aec67 100644
--- a/frontend/src/pages/ClassesPage.tsx
+++ b/frontend/src/pages/ClassesPage.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import { useNavigate, Link } from 'react-router-dom';
 import useSWR from 'swr';
 import { useAuth, canSwitchFacility } from '@/auth/useAuth';
@@ -46,7 +47,7 @@ import {
     MapPin,
     Users
 } from 'lucide-react';
-import { Pagination } from '@/components/shared';
+import { Pagination } from '@/components/Pagination';
 import { TakeAttendanceModal } from './class-detail/TakeAttendanceModal';
 import { BulkCancelClassesModal } from '@/components/BulkCancelClassesModal';
 
@@ -93,8 +94,7 @@ export default function ClassesPage() {
     const [programSearch, setProgramSearch] = useState('');
     const [attendanceClass, setAttendanceClass] = useState<Class | null>(null);
     const [showBulkCancel, setShowBulkCancel] = useState(false);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(20);
+    const { page: currentPage, perPage: itemsPerPage, setPage: setCurrentPage, setPerPage: setItemsPerPage } = useUrlPagination();
 
     const crossFacility = user ? canSwitchFacility(user) : false;
 
@@ -216,7 +216,7 @@ export default function ClassesPage() {
 
     useEffect(() => {
         setCurrentPage(1);
-    }, [searchQuery, todayOnly, attendanceConcerns, facilityFilter, programFilter, statusFilter]);
+    }, [searchQuery, todayOnly, attendanceConcerns, facilityFilter, programFilter, statusFilter, setCurrentPage]);
 
     const paginatedClasses = useMemo(() => {
         const start = (currentPage - 1) * itemsPerPage;
diff --git a/frontend/src/pages/ProgramsPage.tsx b/frontend/src/pages/ProgramsPage.tsx
index 451981738..5b75ef8b7 100644
--- a/frontend/src/pages/ProgramsPage.tsx
+++ b/frontend/src/pages/ProgramsPage.tsx
@@ -1,4 +1,5 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import { useNavigate } from 'react-router-dom';
 import useSWR from 'swr';
 import { useAuth, canSwitchFacility } from '@/auth/useAuth';
@@ -175,8 +176,16 @@ export default function ProgramsPage() {
         }
     };
 
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(10);
+    const { page, perPage, setPage, setPerPage } = useUrlPagination(1, 10);
+
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        setPage(1);
+    }, [search, sort, selectedTypes, selectedStatuses, setPage]);
 
     const toggleTypeFilter = (type: ProgramType) => {
         setSelectedTypes((prev) =>
@@ -286,8 +295,8 @@ export default function ProgramsPage() {
     }, [resp?.data, search, sort, selectedTypes, selectedStatuses]);
 
     const paginatedPrograms = filtered.slice(
-        (currentPage - 1) * itemsPerPage,
-        currentPage * itemsPerPage
+        (page - 1) * perPage,
+        page * perPage
     );
 
     const stats = useMemo(() => {
@@ -989,17 +998,14 @@ export default function ProgramsPage() {
                         )}
 
                         {/* Pagination */}
-                        {filtered.length > itemsPerPage && (
+                        {filtered.length > 0 && (
                             <div className="mt-6">
                                 <Pagination
-                                    currentPage={currentPage}
+                                    currentPage={page}
                                     totalItems={filtered.length}
-                                    itemsPerPage={itemsPerPage}
-                                    onPageChange={setCurrentPage}
-                                    onItemsPerPageChange={(val) => {
-                                        setItemsPerPage(val);
-                                        setCurrentPage(1);
-                                    }}
+                                    itemsPerPage={perPage}
+                                    onPageChange={setPage}
+                                    onItemsPerPageChange={setPerPage}
                                     itemLabel="items"
                                 />
                             </div>
diff --git a/frontend/src/pages/admin/AdminManagement.tsx b/frontend/src/pages/admin/AdminManagement.tsx
index 56dfd7380..289f4c3a4 100644
--- a/frontend/src/pages/admin/AdminManagement.tsx
+++ b/frontend/src/pages/admin/AdminManagement.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import useSWR from 'swr';
 import {
     Search,
@@ -162,8 +163,7 @@ export default function AdminManagement() {
     const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
     const [facilityFilter, setFacilityFilter] = useState<string>('all');
 
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(20);
+    const { page, perPage, setPage, setPerPage } = useUrlPagination();
 
     const [selectedAdmins, setSelectedAdmins] = useState<Map<number, User>>(new Map());
 
@@ -190,8 +190,8 @@ export default function AdminManagement() {
         if (!user) return null;
         const params = new URLSearchParams({
             search: searchQuery,
-            page: String(currentPage),
-            per_page: String(itemsPerPage),
+            page: String(page),
+            per_page: String(perPage),
             order_by: `${SORT_FIELD[sortColumn]} ${sortDirection}`,
             role: user.role
         });
@@ -199,7 +199,7 @@ export default function AdminManagement() {
             params.set('facility_id', facilityFilter);
         }
         return `/api/users?${params.toString()}`;
-    }, [user, searchQuery, currentPage, itemsPerPage, sortColumn, sortDirection, canSwitchFac, facilityFilter]);
+    }, [user, searchQuery, page, perPage, sortColumn, sortDirection, canSwitchFac, facilityFilter]);
 
     const { data, mutate, error, isLoading } = useSWR<ServerResponseMany<User>, Error>(usersUrl);
     const admins = data?.data ?? [];
@@ -251,7 +251,7 @@ export default function AdminManagement() {
             setSortColumn(column);
             setSortDirection('asc');
         }
-        setCurrentPage(1);
+        setPage(1);
     };
 
     const allOnPageSelected =
@@ -459,7 +459,7 @@ export default function AdminManagement() {
                         value={searchQuery}
                         onChange={(e) => {
                             setSearchQuery(e.target.value);
-                            setCurrentPage(1);
+                            setPage(1);
                         }}
                         className="pl-10"
                     />
@@ -469,7 +469,7 @@ export default function AdminManagement() {
                         value={facilityFilter}
                         onValueChange={(v) => {
                             setFacilityFilter(v);
-                            setCurrentPage(1);
+                            setPage(1);
                         }}
                     >
                         <SelectTrigger className="w-64">
@@ -706,13 +706,10 @@ export default function AdminManagement() {
 
                 <Pagination
                     totalItems={totalItems}
-                    itemsPerPage={itemsPerPage}
-                    currentPage={currentPage}
-                    onPageChange={setCurrentPage}
-                    onItemsPerPageChange={(value) => {
-                        setItemsPerPage(value);
-                        setCurrentPage(1);
-                    }}
+                    itemsPerPage={perPage}
+                    currentPage={page}
+                    onPageChange={setPage}
+                    onItemsPerPageChange={setPerPage}
                     itemLabel="admins"
                 />
             </div>
diff --git a/frontend/src/pages/admin/FacilityManagement.tsx b/frontend/src/pages/admin/FacilityManagement.tsx
index 9e8831553..118516bf5 100644
--- a/frontend/src/pages/admin/FacilityManagement.tsx
+++ b/frontend/src/pages/admin/FacilityManagement.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import useSWR from 'swr';
 import { toast } from 'sonner';
 import { Search, Plus, Edit, ArrowUpDown, Building2 } from 'lucide-react';
@@ -68,8 +69,7 @@ export default function FacilityManagement() {
     const [searchQuery, setSearchQuery] = useState('');
     const [sortColumn, setSortColumn] = useState<SortColumn>('name');
     const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(20);
+    const { page, perPage, setPage, setPerPage } = useUrlPagination();
 
     const [showAddFacility, setShowAddFacility] = useState(false);
     const [showEditFacility, setShowEditFacility] = useState(false);
@@ -120,8 +120,8 @@ export default function FacilityManagement() {
     });
 
     const paginated = sorted.slice(
-        (currentPage - 1) * itemsPerPage,
-        currentPage * itemsPerPage
+        (page - 1) * perPage,
+        page * perPage
     );
 
     function toggleSort(column: SortColumn) {
@@ -212,7 +212,7 @@ export default function FacilityManagement() {
                             value={searchQuery}
                             onChange={(e) => {
                                 setSearchQuery(e.target.value);
-                                setCurrentPage(1);
+                                setPage(1);
                             }}
                             className="pl-10"
                         />
@@ -346,13 +346,10 @@ export default function FacilityManagement() {
 
                     <Pagination
                         totalItems={sorted.length}
-                        itemsPerPage={itemsPerPage}
-                        currentPage={currentPage}
-                        onPageChange={setCurrentPage}
-                        onItemsPerPageChange={(value) => {
-                            setItemsPerPage(value);
-                            setCurrentPage(1);
-                        }}
+                        itemsPerPage={perPage}
+                        currentPage={page}
+                        onPageChange={setPage}
+                        onItemsPerPageChange={setPerPage}
                         itemLabel="facilities"
                     />
                 </div>
diff --git a/frontend/src/pages/class-detail/AuditTab.tsx b/frontend/src/pages/class-detail/AuditTab.tsx
index 725fe06d9..ae439d607 100644
--- a/frontend/src/pages/class-detail/AuditTab.tsx
+++ b/frontend/src/pages/class-detail/AuditTab.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import useSWR from 'swr';
 import { Calendar } from 'lucide-react';
 import { Pagination } from '@/components/Pagination';
@@ -96,8 +96,7 @@ function formatEntry(entry: HistoryEntry): React.ReactNode {
 }
 
 export function AuditTab({ classId }: AuditTabProps) {
-    const [page, setPage] = useState(1);
-    const [perPage, setPerPage] = useState(20);
+    const { page, perPage, setPage, setPerPage } = useUrlPagination(1, 20, 'audit');
 
     const { data: auditResp } = useSWR<ServerResponseMany<HistoryEntry>>(
         `/api/program-classes/${classId}/history?page=${page}&per_page=${perPage}`
@@ -141,16 +140,13 @@ export function AuditTab({ classId }: AuditTabProps) {
                     ))}
                 </div>
             )}
-            {total >= perPage && (
+            {total > 0 && (
                 <Pagination
                     currentPage={page}
                     totalItems={total}
                     itemsPerPage={perPage}
                     onPageChange={setPage}
-                    onItemsPerPageChange={(val) => {
-                        setPerPage(val);
-                        setPage(1);
-                    }}
+                    onItemsPerPageChange={setPerPage}
                     itemLabel="entries"
                 />
             )}
diff --git a/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx b/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx
index 44ade8c2d..8e471a52a 100644
--- a/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx
+++ b/frontend/src/pages/knowledge-center/KnowledgeCenterManagement.tsx
@@ -30,7 +30,8 @@ import {
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
-import { Pagination } from '@/components/shared/Pagination';
+import { Pagination } from '@/components/Pagination';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import { useDebounceValue } from 'usehooks-ts';
 import { useToast } from '@/contexts/ToastContext';
 import {
@@ -318,8 +319,7 @@ export default function KnowledgeCenterManagement() {
     const [visibilityFilter, setVisibilityFilter] = useState<string>('all');
     const [categoryFilter, setCategoryFilter] = useState<string>('all');
     const [currentTab, setCurrentTab] = useState('libraries');
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(20);
+    const { page: currentPage, perPage: itemsPerPage, setPage: setCurrentPage, setPerPage } = useUrlPagination();
 
     const [showAddVideo, setShowAddVideo] = useState(false);
     const [showAddLink, setShowAddLink] = useState(false);
@@ -341,7 +341,7 @@ export default function KnowledgeCenterManagement() {
             setCategoryFilter('all');
         }
         setCurrentPage(1);
-    }, [currentTab]);
+    }, [currentTab, setCurrentPage]);
 
     const visibilityParam = useMemo(() => {
         if (
@@ -465,10 +465,7 @@ export default function KnowledgeCenterManagement() {
         currentPage * itemsPerPage
     );
 
-    const handleItemsPerPageChange = (v: number) => {
-        setItemsPerPage(v);
-        setCurrentPage(1);
-    };
+    const handleItemsPerPageChange = setPerPage;
 
     const pollVideos = (delay: number) => {
         if (!pollingRef.current) return;
diff --git a/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx b/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx
index 816d18c04..bf0689958 100644
--- a/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx
+++ b/frontend/src/pages/knowledge-center/ResidentKnowledgeCenter.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import { useNavigate } from 'react-router-dom';
 import { useTourContext } from '@/contexts/TourContext';
 import { targetToStepIndexMap } from '@/components/UnlockEdTour';
@@ -25,7 +26,7 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from '@/components/ui/tooltip';
-import { Pagination } from '@/components/shared/Pagination';
+import { Pagination } from '@/components/Pagination';
 import { useDebounceValue } from 'usehooks-ts';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
@@ -75,8 +76,7 @@ export default function ResidentKnowledgeCenter() {
     const [searchQuery] = useDebounceValue(searchTerm, 500);
     const [contentTypeFilter, setContentTypeFilter] = useState<string>('all');
     const [categoryFilter, setCategoryFilter] = useState<string>('all');
-    const [currentPage, setCurrentPage] = useState(1);
-    const [itemsPerPage, setItemsPerPage] = useState(ITEMS_PER_PAGE);
+    const { page: currentPage, perPage: itemsPerPage, setPage: setCurrentPage, setPerPage } = useUrlPagination(1, ITEMS_PER_PAGE);
 
     const { data: tagsData } = useSWR<ServerResponseMany<Option>>(
         '/api/tags'
@@ -476,10 +476,7 @@ export default function ResidentKnowledgeCenter() {
                         totalItems={filteredContent.length}
                         itemsPerPage={itemsPerPage}
                         onPageChange={setCurrentPage}
-                        onItemsPerPageChange={(v) => {
-                            setItemsPerPage(v);
-                            setCurrentPage(1);
-                        }}
+                        onItemsPerPageChange={setPerPage}
                     />
                 </>
             )}
diff --git a/frontend/src/pages/programs/AddClassEnrollments.tsx b/frontend/src/pages/programs/AddClassEnrollments.tsx
index c065d207d..29a031f12 100644
--- a/frontend/src/pages/programs/AddClassEnrollments.tsx
+++ b/frontend/src/pages/programs/AddClassEnrollments.tsx
@@ -1,4 +1,6 @@
 import { useState, useEffect } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
+import { Pagination } from '@/components/Pagination';
 import { useNavigate, useParams, useLoaderData } from 'react-router-dom';
 import useSWR from 'swr';
 import { toast } from 'sonner';
@@ -65,8 +67,7 @@ export default function AddClassEnrollments() {
 
     const [selectedUsers, setSelectedUsers] = useState<number[]>([]);
     const [errorMessage, setErrorMessage] = useState('');
-    const [page, setPage] = useState(1);
-    const perPage = 20;
+    const { page, perPage, setPage, setPerPage } = useUrlPagination();
     const [searchTerm, setSearchTerm] = useState('');
     const [searchQuery] = useDebounceValue(searchTerm, 500);
     const [sortQuery, setSortQuery] = useState(FilterResidentNames['Resident Name (A-Z)']);
@@ -82,8 +83,6 @@ export default function AddClassEnrollments() {
 
     const users = data?.data ?? [];
     const meta = data?.meta;
-    const totalPages = meta ? meta.last_page : 1;
-
     const enrolledCount =
         classInfo?.enrollments?.filter(
             (e) => e.enrollment_status === EnrollmentStatus.Enrolled
@@ -273,16 +272,15 @@ export default function AddClassEnrollments() {
                         </TableBody>
                     </Table>
 
-                    {totalPages > 1 && (
-                        <div className="flex items-center justify-center gap-2 p-4 border-t">
-                            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
-                                Previous
-                            </Button>
-                            <span className="text-sm text-muted-foreground">Page {page} of {totalPages}</span>
-                            <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
-                                Next
-                            </Button>
-                        </div>
+                    {(meta?.total ?? 0) > 0 && (
+                        <Pagination
+                            currentPage={page}
+                            totalItems={meta?.total ?? 0}
+                            itemsPerPage={perPage}
+                            onPageChange={setPage}
+                            onItemsPerPageChange={setPerPage}
+                            itemLabel="residents"
+                        />
                     )}
                 </div>
 
diff --git a/frontend/src/pages/programs/ClassEnrollmentDetails.tsx b/frontend/src/pages/programs/ClassEnrollmentDetails.tsx
index 2730f5e8b..85c2c8c33 100644
--- a/frontend/src/pages/programs/ClassEnrollmentDetails.tsx
+++ b/frontend/src/pages/programs/ClassEnrollmentDetails.tsx
@@ -1,4 +1,6 @@
 import { useState, startTransition } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
+import { Pagination } from '@/components/Pagination';
 import { useNavigate, useParams, useLoaderData } from 'react-router-dom';
 import useSWR from 'swr';
 import { toast } from 'sonner';
@@ -73,8 +75,7 @@ export default function ClassEnrollmentDetails() {
     const [sortQuery, setSortQuery] = useState<string>(FilterResidentNames['Resident Name (A-Z)']);
     const [viewMode, setViewMode] = useState<'enrolled' | 'other'>('enrolled');
     const [filterStatus, setFilterStatus] = useState('all');
-    const [page, setPage] = useState(1);
-    const perPage = 20;
+    const { page, perPage, setPage, setPerPage } = useUrlPagination();
     const [selectedResidents, setSelectedResidents] = useState<number[]>([]);
     const [changeStatusValue, setChangeStatusValue] = useState<StatusChange>();
     const [showConfirmDialog, setShowConfirmDialog] = useState(false);
@@ -101,8 +102,6 @@ export default function ClassEnrollmentDetails() {
     const meta = data?.meta;
     const enrolledCount = viewMode === 'enrolled' ? meta?.total ?? 0 : otherData?.meta?.total ?? 0;
     const otherCount = viewMode === 'enrolled' ? otherData?.meta?.total ?? 0 : meta?.total ?? 0;
-    const totalPages = meta ? meta.last_page : 1;
-
     async function refreshEnrollments() {
         await Promise.all([mutate(), mutateOther()]);
     }
@@ -406,16 +405,15 @@ export default function ClassEnrollmentDetails() {
                     </TableBody>
                 </Table>
 
-                {totalPages > 1 && (
-                    <div className="flex items-center justify-center gap-2 p-4 border-t">
-                        <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
-                            Previous
-                        </Button>
-                        <span className="text-sm text-muted-foreground">Page {page} of {totalPages}</span>
-                        <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
-                            Next
-                        </Button>
-                    </div>
+                {(meta?.total ?? 0) > 0 && (
+                    <Pagination
+                        currentPage={page}
+                        totalItems={meta?.total ?? 0}
+                        itemsPerPage={perPage}
+                        onPageChange={setPage}
+                        onItemsPerPageChange={setPerPage}
+                        itemLabel="enrollments"
+                    />
                 )}
             </div>
 
diff --git a/frontend/src/pages/programs/ProgramOverviewFacilityAdmin.tsx b/frontend/src/pages/programs/ProgramOverviewFacilityAdmin.tsx
index 59ea1cf6e..6bf83c48b 100644
--- a/frontend/src/pages/programs/ProgramOverviewFacilityAdmin.tsx
+++ b/frontend/src/pages/programs/ProgramOverviewFacilityAdmin.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo } from 'react';
+import { useUrlPagination } from '@/hooks/useUrlPagination';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import useSWR from 'swr';
 import { toast } from 'sonner';
@@ -109,8 +110,7 @@ export default function ProgramOverviewFacilityAdmin() {
     const [searchParams] = useSearchParams();
     const { user } = useAuth();
     const [activeTab, setActiveTab] = useState('classes');
-    const [historyPage, setHistoryPage] = useState(1);
-    const [historyPerPage, setHistoryPerPage] = useState(20);
+    const { page: historyPage, perPage: historyPerPage, setPage: setHistoryPage, setPerPage: setHistoryPerPage } = useUrlPagination(1, 20, 'history');
     const [statusModalOpen, setStatusModalOpen] = useState(false);
     const [selectedClass, setSelectedClass] = useState<Class | null>(null);
     const [selectedStatus, setSelectedStatus] = useState('');
@@ -667,10 +667,7 @@ export default function ProgramOverviewFacilityAdmin() {
                                 currentPage={historyPage}
                                 itemsPerPage={historyPerPage}
                                 onPageChange={setHistoryPage}
-                                onItemsPerPageChange={(val) => {
-                                    setHistoryPerPage(val);
-                                    setHistoryPage(1);
-                                }}
+                                onItemsPerPageChange={setHistoryPerPage}
                             />
                         </TabsContent>
                     </Tabs>
@@ -1411,7 +1408,7 @@ function AuditHistoryTab({
                     </div>
                 )}
             </CardContent>
-            {totalItems > itemsPerPage && (
+            {totalItems > 0 && (
                 <Pagination
                     currentPage={currentPage}
                     totalItems={totalItems}