diff --git a/components/admin/servicio/modificar/form.vue b/components/admin/servicio/modificar/form.vue
index 4bbd800..3622604 100644
--- a/components/admin/servicio/modificar/form.vue
+++ b/components/admin/servicio/modificar/form.vue
@@ -9,12 +9,12 @@
         <b-input
           type="email"
           v-model="nuevo.correo"
-          v-bind:placeholder="viejo.correo">
+          :placeholder="viejo.correo">
         </b-input>
       </b-field>
       <b-field label="Fecha de inicio">
         <b-datepicker
-          v-bind:placeholder="viejo.fechaInicio"
+          :placeholder="viejo.fechaInicio"
           icon="calendar-today"
           v-model="fechaInicio[0]"
           :min-date="minDate1">
@@ -23,7 +23,7 @@
       <transition name="fade">
         <b-field label="Fecha de fin" v-if="fechaInicio[0]">
           <b-datepicker
-            v-bind:placeholder="viejo.fechaInicio"
+            :placeholder="viejo.fechaInicio"
             v-model="fechaFin[0]"
             :min-date="minDate2"
             icon="calendar-today">
@@ -31,20 +31,20 @@
         </b-field>
       </transition>
       <b-field label="Dirección">
-        <b-input type="text" v-model="nuevo.direccion" v-bind:placeholder="viejo.direccion"></b-input>
+        <b-input type="text" v-model="nuevo.direccion" :placeholder="viejo.direccion"></b-input>
       </b-field>
       <b-field label="Teléfono">
-        <b-input type="number" v-bind:placeholder="viejo.telefono" maxlength="10"></b-input>
+        <b-input type="number" :placeholder="viejo.telefono" maxlength="10"></b-input>
       </b-field>
       <b-field label="Fecha de nacimiento">
         <b-datepicker
-          v-bind:placeholder="viejo.fechaNacimiento"
+          :placeholder="viejo.fechaNacimiento"
           v-model="fechaNacimiento[0]"
           icon="calendar-today">
         </b-datepicker>
       </b-field>
       <b-field label="ID status">
-        <b-input type="" v-bind:placeholder="viejo.idStatus"></b-input>
+        <b-input type="" :placeholder="viejo.idStatus"></b-input>
       </b-field>
       <p class="is-size-5">Carta de aceptación</p>
       <br>
@@ -90,8 +90,9 @@
       </b-field>
       <br>
       <b-button class="is-info" @click="regresar()">Regresar</b-button>
-      <b-button v-if="mostrar()" class="is-info">Actualizar Datos</b-button>
+      <b-button v-if="mostrar()" @click="actualizarDialog()" class="is-info">Actualizar Datos</b-button>
       <b-button v-else disabled class="is-info">Actualizar Datos</b-button>
+      <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="true"></b-loading>
     </div>
   </div>
 </template>
