diff --git a/components/responsable/botonesCarga.vue b/components/responsable/botonesCarga.vue
new file mode 100644
index 0000000..919d3c9
--- /dev/null
+++ b/components/responsable/botonesCarga.vue
@@ -0,0 +1,22 @@
+<template >
+  <div>
+      <div class="buttons section pt-0 pl-0">
+        <b-button type="is-info mr-5">
+            Ver vitacoras
+        </b-button>
+        <b-button type="is-info">
+            Ver programas
+        </b-button>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/components/responsable/inputTable.vue b/components/responsable/inputTable.vue
index 7c7b8b2..bfcf83d 100644
--- a/components/responsable/inputTable.vue
+++ b/components/responsable/inputTable.vue
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="columns">
 
-        <div class="column is-2 mb-0 ">
+        <div class="column is-3 mb-0 ">
           <b-field >
             <b-input
                 placeholder="No.Cuenta"
@@ -15,7 +15,7 @@
           </b-field>
         </div>
 
-        <div class="column is-2 mb-4 pb-4">
+        <div class="column is-3 mb-4 pb-4">
           <b-field>
             <b-input
             type="name"
@@ -27,7 +27,7 @@
           </b-field>
         </div>
 
-        <div class="column is-2">
+        <div class="column is-3" >
           <b-field>
             <b-select placeholder="Status" icon="information" value="1" expanded rounded v-model="status">
               <optgroup label="Status">
@@ -43,31 +43,14 @@
           </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>
 
+    <div>
+      <BotonesCarga v-if="id == 1"/>
+    </div>
+
+    <p v-text="id"></p>
+
     <div class="columns">
       <section class="column is-12">
           <b-table
@@ -77,11 +60,10 @@
               per-page="5"
               hoverable
               striped
-               v-show="numeroCuenta"
               >
 
-              <b-table-column field="nombre" label="Nombre" v-slot="props" centereds>
-                  <span @click="cualquiera(props.row.nombre)">{{ props.row.nombre }}</span>
+              <b-table-column field="nombre" label="Nombre" v-slot="props" centered>
+                  <span @click="verifica()">{{ props.row.nombre }}</span>
               </b-table-column>
 
               <b-table-column field="carrera" label="Carrera" v-slot="props" centered>
@@ -101,7 +83,46 @@
               </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>
+                  <span @click="cualquiera(props.row.status)" class="tag" :class="types(props.row.status)">{{ props.row.status }}</span>
+              </b-table-column>
+
+              <b-table-column field="cartaTermino" label="Carta Término" v-slot="props" centered v-if="id == 2">
+                  <div v-if="props.row.status === 'pre-termino'">
+                    <span
+                    v-if="props.row.cartaTermino === true"
+                    >
+                        <b-icon :icon="iconoCarta(props.row.cartaTermino)"
+                        class="tag is-success"></b-icon>
+                    </span>
+
+                    <b-button
+                    v-if="props.row.cartaTermino === false"
+                    size="is-small"
+                    :class="botonCarta(props.row.cartaTermino)"
+                    :icon="iconoCarta(props.row.cartaTermino)">
+                        Carta Término
+                    </b-button>
+                  </div>
+              </b-table-column>
+
+              <b-table-column field="cuestionario" label="Cuestionario" v-slot="props" centered v-if="id == 2">
+                  <div
+                  v-if="props.row.status === 'pre-termino'">
+                    <span
+                    v-if="props.row.cuestionario === true"
+                    >
+                        <b-icon :icon="iconoCuestionario(props.row.cuestionario)"
+                        class="tag is-success"></b-icon>
+                    </span>
+
+                    <b-button
+                    v-if="props.row.cuestionario === false"
+                    size="is-small"
+                    :class="botonCuestionario(props.row.cuestionario)"
+                    :icon="iconoCuestionario(props.row.cuestionario)">
+                        Cuestionario
+                    </b-button>
+                  </div>
               </b-table-column>
           </b-table>
       </section>
@@ -111,14 +132,18 @@
 
 <script>
 // import validator from 'validator'
