diff --git a/components/admin/servicio/modificar/form.vue b/components/admin/servicio/modificar/form.vue
index 69ab048..4bbd800 100644
--- a/components/admin/servicio/modificar/form.vue
+++ b/components/admin/servicio/modificar/form.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <b-button class="is-info">Regresar</b-button>
+    <b-button class="is-info" @click="regresar()">Regresar</b-button>
     <br><br>
     <p class="is-size-2">Editar información del alumno</p>
     <br>
@@ -9,8 +9,7 @@
         <b-input
           type="email"
           v-model="nuevo.correo"
-          v-bind:placeholder="viejo.correo"
-          value="">
+          v-bind:placeholder="viejo.correo">
         </b-input>
       </b-field>
       <b-field label="Fecha de inicio">
@@ -22,7 +21,7 @@
         </b-datepicker>
       </b-field>
       <transition name="fade">
-        <b-field label="Fecha de fin" v-if="fechaInicio">
+        <b-field label="Fecha de fin" v-if="fechaInicio[0]">
           <b-datepicker
             v-bind:placeholder="viejo.fechaInicio"
             v-model="fechaFin[0]"
@@ -35,7 +34,7 @@
         <b-input type="text" v-model="nuevo.direccion" v-bind:placeholder="viejo.direccion"></b-input>
       </b-field>
       <b-field label="Teléfono">
-        <b-input type="number" value="" v-bind:placeholder="viejo.telefono"></b-input>
+        <b-input type="number" v-bind:placeholder="viejo.telefono" maxlength="10"></b-input>
       </b-field>
       <b-field label="Fecha de nacimiento">
         <b-datepicker
@@ -45,12 +44,12 @@
         </b-datepicker>
       </b-field>
       <b-field label="ID status">
-        <b-input type="" value="" v-bind:placeholder="viejo.idStatus"></b-input>
+        <b-input type="" v-bind:placeholder="viejo.idStatus"></b-input>
       </b-field>
       <p class="is-size-5">Carta de aceptación</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.cartaAceptacion" drag-drop expanded>
+        <b-upload v-model="nuevo.cartaAceptacion" type="is-black" v-on:input="validarExt(1)" accept="application/pdf" drag-drop expanded>
           <section class="section">
             <div class="content has-text-centered">
               <p>
@@ -64,7 +63,7 @@
       <p class="is-size-5">Carta de término</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.cartaTermino" drag-drop expanded>
+        <b-upload v-model="nuevo.cartaTermino" type="is-black" v-on:input="validarExt(2)" accept="application/pdf" drag-drop expanded>
           <section class="section">
             <div class="content has-text-centered">
               <p>
@@ -78,7 +77,7 @@
       <p class="is-size-5">Informe global</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.informeGlobal" drag-drop expanded>
+        <b-upload v-model="nuevo.informeGlobal" type="is-black" v-on:input="validarExt(3)" accept="application/pdf" drag-drop expanded>
           <section class="section">
             <div class="content has-text-centered">
               <p>
@@ -90,9 +89,9 @@
         </b-upload>
       </b-field>
       <br>
-      <b-button v-if="mostrar()" class="is-info">
-        Actualizar Datos
-      </b-button>
+      <b-button class="is-info" @click="regresar()">Regresar</b-button>
+      <b-button v-if="mostrar()" class="is-info">Actualizar Datos</b-button>
+      <b-button v-else disabled class="is-info">Actualizar Datos</b-button>
     </div>
   </div>
 </template>
