diff --git a/src/components/dashboard/CalendarioAtendimentos.tsx b/src/components/dashboard/CalendarioAtendimentos.tsx
index d10c4f0..3bfb17f 100644
--- a/src/components/dashboard/CalendarioAtendimentos.tsx
+++ b/src/components/dashboard/CalendarioAtendimentos.tsx
@@ -1,70 +1,52 @@
-import React, { useEffect, useState } from 'react';
-
-interface Evento {
-  id: string;
-  data: string;
-  tipo: string;
-  descricao: string;
-}
+import React from 'react';
+import { useCalendarioAtendimentos } from '../../hooks/useCalendarioAtendimentos';
+import { CalendarIcon, UserIcon, PresentationChartBarIcon } from '@heroicons/react/24/outline';
 
 export const CalendarioAtendimentos: React.FC = () => {
-  const [eventos, setEventos] = useState<Evento[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    async function fetchEventos() {
-      try {
-        setLoading(true);
-        setError(null);
-        const res = await fetch('/api/eventos', {
-          headers: {
-
-            'Content-Type': 'application/json',
-          },
-        });
-        if (!res.ok) throw new Error('Erro ao buscar eventos');
-        const data = await res.json();
-        setEventos(data);
-      } catch (err: any) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    }
-    fetchEventos();
-  }, []);
+  const { data: eventos = [], isLoading, error } = useCalendarioAtendimentos();
 
   // Simulação de calendário mensal
   const diasMes = Array.from({ length: 30 }, (_, i) => i + 1);
   const mes = '06';
   const ano = '2024';
 
-  if (loading) return <div>Carregando calendário...</div>;
-  if (error) return <div className="text-red-600">{error}</div>;
+  if (isLoading) return <div>Carregando calendário...</div>;
+  if (error) return <div className="text-red-600">Erro ao buscar eventos</div>;
 
   return (
-    <div className="border rounded p-4 shadow">
+    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-2xl mx-auto">
+      <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-2">
+        <CalendarIcon className="h-6 w-6 text-blue-600" /> Calendário de Atendimentos e Audiências
+      </h2>
       <div className="grid grid-cols-7 gap-2 mb-4">
         {diasMes.map((dia) => {
           const dataStr = `${ano}-${mes}-${dia.toString().padStart(2, '0')}`;
           const eventosDia = eventos.filter(e => e.data === dataStr);
           return (
-            <div key={dia} className={`h-16 flex flex-col items-center justify-center border rounded ${eventosDia.length ? 'bg-blue-50' : ''}`}> 
-              <span className="font-bold text-xs">{dia}</span>
+            <div key={dia} className={`h-16 flex flex-col items-center justify-center border rounded-lg shadow-sm transition-all ${eventosDia.length ? 'bg-blue-50 dark:bg-blue-900 border-blue-400' : 'bg-gray-50 dark:bg-gray-800'}`}> 
+              <span className="font-bold text-xs text-gray-700 dark:text-gray-200">{dia}</span>
               {eventosDia.map((ev) => (
-                <span key={ev.id} className="text-[10px] text-blue-700">{ev.tipo}</span>
+                <span key={ev.id} className={`text-[10px] font-semibold flex items-center gap-1 ${ev.tipo === 'Audiência' ? 'text-red-600' : 'text-blue-700'}`}>
+                  {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-3 w-3" /> : <UserIcon className="h-3 w-3" />} {ev.tipo}
+                </span>
               ))}
             </div>
           );
         })}
       </div>
       <div>
-        <h3 className="font-semibold mb-2">Próximos eventos</h3>
-        <ul className="text-xs">
-          {eventos.map((ev) => (
-            <li key={ev.id} className="mb-1">{ev.data}: {ev.tipo} - {ev.descricao}</li>
-          ))}
+        <h3 className="font-semibold mb-2 flex items-center gap-2"><CalendarIcon className="h-5 w-5 text-blue-600" /> Próximos eventos</h3>
+        <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
+          {eventos
+            .sort((a, b) => a.data.localeCompare(b.data))
+            .map((ev) => (
+              <li key={ev.id} className="py-1 flex items-center gap-2">
+                {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-4 w-4 text-red-600" /> : <UserIcon className="h-4 w-4 text-blue-600" />}
+                <span className="font-bold">{ev.data}</span>
+                <span className="px-2 py-1 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200">{ev.tipo}</span>
+                <span className="text-gray-600 dark:text-gray-300">{ev.descricao}</span>
+              </li>
+            ))}
         </ul>
       </div>
     </div>
diff --git a/src/hooks/useCalendarioAtendimentos.ts b/src/hooks/useCalendarioAtendimentos.ts
new file mode 100644
index 0000000..d524552
--- /dev/null
+++ b/src/hooks/useCalendarioAtendimentos.ts
@@ -0,0 +1,35 @@
+import { useQuery } from 'react-query';
+import api from '../services/api';
+
+export interface EventoCalendario {
+  id: string;
+  data: string;
+  tipo: string;
+  descricao: string;
+}
+
+// Hook para buscar atendimentos e audiências do calendário
+export function useCalendarioAtendimentos() {
+  return useQuery<EventoCalendario[]>('calendarioAtendimentos', async () => {
+    // Buscar atendimentos
+    const atendimentosRes = await api.get('/atendimentos');
+    const atendimentos = atendimentosRes.data.map((a: any) => ({
+      id: a.id,
+      data: a.dataAtendimento?.slice(0, 10),
+      tipo: 'Atendimento',
+      descricao: a.titulo || 'Atendimento',
+    }));
+
+    // Buscar audiências
+    const audienciasRes = await api.get('/audiencias');
+    const audiencias = audienciasRes.data.map((a: any) => ({
+      id: a.id,
+      data: a.data?.slice(0, 10),
+      tipo: 'Audiência',
+      descricao: a.tipo || 'Audiência',
+    }));
+
+    // Junta todos eventos
+    return [...atendimentos, ...audiencias];
+  });
+}