diff --git a/components/TablaServiciosSociales.vue b/components/TablaServiciosSociales.vue
index ad86aad..8f7fa18 100644
--- a/components/TablaServiciosSociales.vue
+++ b/components/TablaServiciosSociales.vue
@@ -22,6 +22,7 @@
         centered
       >
         <span>{{ fecha(props.row.createdAt) }}</span>
+        <!-- <span>{{ props.row }}</span> -->
       </b-table-column>
 
       <b-table-column
diff --git a/components/admin/InformacionServicio.vue b/components/admin/InformacionServicio.vue
index f2c7791..aff6adf 100644
--- a/components/admin/InformacionServicio.vue
+++ b/components/admin/InformacionServicio.vue
@@ -18,6 +18,14 @@
       <b-field label="Clave de programa:">
         <p class="input">{{ alumno.Programa.clavePrograma }}</p>
       </b-field>
+
+      <b-field label="Programa de Acatlan:">
+        <p class="input">
+          <span>
+            {{ alumno.Programa.acatlan ? 'Si' : 'No' }}
+          </span>
+        </p>
+      </b-field>
     </div>
 
     <div class="mb-5">
@@ -55,6 +63,14 @@
         <p class="input">{{ alumno.correo }}</p>
       </b-field>
 
+      <b-field label="Programa Interno:" v-if="alumno.programaInterno">
+        <p class="input">{{ alumno.programaInterno }}</p>
+      </b-field>
+
+      <b-field label="Profesor:" v-if="alumno.profesor">
+        <p class="input">{{ alumno.profesor }}</p>
+      </b-field>
+
       <b-field label="Fecha de registro:" v-if="alumno.createdAt">
         <p class="input">{{ fecha(alumno.createdAt) }}</p>
       </b-field>
@@ -72,7 +88,7 @@
       </b-field>
     </div>
 
-    <div>
+    <b-field>
       <b-button
         class="boton is-info"
         @click="editar()"
@@ -82,7 +98,7 @@
       >
         Editar información
       </b-button>
-    </div>
+    </b-field>
   </section>
 </template>
 
diff --git a/components/responsable/NuevoServicio.vue b/components/responsable/NuevoServicio.vue
index 90bd81d..4eb85d9 100644
--- a/components/responsable/NuevoServicio.vue
+++ b/components/responsable/NuevoServicio.vue
@@ -31,7 +31,7 @@
 
     <b-field label="Seleccione programa">
       <b-select placeholder="Seleccionar" v-model="programa" expanded>
-        <option value="">Seleccionar</option>
+        <option :value="{}" disabled>Seleccionar</option>
 
         <option v-for="(p, i) in programas" :key="i" :value="p">
           {{ p.programa }}
@@ -91,19 +91,24 @@
         <div class="section has-text-centered">
           <b-icon icon="upload" size="is-large" class="mb-4" />
 
-          <p>
+          <p class="is-size-5">
             {{
               file.name ||
               'Arrastra aquí tu archivo o da click aquí para buscar'
             }}
           </p>
 
-          <p>Tamaño máximo 20MB</p>
+          <p class="is-size-6">Tamaño máximo 20MB</p>
+
+          <p class="is-size-7">
+            Si al momento de elegir un archivo este no se selecciona, haga click
+            en cancelar en la ventana emergente y trate de nuevo.
+          </p>
         </div>
       </b-upload>
     </b-field>
 
-    <div class="has-text-centered mt-4">
+    <b-field class="has-text-centered mt-4">
       <b-button
         type="is-success"
         :disabled="mostrarBoton()"
@@ -116,7 +121,7 @@
       >
         Enviar
       </b-button>
-    </div>
+    </b-field>
   </div>
 </template>
 
