diff --git a/components/admin/servicio/modificar/form.vue b/components/admin/servicio/modificar/form.vue
index af9cece..4bbd800 100644
--- a/components/admin/servicio/modificar/form.vue
+++ b/components/admin/servicio/modificar/form.vue
@@ -49,7 +49,7 @@
       <p class="is-size-5">Carta de aceptación</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.cartaAceptacion" type="is-black" v-on:input="validarExt(1)" 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>
@@ -63,7 +63,7 @@
       <p class="is-size-5">Carta de término</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.cartaTermino" type="is-black" v-on:input="validarExt(2)" 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>
@@ -77,7 +77,7 @@
       <p class="is-size-5">Informe global</p>
       <br>
       <b-field>
-        <b-upload v-model="nuevo.informeGlobal" type="is-black" v-on:input="validarExt(3)" 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>
diff --git a/components/admin/servicio/programa/tablaResponsables.vue b/components/admin/servicio/programa/tablaResponsables.vue
new file mode 100644
index 0000000..aa12468
--- /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) {
+      window.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 7d2cc6e..72209ad 100644
--- a/components/admin/servicio/vistaServicio.vue
+++ b/components/admin/servicio/vistaServicio.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="container">
-    <div v-if="alumno.programa">
-      <p class="is-size-4">Programa</p>
-      <p class="is-size-5"></p>
+    <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>
+    <div id="Status">
       <p class="is-size-3" v-if="alumno.idStatus == 1">
         Pre Registro
       </p>
@@ -24,6 +28,65 @@
           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>
 
@@ -32,9 +95,9 @@ export default {
   data () {
     return {
       alumno: {
-        fechaInicio: '',
-        fechaFin: '',
-        idStatus: 6
+        fechaInicio: '14/2/2020',
+        fechaFin: '14/8/2020',
+        idStatus: 5
       },
       idRegistro: window.localStorage.getItem('idRegistro'),
       token: {
@@ -55,6 +118,33 @@ export default {
     }
   },
   methods: {
+    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/ejemplo.vue b/components/alumno/ejemplo.vue
index 014129f..be22198 100644
--- a/components/alumno/ejemplo.vue
+++ b/components/alumno/ejemplo.vue
@@ -1,6 +1,6 @@
 <template>
-  <section>
-    hola
+  <section class="container">
+    <p>hola</p>
   </section>
 </template>
 
diff --git a/pages/admin/programa/index.vue b/pages/admin/programa/index.vue
new file mode 100644
index 0000000..475375c
--- /dev/null
+++ b/pages/admin/programa/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="container">
+    <p class="is-size-2 mb-5">Programas de Servicio Social</p>
+    <b-button class="is-info">Regresar</b-button>
+    <TablaResponsables />
+  </div>
+</template>
+
+<script>
+import tablaResponsables from '../../../components/admin/servicio/programa/tablaResponsables'
+export default {
+  components: {
+    tablaResponsables
+  }
+}
+</script>
diff --git a/pages/alumno/index.vue b/pages/alumno/index.vue
index 014129f..006d05e 100644
--- a/pages/alumno/index.vue
+++ b/pages/alumno/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>