@@ -128,13 +127,13 @@ export default {
       fechaNacimiento: [],
       fechaInicio: [],
       fechaFin: [],
-      minDate1: new Date('2020-01-02')
+      minDate1: new Date('2020-01-01')
     }
   },
   methods: {
     dangerToast () {
       this.$buefy.toast.open({
-        message: 'Correo invalido',
+        message: 'Asegurate de ingresar un PDF',
         type: 'is-danger'
       })
     },
@@ -151,9 +150,39 @@ export default {
         this.nuevo.informeGlobal.name ||
         this.nuevo.idStatus
       ) {
+        if (this.nuevo.correo) {
+          if (validator.isEmail(this.nuevo.correo)) {
+            return true
+          } else {
+            return false
+          }
+        }
         return true
       }
-      return false
+    },
+    validarExt (a) {
+      const extPermitidas = /(.pdf)$/i
+      switch (a) {
+        case 1: if (!extPermitidas.exec(this.nuevo.cartaAceptacion.name)) {
+          this.dangerToast()
+          this.nuevo.cartaAceptacion = {}
+        }
+          break
+        case 2: if (!extPermitidas.exec(this.nuevo.cartaTermino.name)) {
+          this.dangerToast()
+          this.nuevo.cartaTermino = {}
+        }
+          break
+        case 3: if (!extPermitidas.exec(this.nuevo.informeGlobal.name)) {
+          this.dangerToast()
+          this.nuevo.informeGlobal = {}
+        }
+          break
+      }
+    },
+    regresar () {
+      localStorage.removeItem('idRegistro')
+      this.$router.push('/admin/servicio')
     }
   },
   computed: {
diff --git a/components/admin/servicio/programa/tablaResponsables.vue b/components/admin/servicio/programa/tablaResponsables.vue
new file mode 100644
index 0000000..a576070
--- /dev/null
+++ b/components/admin/servicio/programa/tablaResponsables.vue
@@ -0,0 +1,253 @@
+<template>
+  <!--<div class="container">
+    <div class="table-responsive-md">
+      <table class="table mt-3 table-hover">
+        <thead>
+          <tr>
+            <th>Nombre de responsable</th>
+            <th>Correo</th>
+          </tr>
+        </thead>
+        <tbody class="renglon">
+          <tr
+            v-for="responsable in responsables"
+            :key="responsable.idResponsable"
+            @click="verRegistro(responsable.idResponsable)"
+          >
+            <td>{{ responsable.nombre }}</td>
+            <td>{{ responsable.correo }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </div>-->
+  <section>
+    <b-table
+      class="tabla"
+      hoverable
+      :data="responsables"
+      striped
+      paginated
+      :total="total"
+      :per-page="perPage"
+      @page-change="onPageChange"
+      aria-next-label="Next page"
+      aria-previous-label="Previous page"
+      aria-page-label="Page"
+      aria-current-label="Current page">
+      <template v-for="column in columns">
+        <b-table-column :key="column.id" v-bind="column">
+        <template
+          v-if="column.searchable && !column.numeric"
+          slot="searchable"
+          slot-scope="props">
+          <b-input
+            v-model="props.filters[props.column.field]"
+            placeholder="Buscar por..."
+            icon="magnify"
+            class="busqueda"/>
+        </template>
+        <template v-slot="props">
+          <span @click="verRegistro(props.row.idResponsable)">{{ props.row[column.field] }}</span>
+        </template>
+        </b-table-column>
+      </template>
+    </b-table>
+  </section>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      page: 1,
+      perPage: 20,
+      total: 0,
+      responsables: [
+        {
+          idResponsable: 1,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 2,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 3,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 4,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 5,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 6,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 7,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 8,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 9,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 10,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 11,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 12,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 13,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 14,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 15,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 16,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 17,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 18,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 19,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 20,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 21,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 22,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 23,
+          nombre: 'Marco',
+          correo: 'correo1'
+        },
+        {
+          idResponsable: 24,
+          nombre: 'Lemuel',
+          correo: 'correo2'
+        }
+      ],
+      columns: [
+        {
+          field: 'idResponsable',
+          visible: false
+        },
+        {
+          field: 'nombre',
+          label: 'Nombre responsable',
+          searchable: true,
+          centered: true
+        },
+        {
+          field: 'correo',
+          label: 'Correo electrónico',
+          searchable: true,
+          centered: true
+        }
+      ]
+    }
+  },
+  methods: {
+    verRegistro (idResponsable) {
+      localStorage.setItem('idResponsable', idResponsable)
+      this.$router.push('/programa/responsableinfo')
+      console.log(idResponsable)
+    },
+    onPageChange (page) {
+      this.page = page
+      this.loadAsyncData()
+    }
+  },
+  computed: {
+    busquedaNombreResponsable () {
+      return this.responsables.filter(responsables =>
+        responsables.nombreResp.includes(this.buscarNombreResponsable)
+      )
+    }
+  },
+  watch: {
+    busquedaCorreoResponsable () {
+      this.obtenerResponsables()
+    }
+  }/* ,
+  async created () {
+    await this.obtenerResponsables()
+  } */
+}
+</script>
+
+<style scoped>
+  .renglon:hover {
+    cursor: pointer !important;
+  }
+  .busqueda {
+    width: 200%;
+    margin-left: 50%;
+  }
+  .tabla {
+    margin-top: 50px;
+    margin-bottom: 100px;
+    border: 3px solid #1b3d70;
+    border-radius: 10px;
+    padding: 20px;
+  }
+</style>
diff --git a/components/admin/servicio/vistaServicio.vue b/components/admin/servicio/vistaServicio.vue
index 2bdaa59..72209ad 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -1,7 +1,93 @@
 <template>