@@ -149,9 +154,8 @@ export default {
     }
   },
   methods: {
-    reset() {
+    resetar() {
       this.correo = ''
-      this.numeroCuenta = ''
       this.profesor = ''
       this.programaInterno = ''
       this.fechaFin = new Date()
@@ -162,8 +166,8 @@ export default {
     },
     mostrarBoton() {
       if (
-        !this.correo ||
         !this.alumno.idUsuario ||
+        !this.correo ||
         !this.programa.idPrograma ||
         (this.programa.acatlan && (!this.profesor || !this.programaInterno)) ||
         !this.file.name
@@ -179,11 +183,13 @@ export default {
           this.responsable.token
         )
         .then((res) => {
-          this.reset()
+          this.resetar()
           this.alumno = res.data
           this.updateIsLoading(false)
         })
         .catch((err) => {
+          this.numeroCuenta = ''
+          this.resetar()
           this.updateIsLoading(false)
           this.imprimirError(err.response.data)
         })
@@ -213,7 +219,8 @@ export default {
           this.responsable.tokenArchivo
         )
         .then((res) => {
-          this.reset()
+          this.numeroCuenta = ''
+          this.resetar()
           this.updateIsLoading(false)
           this.imprimirMensaje(res.data.message)
         })
diff --git a/components/responsable/TablaServiciosSociales.vue b/components/responsable/TablaServiciosSociales.vue
index 542a3d0..ce01aba 100644
--- a/components/responsable/TablaServiciosSociales.vue
+++ b/components/responsable/TablaServiciosSociales.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <div>
     <div class="columns">
       <b-field class="column" label="Número de Cuenta">
         <b-input
@@ -39,11 +39,11 @@
         </b-select>
       </b-field>
 
-      <div class="column is-align-self-center">
+      <b-field class="column is-align-self-center">
         <b-button type="is-info" @click="obtenerServicios()" expanded rounded>
           Buscar
         </b-button>
-      </div>
+      </b-field>
     </div>
 
     <TablaServiciosSociales
@@ -56,7 +56,7 @@
       :data="data"
       :onPageChange="onPageChange"
     />
-  </section>
+  </div>
 </template>
 
 <script>
@@ -70,8 +70,6 @@ export default {
   props: {
     responsable: { type: Object, required: true },
     imprimirError: { type: Function, required: true },
-    imprimirMensaje: { type: Function, required: true },
-    imprimirWarning: { type: Function, required: true },
   },
   data() {
     return {
@@ -129,7 +127,7 @@ export default {
         .get(`${process.env.api}/status`, this.responsable.token)
         .then((res) => {
           this.status = res.data
-          this.obtenerCatalogoStatus()
+          this.obtenerServicios()
         })
         .catch((err) => {
           this.imprimirError(err.response.data)
@@ -137,7 +135,7 @@ export default {
     },
   },
   created() {
-    if (this.responsable.idTipoUsuario === 2) this.obtenerServicios()
+    if (this.responsable.idTipoUsuario === 2) this.obtenerCatalogoStatus()
   },
 }
 </script>
diff --git a/pages/responsable/index.vue b/pages/responsable/index.vue
index 780be3e..7b80eb1 100644
--- a/pages/responsable/index.vue
+++ b/pages/responsable/index.vue
@@ -1,33 +1,33 @@
 <template>
-  <section class="container px-2 pb-6">
-    <div class="py-6">
-      <p>Estimado(a) responsable del programa de servicio social:</p>
+  <div class="container px-2 pb-6">
+    <div class="pt-6 pb-5">
+      <p class="is-size-4 block">
+        Estimado(a) responsable del programa de servicio social:
+      </p>
 
-      <p>
+      <p class="block">
         Para registrar a un alumno de servicio social pulsa el botón
         <strong> Agregar Alumno </strong> y sigue las instrucciones.
       </p>
 
-      <p>
+      <!-- <p>
         Para visualizar los datos completos de un alumno ya registrado o subir
         su carta de término, pulsa su nombre y se desplegará la ficha técnica
         con toda la información.
-      </p>
+      </p> -->
     </div>
 
-    <div class="pb-6">
+    <b-field class="pb-5">
       <b-button type="is-info" tag="router-link" to="/responsable/nuevo">
         Agregar alumno
       </b-button>
-    </div>
+    </b-field>
 
     <TablaServiciosSociales
       :responsable="responsable"
       :imprimirError="imprimirError"
-      :imprimirMensaje="imprimirMensaje"
-      :imprimirWarning="imprimirWarning"
     />
-  </section>
+  </div>
 </template>
 
 <script>
@@ -61,42 +61,6 @@ export default {
         this.$router.push('/')
       }
     },
-    imprimirMensaje(message, title = '¡Felicidades!', onConfirm = () => {}) {
-      this.$buefy.dialog.alert({
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-        type: 'is-success',
-        title,
-        message,
-        confirmText: 'Ok',
-        hasIcon: true,
-        iconPack: 'mdi',
-        icon: 'check-circle',
-        onConfirm: () => onConfirm(),
-      })
-    },
-    imprimirWarning(
-      message,
-      onConfirm = () => {},
-      title = '¡Espera un minuto!',
-      onCancel = () => {}
-    ) {
-      this.$buefy.dialog.alert({
-        ariaRole: 'alertdialog',
-        ariaModal: true,
-        type: 'is-warning',
-        title,
-        message,
-        confirmText: 'Confirmar',
-        canCancel: true,
-        cancelText: 'Cancelar',
-        hasIcon: true,
-        iconPack: 'mdi',
-        icon: 'help-circle',
-        onConfirm: () => onConfirm(),
-        onCancel: () => onCancel(),
-      })
-    },
     getLocalhostInfo() {
       this.responsable.idUsuario = Number(localStorage.getItem('idUsuario'))
       this.responsable.idTipoUsuario = Number(
diff --git a/pages/responsable/nuevo/index.vue b/pages/responsable/nuevo/index.vue
index 94b34c9..1a1ffa3 100644
--- a/pages/responsable/nuevo/index.vue
+++ b/pages/responsable/nuevo/index.vue
@@ -3,9 +3,9 @@
     <BotonRegresar path="/responsable" />
 
     <div class="has-text-justified is-size-6 mb-6">
-      <h6 class="block is-size-5">
-        Estimado(a) responsable de programa de servicio social:
-      </h6>
+      <p class="block is-size-4">
+        Estimado(a) responsable del programa de servicio social:
+      </p>
 
       <p class="block">
         Te solicitamos llenar cuidadosamente los campos solicitados a