diff --git a/components/admin/especial/casoEspecial.vue b/components/admin/especial/casoEspecial.vue
index efebf8e..d279d0e 100644
--- a/components/admin/especial/casoEspecial.vue
+++ b/components/admin/especial/casoEspecial.vue
@@ -1,18 +1,16 @@
 <template>
-  <div>
+  <div
+    v-if="alumno.Status.idServicio != 11 || alumno.Status.idServicio != 12"
+    class="footter"
+  >
     <p class="is-size-3"><b>Datos personales</b></p>
-
     <p class="is-size-5 mt-3">
       <b>Número de cuenta: </b> {{ alumno.Usuario.usuario }}
     </p>
-
     <p class="is-size-5 mt-3"><b>Nombre: </b> {{ alumno.Usuario.nombre }}</p>
     <p class="is-size-5 mt-3"><b>Carrera: </b> {{ alumno.Carrera.carrera }}</p>
     <p class="is-size-5 mt-3"><b>Correo: </b> {{ alumno.correo }}</p>
-    <p class="is-size-5 mt-3">
-      <b>Institucion: </b>
-      {{ alumno.institucion }}
-    </p>
+    <p class="is-size-5 mt-3"><b>Institución: </b>{{ alumno.institucion }}</p>
     <p class="is-size-5 mt-3">
       <b>Dependencia: </b>
       {{ alumno.dependencia }}
@@ -30,6 +28,24 @@
       <b>Fecha de fin: </b>
       {{ fecha(alumno.fechaFin) }}
     </p>
+    <b-field
+      v-if="alumno.Status.idStatus === 11 || alumno.Status.idStatus === 12"
+      class="centro"
+    >
+      <b-button
+        class="boton border-info my-5"
+        type="is-success"
+        @click="confirmarLiberacion()"
+      >
+        Liberar
+      </b-button>
+    </b-field>
+
+    <b-loading
+      :is-full-page="true"
+      v-model="isLoading"
+      :can-cancel="false"
+    ></b-loading>
   </div>
 </template>
 
@@ -48,21 +64,91 @@ export default {
         Carrera: {},
         Status: {},
       },
+      token: {
+        headers: {
+          token: localStorage.getItem("token"),
+        },
+      },
+      idCasoEspecial: localStorage.getItem("idCasoEspecial"),
+      isLoading: false,
     };
   },
   methods: {
     obtenerDatos() {
       return axios
-        .get(`${process.env.api}/caso_especial/?idCasoEspecial=1`, this.token)
+        .get(
+          `${process.env.api}/caso_especial/?idCasoEspecial=${this.idCasoEspecial}`,
+          this.token
+        )
         .then((res) => {
           this.alumno = res.data;
           console.log(res.data);
+        })
+        .catch((err) => {
+          this.error(err.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    confirmarLiberacion() {
+      this.isLoading = true;
+      const data = { idCasoEspecial: this.idCasoEspecial };
+
+      axios
+        .put(`${process.env.api}/caso_especial/liberacion`, data, this.token)
+        .then((res) => {
+          this.$buefy.dialog.alert("El servicio ha sido liberado");
+          localStorage.removeItem("idCasoEspecial");
+          this.$router.push("/admin/especial");
+        })
+        .catch((err) => {
+          this.error(err.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
         });
     },
     fecha(date) {
       const fecha = moment(date.substr(0, 10));
       return `${fecha.date()}/${fecha.month()}/${fecha.year()}`;
     },
+    error(msj) {
+      let salir = false;
+      switch (msj) {
+        case "invalid signature":
+          msj = "Tu token no es valido, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt expired":
+          msj = "Tu sesión ha expirado, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "jwt malformed":
+          msj = "No se encontro tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+        case "No hay token":
+          msj = "Ocurrio un error al enviar tu token, inicia sesión de nuevo.";
+          salir = true;
+          break;
+      }
+
+      this.$buefy.dialog.alert({
+        title: "Error",
+        message: msj,
+        type: "is-danger",
+        hasIcon: true,
+        icon: "alert-circle",
+        iconPack: "mdi",
+        ariaRole: "alertdialog",
+        ariaModal: true,
+      });
+      if (salir == true) {
+        localStorage.clear();
+        this.$router.push(`/`);
+      }
+    },
   },
   created() {
     this.obtenerDatos();
@@ -70,4 +156,11 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.centro {
+  text-align: center;
+}
+.footter {
+  margin-bottom: 6rem;
+}
+</style>
diff --git a/pages/admin/especial/casoEspecial/index.vue b/pages/admin/especial/casoEspecial/index.vue
index f367e46..5666cf8 100644
--- a/pages/admin/especial/casoEspecial/index.vue
+++ b/pages/admin/especial/casoEspecial/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container mb-5">
+  <div class="container">
     <BotonRegresar :path="'/admin/especial'" />
     <DatosPersonalesEspecial />
   </div>