diff --git a/src/App.tsx b/src/App.tsx
index 8ed5e94..f3a68bd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ import {AuthProvider} from "./context/AuthContext";
 import {Toaster} from "react-hot-toast";
 import type {JSX} from "react";
 import {AnimalsProvider} from "./context/AnimalsContext.tsx";
+import { AdoptionsProvider } from "./context/AdoptionsContext";
 
 const ProtectedLayout = ({children}: { children: JSX.Element }) => (
     <div className="flex h-screen bg-gray-100">
@@ -34,32 +35,34 @@ export default function App() {
     return (
         <AuthProvider>
             <AnimalsProvider>
-                <Toaster position="top-right" reverseOrder={false}/>
+                <AdoptionsProvider>
+                    <Toaster position="top-right" reverseOrder={false}/>
 
-                <Router>
-                    <Routes>
-                        <Route path="/login" element={<Login/>}/>
+                    <Router>
+                        <Routes>
+                            <Route path="/login" element={<Login/>}/>
 
-                        <Route path="/" element={<ProtectedRoute element={<Dashboard/>}/>}/>
-                        <Route path="/dashboard" element={<ProtectedRoute element={<Dashboard/>}/>}/>
+                            <Route path="/" element={<ProtectedRoute element={<Dashboard/>}/>}/>
+                            <Route path="/dashboard" element={<ProtectedRoute element={<Dashboard/>}/>}/>
 
-                        <Route path="/animals" element={<ProtectedRoute element={<AnimalRegister/>}/>}/>
-                        <Route path="/animalList" element={<ProtectedRoute element={<AnimalList/>}/>}/>
+                            <Route path="/animals" element={<ProtectedRoute element={<AnimalRegister/>}/>}/>
+                            <Route path="/animalList" element={<ProtectedRoute element={<AnimalList/>}/>}/>
 
-                        <Route path="/staff" element={<ProtectedRoute element={<StaffRegister/>}/>}/>
-                        <Route path="/staffList" element={<ProtectedRoute element={<StaffList/>}/>}/>
+                            <Route path="/staff" element={<ProtectedRoute element={<StaffRegister/>}/>}/>
+                            <Route path="/staffList" element={<ProtectedRoute element={<StaffList/>}/>}/>
 
-                        <Route path="/Adopter" element={<ProtectedRoute element={<AdopterRegister/>}/>}/>
-                        <Route path="/AdopterList" element={<ProtectedRoute element={<AdopterList/>}/>}/>
+                            <Route path="/Adopter" element={<ProtectedRoute element={<AdopterRegister/>}/>}/>
+                            <Route path="/AdopterList" element={<ProtectedRoute element={<AdopterList/>}/>}/>
 
-                        <Route path="/vaccines" element={<ProtectedRoute element={<VaccineRegister/>}/>}/>
+                            <Route path="/vaccines" element={<ProtectedRoute element={<VaccineRegister/>}/>}/>
 
-                        <Route path="/adoptions" element={<ProtectedRoute element={<AdoptionRegister/>}/>}/>
-                        <Route path="/AdoptionList" element={<ProtectedRoute element={<AdoptionList/>}/>}/>
+                            <Route path="/adoptions" element={<ProtectedRoute element={<AdoptionRegister/>}/>}/>
+                            <Route path="/AdoptionList" element={<ProtectedRoute element={<AdoptionList/>}/>}/>
 
-                        <Route path="*" element={<ProtectedRoute element={<Dashboard/>}/>}/>
-                    </Routes>
-                </Router>
+                            <Route path="*" element={<ProtectedRoute element={<Dashboard/>}/>}/>
+                        </Routes>
+                    </Router>
+                </AdoptionsProvider>
             </AnimalsProvider>
         </AuthProvider>
     );
diff --git a/src/context/AdoptionsContext.tsx b/src/context/AdoptionsContext.tsx
new file mode 100644
index 0000000..d4675b6
--- /dev/null
+++ b/src/context/AdoptionsContext.tsx
@@ -0,0 +1,48 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { collection, onSnapshot } from "firebase/firestore";
+import { db } from "../lib/firebase";
+
+export type Adoption = {
+    id: string;
+    adopterId: string;
+    animalId: string;
+    employeeId: string;
+    status: string;
+    notes?: string;
+    adoptionDate?: string;
+};
+
+type AdoptionsContextType = {
+    adoptions: Adoption[];
+};
+
+const AdoptionsContext = createContext<AdoptionsContextType | undefined>(undefined);
+
+export const AdoptionsProvider = ({ children }: { children: ReactNode }) => {
+    const [adoptions, setAdoptions] = useState<Adoption[]>([]);
+
+    useEffect(() => {
+        const adoptionsCol = collection(db, "adoptions");
+        const unsubscribe = onSnapshot(adoptionsCol, (snapshot) => {
+            const formatted = snapshot.docs.map((doc) => ({
+                id: doc.id,
+                ...(doc.data() as Omit<Adoption, "id">),
+            }));
+            setAdoptions(formatted);
+        });
+
+        return () => unsubscribe();
+    }, []);
+
+    return (
+        <AdoptionsContext.Provider value={{ adoptions }}>
+            {children}
+        </AdoptionsContext.Provider>
+    );
+};
+
+export const useAdoptions = () => {
+    const context = useContext(AdoptionsContext);
+    if (!context) throw new Error("useAdoptions deve ser usado dentro de um AdoptionsProvider");
+    return context;
+};
diff --git a/src/pages/Animal/AnimalList.tsx b/src/pages/Animal/AnimalList.tsx
index 2a2759a..1378a03 100644
--- a/src/pages/Animal/AnimalList.tsx
+++ b/src/pages/Animal/AnimalList.tsx
@@ -39,12 +39,28 @@ export default function AnimalList() {
 
     const calcularIdade = (birthDate?: string) => {
         if (!birthDate) return "Não informado";
+
         const nascimento = new Date(birthDate);
         const hoje = new Date();
-        let idade = hoje.getFullYear() - nascimento.getFullYear();
-        const m = hoje.getMonth() - nascimento.getMonth();
-        if (m < 0 || (m === 0 && hoje.getDate() < nascimento.getDate())) idade--;
-        return `${idade} ano${idade !== 1 ? "s" : ""}`;
+
+        let anos = hoje.getFullYear() - nascimento.getFullYear();
+        let meses = hoje.getMonth() - nascimento.getMonth();
+        let dias = hoje.getDate() - nascimento.getDate();
+
+        if (dias < 0) {
+            meses--;
+            const ultimoDiaMesAnterior = new Date(hoje.getFullYear(), hoje.getMonth(), 0).getDate();
+            dias += ultimoDiaMesAnterior;
+        }
+
+        if (meses < 0) {
+            anos--;
+            meses += 12;
+        }
+
+        if (anos > 0) return `${anos} ano${anos !== 1 ? "s" : ""}`;
+        if (meses > 0) return `${meses} mês${meses !== 1 ? "es" : ""}`;
+        return `${dias} dia${dias !== 1 ? "s" : ""}`;
     };
 
     const inputStyle = (error?: boolean) =>
@@ -161,7 +177,6 @@ export default function AnimalList() {
                 </div>
             )}
 
-            {/* Modal de Edição */}
             <AnimatePresence>
                 {editForm && (
                     <motion.div
@@ -309,10 +324,19 @@ export default function AnimalList() {
                 )}
             </AnimatePresence>
 
-            {/* Modal de Exclusão */}
             {deleteAnimal && (
-                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 animate-fadeIn">
-                    <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 animate-scaleIn">
+                <motion.div
+                    className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                >
+                    <motion.div
+                        className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 relative overflow-hidden"
+                        initial={{ scale: 0.9 }}
+                        animate={{ scale: 1 }}
+                        exit={{ scale: 0.9 }}
+                    >
                         <h2 className="text-lg font-bold text-gray-800 mb-4">Confirmar exclusão</h2>
                         <p className="text-gray-600 mb-6">
                             Deseja realmente excluir <strong>{deleteAnimal.name}</strong>?
@@ -331,8 +355,8 @@ export default function AnimalList() {
                                 Excluir
                             </button>
                         </div>
-                    </div>
-                </div>
+                    </motion.div>
+                </motion.div>
             )}
         </div>
     );
diff --git a/src/pages/Animal/AnimalRegister.tsx b/src/pages/Animal/AnimalRegister.tsx
index 12f7505..940fa98 100644
--- a/src/pages/Animal/AnimalRegister.tsx
+++ b/src/pages/Animal/AnimalRegister.tsx
@@ -46,7 +46,9 @@ export default function AnimalRegister() {
     const validate = () => {
         const newErrors: { [key: string]: string } = {};
         Object.entries(formData).forEach(([key, value]) => {
-            if (!value) newErrors[key] = "Campo obrigatório";
+            if (key !== "notes" && !value) {
+                newErrors[key] = "Campo obrigatório";
+            }
         });
         setErrors(newErrors);
         return Object.keys(newErrors).length === 0;
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index c64fe16..64bdf1f 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,12 +1,28 @@
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { PawPrint, User, FileText, Heart, Calendar, AlertCircle } from "lucide-react";
-import { getAnimals } from "../services/animalService";
-import { getStaff } from "../services/staffService.ts";
 import {
-    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar,
+    PawPrint,
+    User,
+    FileText,
+    Heart,
+    Calendar,
+    AlertCircle,
+} from "lucide-react";
+import {
+    LineChart,
+    Line,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    ResponsiveContainer,
+    BarChart,
+    Bar,
 } from "recharts";
+import { getAnimals } from "../services/animalService";
+import { getStaff } from "../services/staffService.ts";
 import type { Animal } from "../context/AnimalsContext";
+import { useAdoptions } from "../context/AdoptionsContext";
 
 export interface Staff {
     id: string;
@@ -29,7 +45,7 @@ export default function Dashboard() {
             try {
                 const [animalsData, staffData] = await Promise.all([
                     getAnimals(),
-                    getStaff()
+                    getStaff(),
                 ]);
                 setAnimals(animalsData);
                 setStaff(staffData);
@@ -43,84 +59,134 @@ export default function Dashboard() {
         fetchData();
     }, []);
 
+    const currentMonth = new Date().getMonth();
+    const currentYear = new Date().getFullYear();
+
+    function parseDate(input: any): Date {
+        if (!input) return new Date();
+
+        if (input instanceof Date) return input;
+
+        if (typeof input === "object")
+            return input.toDate();
+
+        if (typeof input === "string") return new Date(input);
+
+        return new Date(input);
+    }
+
+    const cadastrosDoMes = animals.filter(animal => {
+        if (!animal.rescueDate) return false;
+        const date = parseDate(animal.rescueDate);
+        const month = date.getUTCMonth();
+        const year = date.getUTCFullYear();
+        return month === currentMonth && year === currentYear;
+    }).length;
+
+
     const stats = [
         {
             id: 1,
             label: "Total de Animais",
             value: animals.length,
             icon: PawPrint,
-            color: "bg-blue-100 text-blue-800"
+            color: "bg-blue-100 text-blue-800",
         },
         {
             id: 2,
             label: "Funcionários",
             value: staff.length,
             icon: User,
-            color: "bg-green-100 text-green-800"
+            color: "bg-green-100 text-green-800",
         },
         {
             id: 3,
             label: "Adoções",
-            value: animals.filter(a => a.status === "Adotado").length,
+            value: animals.filter((a) => a.status === "Adotado").length,
             icon: FileText,
-            color: "bg-yellow-100 text-yellow-800"
+            color: "bg-yellow-100 text-yellow-800",
         },
         {
             id: 4,
-            label: "Animais aguardando adoção",
-            value: animals.filter(a => a.status === "Disponível").length,
+            label: "Disponíveis para Adoção",
+            value: animals.filter((a) => a.status === "Disponível").length,
             icon: Heart,
-            color: "bg-pink-100 text-pink-800"
+            color: "bg-pink-100 text-pink-800",
         },
         {
             id: 5,
-            label: "Cadastros este mês",
-            value: 15,
+            label: "Cadastros do Mês",
+            value: cadastrosDoMes,
             icon: Calendar,
-            color: "bg-purple-100 text-purple-800"
+            color: "bg-purple-100 text-purple-800",
         },
     ];
 
+    const alertColors = {
+        red: "border-red-500 bg-red-50 text-red-800",
+        yellow: "border-yellow-500 bg-yellow-50 text-yellow-800",
+        green: "border-green-500 bg-green-50 text-green-800",
+    };
+
     const alerts = [
         {
             id: 1,
-            message: `${animals.filter(a => a.needsVaccine).length} animais precisam de vacinação`,
-            color: "red"
+            message: `${animals.filter((a) => a.needsVaccine).length} animais precisam de vacinação`,
+            color: "red",
         },
         {
             id: 2,
-            message: `${animals.filter(a => a.needsCheckup).length} animais precisam de checkup`,
-            color: "yellow"
+            message: `${animals.filter((a) => a.needsCheckup).length} animais precisam de checkup`,
+            color: "yellow",
         },
     ];
 
-    const months = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
+    const months = [
+        "Jan",
+        "Fev",
+        "Mar",
+        "Abr",
+        "Mai",
+        "Jun",
+        "Jul",
+        "Ago",
+        "Set",
+        "Out",
+        "Nov",
+        "Dez",
+    ];
+
+    const { adoptions } = useAdoptions();
 
     const adoptionData = months.map((month, index) => {
-        const count = animals.filter(a => {
-            if (a.status !== "Adotado" || !a.adoptionDate) return false;
+        const count = adoptions.filter(a => {
+            if (!a.adoptionDate) return false;
             const adoptionMonth = new Date(a.adoptionDate).getMonth();
             return adoptionMonth === index;
         }).length;
+
         return { month, adoptions: count };
     });
 
-    const registrationData = [
-        { month: "Jan", registrations: 3 },
-        { month: "Fev", registrations: 5 },
-        { month: "Mar", registrations: 7 },
-        { month: "Abr", registrations: 4 },
-        { month: "Mai", registrations: 9 },
-        { month: "Jun", registrations: 6 },
-    ];
+    const registrationData = months.map((month, index) => {
+        const count = animals.filter(animal => {
+            if (!animal.rescueDate) return false;
+            const date = parseDate(animal.rescueDate);
+            const monthUTC = date.getUTCMonth();
+            const yearUTC = date.getUTCFullYear();
+            return monthUTC === index && yearUTC === currentYear;
+        }).length;
+
+        return { month, registrations: count };
+    });
 
     return (
-        <div className="min-h-screen p-6">
+        <div className="min-h-screen p-6 bg-gray-50">
             <motion.h1
-                initial={{ opacity: 0, y: -20 }}
+                initial={{ opacity: 0, y: -15 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6 }}
-                className="text-4xl font-extrabold text-gray-900 mb-8"
+                transition={{ duration: 0.5 }}
+                className="text-4xl font-extrabold text-gray-900 mb-10"
             >
                 Dashboard
             </motion.h1>
@@ -131,17 +197,19 @@ export default function Dashboard() {
                     return (
                         <motion.div
                             key={stat.id}
-                            initial={{ opacity: 0, y: 20 }}
+                            initial={{ opacity: 0, y: 15 }}
                             animate={{ opacity: 1, y: 0 }}
-                            transition={{ duration: 0.5, delay: stat.id * 0.1 }}
-                            className={`flex flex-col gap-3 p-5 rounded-2xl shadow-md ${stat.color} bg-opacity-90`}
+                            transition={{ delay: stat.id * 0.1 }}
+                            className={`flex flex-col gap-3 p-5 rounded-2xl shadow-md ${stat.color}`}
                         >
                             <div className="flex items-center gap-3">
                                 <div className="p-3 bg-white rounded-full flex items-center justify-center shadow">
                                     <Icon className="w-6 h-6" />
                                 </div>
                                 <div className="flex flex-col">
-                                    <span className="text-xl font-bold">{loading ? "-" : stat.value}</span>
+                  <span className="text-xl font-bold">
+                    {loading ? "..." : stat.value}
+                  </span>
                                     <span className="text-sm font-medium">{stat.label}</span>
                                 </div>
                             </div>
@@ -152,15 +220,22 @@ export default function Dashboard() {
 
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
                 <div className="p-6 bg-white shadow rounded-2xl">
-                    <h2 className="text-xl font-semibold mb-4">Adoções nos últimos meses</h2>
+                    <h2 className="text-xl font-semibold mb-4 text-gray-800">
+                        Adoções por Mês
+                    </h2>
                     <ResponsiveContainer width="100%" height={250}>
-                        {adoptionData.some(d => d.adoptions > 0) ? (
+                        {adoptionData.some((d) => d.adoptions > 0) ? (
                             <LineChart data={adoptionData}>
                                 <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                                 <XAxis dataKey="month" stroke="#6b7280" />
                                 <YAxis stroke="#6b7280" />
                                 <Tooltip />
-                                <Line type="monotone" dataKey="adoptions" stroke="#3b82f6" strokeWidth={2} />
+                                <Line
+                                    type="monotone"
+                                    dataKey="adoptions"
+                                    stroke="#3b82f6"
+                                    strokeWidth={2}
+                                />
                             </LineChart>
                         ) : (
                             <div className="flex items-center justify-center h-full text-gray-500">
@@ -171,40 +246,70 @@ export default function Dashboard() {
                 </div>
 
                 <div className="p-6 bg-white shadow rounded-2xl">
-                    <h2 className="text-xl font-semibold mb-4">Cadastros nos últimos meses</h2>
+                    <h2 className="text-xl font-semibold mb-4 text-gray-800">
+                        Cadastros nos últimos meses
+                    </h2>
                     <ResponsiveContainer width="100%" height={250}>
-                        <BarChart data={registrationData}>
-                            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
-                            <XAxis dataKey="month" stroke="#6b7280" />
-                            <YAxis stroke="#6b7280" />
-                            <Tooltip />
-                            <Bar dataKey="registrations" fill="#8b5cf6" barSize={30} />
-                        </BarChart>
+                        {registrationData.some(d => d.registrations > 0) ? (
+                            <BarChart data={registrationData}>
+                                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+                                <XAxis dataKey="month" stroke="#6b7280" />
+                                <YAxis stroke="#6b7280" />
+                                <Tooltip />
+                                <Bar dataKey="registrations" fill="#8b5cf6" barSize={30} />
+                            </BarChart>
+                        ) : (
+                            <div className="flex items-center justify-center h-full text-gray-500">
+                                Nenhum cadastro disponível
+                            </div>
+                        )}
                     </ResponsiveContainer>
                 </div>
             </div>
 
+            {/* Tabela */}
             <div className="mb-10">
-                <h2 className="text-2xl font-semibold text-gray-800 mb-4">Últimos Animais Cadastrados</h2>
+                <h2 className="text-2xl font-semibold text-gray-800 mb-4">
+                    Últimos Animais Cadastrados
+                </h2>
                 <div className="overflow-x-auto shadow-lg rounded-xl">
                     <table className="min-w-full bg-white divide-y divide-gray-200">
                         <thead className="bg-gray-50 sticky top-0">
                             <tr>
-                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nome</th>
-                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Raça</th>
-                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
-                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Vacina</th>
-                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Checkup</th>
+                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                                    Nome
+                                </th>
+                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                                    Raça
+                                </th>
+                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                                    Status
+                                </th>
+                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                                    Vacina
+                                </th>
+                                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                                    Checkup
+                                </th>
                             </tr>
                         </thead>
                         <tbody className="bg-white divide-y divide-gray-200">
                             {animals.slice(-5).map((animal) => (
-                                <tr key={animal.id} className="hover:bg-gray-50 transition-colors">
-                                    <td className="px-6 py-4 whitespace-nowrap text-gray-700 font-medium">{animal.name}</td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">{animal.breed}</td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">{animal.status}</td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">{animal.needsVaccine ? "Pendente" : "Ok"}</td>
-                                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">{animal.needsCheckup ? "Pendente" : "Ok"}</td>
+                                <tr
+                                    key={animal.id}
+                                    className="hover:bg-gray-50 transition-colors"
+                                >
+                                    <td className="px-6 py-4 text-gray-700 font-medium">
+                                        {animal.name}
+                                    </td>
+                                    <td className="px-6 py-4 text-gray-500">{animal.breed}</td>
+                                    <td className="px-6 py-4 text-gray-500">{animal.status}</td>
+                                    <td className="px-6 py-4 text-gray-500">
+                                        {animal.needsVaccine ? "Pendente" : "Ok"}
+                                    </td>
+                                    <td className="px-6 py-4 text-gray-500">
+                                        {animal.needsCheckup ? "Pendente" : "Ok"}
+                                    </td>
                                 </tr>
                             ))}
                         </tbody>
@@ -212,17 +317,23 @@ export default function Dashboard() {
                 </div>
             </div>
 
+            {/* Alertas */}
             <div>
                 <h2 className="text-2xl font-semibold text-gray-800 mb-4">Alertas</h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                    {alerts.map((alert) => (
-                        <div
+                    {alerts.map((alert, i) => (
+                        <motion.div
                             key={alert.id}
-                            className={`flex items-center p-4 rounded-xl shadow border-l-4 border-${alert.color}-500 bg-${alert.color}-50 text-${alert.color}-800`}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: i * 0.1 }}
+                            className={`flex items-center p-4 rounded-xl shadow border-l-4 ${
+                                alertColors[alert.color as keyof typeof alertColors]
+                            }`}
                         >
                             <AlertCircle className="w-6 h-6 mr-2" />
                             {alert.message}
-                        </div>
+                        </motion.div>
                     ))}
                 </div>
             </div>