@@ -127,7 +128,8 @@ export default {
       fechaNacimiento: [],
       fechaInicio: [],
       fechaFin: [],
-      minDate1: new Date('2020-01-01')
+      minDate1: new Date('2020-01-01'),
+      isLoading: false
     }
   },
   methods: {
@@ -183,6 +185,23 @@ export default {
     regresar () {
       localStorage.removeItem('idRegistro')
       this.$router.push('/admin/servicio')
+    },
+    actualizar () {
+      this.isLoading = true
+      // const data = {
+      //   a: 1
+      // }
+    },
+    actualizarDialog () {
+      this.$buefy.dialog.confirm({
+        title: 'Actualizar datos',
+        message: '¿Seguro(a) que quiere actualizar estos datos?',
+        confirmText: 'Confirmar',
+        cancelText: 'Cancelar',
+        type: 'is-success',
+        hasIcon: true,
+        onConfirm: () => this.actualizar()
+      })
     }
   },
   computed: {
diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index 59bd244..bf802d5 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -31,10 +31,10 @@
     <div id="programa">
       <br>
       <p class="is-size-4"><b>Datos del programa</b></p><br>
-      <p class="is-size-5"><b>Programa: </b><span> {{alumno.Programa.programa}} </span></p>
-      <p class="is-size-5"><b>Clave del programa: </b><span> {{alumno.Programa.clavePrograma}} </span></p>
-      <p class="is-size-5"><b>Dependecia: </b><span> {{alumno.Programa.dependencia}} </span></p>
-      <p class="is-size-5"><b>Institución: </b><span> {{alumno.Programa.institucion}} </span></p>
+      <p class="is-size-5" v-if="alumno.Programa.programa"><b>Programa: </b><span> {{alumno.Programa.programa}} </span></p>
+      <p class="is-size-5" v-if="alumno.Programa.clavePrograma"><b>Clave del programa: </b><span> {{alumno.Programa.clavePrograma}} </span></p>
+      <p class="is-size-5" v-if="alumno.Programa.dependencia"><b>Dependecia: </b><span> {{alumno.Programa.dependencia}} </span></p>
+      <p class="is-size-5" v-if="alumno.Programa.institucion"><b>Institución: </b><span> {{alumno.Programa.institucion}} </span></p>
       <br>
     </div>
     <div id="datosPersonales">
@@ -54,45 +54,84 @@
       <br>
       <div v-if="alumno.cartaAceptacion" class="level">
         <a :href="linkCartaAceptacion" class="has-text-link link">Ver carta de aceptación</a>
-        <b-button class="is-danger" v-if="alumno.Status.idStatus == 1">
+        <b-button class="is-danger" v-if="alumno.Status.idStatus == 1" @click="mensajeRechBoolean1 = !mensajeRechBoolean1">
           Rechazar
         </b-button>
       </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)">
+        Cancelar servicio
+      </b-button>
+      <b-button v-else-if="mensajeRechBoolean1" disabled>
+        Cancelar servicio
+      </b-button>
       <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 1">Confirmar el pre-registro del alumno</h3>
       <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 4">Termino</h3>
       <h3 class="is-size-4 mb-5" v-if="alumno.Status.idStatus == 5">Validar el término del alumno</h3>
       <div class="level">
         <a v-if="alumno.cartaTermino" :href="linkCartaTermino" class="has-text-link link">Ver carta de término</a>
-        <b-button class="is-danger" v-if="alumno.Status.idStatus == 5">
+        <b-button class="is-danger" v-if="alumno.Status.idStatus == 5" @click="mensajeRechBoolean2 = !mensajeRechBoolean2">
           Rechazar
         </b-button>
       </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)">
+        Cancelar servicio
+      </b-button>
+      <b-button v-else-if="mensajeRechBoolean2" disabled>
+        Cancelar servicio
+      </b-button>
       <div v-if="alumno.informeGlobal" class="level">
         <a :href="linkInformeGlobal" class="has-text-link link">Ver informe global de actividades</a>
-        <b-button class="is-danger" v-if="alumno.Status.idStatus == 5">
+        <b-button class="is-danger" v-if="alumno.Status.idStatus == 5" @click="mensajeRechBoolean3 = !mensajeRechBoolean3">
           Rechazar
         </b-button>
       </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)">
+        Cancelar servicio
+      </b-button>
+      <b-button v-else-if="mensajeRechBoolean3" disabled>
+        Cancelar servicio
+      </b-button>
+      <b-checkbox
+        v-if="alumno.Programa.acatlan && alumno.Status.idStatus == 5"
+        v-model="alumno.vistoBuenoAcatlan"
+        size="is-medium"
+        type="is-info"
+        >
+        Visto bueno Acatlán
+      </b-checkbox>
       <p v-if="alumno.cuestionarioP">Cuenta con cuestionario de programa resuelto.</p>
       <p v-if="alumno.cuestionarioA">Cuenta con cuestionario de alumno resuelto.</p>
     </div>
     <div id="acciones" class="my-5">
-      <b-button class="is-success" v-if="mostrarConfirmar()">
+      <b-button class="is-info" @click="$router.push('./')">
+        Regresar
+      </b-button>
+      <b-button class="is-success" @click="confirmarDialog()" v-if="mostrarConfirmar()">
         Confirmar
       </b-button>
       <b-button class="is-danger" @click="enviarCancel = !enviarCancel">
         Cancelar
       </b-button>
-      <b-button class="is-info" @click="$router.push('./')">
-        Regresar
-      </b-button><br><br>
+      <br><br>
       <b-field label="Razón para cancelar: " v-if="enviarCancel">
         <b-input maxlength="500" type="textarea" v-model="mensajeCancel"></b-input>
       </b-field>
