diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index 72209ad..59bd244 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -9,67 +9,67 @@
       </b-button>
     </div>
     <div id="Status">
-      <p class="is-size-3" v-if="alumno.idStatus == 1">
+      <p class="is-size-3" v-if="alumno.Status.idStatus == 1">
         Pre Registro
       </p>
-      <p class="is-size-3" v-else-if="alumno.idStatus == 2">
+      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 2">
         Pre Registro Válidado
       </p>
-      <p class="is-size-3" v-else-if="alumno.idStatus == 3">
+      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 3">
         Registro
       </p>
-      <p class="is-size-3" v-else-if="alumno.idStatus == 4">
+      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 4">
         Pre Término
       </p>
-      <p class="is-size-3" v-else-if="alumno.idStatus == 5">
+      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 5">
         Término
       </p>
-      <p class="is-size-3" v-else-if="alumno.idStatus == 6">
+      <p class="is-size-3" v-else-if="alumno.Status.idStatus == 6">
           Liberación
       </p>
     </div>
     <div id="programa">
       <br>
-      <p class="is-size-4">Datos del programa</p><br>
-      <p class="is-size-5">Programa: <span> {{alumno.programa}} </span></p>
-      <p class="is-size-5">Clave del programa: <span> {{alumno.clavePrograma}} </span></p>
-      <p class="is-size-5">Dependecia: <span> {{alumno.dependecia}} </span></p>
-      <p class="is-size-5">Institución: <span> {{alumno.institucion}} </span></p>
+      <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>
       <br>
     </div>
     <div id="datosPersonales">
-      <p class="is-size-4" >Datos personales</p><br>
-      <p class="is-size-5 mt-5" v-if="alumno.nombre">Nombre: <span> {{alumno.nombre}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.noCuenta">Número de cuenta: <span> {{alumno.noCuenta}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.carrera">Carrera: <span> {{alumno.carrera}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.correo">Correo: <span> {{alumno.correo}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.creditos">Créditos: <span> {{alumno.creditos}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">Fecha de inicio: <span> {{alumno.fechaInicio}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.fechaFin">Fecha de fin: <span> {{alumno.fechaFin}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.telefono">Teléfono: <span> {{alumno.telefono}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.direccion">Dirección: <span> {{alumno.direccion}} </span></p>
-      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">Fecha de nacimiento: <span> {{alumno.fechaNacimiento}} </span></p>
+      <p class="is-size-4" ><b>Datos personales</b></p>
+      <p class="is-size-5 mt-5" v-if="alumno.Usuario.nombre"><b>Nombre: </b>{{alumno.Usuario.nombre}}</p>
+      <p class="is-size-5 mt-5" 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>
+      <p class="is-size-5 mt-5" v-if="alumno.correo"><b>Correo: </b>{{alumno.correo}}</p>
+      <p class="is-size-5 mt-5" v-if="alumno.creditos"><b>Créditos: </b>{{alumno.creditos}}</p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio"><b>Fecha de inicio: </b>{{ fecha(alumno.fechaInicio)}}</p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaFin"><b>Fecha de fin: </b>{{ fecha(alumno.fechaFin)}}</p>
+      <p class="is-size-5 mt-5" v-if="alumno.telefono"><b>Teléfono: </b>{{alumno.telefono}}</p>
+      <p class="is-size-5 mt-5" v-if="alumno.direccion"><b>Dirección: </b>{{alumno.direccion}}</p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento"><b>Fecha de nacimiento: </b>{{fecha(alumno.fechaNacimiento)}}</p>
     </div>
     <div id="enlaces">
       <br>
-      <div class="level">
-        <a href="google.com" class="has-text-link link">Ver carta de aceptación</a>
-        <b-button class="is-danger" v-if="alumno.idStatus == 1">
+      <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">
           Rechazar
         </b-button>
       </div>
-      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 1">Confirmar el pre-registro del alumno</h3>
-      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 4">Termino</h3>
-      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 5">Validar el término del alumno</h3>
+      <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 href="google.com" class="has-text-link link">Ver carta de término</a>
-        <b-button class="is-danger" v-if="alumno.idStatus == 5">
+        <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">
           Rechazar
         </b-button>
       </div>
-      <div class="level">
-        <a href="google.com" class="has-text-link link">Ver informe global de actividades</a>
-        <b-button class="is-danger" v-if="alumno.idStatus == 5">
+      <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">
           Rechazar
         </b-button>
       </div>
@@ -80,29 +80,39 @@
       <b-button class="is-success" v-if="mostrarConfirmar()">
         Confirmar
       </b-button>
-      <b-button class="is-danger">
+      <b-button class="is-danger" @click="enviarCancel = !enviarCancel">
         Cancelar
       </b-button>
       <b-button class="is-info" @click="$router.push('./')">
         Regresar
+      </b-button><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()">
+        Cancelar servicio
       </b-button>
+      <b-loading :is-full-page="isFullPage" v-model="isLoading" :can-cancel="true"></b-loading>
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios'
+import moment from 'moment'
 export default {
   data () {
     return {
       alumno: {
-        fechaInicio: '14/2/2020',
-        fechaFin: '14/8/2020',
-        idStatus: 5
+        Programa: {},
+        Usuario: {},
+        Carrera: {},
+        Status: {}
       },
-      idRegistro: window.localStorage.getItem('idRegistro'),
+      idRegistro: 1,
       token: {
         headers: {
-          token: window.localStorage.getItem('token')
+          token: localStorage.getItem('token')
         }
       },
       linkCartaAceptacion: '',
@@ -112,7 +122,7 @@ export default {
       enviarCancel: false,
       mensaje: '',
       mensajeCancel: '',
-      spinner: false,
+      isLoading: false,
       vistoBueno: false,
       acatlan: false
     }
@@ -125,8 +135,55 @@ export default {
         else if (this.vistoBueno) return true
       }
       return false
+    },
+    obtenerRegistro () {
+      return axios
+        .get(
+          `${process.env.api}/servicio/admin?idServicio=${this.idRegistro}`//,
+          // this.token
+        )
+        .then(res => {
+          this.alumno = res.data
+          if (this.alumno.noCuenta.length === 8) { this.alumno.noCuenta = `0${this.alumno.noCuenta}` }
+          if (this.alumno.cartaAceptacion) { this.linkCartaAceptacion = `https://drive.google.com/file/d/${this.alumno.cartaAceptacion}/view?usp=sharing` }
+          if (this.alumno.cartaTermino) { this.linkCartaTermino = `https://drive.google.com/file/d/${this.alumno.cartaTermino}/view?usp=sharing` }
+          if (this.alumno.informeGlobal) { this.linkInformeGlobal = `https://drive.google.com/file/d/${this.alumno.informeGlobal}/view?usp=sharing` }
+        })
+        .catch(err => {
+          console.log(err.response)
+        })
+    },
+    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')
+        })
+        .catch(err => {
+          this.isLoading = false
+          console.log(err)
+        })
+    },
+    fecha (date) {
+      const fecha = moment(date.substr(0, 10))
+      return `${fecha.date()}/${fecha.month() + 1}/${fecha.year()}`
     }
-  }
+  },
+  async created () {
+    // this.idRegistro = localStorage.getItem('idRegistro')
+    await this.obtenerRegistro()
+  }/* ,
+  beforeCreate () {
+    if (!localStorage.getItem('idRegistro')) { this.$router.push('./admin') }
+  } */
 }
 </script>
 
