diff --git a/src/assets/images/avatar_placeholder.png b/src/assets/images/avatar_placeholder.png
new file mode 100644
index 0000000..0989209
Binary files /dev/null and b/src/assets/images/avatar_placeholder.png differ
diff --git a/src/pages/Details.jsx b/src/pages/Details.jsx
index 2f0c2eb..a3f4393 100644
--- a/src/pages/Details.jsx
+++ b/src/pages/Details.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
 
 const Details = ({ patientID, setCurrentPage }) => {
   const [paciente, setPaciente] = useState(null);
@@ -15,29 +16,174 @@ const Details = ({ patientID, setCurrentPage }) => {
   if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
 
   return (
-    <div style={styles.container}>
-      {/* Botão voltar */}
-      <button style={styles.backBtn} onClick={() => setCurrentPage("tabela")}>
-        ⬅ Voltar
-      </button>
-
-      {/* Cabeçalho */}
-      <div style={styles.header}>
-        <img
-          src="https://via.placeholder.com/80"
-          alt="Foto do paciente"
-          style={styles.avatar}
-        />
-        <h2 style={styles.nome}>
-          {paciente.nomeCompleto}
-        </h2>
-        <p style={styles.cpf}>CPF: {paciente.cpf}</p>
-        <button style={styles.editBtn}>Editar</button>
+    <>
+    <div className="card p-3">
+      <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-lg">
+            <img src={avatarPlaceholder} alt="" />
+          </div>
+          <div className="media-body ms-3">
+            <span>{paciente.nome || "Nome Completo"}</span>
+            <p>{paciente.cpf || "CPF"}</p>
+          </div>
+        </div>
+        <button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
+          <i className="bi bi-pencil-square"></i> Editar
+        </button>
+      </div>
+    </div>
+      
+      {/* ------------------ DADOS PESSOAIS ------------------ */}
+      <div className="card p-3">
+      <h5 className="mb-3">Dados Pessoais</h5>
+      <hr />
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <label>Nome:</label>
+          <p>{paciente.nome || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nome social:</label>
+          <p>{paciente.nomeSocial || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Data de nascimento:</label>
+          <p>{paciente.dataNascimento || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Gênero:</label>
+          <p>{paciente.sexo || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Outro documento:</label>
+          <p>{paciente.documento || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Número do documento:</label>
+          <p>{paciente.numeroDocumento || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>CPF:</label>
+          <p>{paciente.cpf || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Profissão:</label>
+          <p>{paciente.profissao || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nome da Mãe:</label>
+          <p>{paciente.nomeMae || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Profissão da mãe:</label>
+          <p>{paciente.profissaoMae || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nome do Pai:</label>
+          <p>{paciente.nomePai || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Profissão do pai:</label>
+          <p>{paciente.profissaoPai || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nome do responsável:</label>
+          <p>{paciente.nomeResponsavel || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>CPF do responsável:</label>
+          <p>{paciente.cpfResponsavel || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Nome do esposo(a):</label>
+          <p>{paciente.nomeConjuge || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Identificador de outro sistema:</label>
+          <p>{paciente.outroId || "-"}</p>
+        </div>
+      </div>
       </div>
 
-      {/* Dados pessoais */}
-      <div style={styles.section}>
-        <h3 style={styles.sectionTitle}>Dados Pessoais</h3>
+      {/* ------------------ ENDEREÇO ------------------ */}
+      <div className="card p-3">
+      <h5>Endereço</h5>
+      <hr />
+      <div className="row">
+        <div className="col-md-4 mb-3">
+          <label>CEP:</label>
+          <p>{paciente.cep || "-"}</p>
+        </div>
+        <div className="col-md-8 mb-3">
+          <label>Rua:</label>
+          <p>{paciente.rua || "-"}</p>
+        </div>
+        <div className="col-md-4 mb-3">
+          <label>Bairro:</label>
+          <p>{paciente.bairro || "-"}</p>
+        </div>
+        <div className="col-md-4 mb-3">
+          <label>Cidade:</label>
+          <p>{paciente.cidade || "-"}</p>
+        </div>
+        <div className="col-md-2 mb-3">
+          <label>Estado:</label>
+          <p>{paciente.estado || "-"}</p>
+        </div>
+        <div className="col-md-4 mb-3">
+          <label>Número:</label>
+          <p>{paciente.numero || "-"}</p>
+        </div>
+        <div className="col-md-8 mb-3">
+          <label>Complemento:</label>
+          <p>{paciente.complemento || "-"}</p>
+        </div>
+      </div>
+      </div>
+
+      {/* ------------------ CONTATO ------------------ */}
+      <div className="card p-3">
+      <h5>Contato</h5>
+      <hr />
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <label>Email:</label>
+          <p>{paciente.email || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Telefone:</label>
+          <p>{paciente.telefone1 || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Telefone 2:</label>
+          <p>{paciente.telefone2 || "-"}</p>
+        </div>
+        <div className="col-md-6 mb-3">
+          <label>Celular:</label>
+          <p>{paciente.telefone3 || "-"}</p>
+        </div>
+      </div>
+      </div>
+
+      {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
+      <div className="card p-3">
+      <h5>Informações Adicionais</h5>
+      <hr />
+      <div className="mb-3">
+        <label>Observações:</label>
+        <p>{paciente.observacoes || "-"}</p>
+      </div>
+      </div>
+
+     {/* Dados pessoais
+      <div className="" style={styles.section}>
+        <h3  style={styles.sectionTitle}>Dados Pessoais</h3>
         <div style={styles.grid}>
           <div style={styles.item}><strong>Nome Completo:</strong> {paciente.nomeCompleto}</div>
           <div style={styles.item}><strong>CPF:</strong> {paciente.cpf}</div>
@@ -51,9 +197,9 @@ const Details = ({ patientID, setCurrentPage }) => {
           <div style={styles.item}><strong>Etnia:</strong> {paciente.etnia}</div>
         </div>
       </div>
-
+      */}
       {/* Contato */}
-      <div style={styles.section}>
+      {/* <div style={styles.section}>
         <h3 style={styles.sectionTitle}>Informações de Contato</h3>
         <div style={styles.grid}>
           <div style={styles.item}><strong>E-mail:</strong> {paciente.email}</div>
@@ -61,88 +207,89 @@ const Details = ({ patientID, setCurrentPage }) => {
           <div style={styles.item}><strong>Telefone 1:</strong> {paciente.telefone1 || "-"}</div>
           <div style={styles.item}><strong>Telefone 2:</strong> {paciente.telefone2 || "-"}</div>
         </div>
-      </div>
-    </div>
+      </div>  */}
+
+    </>
   );
 };
 
-const styles = {
-  container: {
-    width: "80%",
-    maxWidth: "800px",
-    margin: "30px auto",
-    background: "#fff",
-    borderRadius: "10px",
-    padding: "20px",
-    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
-    fontFamily: "Arial, sans-serif",
-    position: "relative"
-  },
-  backBtn: {
-    background: "#ddd",
-    border: "none",
-    borderRadius: "6px",
-    padding: "8px 14px",
-    cursor: "pointer",
-    marginBottom: "15px"
-  },
-  header: {
-    textAlign: "center",
-    marginBottom: "20px",
-    position: "relative"
-  },
-  avatar: {
-    width: "80px",
-    height: "80px",
-    borderRadius: "50%",
-    background: "#ddd",
-    display: "block",
-    margin: "0 auto"
-  },
-  nome: {
-    margin: "10px 0 5px"
-  },
-  vip: {
-    color: "#f7b500",
-    fontWeight: "bold",
-    marginLeft: "5px"
-  },
-  cpf: {
-    margin: "5px 0",
-    color: "#555"
-  },
-  editBtn: {
-    background: "#0d6efd",
-    color: "white",
-    padding: "8px 14px",
-    border: "none",
-    borderRadius: "6px",
-    cursor: "pointer",
-    position: "absolute",
-    right: "20px",
-    top: "20px"
-  },
-  section: {
-    marginBottom: "20px",
-    border: "1px solid #e0e0e0",
-    borderRadius: "8px",
-    padding: "15px"
-  },
-  sectionTitle: {
-    marginTop: 0,
-    borderBottom: "1px solid #ddd",
-    paddingBottom: "8px",
-    fontSize: "18px"
-  },
-  grid: {
-    display: "grid",
-    gridTemplateColumns: "1fr 1fr",
-    gap: "10px 20px",
-    marginTop: "10px"
-  },
-  item: {
-    fontSize: "14px"
-  }
-};
+// const styles = {
+//   container: {
+//     width: "80%",
+//     maxWidth: "800px",
+//     margin: "30px auto",
+//     background: "#fff",
+//     borderRadius: "10px",
+//     padding: "20px",
+//     boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+//     fontFamily: "Arial, sans-serif",
+//     position: "relative"
+//   },
+//   backBtn: {
+//     background: "#ddd",
+//     border: "none",
+//     borderRadius: "6px",
+//     padding: "8px 14px",
+//     cursor: "pointer",
+//     marginBottom: "15px"
+//   },
+//   header: {
+//     textAlign: "center",
+//     marginBottom: "20px",
+//     position: "relative"
+//   },
+//   avatar: {
+//     width: "80px",
+//     height: "80px",
+//     borderRadius: "50%",
+//     background: "#ddd",
+//     display: "block",
+//     margin: "0 auto"
+//   },
+//   nome: {
+//     margin: "10px 0 5px"
+//   },
+//   vip: {
+//     color: "#f7b500",
+//     fontWeight: "bold",
+//     marginLeft: "5px"
+//   },
+//   cpf: {
+//     margin: "5px 0",
+//     color: "#555"
+//   },
+//   editBtn: {
+//     background: "#0d6efd",
+//     color: "white",
+//     padding: "8px 14px",
+//     border: "none",
+//     borderRadius: "6px",
+//     cursor: "pointer",
+//     position: "absolute",
+//     right: "20px",
+//     top: "20px"
+//   },
+//   section: {
+//     marginBottom: "20px",
+//     border: "1px solid #e0e0e0",
+//     borderRadius: "8px",
+//     padding: "15px"
+//   },
+//   sectionTitle: {
+//     marginTop: 0,
+//     borderBottom: "1px solid #ddd",
+//     paddingBottom: "8px",
+//     fontSize: "18px"
+//   },
+//   grid: {
+//     display: "grid",
+//     gridTemplateColumns: "1fr 1fr",
+//     gap: "10px 20px",
+//     marginTop: "10px"
+//   },
+//   item: {
+//     fontSize: "14px"
+//   }
+// };
 
 export default Details;
\ No newline at end of file