+import BotonesCarga from './botonesCarga.vue'
+
 export default {
+  components: {
+    BotonesCarga
+  },
   data () {
     return {
       numeroCuenta: '',
       nombre: '',
       status: 1,
-      cartaTermino: false,
-      cuestionario: true,
+      tipoUsuario: 1,
       data: [
         {
           idRegistro: 1, // span
@@ -128,6 +153,8 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'pre-validado',
+          cartaTermino: true,
+          cuestionario: false,
           idStatus: 1
         },
         {
@@ -137,7 +164,9 @@ export default {
           numeroCuenta: '42008550',
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
-          status: 'pre-registro',
+          status: 'pre-termino',
+          cartaTermino: true,
+          cuestionario: false,
           idStatus: 1
         },
         {
@@ -148,6 +177,8 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'pre-validado',
+          cartaTermino: true,
+          cuestionario: true,
           idStatus: 1
         },
         {
@@ -157,7 +188,9 @@ export default {
           numeroCuenta: '41908550',
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
-          status: 'pre-registro',
+          status: 'pre-termino',
+          cartaTermino: false,
+          cuestionario: true,
           idStatus: 1
         },
         {
@@ -168,6 +201,8 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'registro',
+          cartaTermino: true,
+          cuestionario: false,
           idStatus: 1
         },
         {
@@ -178,6 +213,8 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'pre-termino',
+          cartaTermino: false,
+          cuestionario: false,
           idStatus: 1
         },
         {
@@ -188,6 +225,8 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'termino',
+          cartaTermino: true,
+          cuestionario: false,
           idStatus: 1
         },
         {
@@ -198,6 +237,8 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'liberado',
+          cartaTermino: false,
+          cuestionario: false,
           idStatus: 1
         },
         {
@@ -208,18 +249,26 @@ export default {
           fechaInicio: '1/01/2020',
           fechaFin: '1/06/2020',
           status: 'rechazado',
+          cartaTermino: true,
+          cuestionario: false,
           idStatus: 1
         }
       ],
       newSearch: {}
     }
   },
+  props: {
+    id: {
+      type: Number,
+      required: false
+    }
+  },
   methods: {
     onPageChange (page) {
       this.page = page
       this.loadAsyncData()
     },
-    type (status) {
+    types (status) {
       /* const Status = parseFloat(status) Investigar para que sirve :) */
       if (status === 'pre-registro') {
         return 'is-dark'
@@ -237,29 +286,29 @@ export default {
         return 'is-danger'
       }
     },
-    botonCarta () {
-      if (this.cartaTermino === true) {
+    botonCarta (cartaTermino) {
+      if (cartaTermino === true) {
         return 'is-success'
       } else {
         return 'is-danger'
       }
     },
-    botonCuestionario () {
-      if (this.cuestionario === true) {
+    botonCuestionario (cuestionario) {
+      if (cuestionario === true) {
         return 'is-success'
       } else {
         return 'is-danger'
       }
     },
-    iconoCarta () {
-      if (this.cartaTermino === true) {
+    iconoCarta (cartaTermino) {
+      if (cartaTermino === true) {
         return 'check'
       } else {
         return 'close'
       }
     },
-    iconoCuestionario () {
-      if (this.cuestionario === true) {
+    iconoCuestionario (cuestionario) {
+      if (cuestionario === true) {
         return 'check'
       } else {
         return 'close'
@@ -270,6 +319,7 @@ export default {
       console.log(this.numeroCuenta)
       console.log(this.nombre)
       console.log(this.status)
+      console.log(this.id)
     },
     addSearch (e) {
       e.preventDefault()
@@ -286,7 +336,6 @@ export default {
       return str
     } */
   }
-
 }
 </script>
 
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 014129f..69c6ce6 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -1,9 +1,27 @@
 <template>
-  <section>
-    hola
-  </section>
+  <div class="container">
+    <div class="section">
+      <div class="pb-0">
+        <p class="title is-three-fifths is-offset-one-fifth">Servicios Sociales</p>
+      </div>
+      <section class="section">
+        <InputTable :id="id"/>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script>
-export default {}
+import InputTable from '../../components/responsable/inputTable'
+
+export default {
+  components: {
+    InputTable
+  },
+  data () {
+    return {
+      id: 1
+    }
+  }
+}
 </script>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 751a8f8..9e11b22 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -18,8 +18,9 @@
     </div>
 
     <section class="section">
-      <InputTable />
+      <InputTable :id="id"/>
     </section>
+
   </div>
 </template>
 
@@ -30,6 +31,11 @@ export default {
   components: {
     InputTable
   },
+  data () {
+    return {
+      id: 2
+    }
+  },
   methods: {
     agregarAlumno () {
       this.$router.push('/responsable/nuevo')