diff --git a/components/responsable/botonesCarga.vue b/components/responsable/botonesCarga.vue
new file mode 100644
index 0000000..919d3c9
--- /dev/null
+++ b/components/responsable/botonesCarga.vue
@@ -0,0 +1,22 @@
+<template >
+  <div>
+      <div class="buttons section pt-0 pl-0">
+        <b-button type="is-info mr-5">
+            Ver vitacoras
+        </b-button>
+        <b-button type="is-info">
+            Ver programas
+        </b-button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index 7c7b8b2..990d444 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-2 mb-0 ">
+        <div class="column is-3 mb-0 ">
           <b-field >
             <b-input
                 placeholder="No.Cuenta"
@@ -10,12 +10,11 @@
                 rounded
                 v-model="numeroCuenta"
                 maxlength="9"
-
                 ></b-input>
           </b-field>
         </div>
 
-        <div class="column is-2 mb-4 pb-4">
+        <div class="column is-3 mb-4 pb-4">
           <b-field>
             <b-input
             type="name"
@@ -27,9 +26,9 @@
           </b-field>
         </div>
 
-        <div class="column is-2">
+        <div class="column is-3" >
           <b-field>
-            <b-select placeholder="Status" icon="information" value="1" expanded rounded v-model="status">
+            <b-select placeholder="Status" icon="information" value="1" expanded rounded v-model="idStatus">
               <optgroup label="Status">
                 <option value="1">Pre-registro</option>
                 <option value="2">Pre-validado</option>
@@ -43,66 +42,84 @@
           </b-field>
         </div>
 
-        <div class="column is-3 px-5">
-          <div class="buttons">
-            <b-button
-            class="button"
-            :class="botonCarta()"
-            :icon-right="iconoCarta()"
-            expanded>
-              Carta de término
-            </b-button>
-          </div>
-        </div>
+        <div class="buttons section pt-3 pl-5">
+        <b-button type="is-info" @click="obtenerDatos()">
+            Buscar
+        </b-button>
+      </div>
 
