diff --git a/src/components/doctors/DoctorForm.css b/src/components/doctors/DoctorForm.css
new file mode 100644
index 00000000..d5f23798
--- /dev/null
+++ b/src/components/doctors/DoctorForm.css
@@ -0,0 +1,201 @@
+.doctor-form-container {
+  padding: 1rem;
+}
+
+.doctor-form-title {
+  margin-bottom: 1.5rem;
+  text-align: center;
+  font-size: 2.5rem;
+}
+
+.form-section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.section-header {
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-toggle {
+  font-size: 1.25rem;
+}
+
+.form-label {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.form-control-custom {
+  font-size: 1.1rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.avatar-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5rem;
+  color: #9e9e9e;
+}
+
+.file-input-label {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+.actions-container {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.btn-submit {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+  margin-right: 1rem;
+}
+
+.btn-cancel {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+}
+
+
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0 0 15px 0;
+  font-weight: bold;
+}
+
+.modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 10px;
+}
+
+.modal-list-item {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-confirm-btn {
+  background-color: #1e3a8a;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .doctor-form-title {
+    font-size: 2rem;
+  }
+  
+  .section-header {
+    font-size: 1.5rem;
+  }
+  
+  .form-section {
+    padding: 1rem;
+  }
+  
+  .avatar-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .btn-submit,
+  .btn-cancel {
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/doctors/DoctorForm.jsx b/src/components/doctors/DoctorForm.jsx
index 45ec0bf2..8f335a71 100644
--- a/src/components/doctors/DoctorForm.jsx
+++ b/src/components/doctors/DoctorForm.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
+import './DoctorForm.css';
 
 function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const navigate = useNavigate();
@@ -22,16 +23,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
   };
 
- 
   const validarCPF = (cpf) => {
     const cpfLimpo = cpf.replace(/\D/g, '');
  
     if (cpfLimpo.length !== 11) return false;
     
-
     if (/^(\d)\1+$/.test(cpfLimpo)) return false;
     
-    
     let soma = 0;
     for (let i = 0; i < 9; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
@@ -39,7 +37,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     let resto = 11 - (soma % 11);
     let digito1 = resto === 10 || resto === 11 ? 0 : resto;
     
-
     soma = 0;
     for (let i = 0; i < 10; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
@@ -47,7 +44,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     resto = 11 - (soma % 11);
     let digito2 = resto === 10 || resto === 11 ? 0 : resto;
     
-  
     return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
   };
 
@@ -79,12 +75,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
-   
     if (value && emptyFields.includes(name)) {
       setEmptyFields(prev => prev.filter(field => field !== name));
     }
 
-   
     if (name === 'cpf' && cpfError) {
       setCpfError('');
     }
@@ -108,7 +102,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       let cpfFormatado = FormatCPF(value);
       setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
 
-      
       const cpfLimpo = cpfFormatado.replace(/\D/g, '');
       if (cpfLimpo.length === 11) {
         if (!validarCPF(cpfFormatado)) {
@@ -150,7 +143,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
   };
 
- 
   const scrollToEmptyField = (fieldName) => {
     let fieldRef = null;
     
@@ -183,7 +175,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         return;
     }
 
-
     setTimeout(() => {
       if (fieldRef.current) {
         fieldRef.current.scrollIntoView({ 
@@ -192,11 +183,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         });
         fieldRef.current.focus();
         
-  
         fieldRef.current.style.border = '2px solid #dc3545';
         fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
         
-   
         setTimeout(() => {
           if (fieldRef.current) {
             fieldRef.current.style.border = '';
@@ -208,7 +197,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   };
 
   const handleSubmit = async () => {
-
     const missingFields = [];
     if (!formData.full_name) missingFields.push('full_name');
     if (!formData.cpf) missingFields.push('cpf');
@@ -221,7 +209,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       setEmptyFields(missingFields);
       setShowRequiredModal(true);
       
-  
       setTimeout(() => {
         if (missingFields.length > 0) {
           scrollToEmptyField(missingFields[0]);
@@ -230,7 +217,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
     const cpfLimpo = formData.cpf.replace(/\D/g, '');
     if (cpfLimpo.length !== 11) {
       setShowRequiredModal(true);
@@ -240,7 +226,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
     if (!validarCPF(formData.cpf)) {
       setShowRequiredModal(true);
       setEmptyFields(['cpf']);
@@ -249,12 +234,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-  
     try {
       await onSave({ ...formData });
-
     } catch (error) {
-    
       throw error;
     }
   };
@@ -265,96 +247,43 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
   return (
     <>
- 
       {showRequiredModal && (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#1e3a8a",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Atenção</h5>
               <button
                 onClick={handleModalClose}
-                style={{
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                }}
+                className="modal-close-btn"
               >
                 ×
               </button>
             </div>
 
-            <div style={{ padding: "25px 20px" }}>
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
+            <div className="modal-body">
+              <p className="modal-message">
                 {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
               </p>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
+              <div className="modal-list">
                 {cpfError ? (
-                  <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
+                  <p className="modal-list-item">{cpfError}</p>
                 ) : (
                   <>
-                    {!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
-                    {!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
-                    {!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
-                    {!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
-                    {!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
-                    {!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
+                    {!formData.full_name && <p className="modal-list-item">- Nome</p>}
+                    {!formData.cpf && <p className="modal-list-item">- CPF</p>}
+                    {!formData.email && <p className="modal-list-item">- Email</p>}
+                    {!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
+                    {!formData.crm_uf && <p className="modal-list-item">- Estado do CRM</p>}
+                    {!formData.crm && <p className="modal-list-item">- CRM</p>}
                   </>
                 )}
               </div>
             </div>
 
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
+            <div className="modal-footer">
               <button
                 onClick={handleModalClose}
-                style={{
-                  backgroundColor: "#1e3a8a",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
+                className="modal-confirm-btn"
               >
                 Fechar
               </button>
@@ -363,48 +292,35 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         </div>
       )}
 
-      <div className="card p-3 shadow-sm">
-        <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
+      <div className="card doctor-form-container shadow-sm">
+        <h3 className="doctor-form-title">MediConnect</h3>
 
-        <div className="mb-5 p-4 border rounded shadow-sm">
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
-            onClick={() => handleToggleCollapse('dadosPessoais')}
-            style={{ fontSize: '1.8rem' }}>
+        {/* DADOS PESSOAIS */}
+        <div className="form-section">
+          <h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
             Dados Pessoais
-            <span className="fs-5">
+            <span className="section-toggle">
               {collapsedSections.dadosPessoais ? '▲' : '▼'}
             </span>
           </h4>
           <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
             <div className="row mt-3">
-              <div className="col-md-6 mb-3 d-flex align-items-center">
+              <div className="col-md-6 mb-3 avatar-container">
                 <div className="me-3">
                   {avatarUrl ? (
                     <img
                       src={avatarUrl}
                       alt="Avatar do Médico"
-                      style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
+                      className="avatar-image"
                     />
                   ) : (
-                    <div
-                      style={{
-                        width: '100px',
-                        height: '100px',
-                        borderRadius: '50%',
-                        backgroundColor: '#e0e0e0',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        fontSize: '3.5rem',
-                        color: '#9e9e9e'
-                      }}
-                    >
+                    <div className="avatar-placeholder">
                       &#x2624;
                     </div>
                   )}
                 </div>
                 <div>
-                  <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
+                  <label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
                   <input
                     type="file"
                     className="form-control d-none"
@@ -413,31 +329,31 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                     onChange={handleChange}
                     accept="image/*"
                   />
-                  {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
+                  {formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
                 </div>
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
+                <label className="form-label">Nome: *</label>
                 <input 
                   ref={nomeRef}
                   type="text" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="full_name" 
                   value={formData.full_name || ''} 
                   onChange={handleChange} 
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
-                <input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
+                <label className="form-label">Data de nascimento:</label>
+                <input type="date" className="form-control form-control-custom" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
+                <label className="form-label">CPF: *</label>
                 <input 
                   ref={cpfRef}
                   type="text" 
-                  className={`form-control ${cpfError ? 'is-invalid' : ''}`}
+                  className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
                   name="cpf" 
                   value={formData.cpf || ''} 
                   onChange={handleChange} 
@@ -450,10 +366,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
+                <label className="form-label">Estado do CRM: *</label>
                 <select 
                   ref={crmUfRef}
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="crm_uf" 
                   value={formData.crm_uf || ''} 
                   onChange={handleChange}
@@ -489,11 +405,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>CRM: *</label>
+                <label className="form-label">CRM: *</label>
                 <input 
                   ref={crmRef}
                   type="text" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="crm" 
                   value={formData.crm || ''} 
                   onChange={handleChange} 
@@ -501,8 +417,8 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </div>
 
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Especialização:</label>
-                <select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
+                <label className="form-label">Especialização:</label>
+                <select className="form-control form-control-custom" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
                   <option value="">Selecione</option>
                   <option value="Clínica Geral">Clínica médica (clínico geral)</option>
                   <option value="Pediatria">Pediatria</option>
@@ -523,105 +439,100 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
           </div>
         </div>
 
-        <div className="mb-5 p-4 border rounded shadow-sm">
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
-            onClick={() => handleToggleCollapse('contato')}
-            style={{ fontSize: '1.8rem' }}>
+        {/* CONTATO */}
+        <div className="form-section">
+          <h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
             Contato
-            <span className="fs-5">
+            <span className="section-toggle">
               {collapsedSections.contato ? '▲' : '▼'}
             </span>
           </h4>
           <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
             <div className="row mt-3">
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+                <label className="form-label">Email: *</label>
                 <input 
                   ref={emailRef}
                   type="email" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="email" 
                   value={formData.email || ''} 
                   onChange={handleChange} 
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+                <label className="form-label">Telefone: *</label>
                 <input 
                   ref={telefoneRef}
                   type="text" 
-                  className="form-control" 
+                  className="form-control form-control-custom" 
                   name="phone_mobile" 
                   value={formData.phone_mobile || ''} 
                   onChange={handleChange} 
                 />
               </div>
               <div className="col-md-6 mb-3">
-                <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
-                <input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
+                <label className="form-label">Telefone 2:</label>
+                <input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
               </div>
             </div>
           </div>
         </div>
 
-        <div className="mb-5 p-4 border rounded shadow-sm">
-          <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center"
-            onClick={() => handleToggleCollapse('endereco')}
-            style={{ fontSize: '1.8rem' }}>
+        {/* ENDEREÇO */}
+        <div className="form-section">
+          <h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
             Endereço
-            <span className="fs-5">
+            <span className="section-toggle">
               {collapsedSections.endereco ? '▲' : '▼'}
             </span>
           </h4>
           <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
             <div className="row mt-3">
               <div className="col-md-4 mb-3">
-                <label>CEP:</label>
-                <input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
+                <label className="form-label">CEP:</label>
+                <input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} onBlur={handleCepBlur} />
               </div>
               <div className="col-md-8 mb-3">
-                <label>Rua:</label>
-                <input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
+                <label className="form-label">Rua:</label>
+                <input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
               </div>
               <div className="col-md-6 mb-3">
-                <label>Bairro:</label>
-                <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
+                <label className="form-label">Bairro:</label>
+                <input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
               </div>
               <div className="col-md-4 mb-3">
-                <label>Cidade:</label>
-                <input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
+                <label className="form-label">Cidade:</label>
+                <input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
               </div>
               <div className="col-md-2 mb-3">
-                <label>Estado:</label>
-                <input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
+                <label className="form-label">Estado:</label>
+                <input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
               </div>
               <div className="col-md-4 mb-3">
-                <label>Número:</label>
-                <input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
+                <label className="form-label">Número:</label>
+                <input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
               </div>
               <div className="col-md-8 mb-3">
-                <label>Complemento:</label>
-                <input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
+                <label className="form-label">Complemento:</label>
+                <input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
               </div>
             </div>
           </div>
         </div>
 
-        <div className="mt-3 text-center">
+        {/* BOTÕES DE AÇÃO */}
+        <div className="actions-container">
           <button
-            className="btn btn-success me-3"
+            className="btn btn-success btn-submit"
             onClick={handleSubmit}
             disabled={isLoading}
-            style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
           >
             {isLoading ? 'Salvando...' : 'Salvar Médico'}
           </button>
           
           <Link to={`/${location.pathname.split("/")[1]}/medicos`}>
-            <button 
-              className="btn btn-light" 
-              style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
-            >
+            <button className="btn btn-light btn-cancel">
               Cancelar
             </button>
           </Link>
diff --git a/src/components/patients/PatientForm.css b/src/components/patients/PatientForm.css
new file mode 100644
index 00000000..f829d414
--- /dev/null
+++ b/src/components/patients/PatientForm.css
@@ -0,0 +1,215 @@
+.patient-form-container {
+  padding: 1rem;
+}
+
+.patient-form-title {
+  margin-bottom: 1.5rem;
+  text-align: center;
+  font-size: 2.5rem;
+}
+
+.form-section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.section-header {
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-toggle {
+  font-size: 1.25rem;
+}
+
+.form-label {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}
+
+.form-control-custom {
+  font-size: 1.1rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.avatar-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5rem;
+  color: #9e9e9e;
+}
+
+.file-input-label {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+.checkbox-custom {
+  transform: scale(1.2);
+}
+
+.checkbox-label {
+  font-size: 1.1rem;
+  margin-left: 0.5rem;
+}
+
+.textarea-custom {
+  font-size: 1.1rem;
+  min-height: 100px;
+}
+
+.actions-container {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.btn-submit {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+  margin-right: 1rem;
+}
+
+.btn-cancel {
+  font-size: 1.2rem;
+  padding: 0.75rem 1.5rem;
+}
+
+
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0 0 15px 0;
+  font-weight: bold;
+}
+
+.modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 10px;
+}
+
+.modal-list-item {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-confirm-btn {
+  background-color: #1e3a8a;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .patient-form-title {
+    font-size: 2rem;
+  }
+  
+  .section-header {
+    font-size: 1.5rem;
+  }
+  
+  .form-section {
+    padding: 1rem;
+  }
+  
+  .avatar-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .btn-submit,
+  .btn-cancel {
+    font-size: 1.1rem;
+    padding: 0.6rem 1.2rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/patients/PatientForm.jsx b/src/components/patients/PatientForm.jsx
index a8cdd620..fd48d03c 100644
--- a/src/components/patients/PatientForm.jsx
+++ b/src/components/patients/PatientForm.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { FormatTelefones, FormatPeso, FormatCPF } from '../utils/Formatar/Format';
+import './PatientForm.css';
 
 function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const [avatarUrl, setAvatarUrl] = useState(null);
@@ -20,17 +21,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const emailRef = useRef(null);
   const telefoneRef = useRef(null);
 
-
   const validarCPF = (cpf) => {
     const cpfLimpo = cpf.replace(/\D/g, '');
 
-
     if (cpfLimpo.length !== 11) return false;
 
-
     if (/^(\d)\1+$/.test(cpfLimpo)) return false;
 
-
     let soma = 0;
     for (let i = 0; i < 9; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
@@ -38,7 +35,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     let resto = 11 - (soma % 11);
     let digito1 = resto === 10 || resto === 11 ? 0 : resto;
 
-
     soma = 0;
     for (let i = 0; i < 10; i++) {
       soma += parseInt(cpfLimpo.charAt(i)) * (11 - i);
@@ -46,7 +42,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     resto = 11 - (soma % 11);
     let digito2 = resto === 10 || resto === 11 ? 0 : resto;
 
-
     return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
   };
 
@@ -71,12 +66,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   const handleChange = (e) => {
     const { name, value, type, checked, files } = e.target;
 
-
     if (value && emptyFields.includes(name)) {
       setEmptyFields(prev => prev.filter(field => field !== name));
     }
 
-
     if (name === 'cpf' && cpfError) {
       setCpfError('');
     }
@@ -120,7 +113,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     switch (fieldName) {
       case 'full_name':
         fieldRef = nomeRef;
- 
         setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
         break;
       case 'cpf':
@@ -139,7 +131,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         return;
     }
 
- 
     setTimeout(() => {
       if (fieldRef.current) {
         fieldRef.current.scrollIntoView({
@@ -148,11 +139,9 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         });
         fieldRef.current.focus();
 
-      
         fieldRef.current.style.border = '2px solid #dc3545';
         fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
 
-
         setTimeout(() => {
           if (fieldRef.current) {
             fieldRef.current.style.border = '';
@@ -164,7 +153,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   };
 
   const handleSubmit = async () => {
-
     const missingFields = [];
     if (!formData.full_name) missingFields.push('full_name');
     if (!formData.cpf) missingFields.push('cpf');
@@ -175,17 +163,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       setEmptyFields(missingFields);
       setShowRequiredModal(true);
 
-     
       setTimeout(() => {
         if (missingFields.length > 0) {
           scrollToEmptyField(missingFields[0]);
         }
-      }, 500); 
-
+      }, 500);
       return;
     }
 
- 
     const cpfLimpo = formData.cpf.replace(/\D/g, '');
     if (cpfLimpo.length !== 11) {
       setShowRequiredModal(true);
@@ -195,7 +180,6 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       return;
     }
 
-   
     if (!validarCPF(formData.cpf)) {
       setShowRequiredModal(true);
       setEmptyFields(['cpf']);
@@ -205,8 +189,10 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
     }
 
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(formData.email)) {
+      throw new Error('Email inválido. Por favor, verifique o email digitado.');
+    }
 
-   
     await onSave({ ...formData, bmi: parseFloat(formData.bmi) || null });
   };
 
@@ -215,48 +201,36 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
   };
 
   return (
-    <div className="card p-3">
-      <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
+    <div className="card patient-form-container">
+      <h3 className="patient-form-title">MediConnect</h3>
 
       {/* DADOS PESSOAIS */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
+      <div className="form-section">
+        <h4 className="section-header" onClick={() => handleToggleCollapse('dadosPessoais')}>
           Dados Pessoais
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.dadosPessoais ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
           <div className="row mt-3">
             {/* AVATAR E INPUT DE FOTO */}
-            <div className="col-md-6 mb-3 d-flex align-items-center">
+            <div className="col-md-6 mb-3 avatar-container">
               <div className="me-3">
                 {avatarUrl ? (
                   <img
                     src={avatarUrl}
                     alt="Avatar do Paciente"
-                    style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
+                    className="avatar-image"
                   />
                 ) : (
-                  <div
-                    style={{
-                      width: '100px',
-                      height: '100px',
-                      borderRadius: '50%',
-                      backgroundColor: '#e0e0e0',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      fontSize: '3.5rem',
-                      color: '#9e9e9e'
-                    }}
-                  >
+                  <div className="avatar-placeholder">
                     &#x2624;
                   </div>
                 )}
               </div>
               <div>
-                <label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
+                <label htmlFor="foto-input" className="btn btn-primary file-input-label">Carregar Foto</label>
                 <input
                   type="file"
                   className="form-control d-none"
@@ -265,48 +239,45 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
                   onChange={handleChange}
                   accept="image/*"
                 />
-                {formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
+                {formData.foto && <span className="ms-2 form-label">{formData.foto.name}</span>}
               </div>
             </div>
 
             {/* CAMPOS OBRIGATÓRIOS */}
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
+              <label className="form-label">Nome: *</label>
               <input
                 ref={nomeRef}
                 type="text"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="full_name"
                 value={formData.full_name || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome social:</label>
-              <input type="text" className="form-control" name="social_name" value={formData.social_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Nome social:</label>
+              <input type="text" className="form-control form-control-custom" name="social_name" value={formData.social_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
+              <label className="form-label">Data de nascimento:</label>
               <input
                 type="date"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="birth_date"
                 value={formData.birth_date || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 min="1900-01-01" max="2025-09-24"
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Gênero:</label>
+              <label className="form-label">Gênero:</label>
               <select
-                className="form-control"
+                className="form-control form-control-custom"
                 name="sex"
                 value={formData.sex || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
               >
                 <option value="">Selecione</option>
                 <option value="Masculino">Masculino</option>
@@ -315,15 +286,14 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CPF: *</label>
+              <label className="form-label">CPF: *</label>
               <input
                 ref={cpfRef}
                 type="text"
-                className={`form-control ${cpfError ? 'is-invalid' : ''}`}
+                className={`form-control form-control-custom ${cpfError ? 'is-invalid' : ''}`}
                 name="cpf"
                 value={formData.cpf || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
               {cpfError && (
@@ -333,12 +303,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               )}
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>RG:</label>
-              <input type="text" className="form-control" name="rg" value={formData.rg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">RG:</label>
+              <input type="text" className="form-control form-control-custom" name="rg" value={formData.rg || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
-              <select className="form-control" name="document_type" value={formData.document_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <label className="form-label">Outros documentos:</label>
+              <select className="form-control form-control-custom" name="document_type" value={formData.document_type || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="CNH">CNH</option>
                 <option value="Passaporte">Passaporte</option>
@@ -346,12 +316,12 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
-              <input type="text" className="form-control" name="document_number" value={formData.document_number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Número do documento:</label>
+              <input type="text" className="form-control form-control-custom" name="document_number" value={formData.document_number || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
-              <select className="form-control" name="race" value={formData.race || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <label className="form-label">Etnia e Raça:</label>
+              <select className="form-control form-control-custom" name="race" value={formData.race || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="Branca">Branca</option>
                 <option value="Preta">Preta</option>
@@ -361,20 +331,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
-              <input type="text" className="form-control" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Naturalidade:</label>
+              <input type="text" className="form-control form-control-custom" name="naturality" value={formData.naturalidade || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
-              <input type="text" className="form-control" name="nationality" value={formData.nationality || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Nacionalidade:</label>
+              <input type="text" className="form-control form-control-custom" name="nationality" value={formData.nationality || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Profissão:</label>
-              <input type="text" className="form-control" name="profession" value={formData.profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Profissão:</label>
+              <input type="text" className="form-control form-control-custom" name="profession" value={formData.profession || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
-              <select className="form-control" name="marital_status" value={formData.marital_status || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <label className="form-label">Estado civil:</label>
+              <select className="form-control form-control-custom" name="marital_status" value={formData.marital_status || ''} onChange={handleChange}>
                 <option value="" disabled>Selecione</option>
                 <option value="Solteiro">Solteiro(a)</option>
                 <option value="Casado">Casado(a)</option>
@@ -383,37 +353,37 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
-              <input type="text" className="form-control" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Nome da Mãe:</label>
+              <input type="text" className="form-control form-control-custom" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
-              <input type="text" className="form-control" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Profissão da mãe:</label>
+              <input type="text" className="form-control form-control-custom" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
-              <input type="text" className="form-control" name="father_name" value={formData.father_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Nome do Pai:</label>
+              <input type="text" className="form-control form-control-custom" name="father_name" value={formData.father_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
-              <input type="text" className="form-control" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Profissão do pai:</label>
+              <input type="text" className="form-control form-control-custom" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
-              <input type="text" className="form-control" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Nome do responsável:</label>
+              <input type="text" className="form-control form-control-custom" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
-              <input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">CPF do responsável:</label>
+              <input type="text" className="form-control form-control-custom" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
-              <input type="text" className="form-control" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Identificador de outro sistema:</label>
+              <input type="text" className="form-control form-control-custom" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} />
             </div>
             <div className="col-md-12 mb-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
-                <label className="form-check-label ms-2" htmlFor="rn_in_insurance" style={{ fontSize: '1.1rem' }}>
+                <input className="form-check-input checkbox-custom" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" />
+                <label className="form-check-label checkbox-label" htmlFor="rn_in_insurance">
                   RN na Guia do convênio
                 </label>
               </div>
@@ -421,35 +391,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
 
             {/* CAMPOS ADICIONAIS */}
             <div className="col-md-12 mb-3 mt-3">
-              <label style={{ fontSize: '1.1rem' }}>Observações:</label>
-              <textarea className="form-control" name="notes" value={formData.notes || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
+              <label className="form-label">Observações:</label>
+              <textarea className="form-control textarea-custom" name="notes" value={formData.notes || ''} onChange={handleChange} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
             </div>
             <div className="col-md-12 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
+              <label className="form-label">Anexos do Paciente:</label>
               <div>
-                <label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>Escolher arquivo</label>
+                <label htmlFor="anexos-input" className="btn btn-secondary file-input-label">Escolher arquivo</label>
                 <input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
-                <span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
+                <span className="ms-2 form-label">{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
               </div>
             </div>
-
           </div>
         </div>
       </div>
 
       {/* INFORMAÇÕES MÉDICAS */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoMedicas')} style={{ fontSize: '1.8rem' }}>
+      <div className="form-section">
+        <h4 className="section-header" onClick={() => handleToggleCollapse('infoMedicas')}>
           Informações Médicas
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.infoMedicas ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.infoMedicas ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
-              <select className="form-control" name="blood_type" value={formData.blood_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <label className="form-label">Tipo Sanguíneo:</label>
+              <select className="form-control form-control-custom" name="blood_type" value={formData.blood_type || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="A+">A+</option>
                 <option value="A-">A-</option>
@@ -462,35 +431,34 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
-              <input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Peso (kg):</label>
+              <input type="text" step="0.1" className="form-control form-control-custom" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} />
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
-              <input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Altura (m):</label>
+              <input type="text" step="0.01" className="form-control form-control-custom" name="height_m" value={formData.height_m || ''} onChange={handleChange} />
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
-              <input type="text" className="form-control" name="bmi" value={formData.bmi || ''} readOnly disabled style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">IMC (kg/m²):</label>
+              <input type="text" className="form-control form-control-custom" name="bmi" value={formData.bmi || ''} readOnly disabled />
             </div>
-
           </div>
         </div>
       </div>
 
       {/* INFORMAÇÕES DE CONVÊNIO */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('infoConvenio')} style={{ fontSize: '1.8rem' }}>
+      <div className="form-section">
+        <h4 className="section-header" onClick={() => handleToggleCollapse('infoConvenio')}>
           Informações de convênio
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.infoConvenio ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Convênio:</label>
-              <select className="form-control" name="convenio" value={formData.convenio || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
+              <label className="form-label">Convênio:</label>
+              <select className="form-control form-control-custom" name="convenio" value={formData.convenio || ''} onChange={handleChange}>
                 <option value="">Selecione</option>
                 <option value="Amil">Amil</option>
                 <option value="Bradesco Saúde">Bradesco Saúde</option>
@@ -499,21 +467,21 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
               </select>
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Plano:</label>
-              <input type="text" className="form-control" name="plano" value={formData.plano || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Plano:</label>
+              <input type="text" className="form-control form-control-custom" name="plano" value={formData.plano || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
-              <input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Nº de matrícula:</label>
+              <input type="text" className="form-control form-control-custom" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} />
             </div>
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Validade da Carteira:</label>
-              <input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Validade da Carteira:</label>
+              <input type="date" className="form-control form-control-custom" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} />
             </div>
             <div className="col-md-2 d-flex align-items-end mb-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
-                <label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
+                <input className="form-check-input checkbox-custom" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" />
+                <label className="form-check-label checkbox-label" htmlFor="validadeIndeterminada">
                   Validade indeterminada
                 </label>
               </div>
@@ -521,8 +489,8 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
             {/* PACIENTE VIP */}
             <div className="col-md-12 mb-3 mt-3">
               <div className="form-check">
-                <input className="form-check-input" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
-                <label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
+                <input className="form-check-input checkbox-custom" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" />
+                <label className="form-check-label checkbox-label" htmlFor="vip">
                   Paciente VIP
                 </label>
               </div>
@@ -532,185 +500,129 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
       </div>
 
       {/* ENDEREÇO */}
-      <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
+      <div className="form-section">
+        <h4 className="section-header" onClick={() => handleToggleCollapse('endereco')}>
           Endereço
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.endereco ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>CEP:</label>
-              <input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">CEP:</label>
+              <input type="text" className="form-control form-control-custom" name="cep" value={formData.cep || ''} onChange={handleChange} />
             </div>
             <div className="col-md-8 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Rua:</label>
-              <input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Rua:</label>
+              <input type="text" className="form-control form-control-custom" name="street" value={formData.street || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
-              <input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Bairro:</label>
+              <input type="text" className="form-control form-control-custom" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
             </div>
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
-              <input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Cidade:</label>
+              <input type="text" className="form-control form-control-custom" name="city" value={formData.city || ''} onChange={handleChange} />
             </div>
             <div className="col-md-2 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Estado:</label>
-              <input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Estado:</label>
+              <input type="text" className="form-control form-control-custom" name="state" value={formData.state || ''} onChange={handleChange} />
             </div>
             <div className="col-md-4 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Número:</label>
-              <input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Número:</label>
+              <input type="text" className="form-control form-control-custom" name="number" value={formData.number || ''} onChange={handleChange} />
             </div>
             <div className="col-md-8 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
-              <input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Complemento:</label>
+              <input type="text" className="form-control form-control-custom" name="complement" value={formData.complement || ''} onChange={handleChange} />
             </div>
           </div>
         </div>
       </div>
 
-      <div className="mb-5 p-4 border rounded shadow-sm">
-        <h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
+      {/* CONTATO */}
+      <div className="form-section">
+        <h4 className="section-header" onClick={() => handleToggleCollapse('contato')}>
           Contato
-          <span className="fs-5">
+          <span className="section-toggle">
             {collapsedSections.contato ? '▲' : '▼'}
           </span>
         </h4>
         <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
           <div className="row mt-3">
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Email: *</label>
+              <label className="form-label">Email: *</label>
               <input
                 ref={emailRef}
                 type="email"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="email"
                 value={formData.email || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
+              <label className="form-label">Telefone: *</label>
               <input
                 ref={telefoneRef}
                 type="text"
-                className="form-control"
+                className="form-control form-control-custom"
                 name="phone_mobile"
                 value={formData.phone_mobile || ''}
                 onChange={handleChange}
-                style={{ fontSize: '1.1rem' }}
                 required
               />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
-              <input type="text" className="form-control" name="phone1" value={formData.phone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Telefone 2:</label>
+              <input type="text" className="form-control form-control-custom" name="phone1" value={formData.phone1 || ''} onChange={handleChange} />
             </div>
             <div className="col-md-6 mb-3">
-              <label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
-              <input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
+              <label className="form-label">Telefone 3:</label>
+              <input type="text" className="form-control form-control-custom" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
             </div>
           </div>
         </div>
       </div>
 
-  
+      {/* MODAL DE VALIDAÇÃO */}
       {showRequiredModal && (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
- 
-            <div
-              style={{
-                backgroundColor: "#1e3a8a",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Atenção</h5>
               <button
                 onClick={handleModalClose}
-                style={{
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                }}
+                className="modal-close-btn"
               >
                 ×
               </button>
             </div>
 
-    
-            <div style={{ padding: "25px 20px" }}>
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
+            <div className="modal-body">
+              <p className="modal-message">
                 {cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
               </p>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
+              <div className="modal-list">
                 {cpfError ? (
-                  <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
+                  <p className="modal-list-item">{cpfError}</p>
                 ) : (
                   <>
-                    {!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
-                    {!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
-                    {!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
-                    {!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
+                    {!formData.full_name && <p className="modal-list-item">- Nome</p>}
+                    {!formData.cpf && <p className="modal-list-item">- CPF</p>}
+                    {!formData.email && <p className="modal-list-item">- Email</p>}
+                    {!formData.phone_mobile && <p className="modal-list-item">- Telefone</p>}
                   </>
                 )}
               </div>
             </div>
 
-      
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
+            <div className="modal-footer">
               <button
                 onClick={handleModalClose}
-                style={{
-                  backgroundColor: "#1e3a8a",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
+                className="modal-confirm-btn"
               >
                 Fechar
               </button>
@@ -719,13 +631,13 @@ function PatientForm({ onSave, onCancel, formData, setFormData, isLoading }) {
         </div>
       )}
 
-
-      <div className="mt-3 text-center">
-        <button className="btn btn-success me-3" onClick={handleSubmit} disabled={isLoading} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+      {/* BOTÕES DE AÇÃO */}
+      <div className="actions-container">
+        <button className="btn btn-success btn-submit" onClick={handleSubmit} disabled={isLoading}>
           {isLoading ? 'Salvando...' : 'Salvar Paciente'}
         </button>
         <Link to='/secretaria/pacientes'>
-          <button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
+          <button className="btn btn-light btn-cancel">
             Cancelar
           </button>
         </Link>
diff --git a/src/pages/DoctorCadastroManager.jsx b/src/pages/DoctorCadastroManager.jsx
index 450e7f75..3d0e11c5 100644
--- a/src/pages/DoctorCadastroManager.jsx
+++ b/src/pages/DoctorCadastroManager.jsx
@@ -3,6 +3,7 @@ import { useAuth } from '../components/utils/AuthProvider';
 import DoctorForm from '../components/doctors/DoctorForm';
 import API_KEY from '../components/utils/apiKeys';
 import { useNavigate, useLocation } from 'react-router-dom';
+import './style/DoctorCadastroManager.css';
 
 function DoctorCadastroManager() {
   const [doctorData, setDoctorData] = useState({});
@@ -65,7 +66,6 @@ function DoctorCadastroManager() {
       if (!response.ok) {
         let errorMessage = `Erro ao salvar médico (${response.status})`;
         
-   
         const responseText = await response.text();
         console.log("Conteúdo da resposta:", responseText);
         
@@ -75,7 +75,6 @@ function DoctorCadastroManager() {
             console.error("Erro detalhado:", errorData);
             errorMessage = errorData.message || errorData.details || errorMessage;
           } catch (jsonError) {
-      
             errorMessage = responseText || errorMessage;
           }
         } else {
@@ -101,7 +100,6 @@ function DoctorCadastroManager() {
         result = { success: true, status: response.status };
       }
 
-  
       setShowSuccessModal(true);
 
     } catch (error) {
@@ -110,7 +108,7 @@ function DoctorCadastroManager() {
       let userFriendlyMessage = error.message;
       
       if (error.message.includes('doctors_cpf_key') || error.message.includes('duplicate key')) {
-        userFriendlyMessage = 'Já existe um médico cadastrado com este CPF. Verifique os dados ou edite o médico existente.';
+        userFriendlyMessage = 'Já existe um médico cadastrado com este CPF.';
       } else if (error.message.includes('Unexpected end of JSON input')) {
         userFriendlyMessage = 'Erro de comunicação com o servidor. Tente novamente.';
       }
@@ -124,7 +122,6 @@ function DoctorCadastroManager() {
 
   const handleCloseSuccessModal = () => {
     setShowSuccessModal(false);
- 
     const prefixo = location.pathname.split("/")[1];
     navigate(`/${prefixo}/medicos`);
   };
@@ -135,83 +132,35 @@ function DoctorCadastroManager() {
 
   return (
     <>
+      {isLoading && (
+        <div className="loading-overlay">
+          <div className="loading-spinner"></div>
+        </div>
+      )}
 
       {showSuccessModal && (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#28a745",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Sucesso</h5>
+        <div className="modal-overlay">
+          <div className="modal-container">
+            <div className="modal-header modal-header-success">
+              <h5 className="modal-title">Sucesso</h5>
               <button
                 onClick={handleCloseSuccessModal}
-                style={{
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                  fontWeight: "bold",
-                }}
+                className="modal-close-button"
               >
                 ×
               </button>
             </div>
 
-            <div style={{ padding: "25px 20px" }}>
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
+            <div className="modal-body">
+              <p className="modal-message">
                 Médico cadastrado com sucesso!
               </p>
             </div>
 
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
+            <div className="modal-footer">
               <button
                 onClick={handleCloseSuccessModal}
-                style={{
-                  backgroundColor: "#28a745",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
+                className="modal-button modal-button-success"
               >
                 Fechar
               </button>
@@ -220,82 +169,29 @@ function DoctorCadastroManager() {
         </div>
       )}
 
-  
       {showErrorModal && (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            position: "fixed",
-            top: 0,
-            left: 0,
-            width: "100%",
-            height: "100%",
-            backgroundColor: "rgba(0,0,0,0.5)",
-            zIndex: 9999,
-          }}
-        >
-          <div
-            style={{
-              backgroundColor: "#fff",
-              borderRadius: "10px",
-              width: "400px",
-              maxWidth: "90%",
-              boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-              overflow: "hidden",
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#dc3545",
-                padding: "15px 20px",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}
-            >
-              <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Erro</h5>
+        <div className="modal-overlay">
+          <div className="modal-container">
+            <div className="modal-header modal-header-error">
+              <h5 className="modal-title">Erro</h5>
               <button
                 onClick={handleCloseErrorModal}
-                style={{
-                  background: "none",
-                  border: "none",
-                  fontSize: "20px",
-                  color: "#fff",
-                  cursor: "pointer",
-                }}
+                className="modal-close-button"
               >
                 ×
               </button>
             </div>
 
-            <div style={{ padding: "25px 20px" }}>
-              <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
+            <div className="modal-body">
+              <p className="modal-message">
                 {errorMessage}
               </p>
             </div>
 
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                padding: "15px 20px",
-                borderTop: "1px solid #ddd",
-              }}
-            >
+            <div className="modal-footer">
               <button
                 onClick={handleCloseErrorModal}
-                style={{
-                  backgroundColor: "#dc3545",
-                  color: "#fff",
-                  border: "none",
-                  padding: "8px 20px",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontSize: "1rem",
-                  fontWeight: "bold",
-                }}
+                className="modal-button modal-button-error"
               >
                 Fechar
               </button>
diff --git a/src/pages/PatientCadastroManager.jsx b/src/pages/PatientCadastroManager.jsx
index 701e6b5b..1504b5b5 100644
--- a/src/pages/PatientCadastroManager.jsx
+++ b/src/pages/PatientCadastroManager.jsx
@@ -1,70 +1,64 @@
-import {useState} from 'react';
+import { useState } from 'react';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import PatientForm from '../components/patients/PatientForm';
 import API_KEY from '../components/utils/apiKeys';
 import { useAuth } from '../components/utils/AuthProvider';
+import './style/PatientCadastroManager.css';
 
-function PatientCadastroManager( {setCurrentPage} ) {
+function PatientCadastroManager({ setCurrentPage }) {
   const navigate = useNavigate()
   const [showModal, setShowModal] = useState(false);
-  const [infosModal, setInfosModal] = useState({title:'', message:''});
+  const [infosModal, setInfosModal] = useState({ title: '', message: '' });
   const [isLoading, setIsLoading] = useState(false);
 
   const { getAuthorizationHeader, isAuthenticated } = useAuth();
   const [formData, setFormData] = useState({})
 
-
   const validarCPF = (cpf) => {
     cpf = cpf.replace(/\D/g, '');
-    
+
     if (cpf.length !== 11) return false;
-    
-   
+
     if (/^(\d)\1+$/.test(cpf)) return false;
 
     let soma = 0;
     let resto;
-    
+
     for (let i = 1; i <= 9; i++) {
-      soma = soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
+      soma = soma + parseInt(cpf.substring(i - 1, i)) * (11 - i);
     }
-    
+
     resto = (soma * 10) % 11;
     if ((resto === 10) || (resto === 11)) resto = 0;
     if (resto !== parseInt(cpf.substring(9, 10))) return false;
-    
+
     soma = 0;
     for (let i = 1; i <= 10; i++) {
-      soma = soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
+      soma = soma + parseInt(cpf.substring(i - 1, i)) * (12 - i);
     }
-    
+
     resto = (soma * 10) % 11;
     if ((resto === 10) || (resto === 11)) resto = 0;
     if (resto !== parseInt(cpf.substring(10, 11))) return false;
-    
+
     return true;
   }
- 
+
   const handleSavePatient = async (patientData) => {
-    console.log(' Iniciando salvamento do paciente:', patientData);
     setIsLoading(true);
 
     try {
-
-      console.log(' Verificando autenticação...');
       if (!isAuthenticated) {
         throw new Error('Usuário não autenticado');
       }
 
       const authHeader = getAuthorizationHeader();
-      console.log(' Header de autorização:', authHeader ? 'Presente' : 'Faltando');
-      
+
       if (!authHeader) {
         throw new Error('Header de autorização não encontrado');
       }
 
-
       const cpfLimpo = patientData.cpf.replace(/\D/g, '');
       if (!validarCPF(cpfLimpo)) {
         throw new Error('CPF inválido. Por favor, verifique o número digitado.');
@@ -76,23 +70,15 @@ function PatientCadastroManager( {setCurrentPage} ) {
       myHeaders.append("Authorization", authHeader);
       myHeaders.append("Prefer", "return=representation");
 
-      console.log(' Headers configurados:', {
-        'Content-Type': 'application/json',
-        'apikey': API_KEY ? 'Presente' : 'Faltando',
-        'Authorization': authHeader ? 'Presente' : 'Faltando',
-        'Prefer': 'return=representation'
-      });
-
       const cleanedData = {
         full_name: patientData.full_name,
         cpf: cpfLimpo,
         email: patientData.email,
         phone_mobile: patientData.phone_mobile,
-   
         birth_date: patientData.birth_date || null,
-        sex: patientData.sex === 'Masculino' ? 'M' : 
-             patientData.sex === 'Feminino' ? 'F' : 
-             patientData.sex || null,
+        sex: patientData.sex === 'Masculino' ? 'M' :
+          patientData.sex === 'Feminino' ? 'F' :
+            patientData.sex || null,
         social_name: patientData.social_name || null,
         rg: patientData.rg || null,
         blood_type: patientData.blood_type || null,
@@ -100,16 +86,31 @@ function PatientCadastroManager( {setCurrentPage} ) {
         height_m: patientData.height_m ? parseFloat(patientData.height_m) : null,
         bmi: patientData.bmi ? parseFloat(patientData.bmi) : null,
         notes: patientData.notes || null,
+        mother_name: patientData.mother_name || null,
+        father_name: patientData.father_name || null,
+        guardian_name: patientData.guardian_name || null,
+        guardian_cpf: patientData.guardian_cpf ? patientData.guardian_cpf.replace(/\D/g, '') : null,
+        marital_status: patientData.marital_status || null,
+        profession: patientData.profession || null,
+        naturality: patientData.naturality || null,
+        nationality: patientData.nationality || null,
+        race: patientData.race || null,
+        cep: patientData.cep || null,
+        street: patientData.street || null,
+        number: patientData.number || null,
+        complement: patientData.complement || null,
+        neighborhood: patientData.neighborhood || null,
+        city: patientData.city || null,
+        state: patientData.state || null,
+        phone1: patientData.phone1 || null,
+        phone2: patientData.phone2 || null
       };
 
-      console.log(' Dados limpos para envio:', cleanedData);
-
       if (!cleanedData.full_name || !cleanedData.cpf || !cleanedData.email || !cleanedData.phone_mobile) {
         throw new Error('Dados obrigatórios faltando: nome, CPF, email e telefone são necessários');
       }
 
       var raw = JSON.stringify(cleanedData);
-      console.log(' Payload JSON:', raw);
 
       var requestOptions = {
         method: 'POST',
@@ -118,37 +119,24 @@ function PatientCadastroManager( {setCurrentPage} ) {
         redirect: 'follow'
       };
 
-      console.log(' Fazendo requisição para API...');
       const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
-      
-      console.log(' Status da resposta:', response.status);
-      console.log(' Response ok:', response.ok);
 
       let responseData;
       try {
         responseData = await response.json();
-        console.log(' Corpo da resposta:', responseData);
       } catch (jsonError) {
-        console.log(' Não foi possível parsear JSON da resposta:', jsonError);
         responseData = { error: 'Resposta inválida da API' };
       }
 
-    
       if (!response.ok) {
-        console.error(' Erro da API - Detalhes:', {
-          status: response.status,
-          statusText: response.statusText,
-          data: responseData
-        });
-        
         let errorMessage = 'Erro ao salvar paciente';
-        
+
         if (response.status === 401) {
           errorMessage = 'Não autorizado. Verifique suas credenciais.';
         } else if (response.status === 403) {
           errorMessage = 'Acesso proibido. Verifique suas permissões.';
         } else if (response.status === 409) {
-          errorMessage = 'Paciente com este CPF já existe.';
+          errorMessage = 'Já existe um paciente cadastrado com este CPF.';
         } else if (response.status === 400) {
           errorMessage = `Dados inválidos: ${responseData.details || responseData.message || 'Verifique os campos'}`;
         } else if (response.status === 422) {
@@ -158,27 +146,22 @@ function PatientCadastroManager( {setCurrentPage} ) {
         } else {
           errorMessage = `Erro ${response.status}: ${responseData.message || responseData.error || 'Erro desconhecido'}`;
         }
-        
+
         throw new Error(errorMessage);
       }
 
-      console.log(' Paciente salvo com sucesso:', responseData);
-      
-    
       setInfosModal({
         title: 'Sucesso',
         message: 'O cadastro do paciente foi realizado com sucesso.'
       });
       setShowModal(true);
-      
-  
+
       setTimeout(() => {
         setShowModal(false);
         navigate('/secretaria/pacientes');
       }, 2000);
-      
+
     } catch (error) {
-      console.error(' Erro completo ao salvar paciente:', error);
       setInfosModal({
         title: 'Erro',
         message: error.message || 'Não foi possível conectar ao servidor. Verifique sua internet e tente novamente.'
@@ -192,76 +175,30 @@ function PatientCadastroManager( {setCurrentPage} ) {
   return (
     <>
       <div className="page-heading">
-        {showModal &&(
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              position: "fixed",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: "100%",
-              backgroundColor: "rgba(0,0,0,0.5)",
-              zIndex: 9999,
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: "#fff",
-                borderRadius: "10px",
-                width: "400px",
-                maxWidth: "90%",
-                boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
-                overflow: "hidden",
-              }}
-            >
-
-              <div
-                style={{
-                  backgroundColor: infosModal.title === 'Sucesso' ? "#28a745" : "#dc3545",
-                  padding: "15px 20px",
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                }}
-              >
-                <h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>{infosModal.title}</h5>
+        {showModal && (
+          <div className="modal-overlay fade-in">
+            <div className="modal-content slide-in">
+              <div className={`modal-header ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}>
+                <h5>{infosModal.title}</h5>
                 <button
                   onClick={() => setShowModal(false)}
-                  style={{
-                    background: "none",
-                    border: "none",
-                    fontSize: "20px",
-                    color: "#fff",
-                    cursor: "pointer",
-                  }}
+                  className="modal-close-button"
                 >
                   ×
                 </button>
               </div>
 
-
-              <div style={{ padding: "25px 20px" }}>
-                <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
+              <div className="modal-body">
+                <p className="modal-message">
                   {infosModal.message}
                 </p>
                 {infosModal.title === 'Erro' && (
-                  <p style={{ color: "#666", fontSize: "0.9rem", margin: "10px 0 0 0" }}>
+                  <p className="modal-submessage">
                   </p>
                 )}
               </div>
 
-   
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "flex-end",
-                  padding: "15px 20px",
-                  borderTop: "1px solid #ddd",
-                }}
-              >
+              <div className="modal-footer">
                 <button
                   onClick={() => {
                     setShowModal(false);
@@ -269,16 +206,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
                       navigate('/secretaria/pacientes');
                     }
                   }}
-                  style={{
-                    backgroundColor: "#1e3a8a",
-                    color: "#fff",
-                    border: "none",
-                    padding: "8px 20px",
-                    borderRadius: "6px",
-                    cursor: "pointer",
-                    fontSize: "1rem",
-                    fontWeight: "bold",
-                  }}
+                  className={`modal-confirm-button ${infosModal.title === 'Sucesso' ? 'success' : 'error'}`}
                 >
                   Fechar
                 </button>
diff --git a/src/pages/style/DoctorCadastroManager.css b/src/pages/style/DoctorCadastroManager.css
new file mode 100644
index 00000000..3ac82bfe
--- /dev/null
+++ b/src/pages/style/DoctorCadastroManager.css
@@ -0,0 +1,281 @@
+/* Estilos do modal */
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-container {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: modal-appear 0.3s ease-out;
+}
+
+@keyframes modal-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.modal-header {
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header-success {
+  background-color: #28a745 !important;
+}
+
+.modal-header-error {
+  background-color: #dc3545 !important;
+}
+
+.modal-title {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold;
+  transition: opacity 0.2s ease;
+}
+
+.modal-close-button:hover {
+  opacity: 0.8;
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-button {
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: all 0.2s ease;
+}
+
+.modal-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.modal-button-success {
+  background-color: #28a745;
+  color: #fff;
+}
+
+.modal-button-success:hover {
+  background-color: #218838;
+}
+
+.modal-button-error {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+.modal-button-error:hover {
+  background-color: #c82333;
+}
+
+.page-heading {
+  margin-bottom: 2rem;
+  padding: 1rem 0;
+  border-bottom: 1px solid #eaeaea;
+}
+
+.page-heading h3 {
+  color: #333;
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.page-content {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.page-content section {
+  margin: 0;
+}
+
+.page-content .row {
+  margin: 0;
+}
+
+.page-content .col-12 {
+  padding: 0;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9998;
+}
+
+.loading-spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.modal-close-button:focus,
+.modal-button:focus {
+  outline: 2px solid #0056b3;
+  outline-offset: 2px;
+}
+
+/* Garantir que as cores dos cabeçalhos sejam aplicadas */
+.modal-overlay .modal-container .modal-header.modal-header-success {
+  background-color: #28a745 !important;
+}
+
+.modal-overlay .modal-container .modal-header.modal-header-error {
+  background-color: #dc3545 !important;
+}
+
+@media (max-width: 768px) {
+  .modal-container {
+    width: 95%;
+    margin: 1rem;
+  }
+  
+  .modal-body {
+    padding: 20px 15px;
+  }
+  
+  .modal-message {
+    font-size: 1rem;
+  }
+  
+  .page-heading h3 {
+    font-size: 1.5rem;
+  }
+  
+  .page-content {
+    padding: 1.5rem;
+    margin: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .modal-header {
+    padding: 12px 15px;
+  }
+  
+  .modal-title {
+    font-size: 1.1rem;
+  }
+  
+  .modal-body {
+    padding: 15px;
+  }
+  
+  .modal-footer {
+    padding: 12px 15px;
+  }
+  
+  .page-content {
+    padding: 1rem;
+    margin: 0.5rem;
+  }
+  
+  .page-heading {
+    margin-bottom: 1.5rem;
+    padding: 0.75rem 0;
+  }
+  
+  .page-heading h3 {
+    font-size: 1.35rem;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .modal-container {
+    border: 2px solid #000;
+  }
+  
+  .modal-header-success {
+    background-color: #006400 !important;
+  }
+  
+  .modal-header-error {
+    background-color: #8b0000 !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-container {
+    animation: none;
+  }
+  
+  .modal-button:hover {
+    transform: none;
+  }
+  
+  .loading-spinner {
+    animation-duration: 2s;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/style/PatientCadastroManager.css b/src/pages/style/PatientCadastroManager.css
new file mode 100644
index 00000000..1c8b2cd7
--- /dev/null
+++ b/src/pages/style/PatientCadastroManager.css
@@ -0,0 +1,278 @@
+.page-heading {
+  margin-bottom: 2rem;
+}
+
+.page-heading h3 {
+  color: #1e3a8a;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.page-content {
+  padding: 1rem 0;
+}
+
+.alert-info {
+  background-color: #d1ecf1;
+  border-color: #bee5eb;
+  color: #0c5460;
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.15em;
+}
+
+.section {
+  margin-bottom: 2rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -0.75rem;
+  margin-left: -0.75rem;
+}
+
+.col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+/* Estilos do modal */
+.modal-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  max-width: 90%;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  animation: modal-appear 0.3s ease-out;
+}
+
+@keyframes modal-appear {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.modal-header {
+  background-color: #1e3a8a;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header.success {
+  background-color: #28a745 !important;
+}
+
+.modal-header.error {
+  background-color: #dc3545 !important;
+}
+
+.modal-header h5 {
+  color: #fff;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.modal-close-button {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.modal-close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.modal-body {
+  padding: 25px 20px;
+}
+
+.modal-message {
+  color: #111;
+  font-size: 1.1rem;
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.modal-submessage {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 10px 0 0 0;
+  line-height: 1.4;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px 20px;
+  border-top: 1px solid #ddd;
+}
+
+.modal-confirm-button {
+  background-color: #1e3a8a;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  transition: background-color 0.2s;
+}
+
+.modal-confirm-button:hover {
+  background-color: #1e40a5;
+}
+
+.modal-confirm-button.success {
+  background-color: #28a745 !important;
+}
+
+.modal-confirm-button.success:hover {
+  background-color: #218838 !important;
+}
+
+.modal-confirm-button.error {
+  background-color: #dc3545 !important;
+}
+
+.modal-confirm-button.error:hover {
+  background-color: #c82333 !important;
+}
+
+@media (max-width: 768px) {
+  .page-heading {
+    margin-bottom: 1.5rem;
+  }
+  
+  .page-heading h3 {
+    font-size: 1.5rem;
+  }
+  
+  .modal-content {
+    width: 95%;
+    margin: 1rem;
+  }
+  
+  .modal-body {
+    padding: 20px 15px;
+  }
+  
+  .modal-message {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .page-heading h3 {
+    font-size: 1.3rem;
+  }
+  
+  .modal-header {
+    padding: 12px 15px;
+  }
+  
+  .modal-header h5 {
+    font-size: 1.1rem;
+  }
+  
+  .modal-body {
+    padding: 15px;
+  }
+  
+  .modal-footer {
+    padding: 12px 15px;
+  }
+  
+  .modal-confirm-button {
+    padding: 6px 16px;
+    font-size: 0.9rem;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.loading-state {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.loading-state::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 10;
+}
\ No newline at end of file