diff --git a/curriculumsearch/src/main/resources/static/main.js b/curriculumsearch/src/main/resources/static/main.js
index e30ef26..528e317 100644
--- a/curriculumsearch/src/main/resources/static/main.js
+++ b/curriculumsearch/src/main/resources/static/main.js
@@ -90,22 +90,31 @@ function agregarFieldExpierncia(event){
     //imprimir lista actualizada
     const div = document.querySelector("#experiencias")
     const div1 = document.createElement('div');
-    let content='<ul>'
+    
+    let content='';
     for (let index = 0; index < experiencias.length; index++) {
         const exp = experiencias[index];
         if(exp==null) continue;
         content += `
-        <li id="exp-${index}">        
-            ${exp.institucion}
-            <button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span> Eliminar</button>
-        </li>
+        <div class="col border border-3" id="exp-${index}">
+                    <h4><center>Experiencia</center></h4>      
+                    <label><b>Institucion:</b> ${exp.institucion}</label><br>  
+                    <label><b>Fecha Inicio:</b> ${exp.fechaDesde}</label><br>
+                    <label><b>Fecha Fin:</b> ${exp.fechaHasta}</label><br>
+                    <label><b>Referencia:</b> ${exp.nombreReferencia}</label><br>
+                    <label><b>Telefono de la referencia:</b> ${exp.telefonoReferencia}</label><br>
+                    <label><b>Cargo:</b> ${exp.cargo}</label><br>
+                    <label><b>Motivo de salida:</b> ${exp.motivoSalida}</label><br>
+            
+            <button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
+        </div>
         
         `
     }
-    content += "</ul>" 
-    div1.innerHTML = content
-    div.innerHTML = '';
-    div.appendChild(div1);
+    //content += "</ul>" 
+    div.innerHTML = content
+    //div.innerHTML = '';
+    //div.appendChild(div1);
     cont_experiencia++;
 }
 /*--------------------------------------------------------------------*/
@@ -152,24 +161,26 @@ function agregarFieldTecnologia(){
     const div1 = document.createElement('div');
     console.log(tecnologias[0])
 
-    let content1='<ul>'
+    let content1=''
     for (let index = 0; index < tecnologias.length; index++) {
         const tecn = tecnologias[index];
         if(tecn==null) continue;
         content1 += `
-        <li id="tecn-${index}">        
-            ${tecn.tecnologia.nombre}         
+        <div class="col border border-3" id="tecn-${index}">        
+            <label>${tecn.tecnologia.nombre}</label><br>
+            <label><progress value="${tecn.nivel}" max="5"></progress></label> <br>        
             <button type="button" class="btn btn-primary" onclick="eliminarTecnologia(event)">Eliminar</button>
             <br>
-        </li>
+        </div>
         
         `
     }
-    content1 += "</ul>" 
-    div1.innerHTML = content1
-    div.innerHTML = '';
-    div.appendChild(div1);
+    //content1 += "</ul>" 
+    div.innerHTML = content1
+    //div.innerHTML = '';
+    //div.appendChild(div1);
     cont_tecnologia++;
+    document.querySelector("#no-valid-tecno").style.display = "none";
 }
 
 