-        <div class="column is-3 pr-5">
-          <div class="buttons">
-            <b-button class="button"
-            :class="botonCuestionario()"
-            :icon-right="iconoCuestionario()"
-            expanded>
-              Cuestionario
-            </b-button>
-          </div>
-        </div>
+    </div>
 
+    <div>
+      <BotonesCarga v-if="id == 1"/>
     </div>
 
     <div class="columns">
       <section class="column is-12">
           <b-table
-              :data="data"
-              ref="table"
-              paginated
-              per-page="5"
-              hoverable
-              striped
-               v-show="numeroCuenta"
-              >
-
-              <b-table-column field="nombre" label="Nombre" v-slot="props" centereds>
-                  <span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
+          :data="data"
+          paginated
+          backend-pagination
+          :per-page="perPage"
+          >
+              <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>
+                  {{ props.row.numeroCuenta}}
               </b-table-column>
-
               <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
-                  <span @click="cualquiera(props.row.carrera)">{{ props.row.carrera }}</span>
+                  {{ props.row.carrera}}
               </b-table-column>
-
-              <b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
-                  <span @click="cualquiera(props.row.numeroCuenta)">{{ props.row.numeroCuenta }}</span>
+              <b-table-column field="fechaInicio" label="fecha Inicio" v-slot="props" centered>
+                  {{ props.row.fechaInicio}}
               </b-table-column>
-
-              <b-table-column field="fechaInicio" label="Inicio" centered v-slot="props">
-                  <span @click="cualquiera(props.row.fechaInicio)">{{ props.row.fechaInicio }}</span>
+              <b-table-column field="fechaFin" label="Fecha fin" v-slot="props" centered>
+                  {{ props.row.fechaFin}}
               </b-table-column>
-
-              <b-table-column field="fechaFin" label="Final" centered v-slot="props">
-                  <span @click="cualquiera(props.row.fechaFin)">{{ props.row.fechaFin }}</span>
-              </b-table-column>
-
               <b-table-column field="status" label="Status" v-slot="props" centered>
-                  <span @click="cualquiera(props.row.status)" class="tag" :class="type(props.row.status)">{{ props.row.status }}</span>
+                 <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'">
+                    <span
+                    v-if="props.row.cartaTermino === true"
+                    >
+                        <b-icon :icon="iconoCarta(props.row.cartaTermino)"
+                        class="tag is-success"></b-icon>
+                    </span>
+
+                    <b-button
+                    v-if="props.row.cartaTermino === false"
+                    size="is-small"
+                    :class="botonCarta(props.row.cartaTermino)"
+                    :icon="iconoCarta(props.row.cartaTermino)">
+                        Carta Término
+                    </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'">
+                    <span
+                    v-if="props.row.cuestionario === 1"
+                    >
+                        <b-icon :icon="iconoCuestionario(props.row.cuestionario)"
+                        class="tag is-success"></b-icon>
+                    </span>
+
+                    <b-button
+                    v-if="props.row.cuestionario === 2"
+                    size="is-small"
+                    :class="botonCuestionario(props.row.cuestionario)"
+                    :icon="iconoCuestionario(props.row.cuestionario)">
+                        Cuestionario
+                    </b-button>
+                  </div>
+              </b-table-column>
+
           </b-table>
       </section>
     </div>
@@ -111,182 +128,113 @@
 
 <script>
 // import validator from 'validator'
