diff --git a/uniEmpleos/src/components/Header/Header.jsx b/uniEmpleos/src/components/Header/Header.jsx
index 997768c7..1c2f380e 100644
--- a/uniEmpleos/src/components/Header/Header.jsx
+++ b/uniEmpleos/src/components/Header/Header.jsx
@@ -69,9 +69,8 @@ export const Header = () => {
         return (
           <div className="actions">
             <div className="actionlinks">
-              <a href="/profile">Perfil</a>
-              <a href="/profileadmin">Vacantes</a>
-              <a href="/postulantes">Postulantes</a>
+              <a href="/profileadmin">Empresas</a>
+              <a href="/profileadminstudent">Estudiantes</a>
             </div>
             <div className="buttonLogoutMobile" onClick={handleClick}>
               <LuLogOut size={30} style={{ color: "#000" }} />
diff --git a/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css b/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css
index 9efb7010..9ae44a6f 100644
--- a/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css
+++ b/uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css
@@ -23,6 +23,11 @@
     cursor: pointer;
     border-radius: 5px;
     border: 2px solid #ccc;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-height: 2;
 }
 
 .UploaderInput {
diff --git a/uniEmpleos/src/components/InfoStudent/InfoStudent.jsx b/uniEmpleos/src/components/InfoStudent/InfoStudent.jsx
index e7aa5c01..a141469a 100644
--- a/uniEmpleos/src/components/InfoStudent/InfoStudent.jsx
+++ b/uniEmpleos/src/components/InfoStudent/InfoStudent.jsx
@@ -2,7 +2,15 @@ import React from "react"
 import PropTypes from "prop-types"
 import style from "./InfoStudent.module.css"
 
-const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
+const InfoStudent = ({
+  nombre,
+  apellido,
+  universidad,
+  pfp,
+  onClick,
+  showState,
+  state,
+}) => {
   return (
     <div className={style.mainContainer}>
       <button type="button" className={style.button} onClick={onClick}>
@@ -11,7 +19,19 @@ const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
         </div>
         <div className={style.infoContainer}>
           <span className={style.name}>{`${nombre} ${apellido}`}</span>
-          <span className={style.university}>{universidad}</span>
+          {universidad && (
+            <span className={style.university}>{universidad}</span>
+          )}
+          {showState && (
+            <div className={style.stateContainer}>
+              <span>Estado:</span>
+              <span
+                style={state ? { color: "#FF0000" } : { color: "#00FF00" }}
+              >
+                {`${state}`}
+              </span>
+            </div>
+          )}
         </div>
       </button>
     </div>
@@ -21,9 +41,10 @@ const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
 InfoStudent.propTypes = {
   nombre: PropTypes.string.isRequired,
   apellido: PropTypes.string.isRequired,
-  universidad: PropTypes.string.isRequired,
+  universidad: PropTypes.string,
   pfp: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  estado: PropTypes.string,
 }
 
 export default InfoStudent
diff --git a/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css b/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css
index 1f6e6512..544638f1 100644
--- a/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css
+++ b/uniEmpleos/src/components/InfoStudent/InfoStudent.module.css
@@ -5,6 +5,7 @@
   height: 100px;
   padding: 10px;
   animation: aparecer 0.5s ease;
+  justify-content: space-evenly;
 }
 
 @keyframes aparecer {
@@ -20,7 +21,7 @@
 
 .button {
   display: flex;
-  width: 100%;
+  width: calc(100% - 20px);
   height: 100%;
   justify-content: start;
   align-items: center;
@@ -29,7 +30,7 @@
   background-color: #8c6fd454;
   gap: 20px;
   border-radius: 10px;
-  padding: 0;
+  padding: 0 10px;
 }
 
 .button:hover {
@@ -62,7 +63,7 @@
 
 .infoContainer {
   width: calc(75% - 20px);
-  height: 80%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -84,3 +85,24 @@
   color: #333333;
   text-align: left;
 }
+
+.stateContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
+
+@media (max-width: 767px) {
+  .mainContainer {
+    width: calc(100% - 20px);
+    height: 150px;
+  }
+
+  .pfpContainer {
+    width: calc(30% - 20px);
+  }
+
+  .infoContainer {
+    width: calc(70% - 20px);
+  }
+}
diff --git a/uniEmpleos/src/components/InfoTab/InfoTab.jsx b/uniEmpleos/src/components/InfoTab/InfoTab.jsx
index 22a39744..d3ee472a 100644
--- a/uniEmpleos/src/components/InfoTab/InfoTab.jsx
+++ b/uniEmpleos/src/components/InfoTab/InfoTab.jsx
@@ -33,7 +33,7 @@ const InfoTab = ({
       <div className={styles.button}>
         <Button label={labelbutton} onClick={onClick} />
         {verPostulantes && (
-          <Button label="Ver postulantes" onClick={verPostulantes}backgroundColor={"#a08ae5"}/>
+          <Button label="Ver postulantes" onClick={verPostulantes} backgroundColor={"#a08ae5"}/>
         )}
       </div>
     </div>
@@ -42,9 +42,9 @@ const InfoTab = ({
 
 InfoTab.propTypes = {
   title: PropTypes.string.isRequired,
-  area: PropTypes.string.isRequired,
+  area: PropTypes.string,
   salary: PropTypes.string.isRequired,
-  company: PropTypes.string.isRequired,
+  company: PropTypes.string,
   labelbutton: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   verPostulantes: PropTypes.func.isRequired,
diff --git a/uniEmpleos/src/components/Loader/Loader.jsx b/uniEmpleos/src/components/Loader/Loader.jsx
new file mode 100644
index 00000000..d8cd61d3
--- /dev/null
+++ b/uniEmpleos/src/components/Loader/Loader.jsx
@@ -0,0 +1,37 @@
+import React from "react"
+import style from "./Loader.module.css"
+
+const Loader = ({ size }) => {
+  const customStyle = [
+    {
+      "--d": "200ms",
+    },
+    {
+      "--d": "400ms",
+    },
+    {
+      "--d": "600ms",
+    },
+    {
+      "--d": "800ms",
+    },
+    {
+      "--d": "1000ms",
+    },
+  ]
+
+  return (
+    <div
+      className={style.loader}
+      style={{ width: `${size}px`, height: `${size}px` }}
+    >
+      <span className={style.loader__bar} style={customStyle[0]}></span>
+      <span className={style.loader__bar} style={customStyle[1]}></span>
+      <span className={style.loader__bar} style={customStyle[2]}></span>
+      <span className={style.loader__bar} style={customStyle[3]}></span>
+      <span className={style.loader__bar} style={customStyle[4]}></span>
+    </div>
+  )
+}
+
+export default Loader
diff --git a/uniEmpleos/src/components/Loader/Loader.module.css b/uniEmpleos/src/components/Loader/Loader.module.css
new file mode 100644
index 00000000..3b7c6697
--- /dev/null
+++ b/uniEmpleos/src/components/Loader/Loader.module.css
@@ -0,0 +1,35 @@
+.loader {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 5px;
+  margin: 50px;
+}
+
+.loader__bar {
+  display: inline-block;
+  width: 15%;
+  height: 30%;
+  background-color: #000;
+  opacity: .5;
+  border-radius: 10px;
+  animation: scale-up 1000ms
+  var(--d) linear infinite;
+}
+
+.loader__bar:nth-child(even) {
+  height: 70%;
+}
+
+.loader__bar:nth-child(3) {
+  height: 100%;
+}
+
+@keyframes scale-up {
+  25% {
+    opacity: 1;
+    scale: 1 1.5;
+  }
+  50% {
+    scale: 1;
+  }
+}
\ No newline at end of file
diff --git a/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx b/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx
new file mode 100644
index 00000000..27e60849
--- /dev/null
+++ b/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx
@@ -0,0 +1,148 @@
+import react, { useEffect, useState } from "react"
+import useApi from "../../Hooks/useApi"
+import Popup from "../../components/Popup/Popup"
+import style from "./AdminShowPostulationDetails.module.css"
+import Loader from "../../components/Loader/Loader"
+import OfertaInfo from "../../components/ofertaInfo/OfertaInfo"
+import { useQuill } from "react-quilljs"
+import Button from "../../components/Button/Button"
+import { navigate } from "../../store"
+
+const AdminShowPostulationDetails = ({ id }) => {
+  const postulationDetails = useApi()
+  const api = useApi()
+  const [data, setData] = useState(null)
+  const [warning, setWarning] = useState(false)
+  const [error, setError] = useState("")
+  const [typeError, setTypeError] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const { quill, quillRef } = useQuill({
+    readOnly: true, // Establecer el editor Quill en modo de solo lectura
+    modules: {
+      toolbar: false, // Ocultar la barra de herramientas
+    },
+  })
+  const [detalles, setDetalles] = useState("")
+
+  const getPostulationsDetails = async () => {
+    setLoading(true)
+    const datos = await postulationDetails.handleRequest(
+      "POST",
+      "/offers/all",
+      {
+        id_oferta: id,
+      }
+    )
+
+    if (datos.status === 200) {
+      setData(datos.data)
+    } else {
+      setTypeError(1)
+      setError("Ups, algo salio mal al obtener la oferta")
+      setWarning(true)
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    getPostulationsDetails()
+  }, [])
+
+  useEffect(() => {
+    if (data) {
+      const { offer } = data
+      setDetalles(offer.descripcion)
+    }
+  }, [data])
+
+  useEffect(() => {
+    if (quill && detalles) {
+      try {
+        quill.setContents(JSON.parse(detalles))
+      } catch (error) {
+        quill.setText(detalles)
+      }
+    }
+  }, [quill, detalles])
+
+  const onclickAccept = async () => {
+    const variableApi = `/admins/delete/offers?id_oferta=${id}`
+    const apiResponse = await api.handleRequest("DELETE", variableApi)
+    if (apiResponse.status === 200) {
+      setTypeError(3)
+      setError("Oferta eliminada con éxito")
+      setWarning(true)
+      setTimeout(() => {
+        navigate("/profileadmin")
+      }, 5000)
+    } else {
+      setTypeError(1)
+      setError("Upss algo salió mal, intentalo de nuevo")
+      setWarning(true)
+    }
+  }
+
+  const handleReturn = () => {
+    navigate("/profileadmin")
+  }
+
+  return (
+    <div className={style.container}>
+      <Popup
+        message={error}
+        status={warning}
+        style={typeError}
+        close={() => setWarning(false)}
+      />
+      {data && !loading ? (
+        <div className={style.postulacionContainer}>
+          <div className={style.headertittlecontainer}>
+            <div className={style.titleContainer}>
+              <h4>{data.offer.puesto}</h4>
+              <button
+                onClick={onclickAccept}
+                type="button"
+                className={style.deleteButton}
+              >
+                <img src="/images/delete.svg" alt="trash" />
+              </button>
+            </div>
+          </div>
+          <div className={style.dataContainer}>
+            <OfertaInfo img="/images/empresa.svg" label={data.company.nombre} />
+            <OfertaInfo img="/images/email.svg" label={data.company.correo} />
+            <OfertaInfo
+              img="/images/telefono.svg"
+              label={data.company.telefono}
+            />
+            <OfertaInfo
+              img="/images/requisitos.svg"
+              label={data.offer.requisitos}
+            />
+            <OfertaInfo
+              img="/images/salario.svg"
+              label={data.offer.salario.toString()}
+            />
+          </div>
+          <div className={style.label}>
+            Detalles
+            <div ref={quillRef} className={style.Editor} />
+          </div>
+          <div className={style.buttonContainer}>
+            <Button
+              label="Regresar"
+              backgroundColor="transparet"
+              onClick={handleReturn}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className={style.loaderContainer}>
+          <Loader size={100} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AdminShowPostulationDetails
diff --git a/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.module.css b/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.module.css
new file mode 100644
index 00000000..b0c0ce37
--- /dev/null
+++ b/uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.module.css
@@ -0,0 +1,111 @@
+.container {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.postulacionContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 25px;
+  height: calc(100% - 25px);
+  background-color: #f5f5f5;
+  color: #000;
+  padding: 25px;
+}
+
+.titleContainer{
+  width: 80%;
+  background-color: transparent;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+  padding: 15px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 75%;
+  gap: 25px;
+  padding: 25px 0;
+}
+
+.headertittlecontainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+.headertittlecontainer button {
+  background-color: transparent;
+  margin-left: auto;
+}
+
+.headertittlecontainer button:hover, .headertittlecontainer button:focus, .headertittlecontainer button:active {
+  background-color: transparent;
+  border: none;
+}
+
+.headertittlecontainer h4 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  left: calc(50% - 30px);
+}
+
+
+.headertittlecontainer img {
+  width: 30px;
+  height: 30px;
+}
+
+button.icontrash{
+  width: 10px;
+  height: 10px;
+}
+
+.dataContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 20px;
+  width: 75%;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  width: 75%;
+}
+
+.Editor {
+  width: 100%;
+  border: 0 solid #ccc !important;
+}
+
+.imgLabel {
+  width: 30px;
+  height: 30px;
+}
+
+.loaderContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/uniEmpleos/src/pages/AdminStudent/AdminStudent.jsx b/uniEmpleos/src/pages/AdminStudent/AdminStudent.jsx
new file mode 100644
index 00000000..94d512c3
--- /dev/null
+++ b/uniEmpleos/src/pages/AdminStudent/AdminStudent.jsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react"
+import Header from "../../components/Header/Header"
+import style from "./AdminStudent.module.css"
+import InfoStudent from "../../components/InfoStudent/InfoStudent"
+import useApi from "../../Hooks/useApi"
+import Popup from "../../components/Popup/Popup"
+import Loader from "../../components/Loader/Loader"
+import fotoPFP from "/images/pfp.svg"
+import API_URL from "../../api"
+
+const ProfileAdminStudent = () => {
+  const students = useApi()
+  const [studentsData, setStudentsData] = useState([])
+  const [warning, setWarning] = useState(false)
+  const [error, setError] = useState("")
+  const [typeError, setTypeError] = useState(1)
+  const [loading, setLoading] = useState(false)
+
+  const obtainStudents = async () => {
+    setLoading(true)
+    const data = await students.handleRequest("GET", "/admins/students")
+    if (data.status === 200) {
+      setStudentsData(data.data)
+    } else {
+      setTypeError(1)
+      setError("Ups, algo salio mal al obtener los estudiantes")
+      setWarning(true)
+    }
+    setLoading(false)
+  }
+  const handleStudentClick = (e) => {
+    console.log(e)
+  }
+
+  useEffect(() => {
+    obtainStudents()
+  }, [])
+
+  console.log(studentsData.studets)
+  return (
+    <div className={style.mainContainer}>
+      <Header />
+      <Popup
+        message={error}
+        status={warning}
+        style={typeError}
+        close={() => setWarning(false)}
+      />
+      {loading ? (
+        <Loader size={100} />
+      ) : (
+        <div className={style.studentsContainer}>
+          {studentsData.studets ? (
+            studentsData.studets.map((student) => {
+              const pfpUrlEmisor =
+                student.foto === ""
+                  ? "/images/pfp.svg"
+                  : `${API_URL}/api/uploads/${student.foto}`
+              return (
+                <InfoStudent
+                  key={student.id_estudiante}
+                  nombre={student.nombre}
+                  apellido={student.apellido}
+                  pfp={pfpUrlEmisor}
+                  onClick={() => {
+                    handleStudentClick(student.id_estudiante)
+                  }}
+                  showState
+                  state={student.suspendido}
+                />
+              )
+            })
+          ) : (
+            <h1>No hay estudiantes</h1>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProfileAdminStudent
diff --git a/uniEmpleos/src/pages/AdminStudent/AdminStudent.module.css b/uniEmpleos/src/pages/AdminStudent/AdminStudent.module.css
new file mode 100644
index 00000000..9d9651ab
--- /dev/null
+++ b/uniEmpleos/src/pages/AdminStudent/AdminStudent.module.css
@@ -0,0 +1,10 @@
+
+
+
+.studentsContainer {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
diff --git a/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx b/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx
index 7383b7f7..ba963268 100644
--- a/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx
+++ b/uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx
@@ -8,6 +8,7 @@ import { Header } from "../../components/Header/Header"
 import { navigate } from "../../store"
 import API_URL from "../../api"
 import fotoPFP from "/images/pfp.svg"
+import Loader from "../../components/Loader/Loader"
 
 const PostulantesPage = ({ id }) => {
   const api = useApi()
@@ -15,8 +16,12 @@ const PostulantesPage = ({ id }) => {
   const [warning, setWarning] = useState(false)
   const [error, setError] = useState("")
   const [typeError, setTypeError] = useState(1)
+  const [loading, setLoading] = useState(false)
+
+  console.log(id)
 
   const obtainPostulantes = async () => {
+    setLoading(true)
     const datos = await api.handleRequest("POST", "/offers/applicants", {
       id_oferta: parseInt(id, 10),
     })
@@ -27,6 +32,7 @@ const PostulantesPage = ({ id }) => {
       setError("Error al obtener los postulantes")
       setWarning(true)
     }
+    setLoading(false)
   }
 
   useEffect(() => {
@@ -47,25 +53,30 @@ const PostulantesPage = ({ id }) => {
         close={() => setWarning(false)}
       />
       <h1>Postulantes</h1>
-      <div className={style.infoStudentContainer}>
-        {response.data ? (
-          response.data.map((postulante) => (
-            <InfoStudent
-              nombre={postulante.nombre}
-              apellido={postulante.apellido}
-              universidad={postulante.universidad}
-              pfp={
-                postulante.foto === ""
-                  ? fotoPFP
-                  : `${API_URL}/api/uploads/${postulante.foto}`
-              }
-              onClick={() => handleClickUsuario(postulante.id_estudiante)}
-            />
-          ))
-        ) : (
-          <span className={style.sinPostulantes}>No hay postulantes</span>
-        )}
-      </div>
+      {loading ? (
+        <Loader size={100} />
+      ) : (
+        <div className={style.infoStudentContainer}>
+          {response.data ? (
+            response.data.map((postulante) => (
+              <InfoStudent
+                key={postulante.id_estudiante}
+                nombre={postulante.nombre}
+                apellido={postulante.apellido}
+                universidad={postulante.universidad}
+                pfp={
+                  postulante.foto === ""
+                    ? fotoPFP
+                    : `${API_URL}/api/uploads/${postulante.foto}`
+                }
+                onClick={() => handleClickUsuario(postulante.id_estudiante)}
+              />
+            ))
+          ) : (
+            <span className={style.sinPostulantes}>No hay postulantes</span>
+          )}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx b/uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx
index 1528184f..d6768061 100644
--- a/uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx
+++ b/uniEmpleos/src/pages/PostulationsEmpresa/PostulationsEmpresa.jsx
@@ -8,6 +8,7 @@ import { Header } from "../../components/Header/Header"
 import { navigate } from "../../store"
 import useApi from "../../Hooks/useApi"
 import Popup from "../../components/Popup/Popup"
+import Loader from "../../components/Loader/Loader"
 
 const schema = Joi.object({
   token: Joi.string().required(),
@@ -30,15 +31,18 @@ const PostulationsEmpresa = () => {
   const [warning, setWarning] = useState(false)
   const [error, setError] = useState("")
   const [typeError, setTypeError] = useState(1)
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     if (api.data) {
       const { offers } = api.data
       setData(offers)
     }
+    setLoading(false)
   }, [api.data])
 
   useEffect(() => {
+    setLoading(true)
     api.handleRequest("POST", "/offers/company", {
       id_empresa: user.id_user,
     })
@@ -72,17 +76,20 @@ const PostulationsEmpresa = () => {
 
   return (
     <div className={styles.containePostulation}>
-      <Header userperson="company" />
+      <Header />
       <Popup
         message={error}
         status={warning}
         style={typeError}
         close={() => setWarning(false)}
       />
-      {api.data ? (
+      {loading ? (
+        <Loader size={100} />
+      ) : dataa.length > 0 ? (
         <div className={styles.containerinfoprincipal}>
           {dataa.map((postulation) => (
             <InfoTab
+              key={postulation.id_oferta}
               title={postulation.puesto}
               area={postulation.nombre_carreras}
               salary={`Q.${postulation.salario}.00`}
@@ -99,7 +106,7 @@ const PostulationsEmpresa = () => {
         </div>
       ) : (
         <div className={styles.containerinfomain}>
-          <h1>No tiene niguna oferta activa</h1>
+          <h1 style={{color: "#000"}}>No tiene niguna oferta activa</h1>
         </div>
       )}
     </div>
diff --git a/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.jsx b/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.jsx
index 81043912..d05d8f3e 100644
--- a/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.jsx
+++ b/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.jsx
@@ -9,6 +9,7 @@ import { Header } from "../../components/Header/Header"
 import { navigate } from "../../store"
 import useApi from "../../Hooks/useApi"
 import Popup from "../../components/Popup/Popup"
+import Loader from "../../components/Loader/Loader"
 
 const schema = Joi.object({
   token: Joi.string().required(),
@@ -25,12 +26,15 @@ const PrincipalAdmin = () => {
 
   const { user } = useStoreon("user")
   const api = useApi()
+  const obtainPostulantes = useApi()
   const [dataa, setData] = useState([])
   const [warning, setWarning] = useState(false)
   const [error, setError] = useState("")
   const [typeError, setTypeError] = useState(1)
+  const [loading, setLoading] = useState(false)
 
   const obtenerPreviews = async () => {
+    setLoading(true)
     const datos = await api.handleRequest("GET", "/postulations/previews", {
       id_empresa: user.id_user,
     })
@@ -47,6 +51,29 @@ const PrincipalAdmin = () => {
       setError("Ups, algo salio mal al obtener las ofertas")
       setWarning(true)
     }
+    setLoading(false)
+  }
+
+  const handleVerPostulantes = async (id) => {
+    const datos = await obtainPostulantes.handleRequest(
+      "POST",
+      "/offers/applicants",
+      {
+        id_oferta: parseInt(id, 10),
+      }
+    )
+    console.log(datos)
+    if (datos.data) {
+      navigate(`/postulantes/${id}`)
+    } else {
+      setTypeError(2)
+      setError("La oferta no tiene postulantes")
+      setWarning(true)
+    }
+  }
+
+  const hadleVerMas = (id) => {
+    navigate(`/adminSPD/${id}`)
   }
 
   useEffect(() => {
@@ -54,7 +81,7 @@ const PrincipalAdmin = () => {
   }, [])
 
   return (
-    <div className={styles.containePostulation}>
+    <div className={styles.mainContainer}>
       <Header userperson="company" />
       <Popup
         message={error}
@@ -62,7 +89,11 @@ const PrincipalAdmin = () => {
         style={typeError}
         close={() => setWarning(false)}
       />
-      {api.data ? (
+      {loading ? (
+        <div className={styles.loadingContainer}>
+          <Loader size={100} />
+        </div>
+      ) : api.data ? (
         <div className={styles.containerinfoprincipal}>
           {dataa.map((postulation) => (
             <InfoTab
@@ -71,6 +102,12 @@ const PrincipalAdmin = () => {
               salary={`Q.${postulation.salario}.00`}
               company={postulation.nombre_empresa}
               labelbutton="Ver más"
+              onClick={() => {
+                hadleVerMas(postulation.id_oferta)
+              }}
+              verPostulantes={() => {
+                handleVerPostulantes(postulation.id_oferta)
+              }}
             />
           ))}
         </div>
diff --git a/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.module.css b/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.module.css
index 3ee94140..3957bb5e 100644
--- a/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.module.css
+++ b/uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.module.css
@@ -7,6 +7,13 @@
     padding: 10px;
 }
 
+.loadingContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
 @media screen and (max-width: 768px){
     .containerinfoprincipal{
         justify-content: center;
diff --git a/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.jsx b/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.jsx
index 46c3749a..f6b892eb 100644
--- a/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.jsx
+++ b/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.jsx
@@ -7,6 +7,7 @@ import { Header } from "../../components/Header/Header"
 import useConfig from "../../Hooks/Useconfig"
 import API_URL from "../../api"
 import useApi from "../../Hooks/useApi"
+import Loader from "../../components/Loader/Loader"
 
 const schema = Joi.object({
   token: Joi.string().required(),
@@ -21,6 +22,7 @@ const PrincipalStudent = () => {
   const [carrera, setCarrera] = useState("")
   const [postulaciones, setPostulaciones] = useState([])
   const [ofertasAMostrar, setOfertasAMostrar] = useState([])
+  const [loading, setLoading] = useState(false)
 
   const form = useConfig(schema, {
     token: "a",
@@ -31,6 +33,7 @@ const PrincipalStudent = () => {
   const [dataa, setData] = useState([])
 
   const configureData = async () => {
+    setLoading(true)
     const response = await fetch(`${API_URL}/api/postulations/previews`, {
       method: "GET",
       headers: {
@@ -92,18 +95,21 @@ const PrincipalStudent = () => {
       }
     })
     setOfertasAMostrar(ofertas)
+    setLoading(false)
   }
 
   useEffect(() => {
     if (dataa.status === 200) {
       handleOfertasAMostrar()
     }
-  }, [dataa.data, carrera])
+  }, [dataa.data, carrera, postulaciones])
 
   return (
     <div className={styles.container}>
       <Header userperson="student" />
-      {dataa.status === 200 && ofertasAMostrar.length > 0 ? (
+      {loading ? (
+        <div className={styles.loaderContainer}><Loader size={100} /></div>
+      ) : dataa.status === 200 && ofertasAMostrar.length > 0 ? (
         <div className={styles.containerinfomain}>
           {ofertasAMostrar.map((postulation) => (
             <InfoTab
diff --git a/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.module.css b/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.module.css
index 8f5619aa..42d08356 100644
--- a/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.module.css
+++ b/uniEmpleos/src/pages/PrincipalStudent/PrincipalStudent.module.css
@@ -8,4 +8,11 @@
 
 .container{
     width: 100%;
+}
+
+.loaderContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/uniEmpleos/src/pages/index.jsx b/uniEmpleos/src/pages/index.jsx
index fc5c5d75..df13005b 100644
--- a/uniEmpleos/src/pages/index.jsx
+++ b/uniEmpleos/src/pages/index.jsx
@@ -19,6 +19,8 @@ import OfferDetails from "./OfferDetails/OfferDetails"
 import PostulantesPage from "./PostulantesPage/PostulantesPage"
 import PublicProfile from "./PublicProfile/PublicProfile"
 import PrincipalAdmin from "./PricipalAdmin/PrincipalAdmin"
+import AdminShowPostulationDetails from "./AdminShowPostulationDetails/AdminShowPostulationDetails"
+import ProfileAdminStudent from "./AdminStudent/AdminStudent"
 
 const Page = () => {
   const { [routerKey]: route } = useStoreon(routerKey)
@@ -79,6 +81,12 @@ const Page = () => {
     case "publicprofile":
       Component = <PublicProfile correo={route.match.props.correo} />
       break
+    case "adminShowPostulationDetails":
+      Component = <AdminShowPostulationDetails id={route.match.props.id} />
+      break
+    case "adminStudent":
+      Component = <ProfileAdminStudent />
+      break
     default:
       Component = <h1>404 Error</h1>
   }
diff --git a/uniEmpleos/src/store/router.js b/uniEmpleos/src/store/router.js
index 17b25c98..04659bba 100644
--- a/uniEmpleos/src/store/router.js
+++ b/uniEmpleos/src/store/router.js
@@ -26,4 +26,9 @@ export default createRouter([
     "/publicprofile/*",
     (correo) => ({ page: "publicprofile", props: { correo } }),
   ],
+  [
+    "/adminSPD/*",
+    (id) => ({ page: "adminShowPostulationDetails", props: { id } }),
+  ],
+  ["/profileadminstudent", () => ({ page: "adminStudent" })],
 ])