diff --git a/components/admin/casos_especiales/caso_especial/casoEspecial.vue b/components/admin/casos_especiales/caso_especial/Informacion.vue
similarity index 53%
rename from components/admin/casos_especiales/caso_especial/casoEspecial.vue
rename to components/admin/casos_especiales/caso_especial/Informacion.vue
index d9f53c9..1466a00 100644
--- a/components/admin/casos_especiales/caso_especial/casoEspecial.vue
+++ b/components/admin/casos_especiales/caso_especial/Informacion.vue
@@ -68,35 +68,15 @@
         Editar información
       </b-button>
     </b-field>
-
-    <b-field
-      class="mt-2"
-      v-if="alumno.Status.idStatus === 11 || alumno.Status.idStatus === 12"
-    >
-      <b-button type="is-success" @click="confirmarLiberacion()">
-        Liberar
-      </b-button>
-    </b-field>
   </div>
 </template>
 
 <script>
 import moment from 'moment'
-import axios from 'axios'
 
 export default {
-  data() {
-    return {
-      alumno: { Usuario: {}, Carrera: {}, Status: {} },
-      idCasoEspecial: null,
-    }
-  },
   props: {
-    admin: { type: Object, required: true },
-    imprimirMensaje: { type: Function, required: true },
-    imprimirWarning: { type: Function, required: true },
-    imprimirError: { type: Function, required: true },
-    updateIsLoading: { type: Function, required: true },
+    alumno: { type: Object, required: true },
   },
   methods: {
     fecha(date) {
@@ -109,50 +89,6 @@ export default {
       }
       return ''
     },
-    confirmarLiberacion() {
-      const data = { idCasoEspecial: this.idCasoEspecial }
-
-      this.updateIsLoading(true)
-      axios
-        .put(
-          `${process.env.api}/caso_especial/liberacion`,
-          data,
-          this.admin.token
-        )
-        .then((res) => {
-          localStorage.removeItem('idCasoEspecial')
-          this.imprimirMensaje(
-            'Ha liberado este servicio social correctamente.'
-          )
-          this.updateIsLoading(false)
-          this.$router.push('/admin/casos_especiales')
-        })
-        .catch((err) => {
-          this.updateIsLoading(false)
-          this.error(err.response.data)
-        })
-    },
-    obtenerCasoEspecial() {
-      this.updateIsLoading(true)
-      return axios
-        .get(
-          `${process.env.api}/caso_especial?idCasoEspecial=${this.idCasoEspecial}`,
-          this.admin.token
-        )
-        .then((res) => {
-          this.alumno = res.data
-          this.updateIsLoading(false)
-        })
-        .catch((err) => {
-          this.updateIsLoading(false)
-          this.imprimirError(err.response.data)
-        })
-    },
-  },
-  created() {
-    this.idCasoEspecial = localStorage.getItem('idCasoEspecial')
-    if (this.admin.idTipoUsuario === 1 && this.idCasoEspecial)
-      this.obtenerCasoEspecial()
   },
 }
 </script>
diff --git a/components/admin/casos_especiales/caso_especial/Liberar.vue b/components/admin/casos_especiales/caso_especial/Liberar.vue
new file mode 100644
index 0000000..d39e943
--- /dev/null
+++ b/components/admin/casos_especiales/caso_especial/Liberar.vue
@@ -0,0 +1,57 @@
+<template>
+  <b-field class="mt-2">
+    <b-button
+      type="is-success"
+      @click="
+        imprimirWarning(
+          '¿Esta seguro de querer liberar este caso especial?',
+          confirmarLiberacion
+        )
+      "
+    >
+      Liberar
+    </b-button>
+  </b-field>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  props: {
+    idCasoEspecial: { type: Number, required: true },
+    admin: { type: Object, required: true },
+    imprimirError: { type: Function, required: true },
+    imprimirMensaje: { type: Function, required: true },
+    imprimirWarning: { type: Function, required: true },
+    updateIsLoading: { type: Function, required: true },
+  },
+  methods: {
+    confirmarLiberacion() {
+      const data = { idCasoEspecial: this.idCasoEspecial }
+
+      this.updateIsLoading(true)
+      axios
+        .put(
+          `${process.env.api}/caso_especial/liberacion`,
+          data,
+          this.admin.token
+        )
+        .then((res) => {
+          localStorage.removeItem('idCasoEspecial')
+          this.imprimirMensaje(
+            'Ha liberado este servicio social correctamente.'
+          )
+          this.updateIsLoading(false)
+          this.$router.push('/admin/casos_especiales')
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/pages/admin/casos_especiales/caso_especial/index.vue b/pages/admin/casos_especiales/caso_especial/index.vue
index 45f26d3..6d4cefd 100644
--- a/pages/admin/casos_especiales/caso_especial/index.vue
+++ b/pages/admin/casos_especiales/caso_especial/index.vue
@@ -5,7 +5,11 @@
       :deleteFromLocalStorage="['idCasoEspecial']"
     />
 
-    <DatosPersonalesEspecial
+    <Informacion :alumno="alumno" />
+
+    <Liberar
+      v-if="alumno.Status.idStatus === 11 || alumno.Status.idStatus === 12"
+      :idCasoEspecial="idCasoEspecial"
       :admin="admin"
       :imprimirMensaje="imprimirMensaje"
       :imprimirWarning="imprimirWarning"
@@ -18,24 +22,45 @@
 </template>
 
 <script>
+import axios from 'axios'
 import BotonRegresar from '@/components/botonRegresar'
-import DatosPersonalesEspecial from '@/components/admin/casos_especiales/caso_especial/casoEspecial'
+import Informacion from '@/components/admin/casos_especiales/caso_especial/Informacion'
+import Liberar from '@/components/admin/casos_especiales/caso_especial/Liberar'
 
 export default {
   components: {
     BotonRegresar,
-    DatosPersonalesEspecial,
+    Informacion,
+    Liberar,
   },
   data() {
     return {
-      admin: {},
       isLoading: false,
+      idCasoEspecial: null,
+      admin: {},
+      alumno: { Usuario: {}, Carrera: {}, Status: {} },
     }
   },
   methods: {
     updateIsLoading(booleanValue) {
       this.isLoading = booleanValue
     },
+    obtenerCasoEspecial() {
+      this.updateIsLoading(true)
+      axios
+        .get(
+          `${process.env.api}/caso_especial?idCasoEspecial=${this.idCasoEspecial}`,
+          this.admin.token
+        )
+        .then((res) => {
+          this.alumno = res.data
+          this.updateIsLoading(false)
+        })
+        .catch((err) => {
+          this.updateIsLoading(false)
+          this.imprimirError(err.response.data)
+        })
+    },
     imprimirError(err = {}, title = '¡Hubo un error!', onConfirm = () => {}) {
       this.$buefy.dialog.alert({
         ariaRole: 'alertdialog',
@@ -99,6 +124,7 @@ export default {
           token: localStorage.getItem('token'),
         },
       }
+      this.idCasoEspecial = Number(localStorage.getItem('idCasoEspecial'))
     },
   },
   created() {
@@ -106,8 +132,8 @@ export default {
     if (this.admin.idTipoUsuario === 2) this.$router.push('/responsable')
     if (this.admin.idTipoUsuario === 3) this.$router.push('/alumno')
     if (this.admin.idTipoUsuario === 4) this.$router.push('/casoEspecial')
-    if (!localStorage.getItem('idCasoEspecial'))
-      this.$router.push('/admin/casos_especiales')
+    if (!this.idCasoEspecial) this.$router.push('/admin/casos_especiales')
+    this.obtenerCasoEspecial()
   },
 }
 </script>