diff --git a/components/TablaServiciosSociales.vue b/components/TablaServiciosSociales.vue
index a2abc17..1df6af9 100644
--- a/components/TablaServiciosSociales.vue
+++ b/components/TablaServiciosSociales.vue
@@ -18,6 +18,7 @@
         field="fechaCreado"
         label="Fecha Registro"
         v-slot="props"
+        v-if="columnaFechaCreado"
         centered
       >
         <span>{{ fecha(props.row.createdAt) }}</span>
@@ -61,10 +62,82 @@
       </b-table-column>
 
       <b-table-column field="status" label="Status" v-slot="props" centered>
-        <span :class="types(props.row.Status.idStatus)">
+        <b-button
+          type="is-danger"
+          size="is-small"
+          class="tag"
+          @click="responsableUpdate(props.row, 'carta_aceptacion')"
+          v-if="columnasResponsable && props.row.Status.idStatus === 7"
+        >
+          Carta Aceptación Rechazada
+        </b-button>
+
+        <span :class="types(props.row.Status.idStatus)" v-else>
           {{ props.row.Status.status }}
         </span>
       </b-table-column>
+
+      <b-table-column
+        field="cartaTermino"
+        label="Carta Término"
+        v-slot="props"
+        v-if="columnasResponsable"
+        centered
+      >
+        <div
+          v-if="
+            props.row.Status.idStatus >= 4 &&
+            props.row.Status.idStatus != 7 &&
+            props.row.Status.idStatus != 10
+          "
+        >
+          <b-icon
+            class="tag is-success"
+            icon="check"
+            v-if="props.row.cartaTermino"
+          />
+
+          <b-button
+            type="is-link is-light"
+            class="tag"
+            @click="responsableUpdate(props.row.idServicio, 'carta_termino')"
+            v-else
+          >
+            Carta Término
+          </b-button>
+        </div>
+      </b-table-column>
+
+      <b-table-column
+        field="cuestionarioP"
+        label="Cuestionario"
+        v-slot="props"
+        v-if="columnasResponsable"
+        centered
+      >
+        <div
+          v-if="
+            props.row.Status.idStatus >= 4 &&
+            props.row.Status.idStatus != 7 &&
+            props.row.Status.idStatus != 10
+          "
+        >
+          <b-icon
+            class="tag is-success"
+            icon="check"
+            v-if="props.row.idCuestionarioPrograma"
+          />
+
+          <b-button
+            type="is-link is-light"
+            class="tag"
+            @click="responsableUpdate(props.row.idServicio, 'cuestionario')"
+            v-else
+          >
+            Cuestionario
+          </b-button>
+        </div>
+      </b-table-column>
     </b-table>
   </div>
 </template>
