diff --git a/components/admin/responsables/cargaMasiva.vue b/components/admin/responsables/cargaMasiva.vue
index 8abffe8..560f26e 100644
--- a/components/admin/responsables/cargaMasiva.vue
+++ b/components/admin/responsables/cargaMasiva.vue
@@ -5,7 +5,7 @@
     <b-field>
       <b-upload
         type="is-black"
-        @input="validarCsv()"
+        @input="validarExt()"
         v-model="csv"
         drag-drop
         expanded
@@ -94,6 +94,7 @@ export default {
       this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
       this.token = {
         headers: {
+          'Content-Type': 'multipart/form-data',
           token: localStorage.getItem('token'),
         },
       }
@@ -104,12 +105,7 @@ export default {
       this.isLoading = true
       formData.append('csv', this.csv)
       axios
-        .post(`${process.env.api}/programa/carga_masiva`, formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-            token: this.token.headers.token,
-          },
-        })
+        .post(`${process.env.api}/programa/carga_masiva`, formData, this.token)
         .then((res) => {
           this.isLoading = false
           this.toastType = 'is-success'
@@ -119,7 +115,7 @@ export default {
         })
         .catch((err) => {
           this.isLoading = false
-          this.error(err.response.data)
+          this.imprimirError(err.response.data)
         })
     },
     imprimirError(err) {
diff --git a/components/admin/responsables/infoResponsable/responsable.vue b/components/admin/responsables/infoResponsable/responsable.vue
new file mode 100644
index 0000000..92477db
--- /dev/null
+++ b/components/admin/responsables/infoResponsable/responsable.vue
@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <h3 class="title">Información del responsable</h3>
+
+    <b-field label="Nombre:">
+      <p class="input">{{ nombre }}</p>
+    </b-field>
+
+    <b-field label="Correo:">
+      <p class="input">{{ correo }}</p>
+    </b-field>
+
+    <b-field label="Clave de programa:">
+      <b-select v-model="programaSeleccionado" expanded>
+        <option value="" disabled>Elija una clave de programa:</option>
+        <option v-for="(p, i) in programas" :key="i" :value="i">
+          {{ p.clavePrograma }}
+        </option>
+      </b-select>
+    </b-field>
+
+    <b-field label="Institucion:">
+      <p class="input">{{ programa.institucion }}</p>
+    </b-field>
+    <b-field label="Dependencia:">
+      <p class="input">{{ programa.dependencia }}</p>
+    </b-field>
+
+    <b-field label="Programa:">
+      <p class="input">{{ programa.programa }}</p>
+    </b-field>
+
+    <div>
+      <b-button
+        type="is-link"
+        class="my-5"
+        tag="router-link"
+        to="/admin/responsables/infoResponsable/modificar"
+      >
+        Editar información
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      admin: {},
+      idResponsable: null,
+      correo: '',
+      nombre: '',
+      programas: [],
+      programa: {},
+      programaSeleccionado: '',
+      token: {},
+    }
+  },
+  methods: {
+    getLocalhostInfo() {
+      this.admin.idUsuario = localStorage.getItem('idUsuario')
+      this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
+      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
+      this.token = {
+        headers: {
+          token: localStorage.getItem('token'),
+        },
+      }
+      this.idResponsable = localStorage.getItem('idResponsable')
+      this.correo = localStorage.getItem('correo')
+      this.nombre = localStorage.getItem('nombreResponsable')
+    },
+    obtenerProgramas() {
+      axios
+        .get(
+          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
+          this.token
+        )
+        .then((res) => {
+          this.programas = res.data
+        })
+        .catch((err) => {
+          this.error(err.response.data.message)
+        })
+    },
+    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('/')
+      }
+    },
+  },
+  watch: {
+    programaSeleccionado() {
+      this.programa = this.programas[this.programaSeleccionado]
+    },
+  },
+  created() {
+    this.getLocalhostInfo()
+    if (this.admin.idTipoUsuario === 1) {
+      this.obtenerProgramas()
+    }
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/components/admin/responsables/tablaResponsables.vue b/components/admin/responsables/tablaResponsables.vue
index 1996c05..a7c84a6 100644
--- a/components/admin/responsables/tablaResponsables.vue
+++ b/components/admin/responsables/tablaResponsables.vue
@@ -44,6 +44,7 @@
       :per-page="perPage"
       :selected.sync="responsableSeleccionado"
       :loading="isLoading"
+      :row-class="(row, index) => 'pointer'"
       @page-change="onPageChange"
       hoverable
       striped
@@ -164,6 +165,11 @@ export default {
         'idResponsable',
         this.responsableSeleccionado.idUsuario
       )
+      localStorage.setItem('correo', this.responsableSeleccionado.usuario)
+      localStorage.setItem(
+        'nombreResponsable',
+        this.responsableSeleccionado.nombre
+      )
       this.$router.push(`/admin/responsables/infoResponsable`)
     },
   },
