diff --git a/src/pages/DoctorDetails.jsx b/src/pages/DoctorDetails.jsx
new file mode 100644
index 0000000..95af64d
--- /dev/null
+++ b/src/pages/DoctorDetails.jsx
@@ -0,0 +1,181 @@
+import React, { useEffect, useState } from "react";
+import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
+
+const Details = ({ patientID, setCurrentPage }) => {
+  const [paciente, setPaciente] = useState(null);
+
+  useEffect(() => {
+    if (!patientID) return;
+
+    fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
+      .then(res => res.json())
+      .then(data => setPaciente(data))
+      .catch(err => console.error("Erro ao buscar médico:", err));
+  }, [patientID]);
+
+  if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
+
+  return (
+    <>
+    <div className="card p-3 shadow-sm">
+      <h3 className="mb-3 text-center">MediConnect</h3>
+      <hr />
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
+          <i className="bi bi-chevron-left"></i> Voltar
+        </button>
+        <div className="d-flex mb-3">
+          <div className="avatar avatar-xl">
+            <img src={avatarPlaceholder} alt="" />
+          </div>
+          <div className="media-body ms-3 font-extrabold">
+            <span>{paciente.nome || "Nome Completo"}</span>
+            <p>{paciente.cpf || "CPF"}</p>
+          </div>
+        </div>
+        <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-doctor")}>
+          <i className="bi bi-pencil-square"></i> Editar
+        </button>
+      </div>
+    </div>
+      
+      {/* ------------------ DADOS PESSOAIS ------------------ */}
+      <div className="card p-3 shadow-sm">
+      <h5 className="mb-3">Dados Pessoais</h5>
+      <hr />
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Nome:</label>
+          <p>{paciente.nome || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Nome social:</label>
+          <p>{paciente.nomeSocial || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Data de nascimento:</label>
+          <p>{paciente.dataNascimento || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Gênero:</label>
+          <p>{paciente.sexo || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">CPF:</label>
+          <p>{paciente.cpf || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">CRM:</label>
+          <p>{paciente.rg || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Outro documento:</label>
+          <p>{paciente.documento || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Número do documento:</label>
+          <p>{paciente.numeroDocumento || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Etnia e Raça:</label>
+          <p>{paciente.etniaRaca || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Nacionalidade:</label>
+          <p>{paciente.etniaRaca || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Naturalidade:</label>
+          <p>{paciente.etniaRaca || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Especialização:</label>
+          <p>{paciente.profissao || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Estado civil:</label>
+          <p>{paciente.estadoCivil || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Nome do esposo(a):</label>
+          <p>{paciente.nomeConjuge || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Identificador de outro sistema:</label>
+          <p>{paciente.outroId || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Observações:</label>
+          <p>{paciente.observacoes || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Anexos do Médico:</label>
+          <p>{paciente.anexos || "-"}</p>
+        </div>
+      </div>
+      </div>
+
+      {/* ------------------ ENDEREÇO ------------------ */}
+      <div className="card p-3 shadow-sm">
+      <h5>Endereço</h5>
+      <hr />
+      <div className="row">
+        <div className="col-md-4 mb-3">
+          <label className="font-extrabold">CEP:</label>
+          <p>{paciente.cep || "-"}</p>
+        </div>
+        <div className="col-md-8 mb-3">
+          <label className="font-extrabold">Rua:</label>
+          <p>{paciente.rua || "-"}</p>
+        </div>
+        <div className="col-md-4 mb-3">
+          <label className="font-extrabold">Bairro:</label>
+          <p>{paciente.bairro || "-"}</p>
+        </div>
+        <div className="col-md-4 mb-3">
+          <label className="font-extrabold">Cidade:</label>
+          <p>{paciente.cidade || "-"}</p>
+        </div>
+        <div className="col-md-2 mb-3">
+          <label className="font-extrabold">Estado:</label>
+          <p>{paciente.estado || "-"}</p>
+        </div>
+        <div className="col-md-4 mb-3">
+          <label className="font-extrabold">Número:</label>
+          <p>{paciente.numero || "-"}</p>
+        </div>
+        <div className="col-md-8 mb-3">
+          <label className="font-extrabold">Complemento:</label>
+          <p>{paciente.complemento || "-"}</p>
+        </div>
+      </div>
+      </div>
+
+      {/* ------------------ CONTATO ------------------ */}
+      <div className="card p-3 shadow-sm">
+      <h5>Contato</h5>
+      <hr />
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Email:</label>
+          <p>{paciente.email || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Telefone:</label>
+          <p>{paciente.telefone1 || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Telefone 2:</label>
+          <p>{paciente.telefone2 || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label className="font-extrabold">Celular:</label>
+          <p>{paciente.telefone3 || "-"}</p>
+        </div>
+      </div>
+      </div>
+    </>
+  );
+};
+
+export default Details;
\ No newline at end of file