diff --git a/components/TablaServiciosSociales.vue b/components/TablaServiciosSociales.vue
index 085477b..f5c8330 100644
--- a/components/TablaServiciosSociales.vue
+++ b/components/TablaServiciosSociales.vue
@@ -5,7 +5,7 @@
       :total="total"
       :current-page="page"
       :per-page="perPage"
-      :selected.sync="servicioSeleccionado"
+      :selected.sync="servicioSelected"
       :loading="isLoading"
       :row-class="(row, index) => addPointer()"
       @page-change="onPageChange"
@@ -35,6 +35,7 @@
         field="fechaInicio"
         label="Fecha Inicio"
         v-slot="props"
+        v-if="columnaFechaInicio"
         centered
       >
         <span>{{ fecha(props.row.fechaInicio) }}</span>
@@ -44,6 +45,7 @@
         field="fechaFin"
         label="Fecha Fin"
         v-slot="props"
+        v-if="columnaFechaFin"
         centered
       >
         <span>{{ fecha(props.row.fechaFin) }}</span>
@@ -73,7 +75,7 @@ import moment from 'moment'
 export default {
   data() {
     return {
-      servicioSeleccionado: {},
+      servicioSelected: {},
       perPage: 25,
     }
   },
@@ -102,6 +104,20 @@ export default {
       type: Number,
       required: true,
     },
+    columnaFechaInicio: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    columnaFechaFin: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
   },
   methods: {
     fecha(date) {
@@ -117,13 +133,42 @@ export default {
     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'
+      switch (idStatus) {
+        case 1:
+          style += ' is-dark'
+          break
+        case 2:
+          style += ' is-info'
+          break
+        case 3:
+          style += ' is-warning'
+          break
+        case 4:
+          style += ' is-link'
+          break
+        case 5:
+          style += ' is-success'
+          break
+        case 6:
+          style += ' is-success is-light'
+          break
+        case 7:
+        case 8:
+        case 9:
+        case 10:
+          style += ' is-danger'
+          break
+        case 11:
+          style += ' is-link is-light'
+          break
+        case 12:
+          style += ' is-info is-light'
+          break
+        case 13:
+        case 14:
+          style += ' is-success is-light'
+          break
+      }
       return style
     },
     addPointer() {
@@ -132,19 +177,20 @@ export default {
     },
   },
   watch: {
-    servicioSeleccionado() {
+    servicioSelected() {
       if (this.idTipoUsuario === 1) {
-        localStorage.setItem('idServicio', this.servicioSeleccionado.idServicio)
-        this.$router.push(`/admin/servicio`)
-      } else if (this.servicioSeleccionado.idServicio)
-        this.servicioSeleccionado = {}
+        if (this.path === '/admin/servicio')
+          localStorage.setItem('idServicio', this.servicioSelected.idServicio)
+        if (this.path === '/admin/casos_especiales/caso_especial')
+          localStorage.setItem(
+            'idCasoEspecial',
+            this.servicioSelected.idCasoEspecial
+          )
+        this.$router.push(this.path)
+      } else if (this.servicioSelected.idServicio) this.servicioSelected = {}
     },
   },
 }
 </script>
 
-<style scoped>
-.pointer {
-  cursor: pointer;
-}
-</style>
+<style></style>
diff --git a/components/admin/casos_especiales/caso_especial/editar/formEditar.vue b/components/admin/casos_especiales/editar/formEditar.vue
similarity index 100%
rename from components/admin/casos_especiales/caso_especial/editar/formEditar.vue
rename to components/admin/casos_especiales/editar/formEditar.vue
diff --git a/components/admin/casos_especiales/tablaCasosEspeciales.vue b/components/admin/casos_especiales/tablaCasosEspeciales.vue
index 227a0d7..74a0af8 100644
--- a/components/admin/casos_especiales/tablaCasosEspeciales.vue
+++ b/components/admin/casos_especiales/tablaCasosEspeciales.vue
@@ -1,7 +1,5 @@
 <template>
   <section>
-    <h3 class="title">Casos Especiales</h3>
-
     <div class="columns">
       <b-field class="column" label="Número de Cuenta">
         <b-input
@@ -10,9 +8,9 @@
           icon="school"
           maxlength="9"
           @keyup.enter.native="obtenerCasosEspeciales()"
-          v-model="busqueda.numeroCuenta"
+          v-model="search.numeroCuenta"
           rounded
-        ></b-input>
+        />
       </b-field>
 
       <b-field class="column" label="Nombre">
@@ -21,18 +19,13 @@
           placeholder="Nombre"
           icon="account"
           @keyup.enter.native="obtenerCasosEspeciales()"
-          v-model="busqueda.nombre"
+          v-model="search.nombre"
           rounded
-        ></b-input>
+        />
       </b-field>
 
       <b-field class="column" label="Status">
-        <b-select
-          icon="information"
-          v-model="busqueda.idStatus"
-          expanded
-          rounded
-        >
+        <b-select icon="information" v-model="search.idStatus" expanded rounded>
           <option value="">Status</option>
           <option
             v-for="(s, i) in status"
@@ -57,73 +50,37 @@
       </div>
     </div>
 
-    <b-table
+    <TablaServiciosSociales
+      :isLoading="isLoading"
       :data="data"
+      :page="page"
+      :onPageChange="onPageChange"
       :total="total"
-      :current-page="page"
-      :per-page="perPage"
-      :selected.sync="servicioSeleccionado"
-      :loading="isLoading"
-      :row-class="(row, index) => 'pointer'"
-      @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="fechaCreado"
-        label="Día de Creación"
-        v-slot="props"
-        centered
-      >
-        <span>{{ fecha(props.row.createdAt) }}</span>
-      </b-table-column>
-
-      <b-table-column field="status" label="Status" v-slot="props" centered>
-        <span :class="types(props.row.Status.idStatus)">{{
-          props.row.Status.status
-        }}</span>
-      </b-table-column>
-    </b-table>
+      :idTipoUsuario="admin.idTipoUsuario"
+      :path="'/admin/casos_especiales/caso_especial'"
+      :columnaFechaInicio="false"
+      :columnaFechaFin="false"
+    />
   </section>
 </template>
 
 <script>
 import axios from 'axios'
-import moment from 'moment'
+import TablaServiciosSociales from '@/components/TablaServiciosSociales'
 
 export default {
+  components: { TablaServiciosSociales },
   data() {
     return {
       status: [],
       data: [],
       page: 1,
-      perPage: 25,
       total: 0,
       isLoading: false,
-      busqueda: {
+      search: {
         idStatus: '',
       },
-      busquedaAnterior: {},
-      servicioSeleccionado: {},
+      searchAnterior: {},
     }
   },
   props: {
@@ -133,26 +90,6 @@ export default {
     imprimirError: { type: Function, required: true },
   },
   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 ''
-    },
-    types(idStatus) {
-      let style = 'tag'
-
-      if (idStatus === 10) style += ' is-danger'
-      if (idStatus === 11) style += ' is-link is-light'
-      if (idStatus === 12) style += ' is-danger is-light'
-      if (idStatus === 13 || idStatus === 14) style += ' is-success is-light'
-
-      return style
-    },
     onPageChange(page) {
       this.page = page
       this.obtenerCasosEspeciales()
@@ -162,19 +99,19 @@ export default {
 
       this.isLoading = true
       if (
-        this.busqueda.numeroCuenta != this.busquedaAnterior.numeroCuenta ||
-        this.busqueda.nombre != this.busquedaAnterior.nombre ||
-        this.busqueda.idStatus != this.busquedaAnterior.idStatus
+        this.search.numeroCuenta != this.searchAnterior.numeroCuenta ||
+        this.search.nombre != this.searchAnterior.nombre ||
+        this.search.idStatus != this.searchAnterior.idStatus
       ) {
         this.page = 1
-        this.busquedaAnterior.numeroCuenta = this.busqueda.numeroCuenta
-        this.busquedaAnterior.nombre = this.busqueda.nombre
-        this.busquedaAnterior.idStatus = this.busqueda.idStatus
+        this.searchAnterior.numeroCuenta = this.search.numeroCuenta
+        this.searchAnterior.nombre = this.search.nombre
+        this.searchAnterior.idStatus = this.search.idStatus
       }
-      if (this.busqueda.idStatus) data += `&idStatus=${this.busqueda.idStatus}`
-      if (this.busqueda.nombre) data += `&nombre=${this.busqueda.nombre}`
-      if (this.busqueda.numeroCuenta)
-        data = `&numeroCuenta=${this.busqueda.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}/caso_especial/servicios_especiales?&pagina=${this.page}${data}`,
@@ -201,15 +138,6 @@ export default {
         })
     },
   },
-  watch: {
-    servicioSeleccionado() {
-      localStorage.setItem(
-        'idCasoEspecial',
-        this.servicioSeleccionado.idCasoEspecial
-      )
-      this.$router.push(`/admin/casos_especiales/caso_especial`)
-    },
-  },
   created() {
     if (this.admin.idTipoUsuario === 1) {
       this.obtenerCatalogoStatus()
@@ -219,27 +147,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></style>
diff --git a/components/admin/inputTableA.vue b/components/admin/inputTableA.vue
index 639468f..0264a6d 100644
--- a/components/admin/inputTableA.vue
+++ b/components/admin/inputTableA.vue
@@ -54,6 +54,7 @@
       :onPageChange="onPageChange"
       :total="total"
       :idTipoUsuario="admin.idTipoUsuario"
+      :path="'/admin/servicio'"
     />
   </div>
 </template>
diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index 81dcbbd..5829094 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -167,6 +167,12 @@ export default {
       isLoading: false,
     }
   },
+  props: {
+    admin: { type: Object, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    imprimirError: { type: Function, required: true },
+  },
   methods: {
     mostrarConfirmar1() {
       if (this.alumno.Status.idStatus === 1) return true
diff --git a/pages/admin/casos_especiales/index.vue b/pages/admin/casos_especiales/index.vue
index 613e3be..ff3809f 100644
--- a/pages/admin/casos_especiales/index.vue
+++ b/pages/admin/casos_especiales/index.vue
@@ -2,6 +2,8 @@
   <section class="container px-2 pb-6">
     <BotonRegresar path="/admin" />
 
+    <h3 class="title">Casos Especiales</h3>
+
     <TablaCasosEspeciales
       :admin="admin"
       :imprimirMensaje="imprimirMensaje"