diff --git a/assets/404.webp b/assets/404.webp
new file mode 100644
index 0000000..e3caf75
Binary files /dev/null and b/assets/404.webp differ
diff --git a/components/admin/servicio/datosPersonales.vue b/components/admin/servicio/datosPersonales.vue
index af8d8b3..03649ea 100644
--- a/components/admin/servicio/datosPersonales.vue
+++ b/components/admin/servicio/datosPersonales.vue
@@ -1,34 +1,34 @@
 <template>
   <div id="datosPersonales">
     <p class="is-size-3"><b>Datos personales</b></p>
-    <p class="is-size-5 mt-5" v-if="alumno.Usuario.nombre">
+    <p class="is-size-5 mt-3" v-if="alumno.Usuario.nombre">
       <b>Nombre: </b>{{ alumno.Usuario.nombre }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.Usuario.usuario">
+    <p class="is-size-5 mt-3" v-if="alumno.Usuario.usuario">
       <b>Número de cuenta: </b>{{ alumno.Usuario.usuario }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.Carrera.carrera">
-      <b>Correo: </b>{{ alumno.Carrera.carrera }}
+    <p class="is-size-5 mt-3" v-if="alumno.Carrera.carrera">
+      <b>Carrera: </b>{{ alumno.Carrera.carrera }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.correo">
+    <p class="is-size-5 mt-3" v-if="alumno.correo">
       <b>Correo: </b>{{ alumno.correo }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.creditos">
+    <p class="is-size-5 mt-3" v-if="alumno.creditos">
       <b>Créditos: </b>{{ alumno.creditos + "%" }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">
+    <p class="is-size-5 mt-3" v-if="alumno.fechaInicio">
       <b>Fecha de inicio: </b>{{ fecha(alumno.fechaInicio) }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.fechaFin">
+    <p class="is-size-5 mt-3" v-if="alumno.fechaFin">
       <b>Fecha de fin: </b>{{ fecha(alumno.fechaFin) }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.telefono">
+    <p class="is-size-5 mt-3" v-if="alumno.telefono">
       <b>Teléfono: </b>{{ alumno.telefono }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.direccion">
+    <p class="is-size-5 mt-3" v-if="alumno.direccion">
       <b>Dirección: </b>{{ alumno.direccion }}
     </p>
-    <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">
+    <p class="is-size-5 mt-3" v-if="alumno.fechaNacimiento">
       <b>Fecha de nacimiento: </b>{{ fecha(alumno.fechaNacimiento) }}
     </p>
   </div>
diff --git a/components/admin/servicio/datosPrograma.vue b/components/admin/servicio/datosPrograma.vue
index 750f9a5..d2fbc28 100644
--- a/components/admin/servicio/datosPrograma.vue
+++ b/components/admin/servicio/datosPrograma.vue
@@ -3,17 +3,17 @@
     <br />
     <p class="is-size-3"><b>Datos del programa</b></p>
     <br />
-    <p class="is-size-5 mb-4" v-if="programa.programa">
+    <p class="is-size-5 mb-3" v-if="programa.programa">
       <b>Programa: </b><span> {{ programa.programa }} </span>
     </p>
-    <p class="is-size-5 mb-4" v-if="programa.clavePrograma">
+    <p class="is-size-5 mb-3" v-if="programa.clavePrograma">
       <b>Clave del programa: </b
       ><span> {{ programa.clavePrograma }} </span>
     </p>
-    <p class="is-size-5 mb-4" v-if="programa.dependencia">
+    <p class="is-size-5 mb-3" v-if="programa.dependencia">
       <b>Dependecia: </b><span> {{ programa.dependencia }} </span>
     </p>
-    <p class="is-size-5 mb-4" v-if="programa.institucion">
+    <p class="is-size-5 mb-3" v-if="programa.institucion">
       <b>Institución: </b><span> {{ programa.institucion }} </span>
     </p>
     <br />
@@ -26,4 +26,4 @@ export default {
     programa: Object
   }
 }
-</script> mb-4
\ No newline at end of file
+</script> 
\ No newline at end of file
diff --git a/components/admin/servicio/documento.vue b/components/admin/servicio/documento.vue
new file mode 100644
index 0000000..85d1187
--- /dev/null
+++ b/components/admin/servicio/documento.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <span class="spanDoc"
+      ><strong>{{ title }}</strong></span
+    >
+    <a :href="link" target="_blank">
+      <b-button class="is-info">
+        Ver
+      </b-button>
+    </a>
+    <b-button
+      class="is-danger"
+      v-if="esRechazable()"
+      @click="mensajeBool = !mensajeBool"
+    >
+      Rechazar
+    </b-button>
+    <b-field label="Razón del rechazo: " v-if="mensajeBool">
+      <b-input maxlength="500" type="textarea" v-model="mensajeRech"></b-input>
+    </b-field>
+    <b-button
+      v-if="mensajeRech && mensajeBool"
+      class="is-danger"
+      @click="rechazarDialog()"
+    >
+      Rechazar documento
+    </b-button>
+    <b-button v-else-if="mensajeBool" disabled>
+      Rechazar documento
+    </b-button>
+    <b-loading
+      :is-full-page="true"
+      v-model="isLoading"
+      :can-cancel="false"
+    ></b-loading>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  props: {
+    title: String,
+    link: String,
+    idDoc: Number,
+    doc: Object,
+    status: Number,
+  },
+  data() {
+    return {
+      mensajeRech: "",
+      mensajeBool: false,
+      idServicio: localStorage.getItem("idServicio"),
+      isLoading: false,
+    };
+  },
+  methods: {
+    esRechazable() {
+      switch (this.idDoc) {
+        case 1:
+          if (this.status == 1) return true;
+          else return false;
+        case 2:
+          if (this.status == 5) return true;
+          else return false;
+        case 3:
+          if (this.status == 5) return true;
+          else return false;
+      }
+    },
+    rechazarDialog() {
+      this.$buefy.dialog.confirm({
+        title: "Confimar servicio",
+        message: "¿Seguro(a) que quiere rechazar este documento?",
+        confirmText: "Confirmar",
+        cancelText: "Cancelar",
+        type: "is-danger",
+        hasIcon: true,
+        onConfirm: () => {
+          switch (this.idDoc) {
+            case 1:
+              this.rechazarCartaAceptacion();
+              break;
+            case 2:
+              this.rechazarCartaTermino();
+              break;
+            case 3:
+              this.rechazarInformeGlobal();
+          }
+        },
+      });
+    },
+    rechazarCartaAceptacion() {
+      this.isLoading = true;
+      const data = {
+        mensaje: this.mensajeRech,
+        idServicio: this.idServicio,
+      };
+      axios
+        .put(`${process.env.api}/servicio/rechazar_aceptacion`, data)
+        .then((res) => {
+          this.isLoading = false;
+          this.$buefy.dialog.alert("Se ha rechazado el documento");
+          this.$router.push("/admin");
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          this.error();
+          console.log(err);
+        });
+    },
+    rechazarCartaTermino() {
+      this.isLoading = true;
+      const data = {
+        mensaje: this.mensajeRech,
+        idServicio: this.idServicio,
+      };
+      axios
+        .put(`${process.env.api}/servicio/rechazar_termino`, data)
+        .then((res) => {
+          this.isLoading = false;
+          this.$buefy.dialog.alert("Se ha rechazado el documento");
+          this.$router.push("/admin");
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          this.error();
+          console.log(err);
+        });
+    },
+    rechazarInformeGlobal() {
+      this.isLoading = true;
+      const data = {
+        mensaje: this.mensajeRech,
+        idServicio: this.idServicio,
+      };
+      axios
+        .put(`${process.env.api}/servicio/rechazar_informe`, data)
+        .then((res) => {
+          this.isLoading = false;
+          this.$buefy.dialog.alert("Se ha rechazado el documento");
+          this.$router.push("/admin");
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          this.error();
+          console.log(err);
+        });
+    },
+  },
+};
+</script>
diff --git a/components/admin/servicio/modificar/form.vue b/components/admin/servicio/modificar/form.vue
index 5cd99ae..f7bd87e 100644
--- a/components/admin/servicio/modificar/form.vue
+++ b/components/admin/servicio/modificar/form.vue
@@ -56,7 +56,7 @@
         >
         </b-datepicker>
       </b-field>
-      <p class="is-size-5">Carta de aceptación</p>
+      <p class="is-size-5" v-if="viejo.cartaAceptacion">Carta de aceptación</p>
       <br />
       <b-field v-if="viejo.cartaAceptacion">
         <b-upload
@@ -82,7 +82,7 @@
           </section>
         </b-upload>
       </b-field>
-      <p class="is-size-5">Carta de término</p>
+      <p class="is-size-5" v-if="viejo.cartaTermino">Carta de término</p>
       <br />
       <b-field v-if="viejo.cartaTermino">
         <b-upload
@@ -108,7 +108,7 @@
           </section>
         </b-upload>
       </b-field>
-      <p class="is-size-5">Informe global</p>
+      <p class="is-size-5" v-if="viejo.informeGlobal">Informe global</p>
       <br />
       <b-field v-if="viejo.informeGlobal">
         <b-upload
diff --git a/components/admin/servicio/programa/cargaMasiva.vue b/components/admin/servicio/programa/cargaMasiva.vue
new file mode 100644
index 0000000..0be646e
--- /dev/null
+++ b/components/admin/servicio/programa/cargaMasiva.vue
@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <p class="is-size-2 mb-5">Carga Masiva</p>
+    <b-field v-if="true">
+      <b-upload
+        v-model="csv"
+        type="is-black"
+        v-on:input="validarExt()"
+        drag-drop
+        expanded
+      >
+        <section class="section">
+          <div class="content has-text-centered">
+            <p>
+              <b-icon icon="upload" size="is-large"></b-icon>
+            </p>
+            <p>
+              {{
+                csv.name || "Arrastra aquí tu archivo o da click para buscar"
+              }}
+            </p>
+          </div>
+        </section>
+      </b-upload>
+    </b-field>
+    <b-button v-if="csv.name" @click="actualizarDialog()" class="is-info"
+      >Enviar archivo</b-button
+    >
+    <b-button v-else disabled class="is-info">Enviar archivo</b-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      csv: {}
+    }
+  },
+  methods: {
+    validarExt() {
+      const extPermitidas = /(.csv)$/i;
+      if (!extPermitidas.exec(this.csv.name)) {
+        this.dangerToast();
+        this.csv = {};
+      }
+    },
+    dangerToast() {
+      this.$buefy.toast.open({
+        message: "Asegurate de ingresar un archivo .CSV",
+        type: "is-danger",
+      });
+    },
+  }
+}
+</script>
diff --git a/components/admin/servicio/programa/tablaResponsables.vue b/components/admin/servicio/programa/tablaResponsables.vue
index 15290ba..e3c2104 100644
--- a/components/admin/servicio/programa/tablaResponsables.vue
+++ b/components/admin/servicio/programa/tablaResponsables.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="container mt-5">
+    <p class="is-size-2 mb-5">Lista de responsables</p>
     <div class="columns">
       <div class="column is-3 mb-4 pb-4">
         <b-field>
@@ -19,7 +20,6 @@
             icon="school"
             rounded
             v-model="correo"
-            maxlength="9"
           >
           </b-input>
         </b-field>
@@ -44,9 +44,7 @@
           @page-change="onPageChange"
         >
           <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-            <span @click="verRegistro(props.row)">{{
-              props.row.nombre
-            }}</span>
+            <span @click="verRegistro(props.row)">{{ props.row.nombre }}</span>
           </b-table-column>
           <b-table-column
             field="correo"
@@ -54,9 +52,7 @@
             v-slot="props"
             centered
           >
-            <span @click="verRegistro(props.row)">{{
-              props.row.usuario
-            }}</span>
+            <span @click="verRegistro(props.row)">{{ props.row.usuario }}</span>
           </b-table-column>
         </b-table>
       </section>
diff --git a/components/admin/servicio/tituloStatus.vue b/components/admin/servicio/tituloStatus.vue
index 8e4c9c9..8a5783e 100644
--- a/components/admin/servicio/tituloStatus.vue
+++ b/components/admin/servicio/tituloStatus.vue
@@ -1,13 +1,19 @@
 <template>
   <div>
-    <h3 class="is-size-4 mb-5" v-if="status == 1">
-      Confirmar el pre-registro del alumno
+    <h3 class="is-size-3 mb-5" v-if="status == 1">
+      <strong>
+        Confirmar el pre-registro del alumno
+      </strong>
     </h3>
-    <h3 class="is-size-4 mb-5" v-if="status == 4">
-      Término
+    <h3 class="is-size-3 mb-5" v-if="status == 4">
+      <strong>
+        Término
+      </strong>
     </h3>
-    <h3 class="is-size-4 mb-5" v-if="status == 5">
-      Validar el término del alumno
+    <h3 class="is-size-3 mb-5" v-if="status == 5">
+      <strong>
+        Validar el término del alumno
+      </strong>
     </h3>
   </div>
 </template>
diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index 939a6b4..ccb9872 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -5,17 +5,9 @@
         Regresar
       </b-button>
     </div>
-    <!--Componente titulo-->
     <TituloServicio :status="alumno.Status.idStatus" />
-    <!--Componente programa-->
     <DatosPrograma :programa="alumno.Programa" />
-    <!--Componente datosPersonales, alumno-->
     <DatosPersonales :alumno="alumno" />
-    <!--Componente Enlaces 
-      alumno.Status.idStatus
-      alumno.cartaAceptacion
-      linkCartaAceptacion
-    -->
     <div id="enlaces">
       <b-button
         class="boton is-info"
@@ -25,104 +17,33 @@
       </b-button>
       <br /><br />
       <TituloStatus :status="alumno.Status.idStatus" />
-      <div v-if="alumno.cartaAceptacion" class="">
-        <span class="spanDoc"><strong>Ver carta de aceptación</strong></span>
-        <a :href="linkCartaAceptacion" target="_blank">
-          <b-button class="is-info">
-            Ver
-          </b-button>
-        </a>
-        <b-button
-          class="is-danger"
-          v-if="alumno.Status.idStatus == 1 && alumno.cartaAceptacion"
-          @click="mensajeRechBoolean1 = !mensajeRechBoolean1"
-        >
-          Rechazar
-        </b-button>
+      <div v-if="alumno.cartaAceptacion">
+        <Documento  
+          :title="'Ver carta de aceptación'"
+          :link="linkCartaAceptacion"
+          :doc="alumno.cartaAceptacion"
+          :idDoc="1"
+          :status="alumno.Status.idStatus"
+        />
       </div>
-      <b-field label="Razón del rechazo: " v-if="mensajeRechBoolean1">
-        <b-input
-          maxlength="500"
-          type="textarea"
-          v-model="mensajeRech1"
-        ></b-input>
-      </b-field>
-      <b-button
-        v-if="mensajeRech1 && mensajeRechBoolean1"
-        class="is-danger"
-        @click="rechazarDialog(1)"
-      >
-        Rechazar documento
-      </b-button>
-      <b-button v-else-if="mensajeRechBoolean1" disabled>
-        Rechazar documento
-      </b-button>
-      <div v-if="alumno.cartaTermino" style="margin-top: 10px">
-        <span class="spanDoc"><strong>Ver carta de término</strong></span>
-        <a :href="linkCartaTermino" target="_blank">
-          <b-button class="is-info">
-            Ver
-          </b-button>
-        </a>
-        <b-button
-          class="is-danger"
-          v-if="alumno.Status.idStatus == 5 && alumno.cartaTermino"
-          @click="mensajeRechBoolean2 = !mensajeRechBoolean2"
-        >
-          Rechazar
-        </b-button>
+      <div v-if="alumno.cartaTermino" style="margin-top: 10px">     
+        <Documento  
+          :title="'Ver carta de término'"
+          :link="linkCartaTermino"
+          :doc="alumno.cartaTermino"
+          :idDoc="2"
+          :status="alumno.Status.idStatus"
+        />
       </div>
-      <b-field label="Razón del rechazo: " v-if="mensajeRechBoolean2">
-        <b-input
-          maxlength="500"
-          type="textarea"
-          v-model="mensajeRech2"
-        ></b-input>
-      </b-field>
-      <b-button
-        v-if="mensajeRech2 && mensajeRechBoolean2"
-        class="is-danger"
-        @click="rechazarDialog(2)"
-      >
-        Rechazar documento
-      </b-button>
-      <b-button v-else-if="mensajeRechBoolean2" disabled>
-        Rechazar documento
-      </b-button>
       <div v-if="alumno.informeGlobal" style="margin-top: 10px">
-        <span class="spanDoc"
-          ><strong>Ver informe global de actividades</strong></span
-        >
-        <a :href="linkInformeGlobal" target="_blank">
-          <b-button class="is-info">
-            Ver
-          </b-button>
-        </a>
-        <b-button
-          class="is-danger"
-          v-if="alumno.Status.idStatus == 5 && alumno.informeGlobal"
-          @click="mensajeRechBoolean3 = !mensajeRechBoolean3"
-        >
-          Rechazar
-        </b-button>
+        <Documento  
+          :title="'Ver informe global de actividades'"
+          :link="linkInformeGlobal"
+          :doc="alumno.InformeGlobal"
+          :idDoc="3"
+          :status="alumno.Status.idStatus"
+        />
       </div>
-      <b-field label="Razón del rechazo: " v-if="mensajeRechBoolean3">
-        <b-input
-          maxlength="500"
-          type="textarea"
-          v-model="mensajeRech3"
-        ></b-input>
-      </b-field>
-      <b-button
-        v-if="mensajeRech3 && mensajeRechBoolean3"
-        class="is-danger"
-        @click="rechazarDialog(3)"
-      >
-        Rechazar documento
-      </b-button>
-      <b-button v-else-if="mensajeRechBoolean3" disabled>
-        Rechazar documento
-      </b-button>
       <b-checkbox
         v-if="alumno.Programa.acatlan && alumno.Status.idStatus == 5"
         v-model="alumno.vistoBuenoAcatlan"
@@ -186,7 +107,7 @@
       <b-loading
         :is-full-page="true"
         v-model="isLoading"
-        :can-cancel="true"
+        :can-cancel="false"
       ></b-loading>
     </div>
   </div>
@@ -198,6 +119,7 @@ import tituloServicio from "./tituloServicio";
 import tituloStatus from "./tituloStatus";
 import datosPrograma from "./datosPrograma";
 import datosPersonales from "./datosPersonales";
+import documento from './documento'
 
 export default {
   components: {
@@ -205,6 +127,7 @@ export default {
     datosPrograma,
     datosPersonales,
     tituloStatus,
+    documento
   },
   data() {
     return {
@@ -228,12 +151,6 @@ export default {
       mensaje: "",
       mensajeCancel: "",
       isLoading: false,
-      mensajeRech1: "",
-      mensajeRech2: "",
-      mensajeRech3: "",
-      mensajeRechBoolean1: false,
-      mensajeRechBoolean2: false,
-      mensajeRechBoolean3: false,
     };
   },
   methods: {
@@ -305,86 +222,6 @@ export default {
         },
       });
     },
-    rechazarDialog(num) {
-      const doc = num;
-      this.$buefy.dialog.confirm({
-        title: "Confimar servicio",
-        message: "¿Seguro(a) que quiere rechazar este documento?",
-        confirmText: "Confirmar",
-        cancelText: "Cancelar",
-        type: "is-dnager",
-        hasIcon: true,
-        onConfirm: () => {
-          switch (doc) {
-            case 1:
-              this.rechazarCartaAceptacion();
-              break;
-            case 2:
-              this.rechazarCartaTermino();
-              break;
-            case 3:
-              this.rechazarInformeGlobal();
-          }
-        },
-      });
-    },
-    rechazarCartaAceptacion() {
-      this.isLoading = true;
-      const data = {
-        mensaje: this.mensajeRech1,
-        idServicio: this.idServicio,
-      };
-      axios
-        .put(`${process.env.api}/servicio/rechazar_aceptacion`, data)
-        .then((res) => {
-          this.isLoading = false;
-          this.$buefy.dialog.alert("Se ha rechazado el documento");
-          this.$router.push("./");
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          this.error();
-          console.log(err);
-        });
-    },
-    rechazarCartaTermino() {
-      this.isLoading = true;
-      const data = {
-        mensaje: this.mensajeRech2,
-        idServicio: this.idServicio,
-      };
-      axios
-        .put(`${process.env.api}/servicio/rechazar_termino`, data)
-        .then((res) => {
-          this.isLoading = false;
-          this.$buefy.dialog.alert("Se ha rechazado el documento");
-          this.$router.push("./");
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          this.error();
-          console.log(err);
-        });
-    },
-    rechazarInformeGlobal() {
-      this.isLoading = true;
-      const data = {
-        mensaje: this.mensajeRech3,
-        idServicio: this.idServicio,
-      };
-      axios
-        .put(`${process.env.api}/servicio/rechazar_informe`, data)
-        .then((res) => {
-          this.isLoading = false;
-          this.$buefy.dialog.alert("Se ha rechazado el documento");
-          this.$router.push("./");
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          this.error();
-          console.log(err);
-        });
-    },
     cancelar() {
       this.isLoading = true;
       const data = {
@@ -466,6 +303,7 @@ export default {
   async created() {
     await this.obtenerRegistro();
   },
+  beforeCreate() {},
 };
 </script>
 
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..7fdbfc0
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,54 @@
+<template>
+  <section class="hero is-light is-bold is-fullheight">
+    <div class="container hero-body">
+      <div class="container columns">
+        <div class="column animate__animated animate__fadeIn animate__slow">
+          <transition name="slide-fade" appear>
+            <b-image
+              class="image"
+              :src="require('@/assets/404.webp')"
+              alt="404 image"
+            ></b-image>
+          </transition>
+        </div>
+        <div class="column">
+          <h1 class="title">
+            ERROR 404 LA PÁGINA NO HA SIDO ENCONTRADA
+          </h1>
+          <a href="/">
+            <b-button class="is-dark" outlined
+              >Ir a la página principal</b-button
+            >
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  layout: "login",
+};
+</script>
+
+<style scoped>
+.image {
+  height: 100%;
+  width: 100%;
+}
+.title {
+  margin-top: 40%;
+}
+.slide-fade-enter-active {
+  transition: all 2s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter, .slide-fade-leave-to
+/* .slide-fade-leave-active below version 2.1.8 */ {
+  transform: translateX(10px);
+  opacity: 0;
+}
+</style>
diff --git a/pages/admin/programa/index.vue b/pages/admin/programa/index.vue
index 15a89fb..411b7e6 100644
--- a/pages/admin/programa/index.vue
+++ b/pages/admin/programa/index.vue
@@ -2,15 +2,19 @@
   <div class="container">
     <p class="is-size-2 mb-5">Programas de Servicio Social</p>
     <b-button class="is-info" @click="regresar()">Regresar</b-button>
+    <CargaMasiva />
+    <b-button class="my-4 is-info">Descargar plantilla</b-button>
     <TablaResponsables />
   </div>
 </template>
 
 <script>
 import tablaResponsables from "../../../components/admin/servicio/programa/tablaResponsables";
+import cargaMasiva from "../../../components/admin/servicio/programa/cargaMasiva";
 export default {
   components: {
     tablaResponsables,
+    cargaMasiva
   },
   methods: {
     regresar() {
diff --git a/pages/admin/programa/infoResponsable/edit/index.vue b/pages/admin/programa/infoResponsable/edit/index.vue
index 95755f6..464c7b0 100644
--- a/pages/admin/programa/infoResponsable/edit/index.vue
+++ b/pages/admin/programa/infoResponsable/edit/index.vue
@@ -8,7 +8,7 @@
     </b-button>
     <p class="is-size-2">Editar información del responsable</p>
     <b-field label="Nombre">
-      <b-input type="email" v-model="nuevo.nombre" :placeholder="viejo.nombre">
+      <b-input type="text" v-model="nuevo.nombre" :placeholder="viejo.nombre">
       </b-input>
     </b-field>
     <b-field label="Correo eletrónico">
diff --git a/pages/admin/programa/infoResponsable/index.vue b/pages/admin/programa/infoResponsable/index.vue
index 11e3af4..d9dfd87 100644
--- a/pages/admin/programa/infoResponsable/index.vue
+++ b/pages/admin/programa/infoResponsable/index.vue
@@ -3,22 +3,24 @@
     <b-button class="boton is-info my-5" @click="regresar()">
       Regresar
     </b-button>
-    <p class="is-size-2 mb-4">Información del responsable</p>
-    <p class="is-size-4 mb-4">Nombre: {{ nombre }}</p>
-    <p class="is-size-4 mb-4">Correo: {{ correo }}</p>
-    <p class="is-size-4">Programa:</p>
-    <b-select v-model="selected" placeholder="Elija un programa">
-      <option
-        v-for="programa in programas"
-        v-bind:key="programa.id"
-        :value="programa"
-      >
-        {{ programa.programa }}
-      </option>
-    </b-select>
-    <p class="is-size-4 mb-4">Institución: {{ selected.institucion }}</p>
-    <p class="is-size-4 mb-4">Dependencia: {{ selected.dependencia }}</p>
-    <p class="is-size-4 mb-4">Clave: {{ selected.clavePrograma }}</p>
+    <p class="is-size-2 mb-4"> Información del responsable</p>
+    <p class="is-size-4 mb-4"> <strong>Nombre: </strong> {{ nombre }}</p>
+    <p class="is-size-4 mb-4"> <strong>Correo: </strong> {{ correo }}</p>
+    <div class="columns">
+      <p class="is-size-4 column is-narrow" style="width: 125px;"> <strong>Programa: </strong></p>
+      <b-select class="column" v-model="selected" placeholder="Elija un programa">
+        <option
+          v-for="programa in programas"
+          v-bind:key="programa.id"
+          :value="programa"
+        >
+          {{ programa.programa }}
+        </option>
+      </b-select>
+    </div>
+    <p class="is-size-4 mb-4"> <strong>Institución: </strong> {{ selected.institucion }}</p>
+    <p class="is-size-4 mb-4"> <strong>Dependencia: </strong> {{ selected.dependencia }}</p>
+    <p class="is-size-4 mb-4"> <strong>Clave: </strong> {{ selected.clavePrograma }}</p>
     <div class="">
       <b-button
         class="boton is-info my-5"
@@ -81,3 +83,11 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+  .programa{
+    margin-right: 20px;
+    padding-right: 20px;
+  }
+
+</style>