@@ -196,7 +202,7 @@ export default {
   border-color: #1b3d70;
 }
 
-.pinter {
+.pointer {
   cursor: pointer;
 }
 </style>
diff --git a/components/casoEspecial/nuevo/formularioEspecial.vue b/components/casoEspecial/nuevo/formularioEspecial.vue
index e0a0e2a..15fdc60 100644
--- a/components/casoEspecial/nuevo/formularioEspecial.vue
+++ b/components/casoEspecial/nuevo/formularioEspecial.vue
@@ -20,15 +20,15 @@
       </b-field>
 
       <b-field label="Nombre">
-        <p class="input" placeholder="Nombre">{{ alumno.nombre }}</p>
+        <p class="input">{{ alumno.nombre }}</p>
       </b-field>
 
       <b-field label="Carrera">
-        <p class="input" placeholder="Carrera">{{ alumno.carrera }}</p>
+        <p class="input">{{ alumno.carrera }}</p>
       </b-field>
 
       <b-field label="Créditos">
-        <p class="input" placeholder="Créditos">
+        <p class="input">
           <span v-if="!alumno.creditos"></span>
 
           <span v-else> {{ Number(alumno.creditos) }}% </span>
diff --git a/layouts/default.vue b/layouts/default.vue
index edfb239..1ea043f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,9 +8,9 @@
 </template>
 
 <script>
-import Header from '../components/layouts/Header'
-import Footer from '../components/layouts/Footer'
-import Logout from '../components/layouts/Logout'
+import Header from '@/components/layouts/Header'
+import Footer from '@/components/layouts/Footer'
+import Logout from '@/components/layouts/Logout'
 
 export default {
   components: { Header, Footer, Logout },
diff --git a/layouts/login.vue b/layouts/login.vue
index b5e1b01..f8011bc 100644
--- a/layouts/login.vue
+++ b/layouts/login.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import Header from '../components/layouts/Header'
-import Footer from '../components/layouts/Footer'
+import Header from '@/components/layouts/Header'
+import Footer from '@/components/layouts/Footer'
 
 export default {
   components: { Header, Footer },
diff --git a/pages/admin/casos_especiales/caso_especial/editar/index.vue b/pages/admin/casos_especiales/caso_especial/editar/index.vue
index 2847889..5177d23 100644
--- a/pages/admin/casos_especiales/caso_especial/editar/index.vue
+++ b/pages/admin/casos_especiales/caso_especial/editar/index.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import formEditar from '../../../../../components/admin/casos_especiales/formEditar'
+import formEditar from '@/components/admin/casos_especiales/formEditar'
 
 export default {
   components: {
diff --git a/pages/admin/casos_especiales/caso_especial/index.vue b/pages/admin/casos_especiales/caso_especial/index.vue
index 093ff34..b309ab5 100644
--- a/pages/admin/casos_especiales/caso_especial/index.vue
+++ b/pages/admin/casos_especiales/caso_especial/index.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import BotonRegresar from '../../../../components/botonRegresar'
-import DatosPersonalesEspecial from '../../../../components/admin/casos_especiales/casoEspecial'
+import BotonRegresar from '@/components/botonRegresar'
+import DatosPersonalesEspecial from '@/components/admin/casos_especiales/casoEspecial'
 
 export default {
   components: {
diff --git a/pages/admin/casos_especiales/index.vue b/pages/admin/casos_especiales/index.vue
index 1114a8c..59cc460 100644
--- a/pages/admin/casos_especiales/index.vue
+++ b/pages/admin/casos_especiales/index.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import botonRegresar from '../../../components/botonRegresar'
-import TablaCasosEspeciales from '../../../components/admin/casos_especiales/tablaCasosEspeciales'
+import botonRegresar from '@/components/botonRegresar'
+import TablaCasosEspeciales from '@/components/admin/casos_especiales/tablaCasosEspeciales'
 
 export default {
   components: {
diff --git a/pages/admin/responsables/infoResponsable/index.vue b/pages/admin/responsables/infoResponsable/index.vue
index 1d96108..7670b50 100644
--- a/pages/admin/responsables/infoResponsable/index.vue
+++ b/pages/admin/responsables/infoResponsable/index.vue
@@ -1,130 +1,27 @@
 <template>
-  <div class="container">
+  <section class="container px-2 pb-6">
     <BotonRegresar
       path="/admin/responsables"
-      :deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
+      :deleteFromLocalStorage="['correo', 'idResponsable', 'nombreResponsable']"
     />
-    <p class="is-size-2 mb-4">Información del responsable</p>
-    <p class="is-size-4 mb-4"><strong>Nombre: </strong> {{ nombre }}</p>
-    <p class="is-size-4 mb-4"><strong>Correo: </strong> {{ correo }}</p>
-    <div class="columns">
-      <p class="is-size-4 column is-narrow" style="width: 250px">
-        <strong>Clave de programa: </strong>
-      </p>
-      <b-select
-        class="column"
-        v-model="selected"
-        placeholder="Elija una clave: "
-      >
-        <option
-          v-for="programa in programas"
-          v-bind:key="programa.id"
-          :value="programa"
-        >
-          {{ programa.clavePrograma }}
-        </option>
-      </b-select>
-    </div>
-    <p class="is-size-4 mb-4">
-      <strong>Programa: </strong> {{ selected.programa }}
-    </p>
-    <p class="is-size-4 mb-4">
-      <strong>Institución: </strong> {{ selected.institucion }}
-    </p>
-    <p class="is-size-4 mb-4">
-      <strong>Dependencia: </strong> {{ selected.dependencia }}
-    </p>
-    <div class="">
-      <b-button
-        class="boton is-info my-5"
-        tag="router-link"
-        to="/admin/responsables/infoResponsable/modificar"
-      >
-        Editar información
-      </b-button>
-    </div>
+
+    <Responsable></Responsable>
+
     <BotonRegresar
       path="/admin/responsables"
-      :deleteFromLocalStorage="['correo', 'idResponsable', 'nombre']"
+      :deleteFromLocalStorage="['correo', 'idResponsable', 'nombreResponsable']"
     />
-  </div>
+  </section>
 </template>
 
 <script>
-import axios from 'axios'
-import botonRegresar from '../../../../components/botonRegresar'
+import botonRegresar from '@/components/botonRegresar'
+import Responsable from '@/components/admin/responsables/infoResponsable/responsable'
 
 export default {
   components: {
     botonRegresar,
-  },
-  data() {
-    return {
-      idResponsable: localStorage.getItem('idResponsable'),
-      correo: localStorage.getItem('correo'),
-      nombre: localStorage.getItem('nombre'),
-      programas: [],
-      selected: {},
-      token: {
-        headers: {
-          token: localStorage.getItem('token'),
-        },
-      },
-    }
-  },
-  methods: {
-    obtenerProgramas() {
-      return axios
-        .get(
-          `${process.env.api}/programa/programas_admin?idUsuario=${this.idResponsable}`,
-          this.token
-        )
-        .then((res) => {
-          this.programas = res.data
-        })
-        .catch((err) => {
-          this.error(err.response.data.message)
-        })
-    },
-    error(msj) {
-      let salir = false
-      switch (msj) {
-        case 'invalid signature':
-          msj = 'Tu token no es valido, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt expired':
-          msj = 'Tu sesión ha expirado, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'jwt malformed':
-          msj = 'No se encontro tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-        case 'No hay token':
-          msj = 'Ocurrio un error al enviar tu token, inicia sesión de nuevo.'
-          salir = true
-          break
-      }
-
-      this.$buefy.dialog.alert({
-        title: 'Error',
-        message: msj,
-        type: 'is-danger',
-        hasIcon: true,
-        icon: 'alert-circle',
-        iconPack: 'mdi',
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-      })
-      if (salir == true) {
-        localStorage.clear()
-        this.$router.push(`/`)
-      }
-    },
-  },
-  created() {
-    this.obtenerProgramas()
+    Responsable,
   },
   beforeCreate() {
     const idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
@@ -133,16 +30,15 @@ export default {
     if (idTipoUsuario === 3) this.$router.push('/alumno')
     if (idTipoUsuario === 4) this.$router.push('/casoEspecial')
 
-    if (!localStorage.getItem('idResponsable')) {
+    if (
+      !localStorage.getItem('idResponsable') ||
+      !localStorage.getItem('nombreResponsable') ||
+      !localStorage.getItem('correo')
+    ) {
       this.$router.push('/admin/responsables')
     }
   },
 }
 </script>
 
-<style scoped>
-.programa {
-  margin-right: 20px;
-  padding-right: 20px;
-}
-</style>
+<style scoped></style>
diff --git a/pages/admin/responsables/infoResponsable/modificar/index.vue b/pages/admin/responsables/infoResponsable/modificar/index.vue
index ea76436..8310924 100644
--- a/pages/admin/responsables/infoResponsable/modificar/index.vue
+++ b/pages/admin/responsables/infoResponsable/modificar/index.vue
@@ -29,7 +29,7 @@
 
 <script>
 import validator from 'validator'
-import botonRegresar from '../../../../../components/botonRegresar'
+import botonRegresar from '@/components/botonRegresar'
 import axios from 'axios'
 
 export default {
@@ -172,7 +172,7 @@ export default {
     if (idTipoUsuario === 2) this.$router.push('/responsable')
     if (idTipoUsuario === 3) this.$router.push('/alumno')
     if (idTipoUsuario === 4) this.$router.push('/casoEspecial')
-    
+
     if (!localStorage.getItem('idResponsable')) {
       this.$router.push('/admin/responsables')
     }
diff --git a/pages/admin/servicio/index.vue b/pages/admin/servicio/index.vue
index 6c352ef..beb270e 100644
--- a/pages/admin/servicio/index.vue
+++ b/pages/admin/servicio/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import VistaServicio from '../../../components/admin/servicio/vistaServicio'
+import VistaServicio from '@/components/admin/servicio/vistaServicio'
 
 export default {
   components: {
diff --git a/pages/admin/servicio/modificar/index.vue b/pages/admin/servicio/modificar/index.vue
index 67754be..63ebae9 100644
--- a/pages/admin/servicio/modificar/index.vue
+++ b/pages/admin/servicio/modificar/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Form from '../../../../components/admin/servicio/modificar/form'
+import Form from '@/components/admin/servicio/modificar/form'
 
 export default {
   components: {
diff --git a/pages/alumno/cuestionario/index.vue b/pages/alumno/cuestionario/index.vue
index bb2f45f..d96d002 100644
--- a/pages/alumno/cuestionario/index.vue
+++ b/pages/alumno/cuestionario/index.vue
@@ -30,14 +30,14 @@
 import Buefy from 'buefy'
 import 'buefy/dist/buefy.css'
 import axios from 'axios'
-import parteA from '../../../components/alumno/cuestionario/A'
-import parteB from '../../../components/alumno/cuestionario/B'
-import parteC from '../../../components/alumno/cuestionario/C'
-import parteD from '../../../components/alumno/cuestionario/D'
-import parteE from '../../../components/alumno/cuestionario/E'
-import parteF from '../../../components/alumno/cuestionario/F'
-import navCues from '../../../components/alumno/cuestionario/navCues'
-import BotonRegresar from '../../../components/botonRegresar'
+import parteA from '@/components/alumno/cuestionario/A'
+import parteB from '@/components/alumno/cuestionario/B'
+import parteC from '@/components/alumno/cuestionario/C'
+import parteD from '@/components/alumno/cuestionario/D'
+import parteE from '@/components/alumno/cuestionario/E'
+import parteF from '@/components/alumno/cuestionario/F'
+import navCues from '@/components/alumno/cuestionario/navCues'
+import BotonRegresar from '@/components/botonRegresar'
 
 export default {
   components: {
diff --git a/pages/alumno/index.vue b/pages/alumno/index.vue
index a0dcf97..0960ab0 100644
--- a/pages/alumno/index.vue
+++ b/pages/alumno/index.vue
@@ -16,13 +16,12 @@
 </template>
 
 <script>
-import 'buefy/dist/buefy.css'
 import axios from 'axios'
-import Steps from '../../components/alumno/steps'
-import Info from '../../components/alumno/info'
-import Mensajes from '../../components/alumno/mensajes'
-import PreRegistroValidado from '../../components/alumno/pre-registro-validado'
-import PreTermino from '../../components/alumno/preTermino'
+import Steps from '@/components/alumno/steps'
+import Info from '@/components/alumno/info'
+import Mensajes from '@/components/alumno/mensajes'
+import PreRegistroValidado from '@/components/alumno/pre-registro-validado'
+import PreTermino from '@/components/alumno/preTermino'
 export default {
   data() {
     return {
diff --git a/pages/casoEspecial/index.vue b/pages/casoEspecial/index.vue
index 8f4f710..78a2897 100644
--- a/pages/casoEspecial/index.vue
+++ b/pages/casoEspecial/index.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import TablaServicios from '../../components/casoEspecial/tablaServicios'
+import TablaServicios from '@/components/casoEspecial/tablaServicios'
 
 export default {
   components: {
diff --git a/pages/casoEspecial/nuevo/index.vue b/pages/casoEspecial/nuevo/index.vue
index 8bb1dbd..6819243 100644
--- a/pages/casoEspecial/nuevo/index.vue
+++ b/pages/casoEspecial/nuevo/index.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import BotonRegresar from '../../../components/botonRegresar'
-import FormularioEspecial from '../../../components/casoEspecial/nuevo/formularioEspecial'
+import BotonRegresar from '@/components/botonRegresar'
+import FormularioEspecial from '@/components/casoEspecial/nuevo/formularioEspecial'
 
 export default {
   components: {
diff --git a/pages/responsable/carta_aceptacion/index.vue b/pages/responsable/carta_aceptacion/index.vue
index d305736..cf063f5 100644
--- a/pages/responsable/carta_aceptacion/index.vue
+++ b/pages/responsable/carta_aceptacion/index.vue
@@ -51,7 +51,7 @@
 
 <script>
 import axios from 'axios'
-import BotonRegresar from '../../../components/botonRegresar'
+import BotonRegresar from '@/components/botonRegresar'
 
 export default {
   data() {
diff --git a/pages/responsable/carta_termino/index.vue b/pages/responsable/carta_termino/index.vue
index f6b791b..05c946e 100644
--- a/pages/responsable/carta_termino/index.vue
+++ b/pages/responsable/carta_termino/index.vue
@@ -51,7 +51,7 @@
 
 <script>
 import axios from 'axios'
-import BotonRegresar from '../../../components/botonRegresar'
+import BotonRegresar from '@/components/botonRegresar'
 
 export default {
   data() {
diff --git a/pages/responsable/cuestionario/index.vue b/pages/responsable/cuestionario/index.vue
index d51f03b..90afef8 100644
--- a/pages/responsable/cuestionario/index.vue
+++ b/pages/responsable/cuestionario/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Cuestionario from '../../../components/responsable/cuestionario'
+import Cuestionario from '@/components/responsable/cuestionario'
 
 export default {
   components: {
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index d056bdf..c21c6ef 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import InputTable from '../../components/responsable/inputTable'
+import InputTable from '@/components/responsable/inputTable'
 
 export default {
   components: {
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index e84bfb8..0ed4541 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script>
-import Texto from '../../../components/responsable/nuevoTexto'
-import BotonRegresar from '../../../components/botonRegresar'
-import FormServicioSocial from '../../../components/responsable/formServicioSocial'
+import Texto from '@/components/responsable/nuevoTexto'
+import BotonRegresar from '@/components/botonRegresar'
+import FormServicioSocial from '@/components/responsable/formServicioSocial'
 
 export default {
   components: {