diff --git a/src/pages/Adopter/AdopterList.tsx b/src/pages/Adopter/AdopterList.tsx
index 403d584..f47d925 100644
--- a/src/pages/Adopter/AdopterList.tsx
+++ b/src/pages/Adopter/AdopterList.tsx
@@ -48,6 +48,9 @@ export default function AdopterList() {
     const [errors, setErrors] = useState<Errors>({});
     const navigate = useNavigate();
 
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
+
     useEffect(() => {
         const fetchData = async () => {
             try {
@@ -69,6 +72,18 @@ export default function AdopterList() {
         )
     );
 
+    const totalPages = Math.max(1, Math.ceil(filteredAdopters.length / itemsPerPage));
+    const paginatedAdopters = filteredAdopters.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+
+    useEffect(() => {
+        const tp = Math.max(1, Math.ceil(filteredAdopters.length / itemsPerPage));
+        if (currentPage > tp) setCurrentPage(tp);
+    }, [currentPage, filteredAdopters.length]);
+
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchTerm]);
+
     const inputStyle = (hasError?: boolean) =>
         `w-full px-4 py-3 rounded-xl shadow-sm focus:ring-2 focus:outline-none transition placeholder-gray-400 text-gray-800 bg-gray-100/70 ${hasError ? "ring-red-500 focus:ring-red-500" : "focus:ring-blue-500"}`;
 
@@ -165,10 +180,35 @@ export default function AdopterList() {
                 error: "Erro ao excluir adotante."
             }
         );
-        setAdopters(prev => prev.filter(a => a.id !== deleteAdopter.id));
+
+        setAdopters(prev => {
+            const newList = prev.filter(a => a.id !== deleteAdopter.id);
+            const newFilteredLength = newList.filter(a =>
+                [a.name, a.email, a.phone, a.cpf, a.rg].some(field =>
+                    field?.toLowerCase().includes(searchTerm.toLowerCase())
+                )
+            ).length;
+            const newTotalPages = Math.max(1, Math.ceil(newFilteredLength / itemsPerPage));
+            if (currentPage > newTotalPages) setCurrentPage(newTotalPages);
+            return newList;
+        });
+
         setDeleteAdopter(null);
     };
 
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = Math.min(filteredAdopters.length, currentPage * itemsPerPage);
+
+    const getPageNumbers = () => {
+        return Array.from({ length: totalPages }).map((_, i) => i + 1);
+    };
+
+    const goToPage = (page: number) => {
+        if (page < 1 || page > totalPages) return;
+        setCurrentPage(page);
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+
     return (
         <div className="p-6 flex flex-col gap-6">
             <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
@@ -191,47 +231,86 @@ export default function AdopterList() {
 
             {loading ? (
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    {[...Array(6)].map((_, i) => (
+                    {Array.from({ length: itemsPerPage }).map((_, i) => (
                         <div key={i} className="rounded-2xl shadow-md bg-white overflow-hidden animate-pulse p-4 h-48"></div>
                     ))}
                 </div>
             ) : filteredAdopters.length === 0 ? (
                 <div className="text-center text-gray-500 py-20">Nenhum adotante encontrado.</div>
             ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    {filteredAdopters.map(a => (
-                        <div key={a.id} className="rounded-2xl shadow-md hover:shadow-xl transition bg-white overflow-hidden group">
-                            <div className="h-40 bg-gray-200 flex items-center justify-center relative">
-                                {a.sex === "Feminino" ? (
-                                    <img src={female} alt="Avatar feminino" className="w-24 h-24 object-cover rounded-full" />
-                                ) : a.sex === "Masculino" ? (
-                                    <img src={male} alt="Avatar masculino" className="w-24 h-24 object-cover rounded-full" />
-                                ) : (
-                                    <img src={other} alt="Avatar outros" className="w-24 h-24 object-cover rounded-full" />
-                                )}
+                <>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                        {paginatedAdopters.map(a => (
+                            <div key={a.id} className="rounded-2xl shadow-md hover:shadow-xl transition bg-white overflow-hidden group">
+                                <div className="h-40 bg-gray-200 flex items-center justify-center relative">
+                                    {a.sex === "Feminino" ? (
+                                        <img src={female} alt="Avatar feminino" className="w-24 h-24 object-cover rounded-full" />
+                                    ) : a.sex === "Masculino" ? (
+                                        <img src={male} alt="Avatar masculino" className="w-24 h-24 object-cover rounded-full" />
+                                    ) : (
+                                        <img src={other} alt="Avatar outros" className="w-24 h-24 object-cover rounded-full" />
+                                    )}
 
-                                <button
-                                    onClick={() => setDeleteAdopter(a)}
-                                    className="absolute top-2 right-2 text-red-500 bg-white p-1 rounded-full hover:bg-red-50 transition"
-                                >
-                                    <Trash2 size={16} />
-                                </button>
+                                    <button
+                                        onClick={() => setDeleteAdopter(a)}
+                                        className="absolute top-2 right-2 text-red-500 bg-white p-1 rounded-full hover:bg-red-50 transition"
+                                    >
+                                        <Trash2 size={16} />
+                                    </button>
+                                </div>
+                                <div className="p-4 flex flex-col gap-2">
+                                    <h2 className="font-semibold text-gray-800 text-lg">{a.name}</h2>
+                                    <p className="text-sm text-gray-600">{a.email}</p>
+                                    <p className="text-sm text-gray-600">{a.phone}</p>
+                                    <p className="text-sm text-gray-600">{a.sex || "Não informado"}</p>
+                                    <button
+                                        onClick={() => setSelectedAdopter(a)}
+                                        className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
+                                    >
+                                        Ver detalhes
+                                    </button>
+                                </div>
                             </div>
-                            <div className="p-4 flex flex-col gap-2">
-                                <h2 className="font-semibold text-gray-800 text-lg">{a.name}</h2>
-                                <p className="text-sm text-gray-600">{a.email}</p>
-                                <p className="text-sm text-gray-600">{a.phone}</p>
-                                <p className="text-sm text-gray-600">{a.sex || "Não informado"}</p>
+                        ))}
+                    </div>
+
+                    <div className="flex flex-col gap-5 items-center justify-between mt-6">
+                        <div className="flex items-center gap-2">
+                            <button
+                                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                                disabled={currentPage === 1}
+                                aria-disabled={currentPage === 1}
+                                className={`px-3 py-1 rounded-md border border-gray-300 ${currentPage === 1 ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-gray-100"}`}
+                            >
+                                Anterior
+                            </button>
+
+                            {getPageNumbers().map(n => (
                                 <button
-                                    onClick={() => setSelectedAdopter(a)}
-                                    className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
+                                    key={n}
+                                    onClick={() => goToPage(n)}
+                                    aria-current={n === currentPage ? "page" : undefined}
+                                    className={`px-3 py-1 rounded-md border ${n === currentPage ? "bg-blue-600 text-white border-blue-600" : "border-gray-300 hover:bg-gray-100"} cursor-pointer`}
                                 >
-                                    Ver detalhes
+                                    {n}
                                 </button>
-                            </div>
+                            ))}
+
+                            <button
+                                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                                disabled={currentPage === totalPages}
+                                aria-disabled={currentPage === totalPages}
+                                className={`px-3 py-1 rounded-md border border-gray-300 ${currentPage === totalPages ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-gray-100"}`}
+                            >
+                                Próxima
+                            </button>
                         </div>
-                    ))}
-                </div>
+
+                        <div className="text-sm text-gray-600">
+                            Mostrando {startIndex + 1}–{endIndex} de {filteredAdopters.length}
+                        </div>
+                    </div>
+                </>
             )}
 
             <AnimatePresence>
@@ -337,11 +416,7 @@ export default function AdopterList() {
                                     <div className="flex flex-col">
                                         <label className="mb-1 font-medium text-gray-700">Estado Civil</label>
                                         <select name="maritalStatus" value={editing.maritalStatus || ""} onChange={handleEditChange} className={inputStyle(!!errors.maritalStatus)}>
-                                            <option value="">Selecione</option>
-                                            <option value="Solteiro(a)">Solteiro(a)</option>
-                                            <option value="Casado(a)">Casado(a)</option>
-                                            <option value="Divorciado(a)">Divorciado(a)</option>
-                                            <option value="Viúvo(a)">Viúvo(a)</option>
+                                            {/* opções */}
                                         </select>
                                         <ErrorMessage message={errors.maritalStatus} />
                                     </div>
@@ -349,9 +424,7 @@ export default function AdopterList() {
                                     <div className="flex flex-col">
                                         <label className="mb-1 font-medium text-gray-700">Estado</label>
                                         <select name="state" value={editing.state || ""} onChange={handleEditChange} className={inputStyle(!!errors.state)}>
-                                            <option value="">Selecione</option>
-                                            <option value="SP">São Paulo</option>
-                                            <option value="RJ">Rio de Janeiro</option>
+                                            {/* opções */}
                                         </select>
                                         <ErrorMessage message={errors.state} />
                                     </div>
@@ -370,51 +443,27 @@ export default function AdopterList() {
                                     {/* Rua */}
                                     <div className="flex flex-col">
                                         <label className="mb-1 font-medium text-gray-700">Rua</label>
-                                        <input
-                                            type="text"
-                                            name="street"
-                                            value={editing.street || ""}
-                                            onChange={handleEditChange}
-                                            className={inputStyle(!!errors.street)}
-                                        />
+                                        <input type="text" name="street" value={editing.street || ""} onChange={handleEditChange} className={inputStyle(!!errors.street)} />
                                         <ErrorMessage message={errors.street} />
                                     </div>
 
                                     {/* Número */}
                                     <div className="flex flex-col">
                                         <label className="mb-1 font-medium text-gray-700">Número</label>
-                                        <input
-                                            type="text"
-                                            name="number"
-                                            value={editing.number || ""}
-                                            onChange={handleEditChange}
-                                            className={inputStyle(!!errors.number)}
-                                        />
+                                        <input type="text" name="number" value={editing.number || ""} onChange={handleEditChange} className={inputStyle(!!errors.number)} />
                                         <ErrorMessage message={errors.number} />
                                     </div>
 
                                     {/* Complemento */}
                                     <div className="flex flex-col">
                                         <label className="mb-1 font-medium text-gray-700">Complemento</label>
-                                        <input
-                                            type="text"
-                                            name="complement"
-                                            value={editing.complement || ""}
-                                            onChange={handleEditChange}
-                                            className={inputStyle(!!errors.complement)}
-                                        />
+                                        <input type="text" name="complement" value={editing.complement || ""} onChange={handleEditChange} className={inputStyle(!!errors.complement)} />
                                         <ErrorMessage message={errors.complement} />
                                     </div>
 
                                     <div className="flex flex-col">
                                         <label className="mb-1 font-medium text-gray-700">CEP</label>
-                                        <input
-                                            type="text"
-                                            name="cep"
-                                            value={editing.cep || ""}
-                                            onChange={handleEditChange}
-                                            className={inputStyle(!!errors.cep)}
-                                        />
+                                        <input type="text" name="cep" value={editing.cep || ""} onChange={handleEditChange} className={inputStyle(!!errors.cep)} />
                                         <ErrorMessage message={errors.cep} />
                                     </div>
 
@@ -424,12 +473,9 @@ export default function AdopterList() {
                                             name="sex"
                                             value={editing.sex || ""}
                                             onChange={handleEditChange}
-                                            className={inputStyle(!!errors.cep)}
+                                            className={inputStyle(!!errors.sex)}
                                         >
-                                            <option value="">Selecione</option>
-                                            <option value="Masculino">Masculino</option>
-                                            <option value="Feminino">Feminino</option>
-                                            <option value="Outro">Outro</option>
+                                            {/* opções */}
                                         </select>
                                         <ErrorMessage message={errors.sex} />
                                     </div>
@@ -437,27 +483,7 @@ export default function AdopterList() {
                                     <div className="flex flex-col gap-2">
                                         <label>Possui animal?</label>
                                         <div className="flex gap-4">
-                                            <label className="flex items-center gap-2">
-                                                <input
-                                                    type="radio"
-                                                    name="hasPets"
-                                                    value="true"
-                                                    checked={editing.hasPets === true}
-                                                    onChange={handleEditChange}
-                                                />
-                                                Sim
-                                            </label>
-                                            <label className="flex items-center gap-2">
-                                                <input
-                                                    type="radio"
-                                                    name="hasPets"
-                                                    value="false"
-                                                    checked={editing.hasPets === false}
-                                                    onChange={handleEditChange}
-                                                />
-                                                Não
-                                            </label>
-                                            <ErrorMessage message={errors.hasPets}/>
+                                            {/* radio/checkbox */}
                                         </div>
                                     </div>
 
@@ -468,7 +494,6 @@ export default function AdopterList() {
                                             value={editing.notes || ""}
                                             onChange={handleEditChange}
                                             className={inputStyle(!!errors.notes)}
-                                            rows={3}
                                         />
                                         <ErrorMessage message={errors.notes} />
                                     </div>
diff --git a/src/pages/Adoption/AdoptionList.tsx b/src/pages/Adoption/AdoptionList.tsx
index bb3a659..7405549 100644
--- a/src/pages/Adoption/AdoptionList.tsx
+++ b/src/pages/Adoption/AdoptionList.tsx
@@ -6,8 +6,8 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useAnimals } from "../../context/AnimalsContext";
 import { deleteAdoptionById, getAdoptions, updateAdoption } from "../../services/adoptionService.ts";
 import EditAdoptionForm from "../../Components/EditAdoptionForm/EditAdoptionForm.tsx";
-import {getAdopters} from "../../services/adopterService.ts";
-import {getStaff} from "../../services/staffService.ts";
+import { getAdopters } from "../../services/adopterService.ts";
+import { getStaff } from "../../services/staffService.ts";
 
 export type Adoption = {
     id: string;
@@ -37,6 +37,9 @@ export default function AdoptionList() {
     const [searchTerm, setSearchTerm] = useState("");
     const navigate = useNavigate();
 
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
+
     useEffect(() => {
         const fetchAdoptions = async () => {
             setLoading(true);
@@ -140,9 +143,32 @@ export default function AdoptionList() {
             .some(field => field.toLowerCase().includes(searchTerm.toLowerCase()))
     );
 
+    const totalPages = Math.max(1, Math.ceil(filteredAdoptions.length / itemsPerPage));
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = Math.min(filteredAdoptions.length, currentPage * itemsPerPage);
+    const paginatedAdoptions = filteredAdoptions.slice(startIndex, endIndex);
+
+    const getPageNumbers = () => Array.from({ length: totalPages }).map((_, i) => i + 1);
+
+    const goToPage = (page: number) => {
+        if (page < 1 || page > totalPages) return;
+        setCurrentPage(page);
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+    const prevPage = () => goToPage(currentPage - 1);
+    const nextPage = () => goToPage(currentPage + 1);
+
+    useEffect(() => {
+        const tp = Math.max(1, Math.ceil(filteredAdoptions.length / itemsPerPage));
+        if (currentPage > tp) setCurrentPage(tp);
+    }, [currentPage, filteredAdoptions.length]);
+
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchTerm]);
+
     return (
         <div className="p-6 flex flex-col gap-6">
-            {/* Header */}
             <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                 <h1 className="text-3xl font-bold text-gray-800">Adoções</h1>
                 <div className="flex items-center gap-3 w-full sm:w-auto">
@@ -161,67 +187,104 @@ export default function AdoptionList() {
                 </div>
             </div>
 
-            {/* Lista */}
             {loading ? (
                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    {[...Array(6)].map((_, i) => (
+                    {[...Array(itemsPerPage)].map((_, i) => (
                         <div key={i} className="rounded-2xl shadow-md bg-white overflow-hidden animate-pulse h-60"></div>
                     ))}
                 </div>
             ) : filteredAdoptions.length === 0 ? (
                 <div className="text-center text-gray-500 py-20">Nenhuma adoção encontrada.</div>
             ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    {filteredAdoptions.map(a => {
-                        const animalData = animals.find(an => an.id === a.animalId);
-                        return (
-                            <div key={a.id} className="rounded-2xl shadow-md hover:shadow-xl transition bg-white overflow-hidden group">
-                                <div className="h-40 bg-gray-100 flex items-center justify-center relative">
-                                    {animalData?.image ? (
-                                        <img src={animalData.image} alt={a.animalName} className="w-full h-full object-cover" />
-                                    ) : (
-                                        <span className="text-gray-400">Animal</span>
-                                    )}
-                                    <div className="absolute top-2 right-2 flex gap-2">
+                <>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                        {paginatedAdoptions.map(a => {
+                            const animalData = animals.find(an => an.id === a.animalId);
+                            return (
+                                <div key={a.id} className="rounded-2xl shadow-md hover:shadow-xl transition bg-white overflow-hidden group">
+                                    <div className="h-40 bg-gray-100 flex items-center justify-center relative">
+                                        {animalData?.image ? (
+                                            <img src={animalData.image} alt={a.animalName} className="w-full h-full object-cover" />
+                                        ) : (
+                                            <span className="text-gray-400">Animal</span>
+                                        )}
+                                        <div className="absolute top-2 right-2 flex gap-2">
+                                            <button
+                                                onClick={() => setDeleteAdoption(a)}
+                                                className="text-red-500 bg-white p-1 rounded-full hover:bg-red-50 transition"
+                                            >
+                                                <Trash2 size={16} />
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div className="p-4 flex flex-col gap-2">
+                                        <div className="flex justify-between items-center">
+                                            <h2 className="font-semibold text-gray-800 text-lg">{a.animalName}</h2>
+                                            <span
+                                                className={`text-xs px-2 py-1 rounded-full font-medium ${
+                                                    a.status === "Adotado"
+                                                        ? "bg-green-100 text-green-600"
+                                                        : a.status === "Devolvido"
+                                                            ? "bg-yellow-100 text-yellow-600"
+                                                            : "bg-blue-100 text-blue-600"
+                                                }`}
+                                            >
+                                                {a.status}
+                                            </span>
+                                        </div>
+                                        <p className="text-sm text-gray-600">Adotante: {a.adopterName}</p>
+                                        <p className="text-sm text-gray-600">Responsável: {a.employeeName}</p>
                                         <button
-                                            onClick={() => setDeleteAdoption(a)}
-                                            className="text-red-500 bg-white p-1 rounded-full hover:bg-red-50 transition"
+                                            onClick={() => setSelectedAdoption(a)}
+                                            className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
                                         >
-                                            <Trash2 size={16} />
+                                            Ver detalhes
                                         </button>
                                     </div>
                                 </div>
-                                <div className="p-4 flex flex-col gap-2">
-                                    <div className="flex justify-between items-center">
-                                        <h2 className="font-semibold text-gray-800 text-lg">{a.animalName}</h2>
-                                        <span
-                                            className={`text-xs px-2 py-1 rounded-full font-medium ${
-                                                a.status === "Adotado"
-                                                    ? "bg-green-100 text-green-600"
-                                                    : a.status === "Devolvido"
-                                                        ? "bg-yellow-100 text-yellow-600"
-                                                        : "bg-blue-100 text-blue-600"
-                                            }`}
-                                        >
-                      {a.status}
-                    </span>
-                                    </div>
-                                    <p className="text-sm text-gray-600">Adotante: {a.adopterName}</p>
-                                    <p className="text-sm text-gray-600">Responsável: {a.employeeName}</p>
-                                    <button
-                                        onClick={() => setSelectedAdoption(a)}
-                                        className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
-                                    >
-                                        Ver detalhes
-                                    </button>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
+                            );
+                        })}
+                    </div>
+
+                    <div className="flex flex-col gap-5 items-center justify-between mt-6">
+                        <div className="flex items-center gap-2">
+                            <button
+                                onClick={prevPage}
+                                disabled={currentPage === 1}
+                                aria-disabled={currentPage === 1}
+                                className={`px-3 py-1 rounded-md border border-gray-300 ${currentPage === 1 ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-gray-100"}`}
+                            >
+                                Anterior
+                            </button>
+
+                            {getPageNumbers().map(n => (
+                                <button
+                                    key={n}
+                                    onClick={() => goToPage(n)}
+                                    aria-current={n === currentPage ? "page" : undefined}
+                                    className={`px-3 py-1 rounded-md border ${n === currentPage ? "bg-blue-600 text-white border-blue-600" : "border-gray-300 hover:bg-gray-100"} cursor-pointer`}
+                                >
+                                    {n}
+                                </button>
+                            ))}
+
+                            <button
+                                onClick={nextPage}
+                                disabled={currentPage === totalPages}
+                                aria-disabled={currentPage === totalPages}
+                                className={`px-3 py-1 rounded-md border border-gray-300 ${currentPage === totalPages ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-gray-100"}`}
+                            >
+                                Próxima
+                            </button>
+                        </div>
+
+                        <div className="text-sm text-gray-600">
+                            Mostrando {startIndex + 1}–{endIndex} de {filteredAdoptions.length}
+                        </div>
+                    </div>
+                </>
             )}
 
-            {/* Modais */}
             <AnimatePresence>
                 {selectedAdoption && (
                     <motion.div
diff --git a/src/pages/Animal/AnimalList.tsx b/src/pages/Animal/AnimalList.tsx
index 88c3ed0..b52161d 100644
--- a/src/pages/Animal/AnimalList.tsx
+++ b/src/pages/Animal/AnimalList.tsx
@@ -1,4 +1,3 @@
-// src/pages/Animal/AnimalList.tsx
 import React, { useState, useEffect } from "react";
 import { Plus, X, Trash2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
diff --git a/src/pages/Health/AntiparasiticRegister/AntiparasiticRegister.tsx b/src/pages/Health/AntiparasiticRegister/AntiparasiticRegister.tsx
index 6c3e4c7..0c2ffd5 100644
--- a/src/pages/Health/AntiparasiticRegister/AntiparasiticRegister.tsx
+++ b/src/pages/Health/AntiparasiticRegister/AntiparasiticRegister.tsx
@@ -340,7 +340,7 @@ export default function AntiparasiticRegister() {
                     <motion.button
                         whileTap={{ scale: 0.95 }}
                         type="button"
-                        onClick={() => navigate("/health-card")}
+                        onClick={() => navigate("/HealthCardList")}
                         className="w-full sm:w-auto px-6 py-3 rounded-2xl bg-gray-600 text-white shadow hover:bg-gray-700 transition font-medium"
                     >
                         Carteiras de Saúde
diff --git a/src/pages/Health/DewormingRegister/DewormingRegister.tsx b/src/pages/Health/DewormingRegister/DewormingRegister.tsx
index 2277b14..f7c6fbd 100644
--- a/src/pages/Health/DewormingRegister/DewormingRegister.tsx
+++ b/src/pages/Health/DewormingRegister/DewormingRegister.tsx
@@ -323,7 +323,7 @@ export default function DewormingRegister() {
                     <motion.button
                         whileTap={{ scale: 0.95 }}
                         type="button"
-                        onClick={() => navigate("/health-card")}
+                        onClick={() => navigate("/HealthCardList")}
                         className="w-full sm:w-auto px-6 py-3 rounded-2xl bg-gray-600 text-white shadow hover:bg-gray-700 transition font-medium"
                     >
                         Carteiras de Saúde
diff --git a/src/pages/Health/HealthCardList/HealthCardList.tsx b/src/pages/Health/HealthCardList/HealthCardList.tsx
index fa87ef2..9aa111a 100644
--- a/src/pages/Health/HealthCardList/HealthCardList.tsx
+++ b/src/pages/Health/HealthCardList/HealthCardList.tsx
@@ -1,3 +1,5 @@
+// typescript
+// src/pages/Health/HealthCardList/HealthCardList.tsx
 import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Syringe, Shield, Pill, X, Trash2 } from "lucide-react";
@@ -8,10 +10,20 @@ import { getDewormings, deleteDewormingRecord } from "../../../services/dewormin
 import toast from "react-hot-toast";
 import type {HealthRecord} from "../types/healthRecord.ts";
 
+type AnimalShort = {
+    id: string;
+    name: string;
+    image?: string;
+    birthDate?: string;
+    breed?: string;
+};
+
+type TimestampLike = Date | { toDate?: () => Date } | string | number | null | undefined;
+
 export default function HealthCardList() {
     const { animals } = useAnimals();
     const [searchTerm, setSearchTerm] = useState("");
-    const [selectedAnimal, setSelectedAnimal] = useState<any | null>(null);
+    const [selectedAnimal, setSelectedAnimal] = useState<AnimalShort | null>(null);
     const [animalHealth, setAnimalHealth] = useState<{
         vaccines: HealthRecord[];
         antiparasitics: HealthRecord[];
@@ -22,6 +34,10 @@ export default function HealthCardList() {
         dewormings: [],
     });
 
+    const [loading, setLoading] = useState(true);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
+
     useEffect(() => {
         const fetchHealthData = async () => {
             try {
@@ -38,6 +54,8 @@ export default function HealthCardList() {
             } catch (err) {
                 console.error(err);
                 toast.error("Erro ao carregar dados de saúde.");
+            } finally {
+                setLoading(false);
             }
         };
         fetchHealthData();
@@ -49,6 +67,18 @@ export default function HealthCardList() {
             a.breed?.toLowerCase().includes(searchTerm.toLowerCase())
     );
 
+    const totalPages = Math.max(1, Math.ceil(filteredAnimals.length / itemsPerPage));
+    const paginatedAnimals = filteredAnimals.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+
+    useEffect(() => {
+        const tp = Math.max(1, Math.ceil(filteredAnimals.length / itemsPerPage));
+        if (currentPage > tp) setCurrentPage(tp);
+    }, [currentPage, filteredAnimals.length]);
+
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [searchTerm]);
+
     const calcularIdade = (birthDate?: string) => {
         if (!birthDate) return "Não informado";
         const nascimento = new Date(birthDate);
@@ -62,12 +92,17 @@ export default function HealthCardList() {
         return anos > 0 ? `${anos} ano${anos !== 1 ? "s" : ""}` : `${meses} mês${meses !== 1 ? "es" : ""}`;
     };
 
-    const formatDate = (timestamp?: any) => {
+    const isWithToDate = (t: unknown): t is { toDate: () => Date } =>
+        typeof t === "object" && t !== null && typeof (t as { toDate?: unknown }).toDate === "function";
+
+    const formatDate = (timestamp?: TimestampLike) => {
         if (!timestamp) return "-";
-        const date =
-            timestamp.toDate?.() instanceof Date
-                ? timestamp.toDate()
-                : new Date(timestamp);
+        let date: Date;
+        if (isWithToDate(timestamp)) {
+            date = timestamp.toDate();
+        } else {
+            date = new Date(timestamp as string | number | Date);
+        }
         return date.toLocaleDateString("pt-BR");
     };
 
@@ -80,7 +115,6 @@ export default function HealthCardList() {
     const getAnimalDewormings = (id: string) =>
         animalHealth.dewormings.filter((d) => d.animalId === id);
 
-    // Funções de remoção
     const handleDelete = async (type: "vaccine" | "antiparasitic" | "deworming", id: string) => {
         if (!window.confirm("Tem certeza que deseja remover este registro?")) return;
 
@@ -111,6 +145,14 @@ export default function HealthCardList() {
         }
     };
 
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = Math.min(filteredAnimals.length, currentPage * itemsPerPage);
+
+    const getPageNumbers = () => {
+        return Array.from({ length: totalPages }).map((_, i) => i + 1);
+    };
+
+
     return (
         <div className="p-6 flex flex-col gap-6">
             <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
@@ -123,68 +165,113 @@ export default function HealthCardList() {
                 />
             </div>
 
-            {filteredAnimals.length === 0 ? (
+            {loading ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                    {Array.from({ length: itemsPerPage }).map((_, i) => (
+                        <div key={i} className="rounded-2xl shadow-md bg-white overflow-hidden animate-pulse p-4 h-48"></div>
+                    ))}
+                </div>
+            ) : filteredAnimals.length === 0 ? (
                 <div className="text-center text-gray-500 py-20">
                     Nenhum animal encontrado.
                 </div>
             ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    {filteredAnimals.map((animal) => {
-                        const vaccines = getAnimalVaccines(animal.id);
-                        const antiparasitics = getAnimalAntiparasitics(animal.id);
-                        const dewormings = getAnimalDewormings(animal.id);
-
-                        return (
-                            <div
-                                key={animal.id}
-                                className="rounded-2xl shadow-md hover:shadow-xl transition bg-white overflow-hidden group"
-                            >
-                                <div className="h-40 bg-gray-200 flex items-center justify-center relative">
-                                    {animal.image ? (
-                                        <img
-                                            src={animal.image}
-                                            alt={animal.name}
-                                            className="absolute inset-0 w-full h-full object-cover"
-                                        />
-                                    ) : (
-                                        <span className="text-gray-400">Sem imagem</span>
-                                    )}
-                                </div>
-                                <div className="p-4 flex flex-col gap-2">
-                                    <h2 className="font-semibold text-gray-800 text-lg">
-                                        {animal.name}
-                                    </h2>
-                                    <p className="text-sm text-gray-600">
-                                        {calcularIdade(animal.birthDate)} •{" "}
-                                        {animal.breed || "-"}
-                                    </p>
-
-                                    <div className="flex flex-wrap items-center gap-3 text-sm mt-2">
-                                        <div className="flex items-center gap-1 text-blue-600">
-                                            <Syringe size={14} />
-                                            <span>{vaccines.length} vacinas</span>
-                                        </div>
-                                        <div className="flex items-center gap-1 text-green-600">
-                                            <Shield size={14} />
-                                            <span>{antiparasitics.length} antiparasitários</span>
-                                        </div>
-                                        <div className="flex items-center gap-1 text-purple-600">
-                                            <Pill size={14} />
-                                            <span>{dewormings.length} vermífugos</span>
-                                        </div>
+                <>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                        {paginatedAnimals.map((animal) => {
+                            const vaccines = getAnimalVaccines(animal.id);
+                            const antiparasitics = getAnimalAntiparasitics(animal.id);
+                            const dewormings = getAnimalDewormings(animal.id);
+
+                            return (
+                                <div
+                                    key={animal.id}
+                                    className="rounded-2xl shadow-md hover:shadow-xl transition bg-white overflow-hidden group"
+                                >
+                                    <div className="h-40 bg-gray-200 flex items-center justify-center relative">
+                                        {animal.image ? (
+                                            <img
+                                                src={animal.image}
+                                                alt={animal.name}
+                                                className="absolute inset-0 w-full h-full object-cover"
+                                            />
+                                        ) : (
+                                            <span className="text-gray-400">Sem imagem</span>
+                                        )}
                                     </div>
+                                    <div className="p-4 flex flex-col gap-2">
+                                        <h2 className="font-semibold text-gray-800 text-lg">
+                                            {animal.name}
+                                        </h2>
+                                        <p className="text-sm text-gray-600">
+                                            {calcularIdade(animal.birthDate)} •{" "}
+                                            {animal.breed || "-"}
+                                        </p>
+
+                                        <div className="flex flex-wrap items-center gap-3 text-sm mt-2">
+                                            <div className="flex items-center gap-1 text-blue-600">
+                                                <Syringe size={14} />
+                                                <span>{vaccines.length} vacinas</span>
+                                            </div>
+                                            <div className="flex items-center gap-1 text-green-600">
+                                                <Shield size={14} />
+                                                <span>{antiparasitics.length} antiparasitários</span>
+                                            </div>
+                                            <div className="flex items-center gap-1 text-purple-600">
+                                                <Pill size={14} />
+                                                <span>{dewormings.length} vermífugos</span>
+                                            </div>
+                                        </div>
 
-                                    <button
-                                        onClick={() => setSelectedAnimal(animal)}
-                                        className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
-                                    >
-                                        Ver mais
-                                    </button>
+                                        <button
+                                            onClick={() => setSelectedAnimal(animal)}
+                                            className="w-full mt-2 px-3 py-2 border border-gray-200 rounded-xl hover:bg-gray-100 transition text-sm font-medium"
+                                        >
+                                            Ver mais
+                                        </button>
+                                    </div>
                                 </div>
-                            </div>
-                        );
-                    })}
-                </div>
+                            );
+                        })}
+                    </div>
+
+                    <div className="flex flex-col gap-5 items-center justify-between mt-6">
+                        <div className="flex items-center gap-2">
+                            <button
+                                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                                disabled={currentPage === 1}
+                                aria-disabled={currentPage === 1}
+                                className={`px-3 py-1 rounded-md border border-gray-300 ${currentPage === 1 ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-gray-100"}`}
+                            >
+                                Anterior
+                            </button>
+
+                            {getPageNumbers().map(n => (
+                                <button
+                                    key={n}
+                                    onClick={() => setCurrentPage(n)}
+                                    aria-current={n === currentPage ? "page" : undefined}
+                                    className={`px-3 py-1 rounded-md border ${n === currentPage ? "bg-blue-600 text-white border-blue-600" : "border-gray-300 hover:bg-gray-100"} cursor-pointer`}
+                                >
+                                    {n}
+                                </button>
+                            ))}
+
+                            <button
+                                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                                disabled={currentPage === totalPages}
+                                aria-disabled={currentPage === totalPages}
+                                className={`px-3 py-1 rounded-md border border-gray-300 ${currentPage === totalPages ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-gray-100"}`}
+                            >
+                                Próxima
+                            </button>
+                        </div>
+
+                        <div className="text-sm text-gray-600">
+                            Mostrando {startIndex + 1}–{endIndex} de {filteredAnimals.length}
+                        </div>
+                    </div>
+                </>
             )}
 
             <AnimatePresence>
@@ -212,7 +299,6 @@ export default function HealthCardList() {
                                 {selectedAnimal.name} — Carteira de Saúde
                             </h2>
 
-                            {/* Vacinas */}
                             <div className="mb-6">
                                 <h3 className="font-semibold text-blue-700 flex items-center gap-2 mb-2">
                                     <Syringe size={18} /> Vacinas
@@ -244,7 +330,6 @@ export default function HealthCardList() {
                                 </div>
                             </div>
 
-                            {/* Antiparasitários */}
                             <div className="mb-6">
                                 <h3 className="font-semibold text-green-700 flex items-center gap-2 mb-2">
                                     <Shield size={18} /> Antiparasitários
@@ -276,7 +361,6 @@ export default function HealthCardList() {
                                 </div>
                             </div>
 
-                            {/* Vermífugos */}
                             <div>
                                 <h3 className="font-semibold text-purple-700 flex items-center gap-2 mb-2">
                                     <Pill size={18} /> Vermífugos
@@ -322,4 +406,4 @@ export default function HealthCardList() {
             </AnimatePresence>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/pages/Health/Vaccine/VaccineRegister.tsx b/src/pages/Health/Vaccine/VaccineRegister.tsx
index e896190..5c1e4c5 100644
--- a/src/pages/Health/Vaccine/VaccineRegister.tsx
+++ b/src/pages/Health/Vaccine/VaccineRegister.tsx
@@ -310,7 +310,7 @@ export default function VaccineRegister() {
                     <motion.button
                         whileTap={{ scale: 0.95 }}
                         type="button"
-                        onClick={() => navigate("/health-card")}
+                        onClick={() => navigate("/HealthCardList")}
                         className="w-full sm:w-auto px-6 py-3 rounded-2xl bg-gray-600 text-white shadow hover:bg-gray-700 transition font-medium"
                     >
                         Carteiras de Saúde