diff --git a/curriculumsearch/src/main/resources/static/main.js b/curriculumsearch/src/main/resources/static/main.js
index ee49167..808eef0 100644
--- a/curriculumsearch/src/main/resources/static/main.js
+++ b/curriculumsearch/src/main/resources/static/main.js
@@ -1,6 +1,7 @@
 var cont_experiencia = 0;
 let cont_estudios = 0;
 let cont_tecnologia = 0;
+
 let cont_cargo = 0;
 const experiencias = [];
 const estudios = [];
@@ -9,6 +10,10 @@ let noValidateFlag = false;
 
 const postulaciones = [];
 
+var cont_referencias=0 ;
+const referencias= [];
+
+
 
 const formValidator = function () {
     'use strict'
@@ -198,6 +203,8 @@ function serializeJSON (form) {
     pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos
     pairs["tecnologias"] = tecnologias.filter(tec => tec)//eliminacion de nulos
     pairs["postulaciones"] = postulaciones.filter(car => car)//eliminacion de nulos
+    pairs["referencias"] = referencias.filter(tec => tec)
+
     
     // Return the JSON string
     return JSON.stringify(pairs, null, 2);
@@ -328,6 +335,10 @@ function agregarFieldEstudio(){
 
 }
 
+
+
+
+
 function eliminarEstudio(event) {
     //eliminar del array
     estudios[event.target.parentElement.id.split("-")[1]]=null
@@ -439,3 +450,82 @@ function listarCiudades(depId){
     
     
 }
+
+
+
+function agregarFieldReferencia(event){
+    //recoger del form
+    const pairs = {};
+    const formexp = document.querySelector("[name=referencia-form]");
+    const formData = new FormData(formexp);
+    const referenciaPersonal = [{},{},{}];
+    let pos_rec;
+    let returnFlag = false;
+
+    let requiredValues = ["nombre", "relacion", "telefono"]
+
+    formData.forEach((value, key)=>{
+        if(requiredValues.includes(key)
+        && value==="" && returnFlag == false){
+            console.log(key, value)
+            returnFlag = true;
+        }
+    });
+
+    if(returnFlag===true){
+        let message = "Rellene "
+        for(let i=0;i<requiredValues.length;i++){
+            message+=", "+requiredValues[i];
+        }
+        message += " como minimo."
+        alert(message);
+        return;
+    }
+
+    for (const [name, value] of formData){
+        pos_rec = name.split("-");//rec-nombre-index
+        if (pos_rec.length > 1) {
+            referenciaPersonal[pos_rec[2]][pos_rec[1]] = value
+        }
+        else{
+            pairs[name] = value
+        }
+
+    }
+    pairs["referenciaPersonal"] = referenciaPersonal.filter(rec => rec.nombre);
+    referencias[cont_referencias] = pairs;
+    formexp.reset();
+    //imprimir lista actualizada
+    const div = document.querySelector("#referencia")
+    const div1 = document.createElement('div');
+    let content='<ul>'
+    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" onclick="eliminarReferencia(event)"> <span class="glyphicon glyphicon-trash"></span> Tras</button>
+        </li>
+        
+        `
+    }
+    content += "</ul>" 
+    div1.innerHTML = content
+    div.innerHTML = '';
+    div.appendChild(div1);
+    cont_referencias++;
+}
+
+/*----------------------------------------------------------------- */
+function eliminarReferencia(event) {
+    //eliminar del array
+    referencias[event.target.parentElement.id.split("-")[1]]=null
+    //eliminar en html
+    event.target.parentElement.remove()
+}
+/*----------------------------------------------------------------- */
+
+
+
+
diff --git a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
index c13122a..649ba5d 100644
--- a/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
+++ b/curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
@@ -288,9 +288,15 @@
                                   <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="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></div><br>   
                                 </div>
                                 
+                                
                                 <div class="mt-3 gap-2 d-flex justify-content-between" id="tecnologias"> 
                                 </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="#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>
                       
                         
                                 
@@ -507,6 +513,44 @@
   </div>
     <meta name="_csrf" content="${_csrf.token}"/>
     <meta name="_csrf_header" content="${_csrf.headerName}"/>
+    <!--Modal de referencias-->
+       <div class="modal fade" id="referenciaForm" tabindex="-1" role="dialog" aria-labelledby="referenciaForm" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLabel">Referencias Personales</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <form name="referencia-form" class="needs-validation" novalidate>
+                <div class="form-group">
+                    <label for="nombre" class="form-label">Nombre</label>
+                    <input type="text" class="form-control" name="nombre" id="nombre" required>
+                </div>
+                <div class="form-group">
+                    <label for="relacion" class="form-label">Relacion</label>
+                    <input type="text" class="form-control" name="relacion" id="relacion" required>
+                </div>
+
+                <div class="form-group">
+                  <label for="telefono" class="form-label">Telefono</label>
+                  <input type="number" class="form-control" name="telefono" id="telefono" required>
+              </div>
+                 
+                
+
+
+            </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
+          <button type="button" class="btn btn-primary" onclick="agregarFieldReferencia()" data-dismiss="modal">Agregar</button>
+        </div>
+      </div>
+    </div>
+      </div>
 
 
     <!-- Optional JavaScript; choose one of the two! -->