-    <div class="container">
-      <p class="h2">{{ title }}</p>
+  <div class="container">
+    <div class="mb-5">
+      <b-button class="boton is-info" @click="$router.push('./')">
+        Regresar
+      </b-button>
+      <b-button class="boton is-info" @click="$router.push('./servicio/modificar')">
+        Editar información
+      </b-button>
     </div>
+    <div id="Status">
+      <p class="is-size-3" v-if="alumno.idStatus == 1">
+        Pre Registro
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 2">
+        Pre Registro Válidado
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 3">
+        Registro
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 4">
+        Pre Término
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 5">
+        Término
+      </p>
+      <p class="is-size-3" v-else-if="alumno.idStatus == 6">
+          Liberación
+      </p>
+    </div>
+    <div id="programa">
+      <br>
+      <p class="is-size-4">Datos del programa</p><br>
+      <p class="is-size-5">Programa: <span> {{alumno.programa}} </span></p>
+      <p class="is-size-5">Clave del programa: <span> {{alumno.clavePrograma}} </span></p>
+      <p class="is-size-5">Dependecia: <span> {{alumno.dependecia}} </span></p>
+      <p class="is-size-5">Institución: <span> {{alumno.institucion}} </span></p>
+      <br>
+    </div>
+    <div id="datosPersonales">
+      <p class="is-size-4" >Datos personales</p><br>
+      <p class="is-size-5 mt-5" v-if="alumno.nombre">Nombre: <span> {{alumno.nombre}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.noCuenta">Número de cuenta: <span> {{alumno.noCuenta}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.carrera">Carrera: <span> {{alumno.carrera}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.correo">Correo: <span> {{alumno.correo}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.creditos">Créditos: <span> {{alumno.creditos}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaInicio">Fecha de inicio: <span> {{alumno.fechaInicio}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaFin">Fecha de fin: <span> {{alumno.fechaFin}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.telefono">Teléfono: <span> {{alumno.telefono}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.direccion">Dirección: <span> {{alumno.direccion}} </span></p>
+      <p class="is-size-5 mt-5" v-if="alumno.fechaNacimiento">Fecha de nacimiento: <span> {{alumno.fechaNacimiento}} </span></p>
+    </div>
+    <div id="enlaces">
+      <br>
+      <div class="level">
+        <a href="google.com" class="has-text-link link">Ver carta de aceptación</a>
+        <b-button class="is-danger" v-if="alumno.idStatus == 1">
+          Rechazar
+        </b-button>
+      </div>
+      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 1">Confirmar el pre-registro del alumno</h3>
+      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 4">Termino</h3>
+      <h3 class="is-size-4 mb-5" v-if="alumno.idStatus == 5">Validar el término del alumno</h3>
+      <div class="level">
+        <a href="google.com" class="has-text-link link">Ver carta de término</a>
+        <b-button class="is-danger" v-if="alumno.idStatus == 5">
+          Rechazar
+        </b-button>
+      </div>
+      <div class="level">
+        <a href="google.com" class="has-text-link link">Ver informe global de actividades</a>
+        <b-button class="is-danger" v-if="alumno.idStatus == 5">
+          Rechazar
+        </b-button>
+      </div>
+      <p v-if="alumno.cuestionarioP">Cuenta con cuestionario de programa resuelto.</p>
+      <p v-if="alumno.cuestionarioA">Cuenta con cuestionario de alumno resuelto.</p>
+    </div>
+    <div id="acciones" class="my-5">
+      <b-button class="is-success" v-if="mostrarConfirmar()">
+        Confirmar
+      </b-button>
+      <b-button class="is-danger">
+        Cancelar
+      </b-button>
+      <b-button class="is-info" @click="$router.push('./')">
+        Regresar
+      </b-button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,9 +95,9 @@ export default {
   data () {
     return {
       alumno: {
-        fechaInicio: '',
-        fechaFin: '',
-        idStatus: 1
+        fechaInicio: '14/2/2020',
+        fechaFin: '14/8/2020',
+        idStatus: 5
       },
       idRegistro: window.localStorage.getItem('idRegistro'),
       token: {
@@ -28,27 +114,37 @@ export default {
       mensajeCancel: '',
       spinner: false,
       vistoBueno: false,
-      acatlan: false,
-      title: 'Hola'
+      acatlan: false
     }
   },
   methods: {
-    elegirTitulo: function () {
-      switch (this.alumno.idStatus) {
-        case 1: this.title = 'Pre Registro'
-          break
-        case 2: this.title = 'Pre Registro Válido'
-          break
-        case 3: this.title = 'Registro'
-          break
-        case 4: this.title = 'Pre Término'
-          break
-        case 5: this.title = 'Termino'
-          break
-        case 6: this.title = 'Liberación'
-          break
+    mostrarConfirmar () {
+      if (this.alumno.idStatus === 1) return true
+      else if (this.alumno.idStatus === 5) {
+        if (!this.alumno.acatlanContigo) return true
+        else if (this.vistoBueno) return true
       }
+      return false
     }
   }
 }
 </script>
+
+<style scoped>
+.boton {
+  margin-top: 2%;
+}
+.is-size-5{
+  margin-bottom: 10px;
+}
+.link-f {
+  font-size: 27px !important;
+}
+.link {
+  display: flex;
+  justify-content: flex-start;
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+</style>
diff --git a/components/alumno/DataAlumno.vue b/components/alumno/DataAlumno.vue
index 390733e..fe8c60c 100644
--- a/components/alumno/DataAlumno.vue
+++ b/components/alumno/DataAlumno.vue
@@ -174,7 +174,7 @@ Te confirmamos que has concluido con los trámites necesarios para la liberació
 export default {
   data () {
     return {
-      activeStep: 1,
+      activeStep: 3,
       file: [],
       nacimiento: '',
       telefono: '',
@@ -187,7 +187,7 @@ export default {
         direccion: 'avenida 21 estado de mexico',
         nacimiento: [],
         telefono: '5511223344',
-        cuestionario: true,
+        cuestionario: false,
         informe: true
 
       }
diff --git a/components/alumno/ejemplo.vue b/components/alumno/ejemplo.vue
new file mode 100644
index 0000000..be22198
--- /dev/null
+++ b/components/alumno/ejemplo.vue
@@ -0,0 +1,9 @@
+<template>
+  <section class="container">
+    <p>hola</p>
+  </section>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index 5d47023..7c7b8b2 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -1,39 +1,71 @@
 <template>
   <div class="container">
     <div class="columns">
-      <div class="column is-3">
-        <b-field>
-          <b-input placeholder="No.Cuenta"
-              minlength="9"
-              maxlength="9"
-              icon="school"
-              rounded></b-input>
-        </b-field>
-      </div>
 
-      <div class="column is-3">
-        <b-field>
-          <b-input placeholder="Nombre"
-          icon="account"
-          rounded></b-input>
-        </b-field>
-      </div>
+        <div class="column is-2 mb-0 ">
+          <b-field >
+            <b-input
+                placeholder="No.Cuenta"
+                icon="school"
+                rounded
+                v-model="numeroCuenta"
+                maxlength="9"
+
+                ></b-input>
+          </b-field>
+        </div>
+
+        <div class="column is-2 mb-4 pb-4">
+          <b-field>
+            <b-input
+            type="name"
+            placeholder="Nombre"
+            icon="account"
+            rounded
+            v-model="nombre"
+            ></b-input>
+          </b-field>
+        </div>
+
+        <div class="column is-2">
+          <b-field>
+            <b-select placeholder="Status" icon="information" value="1" expanded rounded v-model="status">
+              <optgroup label="Status">
+                <option value="1">Pre-registro</option>
+                <option value="2">Pre-validado</option>
+                <option value="3">Registro</option>
+                <option value="4">Pre-término</option>
+                <option value="5">Término</option>
+                <option value="6">Liberado</option>
+                <option value="7">Rechazado</option>
+              </optgroup>
+            </b-select>
+          </b-field>
+        </div>
+
+        <div class="column is-3 px-5">
+          <div class="buttons">
+            <b-button
+            class="button"
+            :class="botonCarta()"
+            :icon-right="iconoCarta()"
+            expanded>
+              Carta de término
+            </b-button>
+          </div>
+        </div>
+
+        <div class="column is-3 pr-5">
+          <div class="buttons">
+            <b-button class="button"
+            :class="botonCuestionario()"
+            :icon-right="iconoCuestionario()"
+            expanded>
+              Cuestionario
+            </b-button>
+          </div>
+        </div>
 
-      <div class="column is-3">
-        <b-field>
-          <b-select placeholder="Status" icon="information" expanded rounded>
-            <optgroup label="Status">
-              <option value="Pre-registro">Pre-registro</option>
-              <option value="Pre-validado">Pre-validado</option>
-              <option value="Registro">Registro</option>
-              <option value="Pre-término">Pre-término</option>
-              <option value="Término">Término</option>
-              <option value="Liberado">Liberado</option>
-              <option value="Rechazado">Rechazado</option>
-            </optgroup>
-          </b-select>
-        </b-field>
-      </div>
     </div>
 
     <div class="columns">
@@ -44,9 +76,11 @@
               paginated
               per-page="5"
               hoverable
-              striped>
+              striped
+               v-show="numeroCuenta"
+              >
 
-              <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+              <b-table-column field="nombre" label="Nombre" v-slot="props" centereds>
                   <span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
               </b-table-column>
 
@@ -76,9 +110,15 @@
 </template>
 
 <script>
+// import validator from 'validator'
 export default {
   data () {
     return {
+      numeroCuenta: '',
+      nombre: '',
+      status: 1,
+      cartaTermino: false,
+      cuestionario: true,
       data: [
         {
           idRegistro: 1, // span
@@ -94,7 +134,7 @@ export default {
           idRegistro: 1, // span
           nombre: 'Andrés Hernan Saavedra Trejo',
           carrera: 'Matemáticas Aplicadas y Computación',
-          numeroCuenta: '41908550',
+          numeroCuenta: '42008550',
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'pre-registro',
@@ -170,7 +210,8 @@ export default {
           status: 'rechazado',
           idStatus: 1
         }
-      ]
+      ],
+      newSearch: {}
     }
   },
   methods: {
@@ -196,11 +237,58 @@ export default {
         return 'is-danger'
       }
     },
+    botonCarta () {
+      if (this.cartaTermino === true) {
+        return 'is-success'
+      } else {
+        return 'is-danger'
+      }
+    },
+    botonCuestionario () {
+      if (this.cuestionario === true) {
+        return 'is-success'
+      } else {
+        return 'is-danger'
+      }
+    },
+    iconoCarta () {
+      if (this.cartaTermino === true) {
+        return 'check'
+      } else {
+        return 'close'
+      }
+    },
+    iconoCuestionario () {
+      if (this.cuestionario === true) {
+        return 'check'
+      } else {
+        return 'close'
+      }
+    },
     cualquiera (variable) {
       console.log(variable)
-    }
+      console.log(this.numeroCuenta)
+      console.log(this.nombre)
+      console.log(this.status)
+    },
+    addSearch (e) {
+      e.preventDefault()
+      console.log('Agregando busqueda')
+    }/*
+    esNumero (numero) {
+      const ultimaLetra = numero.length - 1
+
+      if (numero && !validator.isNumeric(numero[ultimaLetra])) { return numero.substr(0, ultimaLetra) }
+      return numero
+    }/*
+    maxLength (str, max) {
+      if (str.lenght > max) { return str.substr(0, max) }
+      return str
+    } */
   }
+
 }
 </script>
 
-<style></style>
+<style>
+</style>
diff --git a/pages/admin/programa/index.vue b/pages/admin/programa/index.vue
new file mode 100644
index 0000000..81cf115
--- /dev/null
+++ b/pages/admin/programa/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="container">
+    <p class="is-size-2 mb-5">Programas de Servicio Social</p>
+    <b-button class="is-info" @click="regresar()">Regresar</b-button>
+    <TablaResponsables />
+  </div>
+</template>
+
+<script>
+import tablaResponsables from '../../../components/admin/servicio/programa/tablaResponsables'
+export default {
+  components: {
+    tablaResponsables
+  },
+  methods: {
+    regresar () {
+      localStorage.removeItem('idRegistro')
+      this.$router.push('./')
+    }
+  }
+}
+</script>
diff --git a/pages/alumno/cuestionario/index.vue b/pages/alumno/cuestionario/index.vue
index 014129f..006d05e 100644
--- a/pages/alumno/cuestionario/index.vue
+++ b/pages/alumno/cuestionario/index.vue
@@ -1,9 +1,68 @@
 <template>
-  <section>
-    hola
+  <section class="container">
+    <p class="is-size-2">Formulario</p>
+    <br>
+    <b-field label="Nombre: ">
+      <b-input
+        type="text"
+        v-model="nombre"
+        placeholder="nombre">
+      </b-input>
+    </b-field>
+    <b-field label="Ocupación: ">
+      <b-input
+        type="text"
+        v-model="ocupacion"
+        placeholder="Ocupación">
+      </b-input>
+    </b-field>
+    <b-field label="Dirección: ">
+      <b-input
+        type="text"
+        v-model="direccion"
+        placeholder="Dirección">
+      </b-input>
+    </b-field>
+    <b-field label="Código postal: ">
+      <b-input
+        type="text"
+        v-model="codigoPostal"
+        placeholder="Código postal">
+      </b-input>
+    </b-field>
+    <b-field label="Número de personas que viven en el hogar: ">
+      <b-input
+        type="text"
+        v-model="noPersonasHogar"
+        placeholder="Número de personas que viven en el hogar">
+      </b-input>
+    </b-field>
+    <b-field label="Edad del jefe de familia: ">
+      <b-input
+        type="text"
+        v-model="edadGfeFam"
+        placeholder="Edad jefe de familia">
+      </b-input>
+    </b-field>
+    <br>
+    <b-button class="is-info">
+      Enviar formulario
+    </b-button>
+    <br><br><br><br><br><br>
   </section>
 </template>
 
 <script>
-export default {}
+export default {
+  data () {
+    return {
+      nombre: '',
+      ocupacion: '',
+      direccion: '',
+      codigoPostal: null,
+      noPersonasHogar: null,
+      edadGfeFam: null
+    }
+  }
+}
 </script>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index ccc7580..751a8f8 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -6,12 +6,12 @@
         Para registrar a un alumno de servicio social pulsa el botón
         <strong> Agregar Alumno </strong> y sigue las instrucciones. <br />
         Para visualizar los datos completos de un alumno ya registrado o subir
-        su carta de término, poulsa su nombre y se desplegará la ficha técnica
+        su carta de término, pulsa su nombre y se desplegará la ficha técnica
         con toda la información.
       </p>
 
       <div class="buttons section pl-0 pb-0">
-        <b-button type="is-info">
+        <b-button type="is-info" @click="agregarAlumno()">
           Agregar alumno
         </b-button>
       </div>
@@ -29,6 +29,11 @@ import InputTable from '../../components/responsable/inputTable'
 export default {
   components: {
     InputTable
+  },
+  methods: {
+    agregarAlumno () {
+      this.$router.push('/responsable/nuevo')
+    }
   }
 }
 </script>