diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
new file mode 100644
index 0000000..5d47023
--- /dev/null
+++ b/components/responsable/inputTable.vue
@@ -0,0 +1,206 @@
+<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-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">
+      <section class="column is-12">
+          <b-table
+              :data="data"
+              ref="table"
+              paginated
+              per-page="5"
+              hoverable
+              striped>
+
+              <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
+              </b-table-column>
+
+              <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.carrera)">{{ props.row.carrera }}</span>
+              </b-table-column>
+
+              <b-table-column field="numeroCuenta" label="Número de Cuenta" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.numeroCuenta)">{{ props.row.numeroCuenta }}</span>
+              </b-table-column>
+
+              <b-table-column field="fechaInicio" label="Inicio" centered v-slot="props">
+                  <span @click="cualquiera(props.row.fechaInicio)">{{ props.row.fechaInicio }}</span>
+              </b-table-column>
+
+              <b-table-column field="fechaFin" label="Final" centered v-slot="props">
+                  <span @click="cualquiera(props.row.fechaFin)">{{ props.row.fechaFin }}</span>
+              </b-table-column>
+
+              <b-table-column field="status" label="Status" v-slot="props" centered>
+                  <span @click="cualquiera(props.row.status)" class="tag" :class="type(props.row.status)">{{ props.row.status }}</span>
+              </b-table-column>
+          </b-table>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: [
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-validado',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Andrés Hernan Saavedra Trejo',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-registro',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Marco',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-validado',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Eithan',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-registro',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Brenda',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'registro',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'pre-termino',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'termino',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'liberado',
+          idStatus: 1
+        },
+        {
+          idRegistro: 1, // span
+          nombre: 'Lemuel',
+          carrera: 'Matemáticas Aplicadas y Computación',
+          numeroCuenta: '41908550',
+          fechaInicio: '1/01/2020',
+          fechaFin: '1/06/2020',
+          status: 'rechazado',
+          idStatus: 1
+        }
+      ]
+    }
+  },
+  methods: {
+    onPageChange (page) {
+      this.page = page
+      this.loadAsyncData()
+    },
+    type (status) {
+      /* const Status = parseFloat(status) Investigar para que sirve :) */
+      if (status === 'pre-registro') {
+        return 'is-dark'
+      } else if (status === 'pre-validado') {
+        return 'is-warning'
+      } else if (status === 'registro') {
+        return 'is-info'
+      } else if (status === 'pre-termino') {
+        return 'is-link'
+      } else if (status === 'termino') {
+        return 'is-success'
+      } else if (status === 'liberado') {
+        return 'is-success'
+      } else if (status === 'rechazado') {
+        return 'is-danger'
+      }
+    },
+    cualquiera (variable) {
+      console.log(variable)
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 014129f..ccc7580 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -1,9 +1,38 @@
 <template>
-  <section>
-    hola
-  </section>
+  <div class="container">
+    <div class="section pb-0">
+      <p class="is-three-fifths is-offset-one-fifth">
+        Estimado(a) responsable del programa de servicio social: <br />
+        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
+        con toda la información.
+      </p>
+
+      <div class="buttons section pl-0 pb-0">
+        <b-button type="is-info">
+          Agregar alumno
+        </b-button>
+      </div>
+    </div>
+
+    <section class="section">
+      <InputTable />
+    </section>
+  </div>
 </template>
 
 <script>
-export default {}
+import InputTable from '../../components/responsable/inputTable'
+
+export default {
+  components: {
+    InputTable
+  }
+}
 </script>
+
+<style>
+
+</style>