-      <b-button v-if="mensajeCancel && enviarCancel" class="is-danger" @click="cancelar()">
+      <b-button v-if="mensajeCancel && enviarCancel" class="is-danger" @click="cancelarDialog()">
         Cancelar servicio
       </b-button>
-      <b-loading :is-full-page="isFullPage" v-model="isLoading" :can-cancel="true"></b-loading>
+      <b-button v-else-if="enviarCancel" disabled>
+        Cancelar servicio
+      </b-button>
+      <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="true"></b-loading>
     </div>
   </div>
 </template>
@@ -109,7 +148,7 @@ export default {
         Carrera: {},
         Status: {}
       },
-      idRegistro: 1,
+      idServicio: 1,
       token: {
         headers: {
           token: localStorage.getItem('token')
@@ -123,8 +162,12 @@ export default {
       mensaje: '',
       mensajeCancel: '',
       isLoading: false,
-      vistoBueno: false,
-      acatlan: false
+      mensajeRech1: '',
+      mensajeRech2: '',
+      mensajeRech3: '',
+      mensajeRechBoolean1: false,
+      mensajeRechBoolean2: false,
+      mensajeRechBoolean3: false
     }
   },
   methods: {
@@ -139,7 +182,7 @@ export default {
     obtenerRegistro () {
       return axios
         .get(
-          `${process.env.api}/servicio/admin?idServicio=${this.idRegistro}`//,
+          `${process.env.api}/servicio/admin?idServicio=${this.idServicio}`//,
           // this.token
         )
         .then(res => {
@@ -153,28 +196,159 @@ export default {
           console.log(err.response)
         })
     },
+    cancelarDialog () {
+      this.$buefy.dialog.confirm({
+        title: 'Cancelar sevicio',
+        message: '¿Seguro(a) que quiere cancelar este servicio?',
+        confirmText: 'Cancelar servicio',
+        cancelText: 'No',
+        type: 'is-danger',
+        hasIcon: true,
+        onConfirm: () => this.cancelar()
+      })
+    },
+    confirmarDialog () {
+      this.$buefy.dialog.confirm({
+        title: 'Confimar servicio',
+        message: '¿Seguro(a) que quiere confirmar este servicio?',
+        confirmText: 'Confirmar',
+        cancelText: 'Cancelar',
+        type: 'is-success',
+        hasIcon: true,
+        onConfirm: () => this.confirmar()
+      })
+    },
+    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,
+        idRegistro: this.idRegistro
+      }
+      axios
+        .put(`${process.env.api}/servicio/rechazar_aceptacion`, data)
+        .then(res => {
+          this.isLoading = false
+          this.$buefy.dialog.alert('Se ha rechazado el documento')
+        })
+        .catch(err => {
+          this.isLoading = false
+          this.error()
+          console.log(err)
+        })
+    },
+    rechazarCartaTermino () {
+      this.isLoading = true
+      const data = {
+        mensaje: this.mensajeRech2,
+        idRegistro: this.idRegistro
+      }
+      axios
+        .put(`${process.env.api}/servicio/rechazar_termino`, data)
+        .then(res => {
+          this.isLoading = false
+          this.$buefy.dialog.alert('Se ha rechazado el documento')
+        })
+        .catch(err => {
+          this.isLoading = false
+          this.error()
+          console.log(err)
+        })
+    },
+    rechazarInformeGlobal () {
+      this.isLoading = true
+      const data = {
+        mensaje: this.mensajeRech3,
+        idRegistro: this.idRegistro
+      }
+      axios
+        .put(`${process.env.api}/servicio/rechazar_informe`, data)
+        .then(res => {
+          this.isLoading = false
+          this.$buefy.dialog.alert('Se ha rechazado el documento')
+        })
+        .catch(err => {
+          this.isLoading = false
+          this.error()
+          console.log(err)
+        })
+    },
     cancelar () {
       this.isLoading = true
       const data = {
         idRegistro: this.idRegistro,
-        update: 'cancelar',
         mensajeCalce: this.mensajeCancel
       }
       axios
         .put(`${process.env.api}/servicio/cancelar`, data)
         .then(res => {
           this.isLoading = false
-          localStorage.removeItem('idRegistro')
-          this.$router.push('/admin')
+          this.$buefy.dialog.alert('El servicio ha sido cancelado con éxito')
+          // localStorage.removeItem('idRegistro')
+          // this.$router.push('/admin')
         })
         .catch(err => {
           this.isLoading = false
+          this.error()
           console.log(err)
         })
     },
     fecha (date) {
       const fecha = moment(date.substr(0, 10))
       return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
+    },
+    confirmar () {
+      this.isLoading = true
+      const data = {
+        idRegistro: this.idRegistro
+      }
+      if (this.alumno.vistoBueno) {
+        data.vistoBueno = this.alumno.vistoBueno
+      }
+      axios
+        .put(`${process.env.api}/servicio/cancelar`, data)
+        .then(res => {
+          this.isLoading = false
+          this.$buefy.dialog.alert('El servicio ha sido aprovado')
+          // localStorage.removeItem('idRegistro')
+          // this.$router.push('/admin')
+        })
+        .catch(e => {
+          this.isLoading = false
+          console.log(e)
+          this.error()
+        })
+    },
+    error () {
+      this.$buefy.dialog.alert({
+        title: 'Error',
+        message: 'Ha ocurrido un <b>error</b>, inténtalo de nuevo más tarde',
+        type: 'is-danger',
+        hasIcon: true,
+        icon: 'times-circle',
+        iconPack: 'fa',
+        ariaRole: 'alertdialog',
+        ariaModal: true
+      })
     }
   },
   async created () {
diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index e9b663a..9077b1b 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="columns">
 
-        <div class="column is-3 mb-0 ">
+        <div class="column is-3 mb-0">
           <b-field >
             <b-input
                 placeholder="No.Cuenta"
@@ -26,17 +26,20 @@
           </b-field>
         </div>
 
-        <div class="column is-3" >
+        <div class="column is-3 mb-4 pb-4 " >
           <b-field>
-            <b-select placeholder="Status" icon="information" value="1" expanded rounded v-model="idStatus">
+            <b-select placeholder="Status" icon="information" expanded rounded v-model="idStatus">
               <optgroup label="Status">
-                <option value="1">Pre-registro</option>
-                <option value="2">Pre-validado</option>
-                <option value="3">Registro</option>
-                <option value="4">Pre-término</option>
-                <option value="5">Término</option>
-                <option value="6">Liberado</option>
-                <option value="7">Rechazado</option>
+                <option value=1>Pre-registro</option>
+                <option value=2>Registro</option>
+                <option value=3>Registro Validado</option>
+                <option value=4>Pre-Término</option>
+                <option value=5>Término</option>
+                <option value=6>Liberación</option>
+                <option value=7>Carta Aceptacion Rechazada</option>
+                <option value=8>Carta Termino Rechazada</option>
+                <option value=9>Informe Global Rechazado</option>
+                <option value=10>Cancelado</option>
               </optgroup>
             </b-select>
           </b-field>
@@ -60,6 +63,8 @@
           :data="data"
           :loading="loading"
 
+          hoverable
+          striped
           paginated
           backend-pagination
           :total="total"
@@ -69,33 +74,33 @@
               <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
                   {{ props.row.nombre}}
               </b-table-column>
-              <b-table-column field="numeroCuenta" label="Numero de Cuenta" v-slot="props" centered>
+              <b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
                   {{ props.row.numeroCuenta}}
               </b-table-column>
               <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
                   {{ props.row.carrera}}
               </b-table-column>
-              <b-table-column field="fechaInicio" label="fecha Inicio" v-slot="props" centered>
+              <b-table-column field="fechaInicio" truncate=10 label="Fecha Inicio" v-slot="props" centered>
                   {{ props.row.fechaInicio}}
               </b-table-column>
-              <b-table-column field="fechaFin" label="Fecha fin" v-slot="props" centered>
+              <b-table-column field="fechaFin" label="Fecha Fin" v-slot="props" centered>
                   {{ props.row.fechaFin}}
               </b-table-column>
               <b-table-column field="status" label="Status" v-slot="props" centered>
                  <span class="tag" :class="types(props.row.status)">{{ props.row.status}}</span>
               </b-table-column>
-              <!--
+
               <b-table-column field="cartaTermino" label="Carta Término" v-slot="props" centered v-if="id == 2">
-                  <div v-if="props.row.idStatus === 'Pre-Termino'">
+                  <div v-if="props.row.status === 'Pre-Termino'">
                     <span
-                    v-if="props.row.cartaTermino === true"
+                    v-if="props.row.cartaTermino === 1"
                     >
                         <b-icon :icon="iconoCarta(props.row.cartaTermino)"
                         class="tag is-success"></b-icon>
                     </span>
 
                     <b-button
-                    v-if="props.row.cartaTermino === false"
+                    v-if="props.row.cartaTermino === null"
                     size="is-small"
                     :class="botonCarta(props.row.cartaTermino)"
                     :icon="iconoCarta(props.row.cartaTermino)">
@@ -103,10 +108,9 @@
                     </b-button>
                   </div>
               </b-table-column>
-              -->
+
               <b-table-column field="cuestionario" label="Cuestionario" v-slot="props" centered v-if="id == 2">
-                  <div
-                  v-if="props.row.status === 'Pre-Termino'">
+                  <div v-if="props.row.status === 'Pre-Termino'">
                     <span
                     v-if="props.row.cuestionario === 1"
                     >
@@ -115,7 +119,7 @@
                     </span>
 
                     <b-button
-                    v-if="props.row.cuestionario === 2"
+                    v-if="props.row.cuestionario === null"
                     size="is-small"
                     :class="botonCuestionario(props.row.cuestionario)"
                     :icon="iconoCuestionario(props.row.cuestionario)">
@@ -131,7 +135,6 @@
 </template>
 
 <script>
-// import validator from 'validator'
 import BotonesCarga from './botonesCarga.vue'
 import axios from 'axios'
 
@@ -148,8 +151,7 @@ export default {
       perPage: 25,
       numeroCuenta: '',
       nombre: '',
-      idStatus: '',
-      tipoUsuario: 1
+      idStatus: 1
     }
   },
   props: {
@@ -165,39 +167,46 @@ export default {
       console.log(this.page)
     },
     types (status) {
-      /* const Status = parseFloat(status) Investigar para que sirve :) */
       if (status === 'Pre-Registro') {
         return 'is-dark'
-      } else if (status === 'Pre-Validado') {
+      } else if (status === 'Pre-Registro') {
         return 'is-warning'
       } else if (status === 'Registro') {
         return 'is-info'
+      } else if (status === 'Registro Validado') {
+        return 'is-succes'
       } else if (status === 'Pre-Termino') {
-        return 'is-link'
+        return 'is-light'
       } else if (status === 'Termino') {
         return 'is-success'
-      } else if (status === 'Liberado') {
-        return 'is-success'
-      } else if (status === 'Rechazado') {
+      } else if (status === 'Liberación') {
+        return 'is-link'
+      } else if (status === 'Carta Aceptacion Rechazada') {
+        return 'is-danger'
+      } else if (status === 'Carta Termino Rechazada') {
+        return 'is-danger'
+      } else if (status === 'Informe Global Rechazdo') {
+        return 'is-danger'
+      } else if (status === 'Cancelado') {
         return 'is-danger'
       }
     },
     botonCarta (cartaTermino) {
-      if (cartaTermino === true) {
+      if (cartaTermino === 1) {
         return 'is-success'
       } else {
         return 'is-danger'
       }
     },
     botonCuestionario (cuestionario) {
-      if (cuestionario === true) {
+      if (cuestionario === 1) {
         return 'is-success'
       } else {
         return 'is-danger'
       }
     },
     iconoCarta (cartaTermino) {
-      if (cartaTermino === true) {
+      if (cartaTermino === 1) {
         return 'check'
       } else {
         return 'close'
@@ -211,15 +220,12 @@ export default {
       }
     },
     obtenerDatos () {
-      // this.loading = true
+      this.loading = true
       this.data = []
-      if (this.idStatus || this.nombre || this.numeroCuenta) {
-        this.page = 1
-      }
-      axios.get(`${process.env.api}/servicio/servicios_responsable?idUsuario=2&pagina=${this.page}&idStatus&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`)
+
+      axios.get(`${process.env.api}/servicio/servicios_responsable?idUsuario=2&pagina=${this.page}&idStatus=${this.idStatus}&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`)
         .then(res => {
           const servicios = res.data.servicios
-          // this.page = 1
 
           if (servicios.length !== 0) {
             for (let i = 0; i < servicios.length; i++) {
@@ -230,20 +236,24 @@ export default {
                 fechaInicio: servicios[i].fechaInicio,
                 fechaFin: servicios[i].fechaFin,
                 status: servicios[i].Status.status,
-                cuestionario: servicios[i].idCuestionarioAlumno
+                cuestionario: servicios[i].idCuestionarioPrograma,
+                cartaTermino: servicios[i].cartaTermino
               })
             }
           }
           let currentTotal = servicios.length
           let contador
 
-          for (let i = 0; i < ((res.data.faltantes + res.data.registros) / 25) + 1; i++) {
+          for (let i = 0; i < (res.data.registros / 25) + 1; i++) {
             contador = i
           }
           currentTotal = this.perPage * contador
           this.total = currentTotal
           this.loading = false
         })
+        .catch((err) => {
+          console.log(err.response.data.message)
+        })
     }
   },
   created () {
@@ -253,4 +263,19 @@ export default {
 </script>
 
 <style>
+.input:focus{
+  border:#1b3d70;
+  box-shadow: 0 0 8px 0 #1b3d70;
+}
+.select select:focus{
+  border-color: #1b3d70;
+  box-shadow: 0 0 8px 0 #1b3d70;
+}
+.select:not(.is-multiple):not(.is-loading)::after{
+  border-color: #1b3d70;
+}
+.pagination-link.is-current {
+  background-color: #1b3d70;
+  border-color: #1b3d70;
+}
 </style>
diff --git a/pages/admin/programa/infoResponsable/index.vue b/pages/admin/programa/infoResponsable/index.vue
new file mode 100644
index 0000000..78a9411
--- /dev/null
+++ b/pages/admin/programa/infoResponsable/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="container">
+    <b-button class="boton is-info my-5" @click="$router.push('./')">
+      Regresar
+    </b-button>
+    <p class="is-size-2 mb-4">Información del responsable</p>
+    <p class="is-size-4 mb-4">Nombre: {{responsable.nombre}}</p>
+    <p class="is-size-4 mb-4">Correo: {{responsable.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.clave}}</p>
+    <b-button class="boton is-info my-5" @click="$router.push('./')">
+      Regresar
+    </b-button>
+    <b-button class="boton is-info my-5" @click="$router.push('./infoResponsable/editar')">
+      Editar información
+    </b-button>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  data () {
+    return {
+      idResponsable: localStorage.getItem('idResponsable'),
+      responsable: {
+        nombre: 'Marco',
+        correo: 'marco@gmail.com'
+      },
+      programas: [
+        { id: 1, programa: 'programa 1', institucion: 'institucion falsa 1', dependencia: 'dependencia falsa 1', clave: 101 },
+        { id: 2, programa: 'programa 2', institucion: 'institucion falsa 2', dependencia: 'dependencia falsa 2', clave: 102 },
+        { id: 3, programa: 'programa 3', institucion: 'institucion falsa 3', dependencia: 'dependencia falsa 3', clave: 103 }
+      ],
+      selected: {} | null
+    }
+  },
+  methods: {
+    obtenerDatos () {
+      return axios
+        .get(
+          // aun no hay back
+          `${process.env.api}/servicio/admin?idResponsable=${this.idResponsable}`//,
+          // this.token
+        )
+        .then(res => {
+          this.responsable = res.data
+          this.programas = res.data.programas
+        })
+        .catch(err => {
+          this.error()
+          console.log(err.response)
+        })
+    },
+    error () {
+      this.$buefy.dialog.alert({
+        title: 'Error',
+        message: 'Ha ocurrido un <b>error</b>, inténtalo de nuevo más tarde',
+        type: 'is-danger',
+        hasIcon: true,
+        icon: 'times-circle',
+        iconPack: 'fa',
+        ariaRole: 'alertdialog',
+        ariaModal: true
+      })
+    }
+  }
+}
+</script>