diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index 990d444..e9b663a 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -58,9 +58,13 @@
       <section class="column is-12">
           <b-table
           :data="data"
+          :loading="loading"
+
           paginated
           backend-pagination
+          :total="total"
           :per-page="perPage"
+          @page-change="onPageChange"
           >
               <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
                   {{ props.row.nombre}}
@@ -137,14 +141,14 @@ export default {
   },
   data () {
     return {
-      loading: false,
+      data: [],
+      total: '',
+      loading: true,
       page: 1,
-      perPage: '',
+      perPage: 25,
       numeroCuenta: '',
       nombre: '',
       idStatus: '',
-      data: [],
-      aux: [],
       tipoUsuario: 1
     }
   },
@@ -155,6 +159,11 @@ export default {
     }
   },
   methods: {
+    onPageChange (page) {
+      this.page = page
+      this.obtenerDatos()
+      console.log(this.page)
+    },
     types (status) {
       /* const Status = parseFloat(status) Investigar para que sirve :) */
       if (status === 'Pre-Registro') {
@@ -202,16 +211,17 @@ export default {
       }
     },
     obtenerDatos () {
-      axios.get(`https://c18a7f2536b2.ngrok.io/servicio/servicios_responsable?idUsuario=2&pagina=1&idStatus&nombre=${this.nombre}&numeroCuenta=${this.numeroCuenta}`)
+      // 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}`)
         .then(res => {
-          // this.data = res.data.servicios
           const servicios = res.data.servicios
+          // this.page = 1
 
-          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,
@@ -222,13 +232,17 @@ export default {
                 status: servicios[i].Status.status,
                 cuestionario: servicios[i].idCuestionarioAlumno
               })
-              this.aux = this.data
             }
           }
+          let currentTotal = servicios.length
+          let contador
 
-          if (res.data.registros <= 20) {
-            this.perPage = 5
+          for (let i = 0; i < ((res.data.faltantes + res.data.registros) / 25) + 1; i++) {
+            contador = i
           }
+          currentTotal = this.perPage * contador
+          this.total = currentTotal
+          this.loading = false
         })
     }
   },
diff --git a/nuxt.config.js b/nuxt.config.js
index 9d4ccd6..2e40938 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -52,7 +52,7 @@ export default {
   },
   env: {
     //api: 'http://localhost:3000'
-    api: 'https://b0666f5f5295.ngrok.io'
+    api: 'https://10578525f0f3.ngrok.io'
     //api: 'https//venus.acatlan.unam.mx/pruebas_pcpuma'
   }