diff --git a/src/App.js b/src/App.js
index 8d5862b..2afc1a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import Sidebar from './components/Sidebar';
 //import Header from './components/Header';
-import TablePaciente from "./pages/TablePaciente"; 
+import TablePaciente from "./pages/Table"; 
 
 import Inicio from './pages/Inicio';
 import PatientCadastroManager from './pages/PatientCadastroManager';
diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx
index b008dc0..cbecf75 100644
--- a/src/pages/Agendamento.jsx
+++ b/src/pages/Agendamento.jsx
@@ -1,215 +1,223 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
 import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
 import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
 import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
-import { useState} from 'react';
+
 import dayjs from 'dayjs'
 import "./style/Agendamento.css";
+import './style/FilaEspera.css';
 
 const Agendamento = () => {
 
   const [FiladeEspera, setFiladeEspera] = useState(false)
   const [tabela, setTabela] = useState('diario')
   const [PageNovaConsulta, setPageConsulta] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('') // 🔹 Estado da busca
 
+  // 🔹 Dados da fila de espera
+  const filaEsperaData = [
+    { nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
+    { nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
+    { nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' },
+    { nome: 'João Souza', email: 'joao.souza@gmail.com', cpf: '987.654.321-00', telefone: '(79) 98888-2222', entrada: '25/09/2025 às 14:00' },
+    { nome: 'Maria Silva', email: 'maria.silva@gmail.com', cpf: '123.456.789-00', telefone: '(79) 99999-1111', entrada: '25/09/2025 às 14:30' },
+    { nome: 'Fernanda Lima', email: 'fernanda.lima@gmail.com', cpf: '888.999.000-22', telefone: '(79) 98877-6655', entrada: '26/09/2025 às 09:30' },
+    { nome: 'Carlos Andrade', email: 'carlos.andrade@gmail.com', cpf: '222.555.888-11', telefone: '(79) 99876-5432', entrada: '26/09/2025 às 10:00' },
+    { nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
+  ];
 
-  
-    const ListarDiasdoMes = (ano, mes) => {
-      let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
+  // 🔹 Filtra a fila de espera com base no searchTerm
+  const filteredFila = filaEsperaData.filter(item =>
+    item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    item.cpf.includes(searchTerm) ||
+    item.telefone.includes(searchTerm)
+  );
 
-      
-      const base = dayjs(`${ano}-${mes}-01`)
-  
-      const DiasnoMes= base.daysInMonth()
-      for(let d = 1; d <= DiasnoMes; d++){
-        
-        const data = dayjs(`${ano}-${mes}-${d}`)
-  
-        const dia = data.format('dddd')
-  
-        switch(dia){
-          case'Monday':
-          segundas.push(d)
-          break
-          
-          case'Tuesday':
-          tercas.push(d)
-          break
-          
-          case'Wednesday':
-          quartas.push(d)
-          break
-  
-          case'Thursday':
-          quintas.push(d)
-          break
-  
-          case'Friday':
-          sextas.push(d)
-          break
-          default:
-          break
-        }}
+  const ListarDiasdoMes = (ano, mes) => {
+    let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []
 
-        let ListaDiasDatas = [segundas,tercas, quartas, quintas,sextas]
-        console.log('dentro da função', ListaDiasDatas)
-      
-      return ListaDiasDatas
+    const base = dayjs(`${ano}-${mes}-01`)
+    const DiasnoMes = base.daysInMonth()
+
+    for (let d = 1; d <= DiasnoMes; d++) {
+      const data = dayjs(`${ano}-${mes}-${d}`)
+      const dia = data.format('dddd')
+
+      switch (dia) {
+        case 'Monday': segundas.push(d); break
+        case 'Tuesday': tercas.push(d); break
+        case 'Wednesday': quartas.push(d); break
+        case 'Thursday': quintas.push(d); break
+        case 'Friday': sextas.push(d); break
+        default: break
       }
+    }
 
+    let ListaDiasDatas = [segundas, tercas, quartas, quintas, sextas]
+    return ListaDiasDatas
+  }
 
   const handleClickAgendamento = (agendamento) => {
-  
-    if(agendamento.status !== 'vazio')return
-
-    else{
-      setPageConsulta(true)
-    }
+    if (agendamento.status !== 'vazio') return
+    else setPageConsulta(true)
   }
 
-  const handleClickCancel = () => {
-    setPageConsulta(false)
-  }
+  const handleClickCancel = () => setPageConsulta(false)
 
+  return (
+    <div>
+      <h1>Agendar nova consulta</h1>
 
+      {!PageNovaConsulta ? (
 
-  return(
-  <div>
-    <h1>Agendar nova consulta</h1>
+        <div className='atendimento-eprocura'>
 
+          {/* 🔍 Busca e filtro */}
+          <div className='busca-atendimento'>
+            <div>
+              <i className="fa-solid fa-calendar-day"></i>
+              <input type="text" placeholder="Buscar atendimento" />
+            </div>
 
-  {!PageNovaConsulta? (
-    
-    <div className='atendimento-eprocura'>
-
-      <div className='busca-atendimento'>
-        <div className="">
-          <i className="fa-solid fa-calendar-day"></i>
-          <input type="text" placeholder="Buscar atendimento" />
-        </div>
-
-        <div>
-          <select>
-            <option value="" disabled selected>Agendar</option>
-            <option value="">Atendimento</option>
-            <option value="">Sessões</option>
-            <option value="">Urgência</option>
-          </select>
-        </div>
-      </div>
-      
-
-      <div className='unidade-selecionarprofissional'>
-        <select>
-          <option value="" disabled selected >Unidade</option>
-          <option value="">Unidade Central</option>
-          <option value="">Unidade Zona Norte</option>
-          <option value="">Unidade Zona Oeste</option>
-        </select>
-
-        <input type="text" placeholder='Selecionar profissional' />
-      </div>
-
-    <div className='container-btns-agenda-fila_esepera'>
-      <button className={`btn-agenda ${ FiladeEspera === false ? "opc-agenda-ativo": "" }`} onClick={ () => setFiladeEspera(false)}>Agenda</button>
-      <button className={`btn-fila-espera ${ FiladeEspera === true ? "opc-filaespera-ativo": "" }`} onClick={ () => setFiladeEspera(true)}>Fila de espera</button>
-    </div>
-
-    <section className='calendario-ou-filaespera'>
-    {FiladeEspera ===false ? 
- 
-    <div className='calendario'>
-      
-      
-      
-      <div>
-        <section className='btns-e-legenda-container'>
-       
-        <div>
-          <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
-          
-          onClick={() => setTabela("diario")}>
-            <i className="fa-solid fa-calendar-day"></i>
-            Dia
-          </button>
-          <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
-            <i className="fa-solid fa-calendar-day"></i>
-            Semana
-          </button>
-          <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
-            <i className="fa-solid fa-calendar-day"></i>
-            Mês
-          </button>
-        </div>
-
-         <div className='legenda-tabela'>
-          <div className='legenda-item-realizado'>
-     
-            <span>Realizado</span>
+            <div>
+              <select>
+                <option value="" disabled selected>Agendar</option>
+                <option value="">Atendimento</option>
+                <option value="">Sessões</option>
+                <option value="">Urgência</option>
+              </select>
+            </div>
           </div>
-          <div className='legenda-item-confirmado'>
-            <span>Confirmado</span>
+
+          {/* 🏥 Unidade e profissional */}
+          <div className='unidade-selecionarprofissional'>
+            <select>
+              <option value="" disabled selected >Unidade</option>
+              <option value="">Unidade Central</option>
+              <option value="">Unidade Zona Norte</option>
+              <option value="">Unidade Zona Oeste</option>
+            </select>
+
+            <input type="text" placeholder='Selecionar profissional' />
           </div>
-          <div className='legenda-item-agendado'>
-            
-            <span>Agendado</span>
+
+          {/* Botões para alternar Agenda / Fila de Espera */}
+          <div className='container-btns-agenda-fila_esepera'>
+            <button
+              className={`btn-agenda ${FiladeEspera === false ? "opc-agenda-ativo" : ""}`}
+              onClick={() => setFiladeEspera(false)}
+            >
+              Agenda
+            </button>
+
+            <button
+              className={`btn-fila-espera ${FiladeEspera === true ? "opc-filaespera-ativo" : ""}`}
+              onClick={() => setFiladeEspera(true)}
+            >
+              Fila de espera
+            </button>
           </div>
-          <div className='legenda-item-cancelado'>
-            <span>Cancelado</span>
-          </div>
-        </div>
-         
-        </section>
 
-       
-      
+          <section className='calendario-ou-filaespera'>
+            {FiladeEspera === false ?
+              (
+                <div className='calendario'>
+                  <div>
+                    <section className='btns-e-legenda-container'>
+                      <div>
+                        <button
+                          className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
+                          onClick={() => setTabela("diario")}
+                        >
+                          <i className="fa-solid fa-calendar-day"></i>
+                          Dia
+                        </button>
 
+                        <button
+                          className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo' : ""}`}
+                          onClick={() => setTabela("semanal")}
+                        >
+                          <i className="fa-solid fa-calendar-day"></i>
+                          Semana
+                        </button>
 
-        {tabela === "diario" && (
-          <TabelaAgendamentoDia
-            handleClickAgendamento={handleClickAgendamento}
-            
-          />
-        )}
+                        <button
+                          className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo' : ''}`}
+                          onClick={() => setTabela("mensal")}
+                        >
+                          <i className="fa-solid fa-calendar-day"></i>
+                          Mês
+                        </button>
+                      </div>
 
-        {tabela === 'semanal' && 
-          <TabelaAgendamentoSemana/>
-        }
+                      <div className='legenda-tabela'>
+                        <div className='legenda-item-realizado'><span>Realizado</span></div>
+                        <div className='legenda-item-confirmado'><span>Confirmado</span></div>
+                        <div className='legenda-item-agendado'><span>Agendado</span></div>
+                        <div className='legenda-item-cancelado'><span>Cancelado</span></div>
+                      </div>
 
-        {tabela === 'mensal' && (
-          <TabelaAgendamentoMes 
-            ListarDiasdoMes={ListarDiasdoMes}
-            aplicarCores={true}   // 🔹 Ativa a lógica de cores só no mensal
-          />
-        )}
+                    </section>
 
-      </div>
-       </div>: 
-       
-       <div> 
-        <div className='container-fila-espera'></div>
+                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} />}
+                    {tabela === 'semanal' && <TabelaAgendamentoSemana />}
+                    {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} />}
+                  </div>
+                </div>
+              )
+              :
+              (
+                <div className="fila-container">
+                <div className="fila-header">
+  <input
+    type="text"
+    placeholder="Pesquisar..."
+    className="busca-fila-espera"
+    value={searchTerm}
+    onChange={(e) => setSearchTerm(e.target.value)}
+  />
 
-       </div>
-       
-       }
-    </section>
-    </div>
-  ) : (
-
-    <FormNovaConsulta onCancel={handleClickCancel} />
-
-
-  )}
+  <h2 className="fila-titulo">Fila de Espera</h2>
 </div>
-  
-  
-  
-  
-  
+
+
+
+                  <table className="fila-tabela">
+                    <thead>
+                      <tr>
+                        <th>Nome</th>
+                        <th>Email</th>
+                        <th>CPF</th>
+                        <th>Telefone</th>
+                        <th>Entrou na fila de espera</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {filteredFila.map((item, index) => (
+                        <tr key={index}>
+                          <td>{item.nome}</td>
+                          <td>{item.email}</td>
+                          <td>{item.cpf}</td>
+                          <td>{item.telefone}</td>
+                          <td>{item.entrada}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )
+            }
+          </section>
+        </div>
+
+      ) : (
+        <FormNovaConsulta onCancel={handleClickCancel} />
+      )}
+    </div>
   )
 }
 
-
-export default Agendamento
+export default Agendamento
\ No newline at end of file
diff --git a/src/pages/style/FilaEspera.css b/src/pages/style/FilaEspera.css
new file mode 100644
index 0000000..3cdc41a
--- /dev/null
+++ b/src/pages/style/FilaEspera.css
@@ -0,0 +1,288 @@
+/* Zera margens padrão da página */
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+/* ----- filtros e botões ----- */
+.filtros-container select,
+.filtros-container input {
+  padding: 0.5rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.btn-buscar {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  border: none;
+  border-radius: 5px;
+  background-color: #f0f0f0;
+  cursor: pointer;
+}
+
+/* ----- unidade/profissional ----- */
+.unidade-selecionarprofissional {
+  background-color: #fdfdfdde;
+  padding: 20px 10px;
+  display: flex;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.unidade-selecionarprofissional input,
+.unidade-selecionarprofissional select {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 20%;
+}
+
+.unidade-selecionarprofissional select {
+  width: 7%;
+}
+
+/* ----- busca atendimento ----- */
+.busca-atendimento {
+  display: flex;
+  flex-direction: row;
+  margin: 10px;
+  justify-content: flex-end;
+}
+
+.busca-atendimento select {
+  padding: 5px;
+  border-radius: 8px;
+  margin-left: 15px;
+  background-color: #0078d7;
+  color: white;
+  font-weight: bold;
+}
+
+.busca-atendimento input {
+  margin-left: 8px;
+  border-radius: 8px;
+  padding: 5px;
+  width: 100%;
+}
+
+/* ----- botões de seleção ----- */
+.btn-selecionar-tabeladia,
+.btn-selecionar-tabelasemana,
+.btn-selecionar-tabelames {
+  background-color: rgba(231, 231, 231, 0.808);
+  padding: 8px 10px;
+  font-size: larger;
+  font-weight: bold;
+  border-style: hidden;
+}
+
+.btn-selecionar-tabeladia {
+  border-radius: 10px 0 0 10px;
+}
+
+.btn-selecionar-tabelames {
+  border-radius: 0 10px 10px 0;
+}
+
+.btn-selecionar-tabeladia.ativo,
+.btn-selecionar-tabelasemana.ativo,
+.btn-selecionar-tabelames.ativo {
+  background-color: lightcyan;
+  border-color: darkcyan;
+  font-weight: bolder;
+}
+
+.btns-e-legenda-container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+/* ----- legenda ----- */
+.legenda-tabela {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  gap: 15px;
+}
+
+.legenda-item-realizado { background-color: #2c5e37; }
+.legenda-item-confirmado { background-color: #1e90ff; }
+.legenda-item-cancelado  { background-color: #d9534f; }
+.legenda-item-agendado   { background-color: #f0ad4e; }
+
+#status-card-consulta-realizado,
+.legenda-item-realizado {
+  background-color: #b7ffbd;
+  border: 3px solid #91d392;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-cancelado,
+.legenda-item-cancelado {
+  background-color: #ffb7cc;
+  border: 3px solid #ff6c84;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-confirmado,
+.legenda-item-confirmado {
+  background-color: #eef8fb;
+  border: 3px solid #d8dfe7;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+#status-card-consulta-agendado,
+.legenda-item-agendado {
+  background-color: #f7f7c4;
+  border: 3px solid #f3ce67;
+  padding: 5px;
+  font-weight: bold;
+  border-radius: 10px;
+}
+
+/* ----- calendário ----- */
+.calendario {
+  border-collapse: collapse;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgb(255, 255, 255);
+  border: 10px solid #ffffffc5;
+  background-color: rgb(253, 253, 253);
+}
+
+.calendario-ou-filaespera {
+  margin-top: 0;
+}
+
+.container-btns-agenda-fila_esepera {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin-left: 20px;
+}
+
+.btn-fila-espera,
+.btn-agenda {
+  background-color: transparent;
+  border: 0;
+  border-bottom: 3px solid rgb(253, 253, 253);
+  padding: 8px;
+  border-radius: 10px 10px 0 0;
+  font-weight: bold;
+}
+
+.opc-filaespera-ativo,
+.opc-agenda-ativo {
+  color: white;
+  background-color: #5980fd;
+}
+
+/* ===== Fila de Espera ===== */
+.fila-container {
+  width: 100%;
+  max-width: none;
+  margin: 0;                  /* >>> sem espaço para encostar no topo <<< */
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  border: 10px solid #ffffff;
+  box-sizing: border-box;
+}
+
+.fila-titulo {
+  text-align: center;
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+  border-bottom: 2px solid #e0e0e0;
+  padding-bottom: 10px;
+}
+
+.fila-tabela {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1rem;
+}
+
+.fila-tabela thead {
+  background-color: #f7fbff;
+}
+
+.fila-tabela th,
+.fila-tabela td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.fila-tabela th {
+  font-weight: bold;
+  color: #444;
+    background-color: #f1f1f1
+}
+
+/* --- Linhas alternadas cinza/branco --- */
+.fila-tabela tbody tr:nth-child(even) {
+  background-color: #f9f9f9; /* cinza clarinho */
+}
+.fila-tabela tbody tr:nth-child(odd) {
+  background-color: #ffffff; /* branco */
+}
+
+.fila-tabela tbody tr:hover {
+  background-color: #f1f6fa; /* hover sutil */
+}
+
+@media (max-width: 768px) {
+  .fila-tabela th, .fila-tabela td {
+    padding: 8px;
+    font-size: 0.9rem;
+  }
+  .fila-titulo {
+    font-size: 1.5rem;
+  }
+}
+.fila-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center; /* centraliza o título */
+  margin-bottom: 16px;
+  height: 40px; /* altura da linha */
+}
+
+.busca-fila-espera {
+  position: absolute;
+  left: 0; /* barra na esquerda */
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+  width: 350px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.busca-fila-espera:focus {
+  border-color: #888;
+}
+
+.fila-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  text-align: center;
+}