@@ -192,6 +203,16 @@ function serializeJSON (form) {
     // Create a new FormData object
     const formData = new FormData(form);
 
+    if(formData.get('fechaNacimiento')>=new Date().toISOString().slice(0,10)){
+        form['fechaNacimiento'].setCustomValidity('Fecha de nacimiento debe ser menor que actual')
+        noValidateFlag = true;
+        return;
+    }
+    else{
+        form['fechaNacimiento'].setCustomValidity('')   
+    }
+
+
     // Create an object to hold the name/value pairs
     const pairs = {};
 
@@ -274,8 +295,11 @@ form.addEventListener("submit",(evt)=>{
     //     evt.stopPropagation()
     // }
     // form.classList.add('was-validated')
+    evt.preventDefault();
+    let formSerialized = serializeJSON(form);
+    let fileCV = obtenerCV();
     if(!noValidateFlag){
-        postData('work-with-us', formatearJsonWithFile(serializeJSON(form),obtenerCV()))
+        postData('work-with-us', formatearJsonWithFile(formSerialized,fileCV))
             .then(response => {
                 if(response.status==200 || response.status==302){
                     location.replace(response.url);
@@ -283,8 +307,7 @@ form.addEventListener("submit",(evt)=>{
                     console.log(response.text().then(value => console.log(value)))
                 }
             });
-        evt.preventDefault();
-    }
+        }
     noValidateFlag = false
 } );
 
@@ -348,23 +371,29 @@ function agregarFieldEstudio(){
     //imprimir lista actualizada
     const div = document.querySelector("#estudios")
     const div1 = document.createElement('div');
-    let content='<ul>'
+    let content='';
     
     for (let index = 0; index < estudios.length; index++) {
         const est = estudios[index];
         if(est==null) continue;
         content += `
-        <li id="est-${index}">        
-            ${est.institucion.nombre}
+        <div class="col border border-3" id="est-${index}">
+            <h4><center>Estudio</center></h4>
+            <label><b>Institucion:</b> ${est.institucion.nombre}</label><br>
+            <label><b>Tipo de estudio:</b> ${est.tipoDeEstudio}</label><br>  
+            <label><b>Carrera:</b> ${est.temaDeEstudio}</label><br>     
+            <label><b>Fecha Inicio:</b> ${est.fechaDesde}</label><br>
+            <label><b>Fecha Fin:</b> ${est.fechaHasta}</label><br>
+            <label><b>Estado:</b> ${est.estado}</label><br>
             <button type="button" class="btn btn-primary" onclick="eliminarEstudio(event)">Eliminar</button>
-        </li>
+        </div>
         
         `
     }
-    content += "</ul>" 
-    div1.innerHTML = content
-    div.innerHTML = '';
-    div.appendChild(div1);
+ 
+    div.innerHTML = content
+    //div.innerHTML = '';
+    //div.appendChild(div1);
     cont_estudios++;
 
 }
@@ -431,23 +460,24 @@ function agregarFieldCargo(){
     const div = document.querySelector("#cargos")
     const div1 = document.createElement('div');
 
-    let content1='<ul>'
+    let content1=''
     for (let index = 0; index < postulaciones.length; index++) {
         const car = postulaciones[index];
         if(car==null) continue;
         content1 += `
-        <li id="car-${index}">
-            ${document.querySelector('[name=cargo-id] > option[value="'+car.id+'"]').innerHTML}<br>        
-            <button  type="button" class="btn btn-primary" onclick="eliminarCargoPostulante(event)">Eliminar</button>
-        </li>
-        
+        <div class="col border border-3" id="car-${index}" style="text-transform: uppercase;">
+            <label>${document.querySelector('[name=cargo-id] > option[value="'+car.id+'"]').innerHTML}</label><br>        
+            <button  type="button" class="btn btn-primary" onclick="eliminarCargoPostulante(event)">Eliminar</button><br>
+        </div>
+
         `
     }
-    content1 += "</ul>" 
-    div1.innerHTML = content1
-    div.innerHTML = '';
-    div.appendChild(div1);
+    //content1 += "</ul>" 
+    div.innerHTML = content1
+    //div.innerHTML = '';
+    //div.appendChild(div1);
     cont_cargo++;
+    document.querySelector("#no-valid-cargo").style.display = "none";
 }
 
 /*---------------------------------------------------------------------------------------------------*/
@@ -532,22 +562,25 @@ function agregarFieldReferencia(event){
     //imprimir lista actualizada
     const div = document.querySelector("#referencia")
     const div1 = document.createElement('div');
-    let content='<ul>'
+    let content=''
     for (let index = 0; index < referencias.length; index++) {
         const exp = referencias[index];
         if(exp==null) continue;
         content += `
-        <li id="exp-${index}">        
-            ${exp.nombre}
-            <button type="button" class="btn btn-primary" onclick="eliminarReferencia(event)"> <span class="glyphicon glyphicon-trash"></span> Tras</button>
-        </li>
+        <div class="col border border-3" id="exp-${index}"> 
+            <h4><center>Referencia Personal</center></h4>       
+            <label><b>Nombre:</b> ${exp.nombre}</label><br>
+            <label><b>Telefono:</b> ${exp.telefono}</label><br>
+            <label><b>Relacion:</b> ${exp.relacion}</label><br>
+            <button type="button" class="btn btn-primary" onclick="eliminarReferencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
+        </div>
         
         `
     }
-    content += "</ul>" 
-    div1.innerHTML = content
-    div.innerHTML = '';
-    div.appendChild(div1);
+    //content += "</ul>" 
+    div.innerHTML = content
+    //div.innerHTML = '';
+    //div.appendChild(div1);
     cont_referencias++;
 }
 
diff --git a/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css b/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
index 25dad7d..f227aa3 100644
--- a/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
+++ b/curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
@@ -1,6 +1,6 @@
 body {
-    /* background-color: #506BEE; */
-    background-image:url(/img/fondo.png);
+    background-color: #baebd8; 
+    /* background-image:url(/img/fondo2.png); */
     /*background-size:cover;*/
     background-repeat:repeat;
     height:100vh;width:100vw;  
diff --git a/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp b/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp
index 0791ec2..11f7542 100644
--- a/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp
@@ -240,7 +240,7 @@
                     <div class="col-md-6">
                         <div class="card">
                             <div class="card-body">
-                          <div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">
+                          <div id="carouselExampleIndicators1" class="carousel carousel-dark slide" data-bs-ride="carousel">
                           
                           <div class="carousel-inner">
                               
@@ -287,11 +287,11 @@
                                   
                             
                           </div>
-                          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+                          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators1" data-bs-slide="prev">
                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                             <span class="visually-hidden">Previous</span>
                           </button>
-                          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+                          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators1" data-bs-slide="next">
                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
                             <span class="visually-hidden">Next</span>
                           </button>
@@ -354,7 +354,7 @@
               </form:form> 
           </div>
           <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
           </div>
       </div>
       </div>
diff --git a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
index 3e8973b..bc30149 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
@@ -16,212 +16,176 @@
 
   <body class="container">
     <form name="postulante" method="post" class="needs-validation" novalidate>
-      <div class="container mt-3">
-          <div class="card p-3 text-center">
-              <div class="d-flex flex-row justify-content-center mb-3">
-
-              </div>
-              <h4>Curriculum</h4>
-              <div class="row">
-                  <div class="about-inputs  mb-3 col-md-12 center">
-                    <label for="resumen" class="form-label">Resumen</label>
-                    <textarea  class="form-control center  " name="resumen" id="resumen" required > </textarea>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-
-                  </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="nombre" class="form-label">Nombre</label>
-                    <input type="text" name="nombre" class="form-control  " id="nombre" required>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-                  </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="apellido" class="form-label">Apellido</label>
-                    <input type="text" name="apellido" class="form-control  " id="apellido" required>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-                  </div>
-
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="correo" class="form-label">Email address</label>
-                    <input type="email" name="correo" class="form-control  " id="correo" required>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-                  </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="nacionalidad" class="form-label"> Nacionalidad</label>
-                    <select name="nacionalidad" id="nacionalidad" class="bg-light">
-                      <c:forEach items="${nacionalidades}" var="nacionalidad">
-                        <option value="${nacionalidad.getDescripcion()}">${nacionalidad.getDescripcion()}</option>
-                      </c:forEach>
-
-                  </select> </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="tipoDocumento" class="form-label"> Tipo de documento</label>
-                    <select name="tipoDocumento" id="tipoDocumento" class="bg-light" required onchange='carg(this.value);'>
-                        <option value='CI' selected>C.I</option>
-                        <option value='PAS'>Pasport</option>
-                        <option value='Otro'>Otro</option>
-                    </select>
-                  </div>
-
-                  <div class="inputs  mb-3 col-md-6">
-                    <label for="nroDocument" class="form-label">Numero de Documento</label>
-                    <input type="number" name="nroDocument" class="form-control  " id="nroDocument" required>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-                  </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="departamentos" class="form-label"> Departamentos</label>
-                    <select  id="departamentos" class="bg-light">
-                      <c:forEach items="${departamentos}" var="departamentos">
-                        <option value="${departamentos.getId()}">${departamentos.getNombre()}</option>
-                      </c:forEach>
-
-                    </select>
-                  </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="ciudad" class="form-label"> Ciudad</label>
-                    <select name="ciudadId" id="ciudad" class="bg-light">
-
-
-                     </select>
-                </div>
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="telefono" class="form-label">Telefono</label>
-                    <input type="number" name="telefono" class="form-control  " id="telefono" required>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-                  </div>
-
-                  <div class="inputs mb-3 col-md-6">
-                    <label for="fechaNacimiento" class="form-label">Fecha de nacimiento</label>
-                    <input type="date" name="fechaNacimiento" class="form-control  " id="fechaNacimiento" required>
-                    <div class="valid-feedback">
-                      Luce Bien!
-                    </div>
-                  </div>
-
-
-                  <div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label>
-                    <select name="nivelIngles" id="nivelIngles" class="content-select">
-                    <option value="1" selected>Ingles muy basico</option>
-                    <option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
-                    <option value="3" >Puedo leer tranquilamente</option>
-                    <option value="4" >Puedo escribir documentacion</option>
-                    <option value="5" >Puedo escribir y hablar tranquilamente</option>
-                    </select>
-                  </div>
-
-                  <div class="inputs mb-3 col-md-4">
-                    <label for="disponibilidad" class="form-label"> Disponibilidad</label>
-                    <select name="disponibilidad" id="disponibilidad" class="content-select">
-                      <c:forEach items="${disponibilidades}" var="disponibilidad">
-                        <option value="${disponibilidad.getCode()}">${disponibilidad.getDescripcion()}</option>
-                      </c:forEach>
-
-                  </select> </div>
-
-                  <div class="inputs mb-3 col-md-4">
-                    <label for="estadoCivil" class="form-label"> Estado Civil</label>
-                    <select name="estadoCivil" id="estadoCivil" class="content-select">
-                      <c:forEach items="${estadosCiviles}" var="estadoCivil">
-                        <option value="${estadoCivil.getDescripcion()}">${estadoCivil.getDescripcion()}</option>
-                      </c:forEach>
-
-
-                  </select> </div>
-                  <div class="inputs mb-3 col-md-4">
-                    <label for="formFile" class="form-label">Cargar cv</label>
-                    <input class="form-control" type="file" id="cvFile">
-                  </div>
-
-                  <div class="inputs p-3 py-5">
-                    <div class="inputs d-flex justify-content-between align-items-center experience">
-                        <span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#cargoForm">
-                            <i class="fa fa-plus"></i>&nbsp;Cargo al que postulas
-                        </span>
-                    </div><br>
-                  </div>
-                  <p id="no-valid-cargo" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
-                      *Agrega por lo menos un cargo</p>
-
-                  <div class="mt-3 gap-2 d-flex justify-content-between" id="cargos">
-                  </div>
-
-
-                  <div class="inputs p-3 py-5">
-                    <div class=" inputs d-flex justify-content-between align-items-center experience">
-                        <span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#experienciaForm">
-                            <i class="fa fa-plus"></i>&nbsp;Agregar Experiencia
-                        </span>
-                    </div><br>
-                  </div>
-
-                  <div class="mt-3 gap-2 d-flex justify-content-between" id="experiencias">
-                  </div>
-
-
-                  <div class=" p-3 py-5">
-                   <div class="  d-flex justify-content-between align-items-center experience">
-                       <span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#estudioForm">
-                           <i class="fa fa-plus"></i>&nbsp;Agregar Estudio
-                       </span>
-                   </div><br>
-                  </div>
-
-                  <div class="mt-3 gap-2 d-flex justify-content-between" id="estudios">
-                  </div>
-
-
-                <div class=" p-3 py-5">
-                  <div class="  d-flex justify-content-between align-items-center experience">
-                      <span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#tecnologiaForm">
-                          <i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia
-                      </span>
-                  </div><br>
-                </div>
-                  <p id="no-valid-tecno" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
-                      *Agrega por lo menos una tecnologia</p>
-
-
-                <div class="mt-3 gap-2 d-flex justify-content-between" id="tecnologias">
-                </div>
-
-
-                <div class=" p-3 py-5">
-                  <div class="  d-flex justify-content-between align-items-center experience">
-                      <span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#referenciaForm">
-                          <i class="fa fa-plus"></i>&nbsp;Referencias Personales
-                      </span>
-                  </div><br>
-                </div>
-                <div class="mt-3 gap-2 d-flex justify-content-between" id="referencia">
-                </div>
-
-
-
-                <div class="mt-3 gap-2 d-flex justify-content-end">
-                  <a class="px-3 btn btn-sm btn-outline-primary" href="/postulante">Cancelar</a>
-                  <button class="px-3 btn btn-sm btn-primary" type="submit">Guardar</button>
-                </div>
-              </div>
-          </div>
-      </div>
+                      <div class="container mt-3">
+                          <div class="card p-3 text-center">
+                              <div class="d-flex flex-row justify-content-center mb-3">
+                                
+                              </div>
+                              <h4>Curriculum</h4>
+                              <div class="row">
+                                  <div class="about-inputs  mb-3 col-md-12 center">
+                                    <label for="resumen" class="form-label">Resumen</label>
+                                    <textarea  class="form-control center  " name="resumen" id="resumen" required > </textarea>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                    
+                                  </div>
+
+                                  <div class="inputs mb-3 col-md-6">
+                                    <label for="nombre" class="form-label">Nombre</label>
+                                    <input type="text" name="nombre" class="form-control  " id="nombre" required>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                  </div>
+                                  
+                                  <div class="inputs mb-3 col-md-6">
+                                    <label for="apellido" class="form-label">Apellido</label>
+                                    <input type="text" name="apellido" class="form-control  " id="apellido" required>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                  </div>
+          
+
+                                  <div class="inputs mb-3 col-md-6">
+                                    <label for="correo" class="form-label">Email address</label>
+                                    <input type="email" name="correo" class="form-control  " id="correo" required>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                  </div>
+
+                                  <div class="inputs mb-3 col-md-6"> 
+                                    <label for="nacionalidad" class="form-label"> Nacionalidad</label> 
+                                    <select name="nacionalidad" id="nacionalidad" class="bg-light">
+                                      <c:forEach items="${nacionalidades}" var="nacionalidad">
+                                        <option value="${nacionalidad.getDescripcion()}">${nacionalidad.getDescripcion()}</option>
+                                      </c:forEach>
+                                    
+                                  </select> </div>
+
+                                  <div class="inputs mb-3 col-md-6"> 
+                                    <label for="tipoDocumento" class="form-label"> Tipo de documento</label> 
+                                    <select name="tipoDocumento" id="tipoDocumento" class="bg-light" required onchange='carg(this.value);'>
+                                        <option value='CI' selected>C.I</option>
+                                        <option value='PAS'>Pasport</option>
+                                        <option value='Otro'>Otro</option>
+                                    </select> 
+                                  </div>
+                              
+                                  <div class="inputs  mb-3 col-md-6">
+                                    <label for="nroDocument" class="form-label">Numero de Documento</label>
+                                    <input type="number" name="nroDocument" class="form-control  " id="nroDocument" required>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                  </div>
+                                  
+                                  <div class="inputs mb-3 col-md-6"> 
+                                    <label for="departamentos" class="form-label"> Departamentos</label> 
+                                    <select  id="departamentos" class="bg-light">
+                                      <c:forEach items="${departamentos}" var="departamentos">
+                                        <option value="${departamentos.getId()}">${departamentos.getNombre()}</option>
+                                      </c:forEach>
+                                    
+                                    </select> 
+                                  </div>
+
+                                  <div class="inputs mb-3 col-md-6"> 
+                                    <label for="ciudad" class="form-label"> Ciudad</label> 
+                                    <select name="ciudadId" id="ciudad" class="bg-light">
+                                      
+                                    
+                                    </select> 
+                                  </div>
+                                  <div class="inputs mb-3 col-md-6">
+                                    <label for="telefono" class="form-label">Telefono</label>
+                                    <input type="number" name="telefono" class="form-control  " id="telefono" required>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                  </div>
+
+                                  <div class="inputs mb-3 col-md-6">
+                                    <label for="fechaNacimiento" class="form-label">Fecha de nacimiento</label>
+                                    <input type="date" name="fechaNacimiento" class="form-control  " id="fechaNacimiento" required>
+                                    <div class="valid-feedback">
+                                      Luce Bien!
+                                    </div>
+                                  </div>
+                              
+                        
+                                  <div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
+                                    <select name="nivelIngles" id="nivelIngles" class="content-select">
+                                    <option value="1" selected>Ingles muy basico</option>
+                                    <option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
+                                    <option value="3" >Puedo leer tranquilamente</option>
+                                    <option value="4" >Puedo escribir documentacion</option>
+                                    <option value="5" >Puedo escribir y hablar tranquilamente</option>
+                                    </select> 
+                                  </div>
+                                
+                                  <div class="inputs mb-3 col-md-4"> 
+                                    <label for="disponibilidad" class="form-label"> Disponibilidad</label> 
+                                    <select name="disponibilidad" id="disponibilidad" class="content-select">
+                                      <c:forEach items="${disponibilidades}" var="disponibilidad">
+                                        <option value="${disponibilidad.getCode()}">${disponibilidad.getDescripcion()}</option>
+                                      </c:forEach>
+                                    
+                                  </select> </div>
+                                
+                                  <div class="inputs mb-3 col-md-4"> 
+                                    <label for="estadoCivil" class="form-label"> Estado Civil</label> 
+                                    <select name="estadoCivil" id="estadoCivil" class="content-select">
+                                      <c:forEach items="${estadosCiviles}" var="estadoCivil">
+                                        <option value="${estadoCivil.getDescripcion()}">${estadoCivil.getDescripcion()}</option>
+                                      </c:forEach>
+                                    </select> 
+                                  </div>
+                                  <div class="inputs mb-3 col-md-4">
+                                    <label for="formFile" class="form-label">Cargar cv</label>
+                                    <input class="form-control" type="file" id="cvFile">
+                                  </div>
+                                  <!-- Button Agregar Cargo al que postulas -->
+                                  <button type="button" class="btn btn-primary"><span class="add-experience" class="btn btn-primary" data-toggle="modal" data-target="#cargoForm"><i  class="fa fa-plus"></i>&nbsp;Agregar Cargo al que postulas</span></button><br>
+                                  <p id="no-valid-cargo" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
+                                    *Agrega por lo menos un cargo
+                                  </p>   
+                                  <div class="mt-3 gap-2 row row-cols-4" style="display: flex;" id="cargos"></div>
+
+                                  <!-- Button Agregar Experiencia -->
+                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></button><br>   
+                                  <div class="mt-3 gap-2 row row-cols-4" id="experiencias"></div>
+                                    
+                                  <!-- Button Agregar Estudio -->
+                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></button><br>   
+                                  <div class="mt-3 gap-2 row row-cols-4" id="estudios"></div>
+                            
+                               
+                                  <!-- Button Agregar Tecnologia -->
+                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></button><br>
+                                  
+                                  <p id="no-valid-tecno" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
+                                    *Agrega por lo menos una tecnologia
+                                  </p>   
+                                  <div class="mt-3 gap-2 row row-cols-5" style="display: flex;" id="tecnologias">
+                                  </div>
+
+                                  <!-- Button Agregar Refencia personal -->
+                                  <button type="button" class="btn btn-primary"><span class="add-experience"  data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Referencia Personal</span></button><br>   
+                                  <div class="mt-3 gap-2 row row-cols-4" id="referencia"></div>
+                      
+                        
+                                
+                                <div class="mt-3 gap-2 d-flex justify-content-end">
+                                  <a class="px-3 btn btn-sm btn-outline-primary" href="/postulante">Cancelar</a>
+                                  <button class="px-3 btn btn-sm btn-primary" type="submit">Guardar</button>
+                                </div>
+                              </div>
+                          </div>
+                      </div>
     </form>
     <!---------------------------------------Modal de Cargos disponibles---------------------------------------------------------------->
     <div class="modal fade" id="cargoForm" tabindex="-2" role="dialog" aria-labelledby="cargoForm" aria-hidden="true">
@@ -495,9 +459,13 @@
           let fechaDesdeExperiencia = document.querySelector("#fechaDesdeExperiencia");
           let fechaHastaEstudio = document.querySelector("#fechaHastaEstudio");
           let fechaHastaExperiencia = document.querySelector("#fechaHastaExperiencia");
+          let fechaNacimiento = document.querySelector("#fechaNacimiento");
+          let fechas = [fechaDesdeEstudio,fechaDesdeExperiencia,fechaHastaEstudio,fechaHastaExperiencia,fechaNacimiento]
+          fechas.forEach(fch => fch.addEventListener('keydown',()=>false))//no dejar cargar manualmente fechas
 
           fechaDesdeEstudio.setAttribute("max", today);
           fechaDesdeExperiencia.setAttribute("max", today);
+          fechaNacimiento.setAttribute("max", today);
 
           fechaDesdeExperiencia.addEventListener("change", ()=>{
               fechaHastaExperiencia.setAttribute("min", fechaDesdeExperiencia.value)