diff --git a/components/responsable/CuestionarioResponasble.vue b/components/responsable/CuestionarioResponasble.vue
new file mode 100644
index 0000000..869e7b4
--- /dev/null
+++ b/components/responsable/CuestionarioResponasble.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <div class="mb-6">
+      <h2 class="title">
+        Estimad(a) responsable de programa de servicio social:
+      </h2>
+
+      <p>
+        Te solicitamos llenar cuidadosamente los campos solicitados a
+        continuación para poder validar el término del servicio social de
+        nuestro alumno(a)
+      </p>
+    </div>
+
+    <b-field
+      class="mb-4"
+      label="Mencione 5 actividades desempeñadas por el alumno:"
+    >
+      <div>
+        <b-field v-for="(a, i) in actividades" :key="i">
+          <b-input
+            :placeholder="`${i + 1})`"
+            maxlength="400"
+            v-model="actividades[i]"
+          />
+        </b-field>
+      </div>
+    </b-field>
+
+    <div class="columns" v-for="(uAC, i) in unoAlCinco" :key="i">
+      <div class="column">
+        <p class="label">{{ i + 1 }}) {{ uAC }}</p>
+      </div>
+
+      <b-field class="column is-4">
+        <b-select
+          placeholder="Seleccionar"
+          v-model="retroalimentacion[i]"
+          expanded
+        >
+          <option v-for="(sR, i) in selectRespuestas" :key="i" :value="i + 1">
+            {{ sR }}
+          </option>
+        </b-select>
+      </b-field>
+    </div>
+
+    <b-field
+      label=" 6. De acuerdo a lo observado ¿cuáles considera que son las cualidades de
+      nuestros alumnos de esta licenciatura?"
+    >
+      <b-input placeholder="Respuesta" maxlength="800" v-model="p6" />
+    </b-field>
+
+    <b-field
+      label=" 7. De acuerdo a lo observado ¿cuáles considera que son los aspectos a
+        mejorar en la formación de nuestros alumnos de esta licenciatura?"
+    >
+      <b-input placeholder="Respuesta" maxlength="800" v-model="p7" />
+    </b-field>
+
+    <b-field class="has-text-centered">
+      <b-button
+        type="is-success"
+        :disabled="
+          validarActividades() || validarRetroalimentacion() || !p6 || !p7
+        "
+        @click="
+          imprimirWarning(
+            '¿Estas seguro(a) de querer enviar este cuestionario?',
+            enviarCuestionario
+          )
+        "
+      >
+        Enviar
+      </b-button>
+    </b-field>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    responsable: { type: Object, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: true },
+  },
+  data() {
+    return {
+      cuestionario: '',
+      p6: '',
+      p7: '',
+      idServicio: null,
+      actividades: [],
+      retroalimentacion: [],
+      selectRespuestas: ['Deficiente', 'Regular', 'Bueno', 'Excelente'],
+      unoAlCinco: [
+        'Conocimiento teóricos para las funciones encomendadas.',
+        'Conocimientos técnicos para las funciones encomendadas.',
+        'Iniciativa para la implementación de mejoras en la empresa.',
+        'Puntualidad en la entrega de los trabajos de las tareas encomendadas.',
+        'Desempeño general de sus funciones.',
+      ],
+    }
+  },
+  methods: {
+    validarActividades() {
+      for (let i = 0; i < this.actividades.length; i++)
+        if (!this.actividades[i]) return true
+      return false
+    },
+    validarRetroalimentacion() {
+      if (this.retroalimentacion.length != 5) return true
+      for (let i = 0; i < this.retroalimentacion.length; i++)
+        if (!this.retroalimentacion[i]) return true
+      return false
+    },
+    enviarCuestionario() {
+      const data = {
+        idServicio: this.idServicio,
+        actividad1: this.actividades[0],
+        actividad2: this.actividades[1],
+        actividad3: this.actividades[2],
+        actividad4: this.actividades[3],
+        actividad5: this.actividades[4],
+        retroalimentacion: this.retroalimentacion,
+        p6: this.p6,
+        p7: this.p7,
+        idServicio: this.idServicio,
+      }
+
+      this.updateIsLoading(true)
+      axios
+        .post(
+          `${process.env.api}/cuestionario_programa`,
+          data,
+          this.responsable.token
+        )
+        .then((res) => {
+          localStorage.removeItem('idServicio')
+          localStorage.removeItem('cuestionario')
+          this.updateIsLoading(false)
+          this.imprimirMensaje(res.data.message)
+          this.$router.push('/responsable')
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
+  },
+  created() {
+    this.idServicio = Number(localStorage.getItem('idServicio'))
+    this.cuestionario = localStorage.getItem('cuestionario')
+    for (let i = 0; i < 5; i++) this.actividades.push('')
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/components/responsable/cuestionario.vue b/components/responsable/cuestionario.vue
deleted file mode 100644
index 21131b5..0000000
--- a/components/responsable/cuestionario.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-  <div v-if="this.idServicio && this.cuestionario" class="container">
-    <div class="section">
-      <b-button
-        class="border-info mb-5"
-        type="is-info is-light"
-        icon-left="arrow-left-box"
-        tag="router-link"
-        to="/responsable"
-        >Regresar</b-button
-      >
-
-      <h1 class="title is-3 mt-2">
-        Estimad(a) responsable de programa de servicio social:
-      </h1>
-      <p>
-        Te solicitamos llenar cuidadosamente los campos solicitados a
-        continuación para poder validar el término del servicio social de
-        nuestro alumno(a)
-      </p>
-    </div>
-
-    <section class="section pt-0">
-      <h3 class="subtitle is-5">
-        Mencione 5 actividades desempeñadas por el alumno:
-      </h3>
-      <b-input
-        class="my-4"
-        placeholder="1.-"
-        v-model="actividad1"
-        maxlength="400"
-      ></b-input>
-      <b-input
-        class="my-4"
-        placeholder="2.-"
-        v-model="actividad2"
-        maxlength="400"
-      ></b-input>
-      <b-input
-        class="my-4"
-        placeholder="3.-"
-        v-model="actividad3"
-        maxlength="400"
-      ></b-input>
-      <b-input
-        class="my-4"
-        placeholder="4.-"
-        v-model="actividad4"
-        maxlength="400"
-      ></b-input>
-      <b-input
-        class="mt-3"
-        placeholder="5.-"
-        v-model="actividad5"
-        maxlength="400"
-      ></b-input>
-    </section>
-
-    <section class="section pt-0">
-      <div class="columns">
-        <p class="column is- 9">
-          1. Conocimiento teóricos para las funciones encomendadas
-        </p>
-        <b-field class="column is-2">
-          <b-select placeholder="Seleccionar" v-model="retroalimentacion[0]">
-            <option value="1">Deficiente</option>
-            <option value="2">Regular</option>
-            <option value="3">Bueno</option>
-            <option value="4">Excelente</option>
-          </b-select>
-        </b-field>
-      </div>
-      <br />
-
-      <div class="columns">
-        <p class="column is- 9">
-          2. Conocimientos técnicos para las funciones encomendadas
-        </p>
-        <b-field class="column is-2">
-          <b-select placeholder="Seleccionar" v-model="retroalimentacion[1]">
-            <option value="1">Deficiente</option>
-            <option value="2">Regular</option>
-            <option value="3">Bueno</option>
-            <option value="4">Excelente</option>
-          </b-select>
-        </b-field>
-      </div>
-      <br />
-
-      <div class="columns">
-        <p class="column is- 9">
-          3. Iniciativa para la implementación de mejoras en la empresa
-        </p>
-        <b-field class="column is-2">
-          <b-select placeholder="Seleccionar" v-model="retroalimentacion[2]">
-            <option value="1">Deficiente</option>
-            <option value="2">Regular</option>
-            <option value="3">Bueno</option>
-            <option value="4">Excelente</option>
-          </b-select>
-        </b-field>
-      </div>
-      <br />
-
-      <div class="columns">
-        <p class="column is- 9">
-          4. Puntualidad en la entrega de los trabajos de las tareas
-          encomendadas
-        </p>
-        <b-field class="column is-2">
-          <b-select placeholder="Seleccionar" v-model="retroalimentacion[3]">
-            <option value="1">Deficiente</option>
-            <option value="2">Regular</option>
-            <option value="3">Bueno</option>
-            <option value="4">Excelente</option>
-          </b-select>
-        </b-field>
-      </div>
-      <br />
-
-      <div class="columns">
-        <p class="column is- 9">5. Desempeño general de sus funciones</p>
-        <b-field class="column is-2">
-          <b-select placeholder="Seleccionar" v-model="retroalimentacion[4]">
-            <option value="1">Deficiente</option>
-            <option value="2">Regular</option>
-            <option value="3">Bueno</option>
-            <option value="4">Excelente</option>
-          </b-select>
-        </b-field>
-      </div>
-
-      <p class="my-5">
-        6. De acuerdo a lo observado ¿cuáles considera que son las cualidades de
-        nuestros alumnos de esta licenciatura?
-      </p>
-      <b-input placeholder="Respuesta" maxlength="800" v-model="p6"></b-input>
-      <p class="my-5">
-        7. De acuerdo a lo observado ¿cuáles considera que son los aspectos a
-        mejorar en la formación de nuestros alumnos de esta licenciatura?
-      </p>
-      <b-input placeholder="Respuesta" maxlength="800" v-model="p7"></b-input>
-
-      <b-field class="centro">
-        <b-button
-          :disabled="
-            actividad1 == '' ||
-            actividad2 == '' ||
-            actividad3 == '' ||
-            actividad4 == '' ||
-            actividad5 == '' ||
-            retroalimentacion.length < 5 ||
-            p6 == '' ||
-            p7 == ''
-          "
-          class="border-success my-5"
-          type="is-success"
-          @click="enviarCuestionario()"
-          >Enviar</b-button
-        >
-      </b-field>
-    </section>
-
-    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading">
-    </b-loading>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-export default {
-  data() {
-    return {
-      idServicio: localStorage.getItem('idServicio'),
-      cuestionario: '',
-      isLoading: false,
-      actividad1: '',
-      actividad2: '',
-      actividad3: '',
-      actividad4: '',
-      actividad5: '',
-      retroalimentacion: [],
-      p6: '',
-      p7: '',
-      token: {
-        headers: {
-          token: localStorage.getItem('token'),
-        },
-      },
-    }
-  },
-  methods: {
-    enviarCuestionario() {
-      const data = {
-        idServicio: this.idServicio,
-        actividad1: this.actividad1,
-        actividad2: this.actividad2,
-        actividad3: this.actividad3,
-        actividad4: this.actividad4,
-        actividad5: this.actividad5,
-        retroalimentacion: this.retroalimentacion,
-        p6: this.p6,
-        p7: this.p7,
-        idServicio: this.idServicio,
-      }
-
-      this.isLoading = true
-      axios
-        .post(`${process.env.api}/cuestionario_programa`, data, this.token)
-        .then((res) => {
-          this.$buefy.dialog.alert({
-            title: 'Success',
-            message: 'Se enviaron los datos correctamente',
-            type: 'is-success',
-            hasIcon: true,
-            icon: 'checkbox-marked-circle',
-            ariaRole: 'alertdialog',
-            ariaModal: true,
-          })
-        })
-        .catch((error) => {
-          this.error(error.response.data.message)
-        })
-        .finally(() => {
-          this.isLoading = false
-          localStorage.removeItem('idServicio')
-          localStorage.removeItem('cuestionario')
-          this.$router.push('/responsable')
-        })
-    },
-    getIdLocal() {
-      this.idServicio = localStorage.getItem('idServicio')
-      this.cuestionario = localStorage.getItem('cuestionario')
-
-      if (this.idServicio === null || this.cuestionario === null) {
-        this.$router.push('/responsable')
-      }
-    },
-    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',
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-      })
-      if (salir == true) {
-        localStorage.clear()
-        this.$router.push(`/`)
-      }
-    },
-  },
-  created() {
-    this.getIdLocal()
-  },
-}
-</script>
-
-<style>
-.centro {
-  text-align: center;
-}
-</style>
diff --git a/pages/responsable/cuestionario/index.vue b/pages/responsable/cuestionario/index.vue
index 84c1f34..05d213e 100644
--- a/pages/responsable/cuestionario/index.vue
+++ b/pages/responsable/cuestionario/index.vue
@@ -1,34 +1,42 @@
 <template>
-  <section>
-    <Cuestionario
-      :admin="admin"
+  <div class="container px-2 pb-6">
+    <BotonRegresar
+      path="/responsable"
+      :deleteFromLocalStorage="['idServicio']"
+    />
+
+    <CuestionarioResponasble
+      :responsable="responsable"
       :imprimirMensaje="imprimirMensaje"
       :imprimirWarning="imprimirWarning"
       :imprimirError="imprimirError"
+      :updateIsLoading="updateIsLoading"
     />
-  </section>
+
+    <b-loading :is-full-page="true" :can-cancel="false" v-model="isLoading" />
+  </div>
 </template>
 
 <script>
-import Cuestionario from '@/components/responsable/cuestionario'
+import BotonRegresar from '@/components/botonRegresar'
+import CuestionarioResponasble from '@/components/responsable/CuestionarioResponasble'
 
 export default {
   components: {
-    Cuestionario,
-  },
-  beforeCreate() {
-    const idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
-
-    if (idTipoUsuario === 1) this.$router.push('/admin')
-    if (idTipoUsuario === 3) this.$router.push('/alumno')
-    if (idTipoUsuario === 4) this.$router.push('/casoEspecial')
+    BotonRegresar,
+    CuestionarioResponasble,
   },
   data() {
     return {
-      admin: {},
+      isLoading: false,
+
+      responsable: {},
     }
   },
   methods: {
+    updateIsLoading(booleanValue) {
+      this.isLoading = booleanValue
+    },
     imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
       this.$buefy.dialog.alert({
         ariaRole: 'alertdialog',
@@ -84,10 +92,12 @@ export default {
       })
     },
     getLocalhostInfo() {
-      this.admin.idUsuario = Number(localStorage.getItem('idUsuario'))
-      this.admin.idTipoUsuario = Number(localStorage.getItem('idTipoUsuario'))
-      this.admin.tipoUsuario = localStorage.getItem('tipoUsuario')
-      this.admin.token = {
+      this.responsable.idUsuario = Number(localStorage.getItem('idUsuario'))
+      this.responsable.idTipoUsuario = Number(
+        localStorage.getItem('idTipoUsuario')
+      )
+      this.responsable.tipoUsuario = localStorage.getItem('tipoUsuario')
+      this.responsable.token = {
         headers: {
           token: localStorage.getItem('token'),
         },
@@ -96,9 +106,9 @@ export default {
   },
   created() {
     this.getLocalhostInfo()
-    if (this.admin.idTipoUsuario === 1) this.$router.push('/admin')
-    if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
-    if (this.admin.idTipoUsuario === 4) this.$router.push('/casoEspecial')
+    if (this.responsable.idTipoUsuario === 1) this.$router.push('/admin')
+    if (this.responsable.idTipoUsuario === 3) this.$router.push('/alumno')
+    if (this.responsable.idTipoUsuario === 4) this.$router.push('/casoEspecial')
   },
 }
 </script>