diff --git a/components/admin/especial/casoEspecial.vue b/components/admin/especial/casoEspecial.vue
new file mode 100644
index 0000000..d279d0e
--- /dev/null
+++ b/components/admin/especial/casoEspecial.vue
@@ -0,0 +1,166 @@
+<template>
+  <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>Institución: </b>{{ alumno.institucion }}</p>
+    <p class="is-size-5 mt-3">
+      <b>Dependencia: </b>
+      {{ alumno.dependencia }}
+    </p>
+    <p class="is-size-5 mt-3"><b>Créditos: </b> {{ alumno.creditos + "%" }}</p>
+    <p class="is-size-5 mt-3">
+      <b>Fecha de nacimiento: </b>
+      {{ fecha(alumno.fechaNacimiento) }}
+    </p>
+    <p class="is-size-5 mt-3">
+      <b>Fecha de inicio: </b>
+      {{ fecha(alumno.fechaInicio) }}
+    </p>
+    <p class="is-size-5 mt-3">
+      <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>
+
+<script>
+import moment from "moment";
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      alumno: {
+        fechaNacimiento: "",
+        fechaInicio: "",
+        fechaFin: "",
+        Usuario: {},
+        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=${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();
+  },
+};
+</script>
+
+<style>
+.centro {
+  text-align: center;
+}
+.footter {
+  margin-bottom: 6rem;
+}
+</style>
diff --git a/components/admin/especial/formularioEspecial.vue b/components/admin/especial/formularioEspecial.vue
new file mode 100644
index 0000000..1f228fb
--- /dev/null
+++ b/components/admin/especial/formularioEspecial.vue
@@ -0,0 +1,354 @@
+<template>
+  <div>
+    <p class="is-size-3 mb-5"><b>Agregar un servicio social</b></p>
+    <form>
+      <b-field label="Artículo">
+        <b-select
+          placeholder="Seleccione el articulo correspondiente"
+          expanded
+          v-model="alumno.articulo"
+        >
+          <option value="1">Artículo 52</option>
+          <option value="2">Artículo 91</option>
+        </b-select>
+      </b-field>
+
+      <b-field label="Número de cuenta" class="column p-0 my-5 is-full">
+        <input
+          class="input column"
+          v-model="noCuenta"
+          message="Solo numeros"
+          required="required"
+          maxlength="9"
+          type="number"
+          placeholder="Número de cuenta"
+          min="0"
+        />
+
+        <p class="control">
+          <b-button class="button is-info" @click="buscarAlumno()"
+            >Buscar</b-button
+          >
+        </p>
+      </b-field>
+
+      <b-field label="Nombre">
+        <div class="input">{{ alumno.nombre }}</div>
+      </b-field>
+
+      <b-field label="Carrera">
+        <div class="input">{{ alumno.carrera }}</div>
+      </b-field>
+
+      <b-field label="Discapacidad" v-if="alumno.articulo === '1'">
+        <b-input
+          class="my-4"
+          placeholder="Discapacidad"
+          v-model="alumno.dicapacidad"
+        >
+        </b-input>
+      </b-field>
+
+      <div v-if="alumno.articulo === '2'">
+        <b-field label="Institución">
+          <b-input
+            class="my-4"
+            placeholder="Institución"
+            v-model="alumno.institucion"
+          ></b-input>
+        </b-field>
+
+        <b-field label="Dependencia">
+          <b-input
+            class="my-4"
+            placeholder="Dependencia"
+            v-model="alumno.dependencia"
+          ></b-input>
+        </b-field>
+      </div>
+
+      <b-field label="Dirección">
+        <b-input
+          class="my-4"
+          placeholder="Dirección"
+          v-model="alumno.direccion"
+        ></b-input>
+      </b-field>
+
+      <b-field label="Fecha de nacimiento">
+        <b-datepicker
+          placeholder="Nacimiento"
+          icon="calendar-today"
+          v-model="alumno.fechaNacimiento"
+        >
+        </b-datepicker>
+      </b-field>
+
+      <b-field label="Fecha de inicio">
+        <b-datepicker
+          placeholder="Fecha Inicio"
+          icon="calendar-today"
+          v-model="alumno.fechaInicio"
+        >
+        </b-datepicker>
+      </b-field>
+
+      <b-field label="Fecha de fin" v-if="alumno.fechaInicio">
+        <b-datepicker
+          placeholder="Fecha fin"
+          v-model="alumno.fechaFin"
+          icon="calendar-today"
+        >
+        </b-datepicker>
+      </b-field>
+
+      <b-field label="Correo electrónico">
+        <b-input
+          class="my-4"
+          placeholder="Correo electrónico"
+          v-model="alumno.correoElectronico"
+        ></b-input>
+      </b-field>
+    </form>
+
+    <b-field label="Agrega el archivo">
+      <b-upload
+        v-model="file"
+        drag-drop
+        type="is-black"
+        expanded
+        accept="application/rar"
+      >
+        <section>
+          <div class="content has-text-centered">
+            <p>
+              <b-icon icon="upload" size="is-large"></b-icon>
+            </p>
+            <p>
+              {{ "Arrastra aquí tu archivo o da click para buscar" }}
+            </p>
+          </div>
+        </section>
+      </b-upload>
+    </b-field>
+
+    <b-field class="centro">
+      <b-button
+        :disabled="
+          alumno.articulo == '' ||
+            alumno.numeroCuenta == '' ||
+            alumno.nombre == '' ||
+            alumno.carrera == '' ||
+            alumno.direccion == '' ||
+            alumno.fechaNacimiento == '' ||
+            alumno.fechaInicio == '' ||
+            alumno.fehcaFin == '' ||
+            alumno.correoElectronico == '' ||
+            file == ''
+        "
+        class="border-success my-5"
+        type="is-success"
+        @click="enviar()"
+        >Enviar</b-button
+      >
+    </b-field>
+    <b-loading :is-full-page="true" v-model="isLoading" :can-cancel="false" />
+  </div>
+</template>
+
+<script>
+import "buefy/dist/buefy.css";
+import axios from "axios";
+import validator from "validator";
+import moment from "moment";
+export default {
+  data() {
+    return {
+      file: [],
+      isLoading: false,
+      searched: false,
+      noCuenta: "",
+      alumno: {
+        cuenta: "",
+        nombre: "",
+        carrera: "",
+        creditos: "",
+        discapacidad: "",
+        institucion: "",
+        dependencia: "",
+        idAlumno: "",
+        idCarrera: "",
+        fechaNacimiento: [],
+        fechaiIicio: [],
+        fechaFin: [],
+        correoElectronico: "",
+      },
+
+      token: {
+        headers: {
+          token: window.localStorage.getItem("token"),
+        },
+      },
+    };
+  },
+  methods: {
+    reset() {
+      this.alumno.cuenta = "";
+      this.alumno.nombre = "";
+      this.alumno.carrera = "";
+      this.alumno.creditos = "";
+      this.alumno.institucion = "";
+      this.alumno.dependencia = "";
+      this.alumno.idAlumno = "";
+      this.alumno.idCarrera = "";
+      this.alumno.fechaNacimiento = [];
+      this.alumno.fechaInicio = [];
+      this.alumno.fechaFin = [];
+      this.alumno.correoElectronico = "";
+
+      this.noCuenta = "";
+      this.file = [];
+    },
+    buscarAlumno() {
+      this.isLoading = true;
+      axios
+        .get(
+          `${process.env.api}/usuario/escolares?numeroCuenta=${this.noCuenta}`,
+          this.token
+        )
+        .then((res) => {
+          this.alumno.cuenta = this.noCuenta;
+          this.alumno = res.data;
+          this.searched = true;
+          console.log(res.data);
+        })
+        .catch((error) => {
+          this.error(error.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    enviar() {
+      this.isLoading = true;
+      const data = {
+        idStatus: this.alumno.articulo,
+        idUsuario: this.alumno.idAlumno,
+        idCarrera: this.alumno.idCarrera,
+        numeroCuenta: this.alumno.cuenta,
+        creditos: this.alumno.creditos.toString(),
+        correo: this.alumno.correoElectronico,
+        fechaInicio: moment(this.alumno.fechaInicio),
+        fechaFin: moment(this.alumno.fechaFin),
+      };
+      const formData = new FormData();
+
+      formData.append("alumno", JSON.stringify(data));
+      formData.append("archivos", this.file);
+
+      console.log(file);
+      axios
+        .post(`${process.env.api}/caso_especial/nuevo`, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            token: this.token.headers.token,
+          },
+        })
+        .then((res) => {
+          this.$buefy.dialog.alert({
+            title: "Success",
+            message: "Se enviaron los datos correctamente",
+            type: "is-success",
+            hasIcon: true,
+            icon: "checkbox-marked-circle",
+            iconPack: "mdi",
+            ariaRole: "alertdialog",
+            ariaModal: true,
+          });
+          this.reset();
+        })
+        .catch((error) => {
+          this.error(error.response.data.message);
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+    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(`/`);
+      }
+    },
+    esNumero(numero) {
+      const ultimaLetra = numero.length - 1;
+
+      if (numero && !validator.isNumeric(numero[ultimaLetra])) {
+        return numero.substr(0, ultimaLetra);
+      }
+      return numero;
+    },
+    maxLength(str, max) {
+      if (str.length > max) return str.substr(0, max);
+      return str;
+    },
+    correoValidado() {
+      if (validator.isEmail(this.alumno.correoElectronico)) {
+        return "";
+      }
+    },
+  },
+  watch: {
+    noCuenta() {
+      if (this.searched === false) {
+        this.noCuenta = Number(this.noCuenta) < 0 ? "" : this.noCuenta;
+        this.noCuenta = this.esNumero(this.noCuenta);
+        this.noCuenta = this.maxLength(this.noCuenta, 9);
+      } else {
+        this.noCuenta = "";
+        this.searched = false;
+        this.reset();
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.centro {
+  text-align: center;
+}
+.upload .upload-draggable {
+  padding: 2.5em;
+}
+</style>
diff --git a/pages/admin/especial/casoEspecial/index.vue b/pages/admin/especial/casoEspecial/index.vue
index e69de29..5666cf8 100644
--- a/pages/admin/especial/casoEspecial/index.vue
+++ b/pages/admin/especial/casoEspecial/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="container">
+    <BotonRegresar :path="'/admin/especial'" />
+    <DatosPersonalesEspecial />
+  </div>
+</template>
+
+<script>
+import BotonRegresar from "../../../../components/botonRegresar";
+import DatosPersonalesEspecial from "../../../../components/admin/especial/casoEspecial.vue";
+export default {
+  components: {
+    BotonRegresar,
+    DatosPersonalesEspecial,
+  },
+};
+</script>
+
+<style></style>
diff --git a/pages/casoEspecial/nuevo/index.vue b/pages/casoEspecial/nuevo/index.vue
index e69de29..6dadb51 100644
--- a/pages/casoEspecial/nuevo/index.vue
+++ b/pages/casoEspecial/nuevo/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="container">
+    <BotonRegresar :path="'/admin'" />
+    <FormularioEspecial />
+  </div>
+</template>
+
+<script>
+import BotonRegresar from "../../../components/botonRegresar";
+import FormularioEspecial from "../../../components/admin/especial/formularioEspecial.vue";
+export default {
+  components: {
+    BotonRegresar,
+    FormularioEspecial,
+  },
+};
+</script>
+
+<style></style>