diff --git a/src/pages/TablePaciente.jsx b/src/pages/TablePaciente.jsx
new file mode 100644
index 0000000..274cceb
--- /dev/null
+++ b/src/pages/TablePaciente.jsx
@@ -0,0 +1,295 @@
+import React, { useState, useEffect } from "react";
+
+function TablePaciente({ setCurrentPage, setPatientID }) {
+  const [pacientes, setPacientes] = useState([]);
+  const [search, setSearch] = useState("");
+  const [filtroConvenio, setFiltroConvenio] = useState("Todos");
+  const [filtroVIP, setFiltroVIP] = useState(false);
+  const [filtroAniversariante, setFiltroAniversariante] = useState(false);
+
+
+  const GetAnexos = async (id) => {
+    var myHeaders = new Headers();
+    myHeaders.append("Authorization", "Bearer <token>");
+
+  var requestOptions = {
+    method: 'GET',
+    headers: myHeaders,
+    redirect: 'follow'
+  };
+  try {
+    const response = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}/anexos`, requestOptions);
+    const result = await response.json();
+
+    return result.data; // agora retorna corretamente
+  } catch (error) {
+    console.log('error', error);
+    return [];
+  }
+ 
+  }
+
+  const DeleteAnexo = async (patientID) => {
+
+  
+   const RespostaGetAnexos = await GetAnexos(patientID)
+
+   for(let i = 0; i < RespostaGetAnexos.length; i++){
+
+    const idAnexo = RespostaGetAnexos[i].id;
+
+    console.log('anexos',RespostaGetAnexos)
+
+
+      var myHeaders = new Headers();
+    myHeaders.append("Authorization", "Bearer <token>");
+
+    var requestOptions = {
+      method: 'DELETE',
+      headers: myHeaders,
+      redirect: 'follow'
+    };
+
+    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos/${idAnexo}`, requestOptions)
+      .then(response => response.text())
+      .then(result => console.log('anexo excluido com sucesso',result))
+      .catch(error => console.log('error', error));
+    
+    }
+
+  }
+
+  // Função para excluir paciente
+  const deletePatient = async (id) => {
+    DeleteAnexo(id)
+
+    const requestOptionsDelete = { method: "DELETE", redirect: "follow" };
+
+    if (!window.confirm("Tem certeza que deseja excluir este paciente?")) return;
+
+    await fetch(
+      `https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`,
+      requestOptionsDelete
+    )
+      .then((response) => response.text())
+      .then((mensage) => console.log(mensage))
+      .catch((error) => console.log("Deu problema", error));
+  };
+
+ 
+
+  // Requisição inicial para buscar pacientes
+  useEffect(() => {
+    fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes")
+      .then((response) => response.json())
+      .then((result) => setPacientes(result["data"]))
+      .catch((error) =>
+        console.log("Erro para encontrar pacientes no banco de dados", error)
+      );
+  }, []);
+
+  // Função para verificar se hoje é aniversário do paciente
+  const ehAniversariante = (dataNascimento) => {
+    if (!dataNascimento) return false;
+    const hoje = new Date();
+    const nascimento = new Date(dataNascimento);
+
+    return (
+      hoje.getDate() === nascimento.getDate() &&
+      hoje.getMonth() === nascimento.getMonth()
+    );
+  };
+
+
+  const pacientesFiltrados = pacientes.filter((paciente) => {
+    const texto = `${paciente.nome}`.toLowerCase();
+
+    const passaBusca = texto.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;
+
+    return passaBusca && passaVIP && passaConvenio && passaAniversario;
+  });
+
+  return (
+    <>
+      <div className="page-heading">
+        <h3>Lista de Pacientes</h3>
+      </div>
+      <div className="page-content">
+        <section className="row">
+          <div className="col-12">
+            <div className="card">
+              <div className="card-header d-flex justify-content-between align-items-center">
+                <h4 className="card-title mb-0">Pacientes Cadastrados</h4>
+                <button
+                  className="btn btn-primary"
+                  onClick={() => setCurrentPage("form-layout")}
+                >
+                  <i className="bi bi-plus-circle"></i> Adicionar Paciente
+                </button>
+              </div>
+
+              <div className="card-body">
+                <div className="card p-3 mb-3">
+                  <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" }}
+                  >
+                    <input
+                      type="text"
+                      className="form-control"
+                      placeholder="Buscar por nome..."
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                      style={{
+                        minWidth: 250,
+                        maxWidth: 300,
+                        width: 260,
+                        flex: "0 0 auto",
+                      }}
+                    />
+
+                    <select
+                      className="form-select"
+                      value={filtroConvenio}
+                      onChange={(e) => setFiltroConvenio(e.target.value)}
+                      style={{
+                        minWidth: 200,
+                        width: 180,
+                        flex: "0 0 auto",
+                      }}
+                    >
+                      <option>Todos os Convênios</option>
+                      <option>Bradesco Saúde</option>
+                      <option>Hapvida</option>
+                      <option>Unimed</option>
+                    </select>
+
+                    <button
+                      className={`btn ${filtroVIP ? "btn-primary" : "btn-outline-primary"
+                        }`}
+                      onClick={() => setFiltroVIP(!filtroVIP)}
+                      style={{ flex: "0 0 auto", whiteSpace: "nowrap" }}
+                    >
+                      <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" }}
+                    >
+                      <i className="bi bi-calendar me-1"></i> Aniversariantes
+                    </button>
+                  </div>
+                </div>
+
+
+                <div className="table-responsive">
+                  <table className="table table-striped table-hover">
+                    <thead>
+                      <tr>
+                        <th>Nome</th>
+                        <th>CPF</th>
+                        <th>Email</th>
+                        <th>Telefone</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {pacientesFiltrados.length > 0 ? (
+                        pacientesFiltrados.map((paciente) => (
+                          <tr key={paciente.id}>
+                            <td>{paciente.nome}</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}
+                              </span>
+                            </td>
+                            <td>
+                              <div className="d-flex gap-2">
+
+                                <button
+                                  className="btn btn-sm"
+                                  style={{
+                                    backgroundColor: "#E6F2FF",
+                                    color: "#004085",
+                                  }}
+                                  onClick={() => {
+                                    setCurrentPage("details-page-paciente");
+                                    setPatientID(paciente.id);
+                                  }}
+                                >
+                                  <i className="bi bi-eye me-1"></i> Ver Detalhes
+                                </button>
+
+ 
+                                <button
+                                  className="btn btn-sm"
+                                  style={{
+                                    backgroundColor: "#FFF3CD",
+                                    color: "#856404",
+                                  }}
+                                  onClick={() => {
+                                    setCurrentPage("edit-page-paciente");
+                                    setPatientID(paciente.id);
+                                  }}
+                                >
+                                  <i className="bi bi-pencil me-1"></i> Editar
+                                </button>
+
+                                <button
+                                  className="btn btn-sm"
+                                  style={{
+                                    backgroundColor: "#F8D7DA",
+                                    color: "#721C24",
+                                  }}
+                                  onClick={() => deletePatient(paciente.id)}
+                                >
+                                  <i className="bi bi-trash me-1"></i> Excluir
+                                </button>
+                              </div>
+                            </td>
+                          </tr>
+                        ))
+                      ) : (
+                        <tr>
+                          <td colSpan="8" className="text-center">
+                            Nenhum paciente encontrado.
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}
+
+export default TablePaciente;
\ 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;
+}