diff --git a/src/pages/DoctorTable.jsx b/src/pages/DoctorTable.jsx
index 019f7f7..3c67b7d 100644
--- a/src/pages/DoctorTable.jsx
+++ b/src/pages/DoctorTable.jsx
@@ -2,30 +2,40 @@ import React, { useState, useEffect } from "react";
 import API_KEY from "../components/utils/apiKeys";
 import { useAuth } from "../components/utils/AuthProvider";
 import { Link } from "react-router-dom";
+import "./style/TableDoctor.css";
 
 function TableDoctor() {
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
   const [medicos, setMedicos] = useState([]);
   const [search, setSearch] = useState("");
+  const [filtroEspecialidade, setFiltroEspecialidade] = useState("Todos");
+  // REMOVIDO: const [filtroVIP, setFiltroVIP] = useState(false);
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
 
-  //   estados do modal
+  // Estados para filtros avançados
+  const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
+  const [filtroCidade, setFiltroCidade] = useState("");
+  const [filtroEstado, setFiltroEstado] = useState("");
+  const [idadeMinima, setIdadeMinima] = useState("");
+  const [idadeMaxima, setIdadeMaxima] = useState("");
+  const [dataInicial, setDataInicial] = useState("");
+  const [dataFinal, setDataFinal] = useState("");
+
+  // estados do modal
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedDoctorId, setSelectedDoctorId] = useState(null);
 
   // Função para excluir médicos
   const deleteDoctor = async (id) => {
-      
     const authHeader = getAuthorizationHeader()
     console.log(id, 'teu id')
-    
+
     var myHeaders = new Headers();
-      myHeaders.append('apikey', API_KEY);
-      myHeaders.append("Authorization", authHeader)
-    
-    
-    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
+    myHeaders.append('apikey', API_KEY);
+    myHeaders.append("Authorization", authHeader)
+
+    var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
 
     try {
       const result = await fetch(
@@ -53,90 +63,323 @@ function TableDoctor() {
     );
   };
 
-  // Buscar médicos da API
-  useEffect(() => {
+  // Função para calcular idade a partir da data de nascimento
+  const calcularIdade = (dataNascimento) => {
+    if (!dataNascimento) return 0;
+    const hoje = new Date();
+    const nascimento = new Date(dataNascimento);
+    let idade = hoje.getFullYear() - nascimento.getFullYear();
+    const mes = hoje.getMonth() - nascimento.getMonth();
 
-      const authHeader = getAuthorizationHeader()
-
-      console.log(authHeader, 'aqui autorização')
-
-    var myHeaders = new Headers();
-  myHeaders.append("apikey", API_KEY);
-  myHeaders.append("Authorization", `${authHeader}`);
-  var requestOptions = {
-    method: 'GET',
-    headers: myHeaders,
-    redirect: 'follow'
+    if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
+      idade--;
+    }
+    return idade;
   };
 
-  fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
-    .then(response => response.json())
-    .then(result => setMedicos(result))
-    .catch(error => console.log('error', error));
-  }, []);
+  // Função para limpar todos os filtros
+  const limparFiltros = () => {
+    setSearch("");
+    setFiltroEspecialidade("Todos");
+    // REMOVIDO: setFiltroVIP(false);
+    setFiltroAniversariante(false);
+    setShowFiltrosAvancados(false); // Adicionado para fechar os avançados
+    setFiltroCidade("");
+    setFiltroEstado("");
+    setIdadeMinima("");
+    setIdadeMaxima("");
+    setDataInicial("");
+    setDataFinal("");
+  };
 
-  // ✨ CORREÇÃO AQUI: Verificamos se 'medicos' é um array antes de filtrar.
-  const medicosFiltrados = Array.isArray(medicos) ? medicos.filter(
-    (medico) =>
-      `${medico.nome} ${medico.cpf} ${medico.email} ${medico.telefone}`
-        .toLowerCase()
-        .includes(search.toLowerCase()) &&
-      (filtroAniversariante ? ehAniversariante(medico.data_nascimento) : true)
-  ) : []; // Se não for um array, usamos um array vazio como fallback.
+  // Buscar médicos da API
+  useEffect(() => {
+    const authHeader = getAuthorizationHeader()
+    console.log(authHeader, 'aqui autorização')
+
+    var myHeaders = new Headers();
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Authorization", `${authHeader}`);
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
+      .then(response => response.json())
+      .then(result => setMedicos(result))
+      .catch(error => console.log('error', error));
+  }, [isAuthenticated, getAuthorizationHeader]);
+
+  // ✨ FILTRO CORRIGIDO - Baseado na estrutura real dos dados
+  const medicosFiltrados = Array.isArray(medicos) ? medicos.filter((medico) => {
+    // Filtro por nome OU CPF - usando campos reais da API
+    const buscaNome = medico.full_name?.toLowerCase().includes(search.toLowerCase());
+    const buscaCPF = medico.cpf?.toLowerCase().includes(search.toLowerCase());
+    const buscaEmail = medico.email?.toLowerCase().includes(search.toLowerCase());
+    const passaBusca = search === "" || buscaNome || buscaCPF || buscaEmail;
+
+    // Filtro por especialidade - ajustando para campo real
+    const passaEspecialidade = filtroEspecialidade === "Todos" || medico.specialty === filtroEspecialidade;
+
+    // REMOVIDO: Filtro VIP - Não é mais utilizado
+    // const passaVIP = filtroVIP ? medico.vip === true : true; 
+
+    // Filtro aniversariante
+    const passaAniversario = filtroAniversariante
+      ? ehAniversariante(medico.birth_date)
+      : true;
+
+    // Filtros avançados - ajustando para campos reais
+    const passaCidade = filtroCidade ?
+      medico.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
+
+    const passaEstado = filtroEstado ?
+      medico.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
+
+    // Filtro por idade - usando birth_date
+    const idade = calcularIdade(medico.birth_date);
+    const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
+    const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
+
+    // Filtro por data de cadastro - usando created_at ou similar
+    const passaDataInicial = dataInicial ?
+      medico.created_at && new Date(medico.created_at) >= new Date(dataInicial) : true;
+
+    const passaDataFinal = dataFinal ?
+      medico.created_at && new Date(medico.created_at) <= new Date(dataFinal) : true;
+
+    // Combinação de todos os filtros (passaVIP removido)
+    const resultado = passaBusca && passaEspecialidade && passaAniversario &&
+      passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
+      passaDataInicial && passaDataFinal;
+
+    return resultado;
+  }) : [];
+
+  // Contador de médicos filtrados
+  useEffect(() => {
+    console.log(` Médicos totais: ${medicos.length}, Filtrados: ${medicosFiltrados.length}`);
+  }, [medicos, medicosFiltrados, search]);
 
   return (
     <>
       <div className="page-heading">
         <h3>Lista de Médicos</h3>
       </div>
-      <div className="page-content">
+      <div className="page-content table-doctor-container">
         <section className="row">
           <div className="col-12">
-            <div className="card">
-              <div className="card-header d-flex justify-content-between align-items-center">
+            <div className="card table-doctor-card">
+              <div className="card-header">
                 <h4 className="card-title mb-0">Médicos Cadastrados</h4>
-               <Link to={'cadastro'}>
-                  <button
-                    className="btn btn-primary"
-                    
-                  >
+                <Link to={'cadastro'}>
+                  <button className="btn btn-primary">
                     <i className="bi bi-plus-circle"></i> Adicionar Médico
                   </button>
                 </Link>
               </div>
 
               <div className="card-body">
-                <div className="d-flex gap-2 mb-3">
-                  <input
-                    type="text"
-                    placeholder="Pesquisar médico..."
-                    value={search}
-                    onChange={(e) => setSearch(e.target.value)}
-                    className="form-control"
-                    style={{ maxWidth: "300px" }}
-                  />
+                {/* Seção de Filtros */}
+                <div className="card p-3 mb-3 table-doctor-filters">
+                  <h5 className="mb-3">
+                    <i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
+                    Filtros
+                  </h5>
 
-                  <button
-                    className={`btn ${
-                      filtroAniversariante
-                        ? "btn-primary"
-                        : "btn-outline-primary"
-                    }`}
-                    onClick={() => setFiltroAniversariante(!filtroAniversariante)}
-                  >
-                    <i className="bi bi-calendar me-1"></i> Aniversariantes
-                  </button>
+                  {/* Busca por nome OU CPF ou email */}
+                  <div className="mb-3">
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Buscar por nome ou CPF..."
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                    />
+                    <small className="text-muted">
+                      Digite o nome completo ou número do CPF
+                    </small>
+                  </div>
+
+                  {/* Filtros Básicos - LADO A LADO */}
+                  <div className="filtros-basicos">
+                    <select
+                      className="form-select filter-especialidade"
+                      value={filtroEspecialidade}
+                      onChange={(e) => setFiltroEspecialidade(e.target.value)}
+                    >
+                      <option value="Todos">Todas as Especialidades</option>
+                      <option value="Clínica Geral">Clínica médica (clínico geral)</option>
+                      <option value="Pediatria">Pediatria</option>
+                      <option value="Ginecologia">Ginecologia e obstetrícia</option>
+                      <option value="Cardiologia">Cardiologia</option>
+                      <option value="Ortopedia">Ortopedia e traumatologia</option>
+                      <option value="Oftalmologia">Oftalmologia</option>
+                      <option value="Otorrinolaringologia">Otorrinolaringologia</option>
+                      <option value="Dermatologia">Dermatologia</option>
+                      <option value="Neurologia">Neurologia</option>
+                      <option value="Psiquiatria">Psiquiatria</option>
+                      <option value="Endocrinologia">Endocrinologia</option>
+                      <option value="Gastroenterologia">Gastroenterologia</option>
+                      <option value="Urologia">Urologia</option>
+                    </select>
+
+                    <div className="filter-buttons-container">
+                      {/* REMOVIDO: Botão VIP
+                      <button
+                        className={`btn filter-btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
+                          }`}
+                        onClick={() => setFiltroVIP(!filtroVIP)}
+                      >
+                        <i className="bi bi-award me-1"></i> VIP
+                      </button> */}
+
+                      <button
+                        className={`btn filter-btn ${filtroAniversariante
+                          ? "btn-primary"
+                          : "btn-outline-primary"
+                          }`}
+                        onClick={() => setFiltroAniversariante(!filtroAniversariante)}
+                      >
+                        <i className="bi bi-calendar me-1"></i> Aniversariantes
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Botão para mostrar/ocultar filtros avançados */}
+                  <div className="d-flex justify-content-between align-items-center mt-3"> {/* Adicionado mt-3 para separar do anterior */}
+                    <button
+                      className="btn btn-link p-0 text-decoration-none"
+                      onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
+                    >
+                      <i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
+                      Filtros Avançados
+                    </button>
+
+                    <button
+                      className="btn btn-outline-secondary btn-sm"
+                      onClick={limparFiltros}
+                    >
+                      <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
+                    </button>
+                  </div>
+
+                  {/* Filtros Avançados */}
+                  {showFiltrosAvancados && (
+                    <div className="mt-3 p-3 border rounded advanced-filters">
+                      <h6 className="mb-3">Filtros Avançados</h6>
+
+                      <div className="row g-3">
+                        {/* Localização */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Cidade</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Digite a cidade..."
+                            value={filtroCidade}
+                            onChange={(e) => setFiltroCidade(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Estado</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Ex: Minas Gerais"
+                            value={filtroEstado}
+                            onChange={(e) => setFiltroEstado(e.target.value)}
+                          />
+                        </div>
+
+                        {/* Intervalo de Idade */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade mínima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 25"
+                            value={idadeMinima}
+                            onChange={(e) => setIdadeMinima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade máxima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 70"
+                            value={idadeMaxima}
+                            onChange={(e) => setIdadeMaxima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+
+                        {/* Data de Cadastro */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data inicial</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataInicial}
+                            onChange={(e) => setDataInicial(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data final</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataFinal}
+                            onChange={(e) => setDataFinal(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
 
+                {/* Informações dos filtros ativos */}
+                {(search || filtroEspecialidade !== "Todos" || filtroAniversariante || // filtroVIP removido
+                  filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
+                    <div className="alert alert-info mb-3 filters-active">
+                      <strong>Filtros ativos:</strong>
+                      <div className="mt-1">
+                        {search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
+                        {filtroEspecialidade !== "Todos" && <span className="badge bg-primary me-2">Especialidade: {filtroEspecialidade}</span>}
+                        {/* REMOVIDO: {filtroVIP && <span className="badge bg-primary me-2">VIP</span>} */}
+                        {filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
+                        {filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
+                        {filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
+                        {idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
+                        {idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
+                        {dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
+                        {dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
+                      </div>
+                    </div>
+                  )}
+
+                {/* Contador de resultados */}
+                <div className="mb-3">
+                  <span className="badge results-badge">
+                    {medicosFiltrados.length} de {medicos.length} médicos encontrados
+                  </span>
+                </div>
+
+                {/* Tabela de Médicos */}
                 <div className="table-responsive">
-                  <table className="table table-striped table-hover">
+                  <table className="table table-striped table-hover table-doctor-table">
                     <thead>
                       <tr>
                         <th>Nome</th>
                         <th>CPF</th>
+                        <th>Especialidade</th>
                         <th>Email</th>
-                        <th>Telefone</th>
-                        <th></th>
                         <th>Ações</th>
                       </tr>
                     </thead>
@@ -144,66 +387,45 @@ function TableDoctor() {
                       {medicosFiltrados.length > 0 ? (
                         medicosFiltrados.map((medico) => (
                           <tr key={medico.id}>
-                            <td>{medico.full_name}</td>
-                            <td>{medico.cpf}</td>
-                            <td>{medico.email}</td>
-                            <td>{medico.telefone}</td>
                             <td>
-                              <span
-                                className={`badge ${
-                                  medico.ativo === "ativo"
-                                    ? "bg-success"
-                                    : "bg-danger"
-                                }`}
-                              >
-                                {medico.ativo}
+                              <div className="d-flex align-items-center">
+                                {medico.full_name}
+                                {ehAniversariante(medico.birth_date) && (
+                                  <span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
+                                    <i className="bi bi-gift"></i>
+                                  </span>
+                                )}
+                                {/* REMOVIDO: Badge VIP
+                                {medico.vip && (
+                                  <span className="badge vip-badge ms-2" title="Médico VIP">
+                                    VIP
+                                  </span>
+                                )} */}
+                              </div>
+                            </td>
+                            <td>{medico.cpf}</td>
+                            <td>
+                              <span className="badge specialty-badge">
+                                {medico.specialty || 'Não informado'}
                               </span>
                             </td>
-
+                            <td>{medico.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
-                                {/* Ver Detalhes */}
                                 <Link to={`${medico.id}`}>
-                                  <button
-                                    className="btn btn-sm"
-                                    style={{
-                                      backgroundColor: "#E6F2FF",
-                                      color: "#004085",
-                                    }}
-                                    onClick={() => {
-                                    console.log('editar')
-                                      
-                                    }}
-                                  >
-                                    <i className="bi bi-eye me-1"></i> Ver
-                                    Detalhes
+                                  <button className="btn btn-sm btn-view">
+                                    <i className="bi bi-eye me-1"></i> Ver Detalhes
                                   </button>
                                 </Link>
 
-                                {/* Editar */}
                                 <Link to={`${medico.id}/edit`}>
-                                    <button
-                                      className="btn btn-sm"
-                                      style={{
-                                        backgroundColor: "#FFF3CD",
-                                        color: "#856404",
-                                      }}
-                                      onClick={() => {
-                                        
-                                        console.log('Editar')
-                                      }}
-                                    >
-                                      <i className="bi bi-pencil me-1"></i> Editar
-                                    </button>
+                                  <button className="btn btn-sm btn-edit">
+                                    <i className="bi bi-pencil me-1"></i> Editar
+                                  </button>
                                 </Link>
 
-                                
                                 <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#F8D7DA",
-                                    color: "#721C24",
-                                  }}
+                                  className="btn btn-sm btn-delete"
                                   onClick={() => {
                                     setSelectedDoctorId(medico.id);
                                     setShowDeleteModal(true);
@@ -217,7 +439,7 @@ function TableDoctor() {
                         ))
                       ) : (
                         <tr>
-                          <td colSpan="6" className="text-center">
+                          <td colSpan="5" className="empty-state">
                             Nenhum médico encontrado.
                           </td>
                         </tr>
@@ -231,10 +453,10 @@ function TableDoctor() {
         </section>
       </div>
 
-      {/* Modal de confirmação de exclusão */}
+      {/* Modal de confirmação */}
       {showDeleteModal && (
         <div
-          className="modal fade show"
+          className="modal fade show delete-modal"
           style={{
             display: "block",
             backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -246,19 +468,23 @@ function TableDoctor() {
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-              <div className="modal-header" style={{ backgroundColor: '#b91c1c' }}>
-                <h5 className="modal-title text-dark"> Confirmação de Exclusão</h5>
+              <div className="modal-header">
+                <h5 className="modal-title">
+                  Confirmação de Exclusão
+                </h5>
                 <button
                   type="button"
                   className="btn-close"
                   onClick={() => setShowDeleteModal(false)}
                 ></button>
               </div>
+
               <div className="modal-body">
-                <p className="mb-0 fs-5" style={{ color: '#111' }}>
+                <p className="mb-0 fs-5">
                   Tem certeza que deseja excluir este médico?
                 </p>
               </div>
+
               <div className="modal-footer">
                 <button
                   type="button"
@@ -267,6 +493,7 @@ function TableDoctor() {
                 >
                   Cancelar
                 </button>
+
                 <button
                   type="button"
                   className="btn btn-danger"
@@ -283,4 +510,4 @@ function TableDoctor() {
   );
 }
 
-export default TableDoctor;
+export default TableDoctor;
\ No newline at end of file
diff --git a/src/pages/TablePaciente.jsx b/src/pages/TablePaciente.jsx
index a82e63d..94caeab 100644
--- a/src/pages/TablePaciente.jsx
+++ b/src/pages/TablePaciente.jsx
@@ -2,12 +2,11 @@ import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import API_KEY from "../components/utils/apiKeys";
 import { useAuth } from "../components/utils/AuthProvider";
-
-
+import "./style/TablePaciente.css"; // Import do CSS
 
 function TablePaciente({ setCurrentPage, setPatientID }) {
-  
-  const {getAuthorizationHeader, isAuthenticated} = useAuth();
+
+  const { getAuthorizationHeader, isAuthenticated } = useAuth();
 
   const [pacientes, setPacientes] = useState([]);
   const [search, setSearch] = useState("");
@@ -15,12 +14,19 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   const [filtroVIP, setFiltroVIP] = useState(false);
   const [filtroAniversariante, setFiltroAniversariante] = useState(false);
 
-  //   estados do modal
+  // Estados para filtros avançados
+  const [showFiltrosAvancados, setShowFiltrosAvancados] = useState(false);
+  const [filtroCidade, setFiltroCidade] = useState("");
+  const [filtroEstado, setFiltroEstado] = useState("");
+  const [idadeMinima, setIdadeMinima] = useState("");
+  const [idadeMaxima, setIdadeMaxima] = useState("");
+  const [dataInicial, setDataInicial] = useState("");
+  const [dataFinal, setDataFinal] = useState("");
+
+  // estados do modal
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [selectedPatientId, setSelectedPatientId] = useState(null);
 
-  
-
   const GetAnexos = async (id) => {
     var myHeaders = new Headers();
     myHeaders.append("Authorization", "Bearer <token>");
@@ -73,15 +79,15 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
 
   // função de exclusão atualizada
   const deletePatient = async (id) => {
-    
+
     const authHeader = getAuthorizationHeader()
     console.log(id)
     var myHeaders = new Headers();
     myHeaders.append('apikey', API_KEY);
     myHeaders.append("Authorization", authHeader)
-    
-    
-    var requestOptions = { method: "DELETE", redirect: "follow", headers:myHeaders };
+
+
+    var requestOptions = { method: "DELETE", redirect: "follow", headers: myHeaders };
 
     try {
       const result = await fetch(
@@ -100,23 +106,23 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
   // Requisição inicial para buscar pacientes
   useEffect(() => {
 
-      const authHeader = getAuthorizationHeader()
+    const authHeader = getAuthorizationHeader()
 
-      console.log(authHeader, 'aqui autorização')
+    console.log(authHeader, 'aqui autorização')
 
     var myHeaders = new Headers();
-  myHeaders.append("apikey", API_KEY);
-  myHeaders.append("Authorization", `${authHeader}`);
-  var requestOptions = {
-    method: 'GET',
-    headers: myHeaders,
-    redirect: 'follow'
-  };
+    myHeaders.append("apikey", API_KEY);
+    myHeaders.append("Authorization", `${authHeader}`);
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
 
-  fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
-    .then(response => response.json())
-    .then(result => setPacientes(result))
-    .catch(error => console.log('error', error));
+    fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions)
+      .then(response => response.json())
+      .then(result => setPacientes(result))
+      .catch(error => console.log('error', error));
   }, [isAuthenticated, getAuthorizationHeader]);
 
   // Função para verificar se hoje é aniversário do paciente
@@ -131,116 +137,286 @@ function TablePaciente({ setCurrentPage, setPatientID }) {
     );
   };
 
-// ✨ CORREÇÃO AQUI: Verificamos se 'pacientes' é um array antes de filtrar.
-const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
-  const textoCompletoPaciente = `${paciente.nome} ${paciente.cpf} ${paciente.email} ${paciente.telefone}`.toLowerCase();
-  const passaBusca = textoCompletoPaciente.includes(search.toLowerCase());
-  const passaVIP = filtroVIP ? paciente.vip === true : true;
-  const passaConvenio = filtroConvenio === "Todos" || paciente.convenio === filtroConvenio;
-  const passaAniversario = filtroAniversariante
-    ? ehAniversariante(paciente.data_nascimento)
-    : true;
+  // Função para calcular idade a partir da data de nascimento
+  const calcularIdade = (dataNascimento) => {
+    if (!dataNascimento) return 0;
+    const hoje = new Date();
+    const nascimento = new Date(dataNascimento);
+    let idade = hoje.getFullYear() - nascimento.getFullYear();
+    const mes = hoje.getMonth() - nascimento.getMonth();
 
-  return passaBusca && passaVIP && passaConvenio && passaAniversario;
-}) : []; // Se não for um array, usamos um array vazio como fallback.
+    if (mes < 0 || (mes === 0 && hoje.getDate() < nascimento.getDate())) {
+      idade--;
+    }
+    return idade;
+  };
+
+  // Função para limpar todos os filtros
+  const limparFiltros = () => {
+    setSearch("");
+    setFiltroConvenio("Todos");
+    setFiltroVIP(false);
+    setFiltroAniversariante(false);
+    setFiltroCidade("");
+    setFiltroEstado("");
+    setIdadeMinima("");
+    setIdadeMaxima("");
+    setDataInicial("");
+    setDataFinal("");
+  };
+
+  //  FILTRO CORRIGIDO - Baseado na estrutura real dos dados
+  const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente) => {
+    // Filtro por nome OU CPF - usando campos reais da API
+    const buscaNome = paciente.full_name?.toLowerCase().includes(search.toLowerCase());
+    const buscaCPF = paciente.cpf?.toLowerCase().includes(search.toLowerCase());
+    const passaBusca = search === "" || buscaNome || buscaCPF;
+
+    // Filtro por convênio - ajustando para campo real
+    const passaConvenio = filtroConvenio === "Todos" || paciente.insurance_plan === filtroConvenio;
+
+    // Outros filtros
+    const passaVIP = filtroVIP ? paciente.vip === true : true;
+    const passaAniversario = filtroAniversariante
+      ? ehAniversariante(paciente.birth_date)
+      : true;
+
+    // Filtros avançados - ajustando para campos reais
+    const passaCidade = filtroCidade ?
+      paciente.city?.toLowerCase().includes(filtroCidade.toLowerCase()) : true;
+
+    const passaEstado = filtroEstado ?
+      paciente.state?.toLowerCase().includes(filtroEstado.toLowerCase()) : true;
+
+    // Filtro por idade - usando birth_date
+    const idade = calcularIdade(paciente.birth_date);
+    const passaIdadeMinima = idadeMinima ? idade >= parseInt(idadeMinima) : true;
+    const passaIdadeMaxima = idadeMaxima ? idade <= parseInt(idadeMaxima) : true;
+
+    // Filtro por data do último atendimento - usando last_appointment
+    const passaDataInicial = dataInicial ?
+      paciente.last_appointment && new Date(paciente.last_appointment) >= new Date(dataInicial) : true;
+
+    const passaDataFinal = dataFinal ?
+      paciente.last_appointment && new Date(paciente.last_appointment) <= new Date(dataFinal) : true;
+
+    // Combinação: (Nome OU CPF) E Convênio E outros filtros
+    const resultado = passaBusca && passaConvenio && passaVIP && passaAniversario &&
+      passaCidade && passaEstado && passaIdadeMinima && passaIdadeMaxima &&
+      passaDataInicial && passaDataFinal;
+
+    return resultado;
+  }) : [];
+
+  // Contador de pacientes filtrados
+  useEffect(() => {
+    console.log(`📈 Pacientes totais: ${pacientes.length}, Filtrados: ${pacientesFiltrados.length}`);
+  }, [pacientes, pacientesFiltrados, search]);
 
- 
   return (
     <>
       <div className="page-heading">
         <h3>Lista de Pacientes</h3>
       </div>
-      <div className="page-content">
+      <div className="page-content table-paciente-container">
         <section className="row">
           <div className="col-12">
-            <div className="card">
-              <div className="card-header d-flex justify-content-between align-items-center">
+            <div className="card table-paciente-card">
+              <div className="card-header">
                 <h4 className="card-title mb-0">Pacientes Cadastrados</h4>
                 <Link to={'cadastro'}>
-                  <button
-                    className="btn btn-primary"
-                  >
+                  <button className="btn btn-primary">
                     <i className="bi bi-plus-circle"></i> Adicionar Paciente
                   </button>
                 </Link>
               </div>
 
               <div className="card-body">
-                <div className="card p-3 mb-3">
+                {/* Seção de Filtros */}
+                <div className="card p-3 mb-3 table-paciente-filters">
                   <h5 className="mb-3">
                     <i className="bi bi-funnel-fill me-2 text-primary"></i>{" "}
                     Filtros
                   </h5>
 
-                  <div
-                    className="d-flex flex-nowrap align-items-center gap-2"
-                    style={{ overflowX: "auto", paddingBottom: "6px" }}
-                  >
+                  {/* Busca por nome ou CPF */}
+                  <div className="mb-3">
                     <input
                       type="text"
                       className="form-control"
-                      placeholder="Buscar por nome..."
+                      placeholder="Buscar por nome ou CPF..."
                       value={search}
                       onChange={(e) => setSearch(e.target.value)}
-                      style={{
-                        minWidth: 250,
-                        maxWidth: 300,
-                        width: 260,
-                        flex: "0 0 auto",
-                      }}
                     />
+                    <small className="text-muted">
+                      Digite o nome completo ou número do CPF
+                    </small>
+                  </div>
 
+                  {/* Filtros Básicos */}
+                  <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
                     <select
-                      className="form-select"
+                      className="form-select compact-select"
                       value={filtroConvenio}
                       onChange={(e) => setFiltroConvenio(e.target.value)}
-                      style={{
-                        minWidth: 200,
-                        width: 180,
-                        flex: "0 0 auto",
-                      }}
+                      style={{ minWidth: "150px", maxWidth: "200px" }} // Diminuído
                     >
-                      <option>Todos os Convênios</option>
-                      <option>Bradesco Saúde</option>
-                      <option>Hapvida</option>
-                      <option>Unimed</option>
+                      <option value="Todos">Todos os Convênios</option>
+                      <option value="Bradesco Saúde">Bradesco Saúde</option>
+                      <option value="Hapvida">Hapvida</option>
+                      <option value="Unimed">Unimed</option>
                     </select>
 
                     <button
-                      className={`btn ${
-                        filtroVIP ? "btn-primary" : "btn-outline-primary"
-                      }`}
+                      className={`btn btn-sm ${filtroVIP ? "btn-primary" : "btn-outline-primary"}`} // Adicionado btn-sm
                       onClick={() => setFiltroVIP(!filtroVIP)}
-                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
+                      style={{ padding: "0.25rem 0.5rem" }} // Padding reduzido
                     >
                       <i className="bi bi-award me-1"></i> VIP
                     </button>
 
                     <button
-                      className={`btn ${
-                        filtroAniversariante
-                          ? "btn-primary"
-                          : "btn-outline-primary"
-                      }`}
-                      onClick={() =>
-                        setFiltroAniversariante(!filtroAniversariante)
-                      }
-                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
+                      className={`btn btn-sm ${filtroAniversariante ? "btn-primary" : "btn-outline-primary"
+                        }`} // Adicionado btn-sm
+                      onClick={() => setFiltroAniversariante(!filtroAniversariante)}
+                      style={{ padding: "0.25rem 0.5rem" }} // Padding reduzido
                     >
                       <i className="bi bi-calendar me-1"></i> Aniversariantes
                     </button>
                   </div>
+
+                  {/* Botão para mostrar/ocultar filtros avançados */}
+                  <div className="d-flex justify-content-between align-items-center">
+                    <button
+                      className="btn btn-link p-0 text-decoration-none"
+                      onClick={() => setShowFiltrosAvancados(!showFiltrosAvancados)}
+                    >
+                      <i className={`bi bi-chevron-${showFiltrosAvancados ? 'up' : 'down'} me-1`}></i>
+                      Filtros Avançados
+                    </button>
+
+                    <button
+                      className="btn btn-outline-secondary btn-sm"
+                      onClick={limparFiltros}
+                    >
+                      <i className="bi bi-arrow-clockwise me-1"></i> Limpar Filtros
+                    </button>
+                  </div>
+
+                  {/* Filtros Avançados */}
+                  {showFiltrosAvancados && (
+                    <div className="mt-3 p-3 border rounded advanced-filters">
+                      <h6 className="mb-3">Filtros Avançados</h6>
+
+                      <div className="row g-3">
+                        {/* Localização */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Cidade</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Digite a cidade..."
+                            value={filtroCidade}
+                            onChange={(e) => setFiltroCidade(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Estado</label>
+                          <input
+                            type="text"
+                            className="form-control"
+                            placeholder="Ex: Minas Gerais"
+                            value={filtroEstado}
+                            onChange={(e) => setFiltroEstado(e.target.value)}
+                          />
+                        </div>
+
+                        {/* Intervalo de Idade */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade mínima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 18"
+                            value={idadeMinima}
+                            onChange={(e) => setIdadeMinima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Idade máxima</label>
+                          <input
+                            type="number"
+                            className="form-control"
+                            placeholder="Ex: 65"
+                            value={idadeMaxima}
+                            onChange={(e) => setIdadeMaxima(e.target.value)}
+                            min="0"
+                            max="150"
+                          />
+                        </div>
+
+                        {/* Data do Último Atendimento */}
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data inicial</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataInicial}
+                            onChange={(e) => setDataInicial(e.target.value)}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <label className="form-label fw-bold">Data final</label>
+                          <input
+                            type="date"
+                            className="form-control"
+                            value={dataFinal}
+                            onChange={(e) => setDataFinal(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
 
+                {/* Informações dos filtros ativos */}
+                {(search || filtroConvenio !== "Todos" || filtroVIP || filtroAniversariante ||
+                  filtroCidade || filtroEstado || idadeMinima || idadeMaxima || dataInicial || dataFinal) && (
+                    <div className="alert alert-info mb-3 filters-active">
+                      <strong>Filtros ativos:</strong>
+                      <div className="mt-1">
+                        {search && <span className="badge bg-primary me-2">Busca: "{search}"</span>}
+                        {filtroConvenio !== "Todos" && <span className="badge bg-primary me-2">Convênio: {filtroConvenio}</span>}
+                        {filtroVIP && <span className="badge bg-primary me-2">VIP</span>}
+                        {filtroAniversariante && <span className="badge bg-primary me-2">Aniversariantes</span>}
+                        {filtroCidade && <span className="badge bg-primary me-2">Cidade: {filtroCidade}</span>}
+                        {filtroEstado && <span className="badge bg-primary me-2">Estado: {filtroEstado}</span>}
+                        {idadeMinima && <span className="badge bg-primary me-2">Idade mín: {idadeMinima}</span>}
+                        {idadeMaxima && <span className="badge bg-primary me-2">Idade máx: {idadeMaxima}</span>}
+                        {dataInicial && <span className="badge bg-primary me-2">Data inicial: {dataInicial}</span>}
+                        {dataFinal && <span className="badge bg-primary me-2">Data final: {dataFinal}</span>}
+                      </div>
+                    </div>
+                  )}
+
+                {/* Contador de resultados */}
+                <div className="mb-3">
+                  <span className="badge results-badge">
+                    {pacientesFiltrados.length} de {pacientes.length} pacientes encontrados
+                  </span>
+                </div>
+
+                {/* Tabela de Pacientes */}
                 <div className="table-responsive">
-                  <table className="table table-striped table-hover">
+                  <table className="table table-striped table-hover table-paciente-table">
                     <thead>
                       <tr>
                         <th>Nome</th>
                         <th>CPF</th>
+                        <th>Convênio</th>
                         <th>Email</th>
-                        <th>Telefone</th>
-                        <th></th>
                         <th>Ações</th>
                       </tr>
                     </thead>
@@ -248,62 +424,46 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
                       {pacientesFiltrados.length > 0 ? (
                         pacientesFiltrados.map((paciente) => (
                           <tr key={paciente.id}>
-                            <td>{paciente.full_name}</td>
-                            <td>{paciente.cpf}</td>
-                            <td>{paciente.email}</td>
-                            <td>{paciente.telefone}</td>
                             <td>
-                              <span
-                                className={`badge ${
-                                  paciente.ativo === "ativo"
-                                    ? "bg-success"
-                                    : "bg-danger"
-                                }`}
-                              >
-                                {paciente.ativo}
+                              <div className="d-flex align-items-center patient-name-container">
+                                {paciente.full_name}
+                                <div className="d-flex patient-badges">
+                                  {ehAniversariante(paciente.birth_date) && (
+                                    <span className="badge anniversary-badge ms-2" title="Aniversariante do dia">
+                                      <i className="bi bi-gift"></i>
+                                    </span>
+                                  )}
+                                  {paciente.vip && (
+                                    <span className="badge vip-badge ms-2" title="Paciente VIP">
+                                      VIP
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </td>
+                            <td>{paciente.cpf}</td>
+                            <td>
+                              <span className="badge insurance-badge">
+                                {paciente.insurance_plan || 'Não informado'}
                               </span>
                             </td>
+                            <td>{paciente.email || 'Não informado'}</td>
                             <td>
                               <div className="d-flex gap-2">
                                 <Link to={`${paciente.id}`}>
-                                  <button
-                                    className="btn btn-sm"
-                                    style={{
-                                      backgroundColor: "#E6F2FF",
-                                      color: "#004085",
-                                    }}
-                                    onClick={() => {
-                                      
-                                      console.log(paciente.id);
-                                    }}
-                                  >
+                                  <button className="btn btn-sm btn-view">
                                     <i className="bi bi-eye me-1"></i> Ver Detalhes
                                   </button>
                                 </Link>
 
                                 <Link to={`${paciente.id}/edit`}>
-                                  <button
-                                    className="btn btn-sm"
-                                    style={{
-                                      backgroundColor: "#FFF3CD",
-                                      color: "#856404",
-                                    }}
-                                    onClick={() => {console.log(paciente.id)
-                                      
-                                      
-                                    }}
-                                  >
+                                  <button className="btn btn-sm btn-edit">
                                     <i className="bi bi-pencil me-1"></i> Editar
                                   </button>
                                 </Link>
 
-                                {/* Botão que abre o modal */}
                                 <button
-                                  className="btn btn-sm"
-                                  style={{
-                                    backgroundColor: "#F8D7DA",
-                                    color: "#721C24",
-                                  }}
+                                  className="btn btn-sm btn-delete"
                                   onClick={() => {
                                     setSelectedPatientId(paciente.id);
                                     setShowDeleteModal(true);
@@ -317,7 +477,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
                         ))
                       ) : (
                         <tr>
-                          <td colSpan="8" className="text-center">
+                          <td colSpan="5" className="empty-state">
                             Nenhum paciente encontrado.
                           </td>
                         </tr>
@@ -334,7 +494,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
       {/* Modal de confirmação */}
       {showDeleteModal && (
         <div
-          className="modal fade show"
+          className="modal fade show delete-modal"
           style={{
             display: "block",
             backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -346,9 +506,8 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
         >
           <div className="modal-dialog modal-dialog-centered">
             <div className="modal-content">
-            
-              <div className="modal-header bg-danger bg-opacity-25">
-                <h5 className="modal-title text-danger">
+              <div className="modal-header">
+                <h5 className="modal-title">
                   Confirmação de Exclusão
                 </h5>
                 <button
@@ -360,12 +519,11 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
 
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                  Tem certeza que deseja excluir este paciente? 
+                  Tem certeza que deseja excluir este paciente?
                 </p>
               </div>
 
               <div className="modal-footer">
-              
                 <button
                   type="button"
                   className="btn btn-primary"
@@ -374,7 +532,6 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
                   Cancelar
                 </button>
 
-              
                 <button
                   type="button"
                   className="btn btn-danger"
@@ -391,4 +548,4 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente
   );
 }
 
-export default TablePaciente;
+export default TablePaciente;
\ No newline at end of file
diff --git a/src/pages/style/TableDoctor.css b/src/pages/style/TableDoctor.css
new file mode 100644
index 0000000..d7886c3
--- /dev/null
+++ b/src/pages/style/TableDoctor.css
@@ -0,0 +1,237 @@
+/* TableDoctor.css */
+.table-doctor-container {
+  line-height: 2.5;
+}
+
+.table-doctor-card {
+  border: none;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.table-doctor-card .card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.25rem;
+}
+
+.table-doctor-filters {
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+}
+
+.table-doctor-filters h5 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.table-doctor-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-doctor-table th {
+  background-color: #f8f9fa;
+  color: #495057;
+  font-weight: 600;
+  padding: 15px 8px;
+  border-bottom: 2px solid #dee2e6;
+  vertical-align: middle;
+}
+
+.table-doctor-table td {
+  padding: 15px 8px;
+  vertical-align: middle;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table-doctor-table tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.025);
+}
+
+/* Badges */
+.specialty-badge {
+  background-color: #1e3a8a !important;
+  color: white !important;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 500;
+}
+
+/* REMOVIDO: .vip-badge */
+
+.results-badge {
+  background-color: #1e3a8a;
+  color: white;
+  padding: 0.5em 0.75em;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.anniversary-badge {
+  background-color: #ffc107;
+  color: #000;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+}
+
+/* Botões de ação */
+.btn-view {
+  background-color: #E6F2FF !important;
+  color: #004085 !important;
+  border: 1px solid #B8D4F0;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-view:hover {
+  background-color: #D1E7FF !important;
+  border-color: #9EC5FE;
+}
+
+.btn-edit {
+  background-color: #FFF3CD !important;
+  color: #856404 !important;
+  border: 1px solid #FFEAA7;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-edit:hover {
+  background-color: #FFEEBA !important;
+  border-color: #FFE087;
+}
+
+.btn-delete {
+  background-color: #F8D7DA !important;
+  color: #721C24 !important;
+  border: 1px solid #F5C6CB;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-delete:hover {
+  background-color: #F1B0B7 !important;
+  border-color: #ED969E;
+}
+
+/* Filtros avançados */
+.advanced-filters {
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  background-color: white;
+}
+
+.advanced-filters h6 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.form-label.fw-bold {
+  color: #495057;
+  font-size: 0.875rem;
+}
+
+/* Modal */
+.delete-modal .modal-header {
+  background-color: rgba(220, 53, 69, 0.1);
+  border-bottom: 1px solid rgba(220, 53, 69, 0.2);
+}
+
+.delete-modal .modal-title {
+  color: #dc3545;
+  font-weight: 600;
+}
+
+/* Controles de tamanho para filtros */
+.filter-especialidade {
+  min-width: 180px !important;
+  max-width: 200px;
+}
+
+.filter-buttons-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.filter-btn {
+  white-space: nowrap;
+  padding: 0.375rem 0.75rem;
+}
+
+/* Ajustes específicos para os filtros básicos */
+.filtros-basicos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+  .table-doctor-table {
+    font-size: 0.875rem;
+  }
+
+  .table-doctor-table th,
+  .table-doctor-table td {
+    padding: 10px 6px;
+  }
+
+  .btn-view,
+  .btn-edit,
+  .btn-delete {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .filtros-basicos {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .filter-especialidade {
+    min-width: 100% !important;
+    max-width: 100%;
+  }
+
+  .filter-buttons-container {
+    justify-content: stretch;
+  }
+
+  .filter-btn {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+/* Estados vazios */
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+}
+
+.empty-state td {
+  border-bottom: none;
+  padding: 2rem !important;
+}
+
+/* Alertas de filtros ativos */
+.filters-active .badge {
+  font-size: 0.75em;
+  padding: 0.4em 0.65em;
+}
+
+/* Animações suaves */
+.table-doctor-table tbody tr {
+  transition: background-color 0.15s ease-in-out;
+}
+
+.btn-view,
+.btn-edit,
+.btn-delete {
+  transition: all 0.15s ease-in-out;
+}
\ No newline at end of file
diff --git a/src/pages/style/TablePaciente.css b/src/pages/style/TablePaciente.css
new file mode 100644
index 0000000..4ae5c15
--- /dev/null
+++ b/src/pages/style/TablePaciente.css
@@ -0,0 +1,237 @@
+/* TablePaciente.css */
+.table-paciente-container {
+  line-height: 2.5;
+}
+
+.table-paciente-card {
+  border: none;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.table-paciente-card .card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.25rem;
+}
+
+.table-paciente-filters {
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+}
+
+.table-paciente-filters h5 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.table-paciente-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-paciente-table th {
+  background-color: #f8f9fa;
+  color: #495057;
+  font-weight: 600;
+  padding: 15px 8px;
+  border-bottom: 2px solid #dee2e6;
+  vertical-align: middle;
+}
+
+.table-paciente-table td {
+  padding: 15px 8px;
+  vertical-align: middle;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table-paciente-table tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.025);
+}
+
+/* Badges */
+.insurance-badge {
+  background-color: #6c757d !important;
+  color: white !important;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 500;
+}
+
+.vip-badge {
+  background-color: #1e3a8a !important;
+  color: white !important;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: 500;
+}
+
+.results-badge {
+  background-color: #1e3a8a;
+  color: white;
+  padding: 0.5em 0.75em;
+  font-size: 0.875em;
+  font-weight: 500;
+}
+
+.anniversary-badge {
+  background-color: #ffc107;
+  color: #000;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+}
+
+/* Botões de ação */
+.btn-view {
+  background-color: #E6F2FF !important;
+  color: #004085 !important;
+  border: 1px solid #B8D4F0;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-view:hover {
+  background-color: #D1E7FF !important;
+  border-color: #9EC5FE;
+}
+
+.btn-edit {
+  background-color: #FFF3CD !important;
+  color: #856404 !important;
+  border: 1px solid #FFEAA7;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-edit:hover {
+  background-color: #FFEEBA !important;
+  border-color: #FFE087;
+}
+
+.btn-delete {
+  background-color: #F8D7DA !important;
+  color: #721C24 !important;
+  border: 1px solid #F5C6CB;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-delete:hover {
+  background-color: #F1B0B7 !important;
+  border-color: #ED969E;
+}
+
+/* Filtros avançados */
+.advanced-filters {
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  background-color: white;
+}
+
+.advanced-filters h6 {
+  color: #495057;
+  font-weight: 600;
+}
+
+.form-label.fw-bold {
+  color: #495057;
+  font-size: 0.875rem;
+}
+
+/* Modal */
+.delete-modal .modal-header {
+  background-color: rgba(220, 53, 69, 0.1);
+  border-bottom: 1px solid rgba(220, 53, 69, 0.2);
+}
+
+.delete-modal .modal-title {
+  color: #dc3545;
+  font-weight: 600;
+}
+
+/* Estados vazios */
+.empty-state {
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+}
+
+.empty-state td {
+  border-bottom: none;
+  padding: 2rem !important;
+}
+
+/* Alertas de filtros ativos */
+.filters-active .badge {
+  font-size: 0.75em;
+  padding: 0.4em 0.65em;
+}
+
+/* Animações suaves */
+.table-paciente-table tbody tr {
+  transition: background-color 0.15s ease-in-out;
+}
+
+.btn-view,
+.btn-edit,
+.btn-delete {
+  transition: all 0.15s ease-in-out;
+}
+
+/* Responsividade */
+@media (max-width: 768px) {
+  .table-paciente-table {
+    font-size: 0.875rem;
+  }
+  
+  .table-paciente-table th,
+  .table-paciente-table td {
+    padding: 10px 6px;
+  }
+  
+  .btn-view,
+  .btn-edit,
+  .btn-delete {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  
+  .table-paciente-filters .d-flex {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .table-paciente-filters .form-select {
+    min-width: 100% !important;
+  }
+  
+  .patient-name-container {
+    flex-direction: column;
+    align-items: flex-start !important;
+    gap: 0.25rem;
+  }
+  
+  .patient-badges {
+    margin-left: 0 !important;
+  }
+}/* Estilos para componentes compactos */
+.compact-select {
+  font-size: 1.0rem;
+  padding: 0.45rem 0.5rem;
+}
+
+.compact-select option {
+  font-size: 0.875rem;
+}
+
+/* Ajuste adicional para os botões de filtro */
+.table-paciente-filters .btn-sm {
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+/* Garantir que os botões fiquem alinhados */
+.table-paciente-filters .d-flex {
+  align-items: center;
+  gap: 8px;
+}
\ No newline at end of file