@@ -73,13 +146,12 @@
 import moment from 'moment'
 
 export default {
-  data() {
-    return {
-      servicioSelected: {},
-      perPage: 25,
-    }
-  },
   props: {
+    columnaFechaCreado: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     columnaFechaFin: {
       type: Boolean,
       required: false,
@@ -90,13 +162,18 @@ export default {
       required: false,
       default: true,
     },
+    columnasResponsable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     isLoading: {
       type: Boolean,
       required: true,
     },
     path: {
       type: String,
-      required: true,
+      required: false,
     },
     idTipoUsuario: {
       type: Number,
@@ -119,6 +196,12 @@ export default {
       require: true,
     },
   },
+  data() {
+    return {
+      servicioSelected: {},
+      perPage: 25,
+    }
+  },
   methods: {
     fecha(date) {
       if (date) {
@@ -175,6 +258,16 @@ export default {
       if (this.idTipoUsuario === 1) return 'pointer'
       return ''
     },
+    responsableUpdate(servicio, path) {
+      /*pendiente*/
+      localStorage.setItem('idServicio', servicio.idServicio)
+      localStorage.setItem(
+        // 'idCuestionarioPrograma',
+        'cuestionario',
+        servicio.idCuestionarioPrograma
+      )
+      this.$router.push(`/responsable/${path}`)
+    },
   },
   watch: {
     servicioSelected() {
@@ -193,27 +286,4 @@ 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;
-}
-
-.pointer {
-  cursor: pointer;
-}
-</style>
+<style scoped></style>
diff --git a/components/responsable/TablaServiciosSociales.vue b/components/responsable/TablaServiciosSociales.vue
index 8ea96c0..542a3d0 100644
--- a/components/responsable/TablaServiciosSociales.vue
+++ b/components/responsable/TablaServiciosSociales.vue
@@ -1,16 +1,16 @@
 <template>
-  <section class="section">
+  <section>
     <div class="columns">
       <b-field class="column" label="Número de Cuenta">
         <b-input
           type="text"
           placeholder="No.Cuenta"
           icon="school"
-          rounded
-          v-model="numeroCuenta"
           maxlength="9"
           @keyup.enter.native="obtenerServicios()"
-        ></b-input>
+          v-model="search.numeroCuenta"
+          rounded
+        />
       </b-field>
 
       <b-field class="column" label="Nombre">
@@ -18,15 +18,16 @@
           type="name"
           placeholder="Nombre"
           icon="account"
-          rounded
-          v-model="nombre"
           @keyup.enter.native="obtenerServicios()"
-        ></b-input>
+          v-model="search.nombre"
+          rounded
+        />
       </b-field>
 
       <b-field class="column" label="Status">
-        <b-select icon="information" expanded rounded v-model="idStatus">
+        <b-select icon="information" v-model="search.idStatus" expanded rounded>
           <option value="">Status</option>
+
           <option
             v-for="(s, i) in status"
             :key="i"
@@ -38,207 +39,80 @@
         </b-select>
       </b-field>
 
-      <b-button
-        type="is-info"
-        class="column is-align-self-center"
-        expanded
-        @click="obtenerServicios()"
-      >
-        Buscar
-      </b-button>
+      <div class="column is-align-self-center">
+        <b-button type="is-info" @click="obtenerServicios()" expanded rounded>
+          Buscar
+        </b-button>
+      </div>
     </div>
 
-    <b-table
-      :data="data"
+    <TablaServiciosSociales
+      :columnaFechaCreado="false"
+      :columnasResponsable="true"
+      :isLoading="isLoading"
+      :idTipoUsuario="responsable.idTipoUsuario"
+      :page="page"
       :total="total"
-      :current-page="page"
-      :per-page="perPage"
-      :loading="isLoading"
-      @page-change="onPageChange"
-      hoverable
-      striped
-      paginated
-      backend-pagination
-    >
-      <b-table-column
-        field="numeroCuenta"
-        label="Número de Cuenta"
-        v-slot="props"
-        centered
-      >
-        <span>{{ props.row.Usuario.usuario }}</span>
-      </b-table-column>
-
-      <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
-        <span>{{ props.row.Usuario.nombre }}</span>
-      </b-table-column>
-
-      <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
-        <span>{{ props.row.Carrera.carrera }}</span>
-      </b-table-column>
-
-      <b-table-column
-        field="fechaInicio"
-        label="Fecha Inicio"
-        v-slot="props"
-        centered
-      >
-        <span>{{ fecha(props.row.fechaInicio) }}</span>
-      </b-table-column>
-
-      <b-table-column
-        field="fechaFin"
-        label="Fecha Fin"
-        v-slot="props"
-        centered
-      >
-        <span>{{ fecha(props.row.fechaFin) }}</span>
-      </b-table-column>
-
-      <b-table-column field="status" label="Status" v-slot="props" centered>
-        <b-button
-          type="is-danger"
-          size="is-small"
-          class="tag"
-          @click="responsableUpdate(props.row.idServicio, 'carta_aceptacion')"
-          v-if="props.row.Status.idStatus === 7"
-        >
-          Carta Aceptación Rechazada
-        </b-button>
-
-        <span :class="types(props.row.Status.idStatus)" v-else>{{
-          props.row.Status.status
-        }}</span>
-      </b-table-column>
-
-      <b-table-column
-        field="cartaTermino"
-        label="Carta Término"
-        v-slot="props"
-        centered
-      >
-        <div v-if="ultimosCampos(props.row.Status.idStatus)">
-          <span v-if="props.row.cartaTermino">
-            <b-icon icon="check" class="tag is-success"></b-icon>
-          </span>
-
-          <b-button
-            type="is-danger"
-            size="is-small"
-            class="tag"
-            @click="responsableUpdate(props.row.idServicio, 'carta_termino')"
-            v-else
-          >
-            Carta Término
-          </b-button>
-        </div>
-      </b-table-column>
-
-      <b-table-column
-        field="cuestionarioP"
-        label="Cuestionario"
-        v-slot="props"
-        centered
-      >
-        <div v-if="ultimosCampos(props.row.Status.idStatus)">
-          <span v-if="props.row.idCuestionarioPrograma">
-            <b-icon icon="check" class="tag is-success"></b-icon>
-          </span>
-
-          <b-button
-            type="is-danger"
-            size="is-small"
-            class="tag"
-            @click="responsableUpdate(props.row.idServicio, 'cuestionario')"
-            v-else
-          >
-            Cuestionario
-          </b-button>
-        </div>
-      </b-table-column>
-    </b-table>
+      :data="data"
+      :onPageChange="onPageChange"
+    />
   </section>
 </template>
 
 <script>
 import axios from 'axios'
-import moment from 'moment'
+import TablaServiciosSociales from '@/components/TablaServiciosSociales'
 
 export default {
+  components: {
+    TablaServiciosSociales,
+  },
+  props: {
+    responsable: { type: Object, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+  },
   data() {
     return {
-      responsable: {},
-      status: [],
-      data: [],
-      page: 1,
-      perPage: 25,
-      total: 0,
       isLoading: false,
-      busqueda: {},
-      numeroCuenta: '',
-      numeroCuentaAnterior: '',
-      nombre: '',
-      nombreAnterior: '',
-      idStatus: '',
-      idStatusAnterior: '',
-      token: {},
+      page: 1,
+      total: 0,
+      data: [],
+      status: [],
+      search: {
+        idStatus: '',
+      },
+      searchAnterior: {},
     }
   },
   methods: {
-    fecha(date) {
-      if (date) {
-        const fecha = moment(date)
-
-        return `${fecha.date() < 10 ? '0' + fecha.date() : fecha.date()}/${
-          fecha.month() < 9 ? '0' + (fecha.month() + 1) : fecha.month() + 1
-        }/${fecha.year()}`
-      }
-      return ''
-    },
-    ultimosCampos(idStatus) {
-      return idStatus >= 4 && idStatus != 7
-    },
-    types(idStatus) {
-      let style = 'tag'
-
-      if (idStatus === 1) style += ' is-dark'
-      if (idStatus === 2) style += ' is-info'
-      if (idStatus === 3) style += ' is-warning'
-      if (idStatus === 4) style += ' is-link'
-      if (idStatus === 5) style += ' is-success'
-      if (idStatus === 6) style += ' is-success is-light'
-      if (idStatus >= 7 && idStatus <= 9) style += ' is-danger'
-      return style
-    },
     onPageChange(page) {
       this.page = page
       this.obtenerServicios()
     },
-    responsableUpdate(idServicio, path) {
-      localStorage.setItem('idServicio', idServicio)
-      this.$router.push(`/responsable/${path}`)
-    },
     obtenerServicios() {
       let data = ''
 
       this.isLoading = true
       if (
-        this.numeroCuenta != this.numeroCuentaAnterior ||
-        this.nombre != this.nombreAnterior ||
-        this.idStatus != this.idStatusAnterior
+        this.search.numeroCuenta != this.searchAnterior.numeroCuenta ||
+        this.search.nombre != this.searchAnterior.nombre ||
+        this.search.idStatus != this.searchAnterior.idStatus
       ) {
         this.page = 1
-        this.numeroCuentaAnterior = this.numeroCuenta
-        this.nombreAnterior = this.nombre
-        this.idStatusAnterior = this.idStatus
+        this.searchAnterior.numeroCuenta = this.search.numeroCuenta
+        this.searchAnterior.nombre = this.search.nombre
+        this.searchAnterior.idStatus = this.search.idStatus
       }
-      if (this.idStatus) data += `&idStatus=${this.idStatus}`
-      if (this.nombre) data += `&nombre=${this.nombre}`
-      if (this.numeroCuenta) data = `&numeroCuenta=${this.numeroCuenta}`
+      if (this.search.idStatus) data += `&idStatus=${this.search.idStatus}`
+      if (this.search.nombre) data += `&nombre=${this.search.nombre}`
+      if (this.search.numeroCuenta)
+        data += `&numeroCuenta=${this.search.numeroCuenta}`
       axios
         .get(
           `${process.env.api}/servicio/servicios_responsable?idUsuario=${this.responsable.idUsuario}&pagina=${this.page}${data}`,
-          this.token
+          this.responsable.token
         )
         .then((res) => {
           this.data = res.data.serviciosResponsable
@@ -252,48 +126,18 @@ export default {
     },
     obtenerCatalogoStatus() {
       axios
-        .get(`${process.env.api}/status`, this.token)
+        .get(`${process.env.api}/status`, this.responsable.token)
         .then((res) => {
           this.status = res.data
+          this.obtenerCatalogoStatus()
         })
         .catch((err) => {
           this.imprimirError(err.response.data)
         })
     },
-    imprimirError(err) {
-      this.$buefy.dialog.alert({
-        title: 'Error',
-        message: err.message,
-        type: 'is-danger',
-        hasIcon: true,
-        icon: 'alert-circle',
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-      })
-      if (err.err === 'token error') {
-        localStorage.clear()
-        this.$router.push('/')
-      }
-    },
-    getLocalhostInfo() {
-      this.responsable.idUsuario = localStorage.getItem('idUsuario')
-      this.responsable.idTipoUsuario = Number(
-        localStorage.getItem('idTipoUsuario')
-      )
-      this.responsable.tipoUsuario = localStorage.getItem('tipoUsuario')
-      this.token = {
-        headers: {
-          token: localStorage.getItem('token'),
-        },
-      }
-    },
   },
   created() {
-    this.getLocalhostInfo()
-    if (this.responsable.idTipoUsuario === 2) {
-      this.obtenerCatalogoStatus()
-      this.obtenerServicios()
-    }
+    if (this.responsable.idTipoUsuario === 2) this.obtenerServicios()
   },
 }
 </script>
diff --git a/pages/responsable/cuestionario/index.vue b/pages/responsable/cuestionario/index.vue
index 5d5649a..84c1f34 100644
--- a/pages/responsable/cuestionario/index.vue
+++ b/pages/responsable/cuestionario/index.vue
@@ -100,6 +100,5 @@ export default {
     if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
     if (this.admin.idTipoUsuario === 4) this.$router.push('/casoEspecial')
   },
-  F,
 }
 </script>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 928fe90..bf51d49 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -15,7 +15,7 @@
       </p>
     </div>
 
-    <div class="section pb-0">
+    <div class="section">
       <b-button type="is-info" tag="router-link" to="/responsable/nuevo">
         Agregar alumno
       </b-button>
@@ -23,9 +23,9 @@
 
     <TablaServiciosSociales
       :responsable="responsable"
+      :imprimirError="imprimirError"
       :imprimirMensaje="imprimirMensaje"
       :imprimirWarning="imprimirWarning"
-      :imprimirError="imprimirError"
     />
   </section>
 </template>