+import BotonesCarga from './botonesCarga.vue'
+import axios from 'axios'
+
 export default {
+  components: {
+    BotonesCarga
+  },
   data () {
     return {
+      loading: false,
+      page: 1,
+      perPage: '',
       numeroCuenta: '',
       nombre: '',
-      status: 1,
-      cartaTermino: false,
-      cuestionario: true,
-      data: [
-        {
-          idRegistro: 1, // span
-          nombre: 'Lemuel',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'pre-validado',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Andrés Hernan Saavedra Trejo',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '42008550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'pre-registro',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Marco',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'pre-validado',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Eithan',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'pre-registro',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Brenda',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'registro',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Lemuel',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'pre-termino',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Lemuel',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'termino',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Lemuel',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'liberado',
-          idStatus: 1
-        },
-        {
-          idRegistro: 1, // span
-          nombre: 'Lemuel',
-          carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
-          fechaInicio: '1/01/2020',
-          fechaFin: '1/06/2020',
-          status: 'rechazado',
-          idStatus: 1
-        }
-      ],
-      newSearch: {}
+      idStatus: '',
+      data: [],
+      aux: [],
+      tipoUsuario: 1
+    }
+  },
+  props: {
+    id: {
+      type: Number,
+      required: false
     }
   },
   methods: {
-    onPageChange (page) {
-      this.page = page
-      this.loadAsyncData()
-    },
-    type (status) {
+    types (status) {
       /* const Status = parseFloat(status) Investigar para que sirve :) */
-      if (status === 'pre-registro') {
+      if (status === 'Pre-Registro') {
         return 'is-dark'
-      } else if (status === 'pre-validado') {
+      } else if (status === 'Pre-Validado') {
         return 'is-warning'
-      } else if (status === 'registro') {
+      } else if (status === 'Registro') {
         return 'is-info'
-      } else if (status === 'pre-termino') {
+      } else if (status === 'Pre-Termino') {
         return 'is-link'
-      } else if (status === 'termino') {
+      } else if (status === 'Termino') {
         return 'is-success'
-      } else if (status === 'liberado') {
+      } else if (status === 'Liberado') {
         return 'is-success'
-      } else if (status === 'rechazado') {
+      } else if (status === 'Rechazado') {
         return 'is-danger'
       }
     },
-    botonCarta () {
-      if (this.cartaTermino === true) {
+    botonCarta (cartaTermino) {
+      if (cartaTermino === true) {
         return 'is-success'
       } else {
         return 'is-danger'
       }
     },
-    botonCuestionario () {
-      if (this.cuestionario === true) {
+    botonCuestionario (cuestionario) {
+      if (cuestionario === true) {
         return 'is-success'
       } else {
         return 'is-danger'
       }
     },
-    iconoCarta () {
-      if (this.cartaTermino === true) {
+    iconoCarta (cartaTermino) {
+      if (cartaTermino === true) {
         return 'check'
       } else {
         return 'close'
       }
     },
-    iconoCuestionario () {
-      if (this.cuestionario === true) {
+    iconoCuestionario (cuestionario) {
+      if (cuestionario === 1) {
         return 'check'
       } else {
         return 'close'
       }
     },
-    cualquiera (variable) {
-      console.log(variable)
-      console.log(this.numeroCuenta)
-      console.log(this.nombre)
-      console.log(this.status)
-    },
-    addSearch (e) {
-      e.preventDefault()
-      console.log('Agregando busqueda')
-    }/*
-    esNumero (numero) {
-      const ultimaLetra = numero.length - 1
+    obtenerDatos () {
+      axios.get(`https://c18a7f2536b2.ngrok.io/servicio/servicios_responsable?idUsuario=2&pagina=1&idStatus&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`)
+        .then(res => {
+          // this.data = res.data.servicios
+          const servicios = res.data.servicios
 
-      if (numero && !validator.isNumeric(numero[ultimaLetra])) { return numero.substr(0, ultimaLetra) }
-      return numero
-    }/*
-    maxLength (str, max) {
-      if (str.lenght > max) { return str.substr(0, max) }
-      return str
-    } */
+          if (servicios.length === 0) {
+            this.data = []
+          }
+          if (servicios.length !== 0) {
+            this.data = []
+            for (let i = 0; i < servicios.length; i++) {
+              this.data.push({
+                nombre: servicios[i].Usuario.nombre,
+                numeroCuenta: servicios[i].Usuario.usuario,
+                carrera: servicios[i].Carrera.carrera,
+                fechaInicio: servicios[i].fechaInicio,
+                fechaFin: servicios[i].fechaFin,
+                status: servicios[i].Status.status,
+                cuestionario: servicios[i].idCuestionarioAlumno
+              })
+              this.aux = this.data
+            }
+          }
+
+          if (res.data.registros <= 20) {
+            this.perPage = 5
+          }
+        })
+    }
+  },
+  created () {
+    this.obtenerDatos()
   }
-
 }
 </script>
 
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 014129f..69c6ce6 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -1,9 +1,27 @@
 <template>
-  <section>
-    hola
-  </section>
+  <div class="container">
+    <div class="section">
+      <div class="pb-0">
+        <p class="title is-three-fifths is-offset-one-fifth">Servicios Sociales</p>
+      </div>
+      <section class="section">
+        <InputTable :id="id"/>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import InputTable from '../../components/responsable/inputTable'
+
+export default {
+  components: {
+    InputTable
+  },
+  data () {
+    return {
+      id: 1
+    }
+  }
+}
 </script>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 751a8f8..9e11b22 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -18,8 +18,9 @@
     </div>
 
     <section class="section">
-      <InputTable />
+      <InputTable :id="id"/>
     </section>
+
   </div>
 </template>
 
@@ -30,6 +31,11 @@ export default {
   components: {
     InputTable
   },
+  data () {
+    return {
+      id: 2
+    }
+  },
   methods: {
     agregarAlumno () {
       this.$router.push('/responsable/nuevo')