diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index adbdd3f4af79dd93356bfe10a13f8ff162fc176f..0ad6f47c9010c80a35a1978efab3673b302d6e7d 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -3,12 +3,16 @@ import {PaginaHead} from "@/components/common/utility/PaginaHead";
 import {Autenticador} from "@/components/common/utility/Autenticador";
 import {LoginRequiredRoutes} from "@/components/common/utility/LoginRequiredRoutes"
 import "./App.css";
+import PageLoader from '@/components/common/ui/PageLoader';
 
 import { AuthPage } from "./components/users/AuthPage";
 import Inicio from "./components/users/Inicio";
+import { useState } from 'react';
 
 
 function App() {
+  const [viewPageLoader, setViewPageLoader] = useState(false);
+
   return (    
     <BrowserRouter>
       <PaginaHead>
@@ -16,12 +20,16 @@ function App() {
         <link rel="icon" href="http://localhost:8000/static/images/cosiap_favicon.png" />
         <link rel="stylesheet" href="http://localhost:8000/static/css/colores.css" />
       </PaginaHead>
+
+      {
+        viewPageLoader && <PageLoader />
+      }
       
       <Autenticador>
         <Routes>
           {/* Rutas publicas */}
           <Route path="/" element={<Navigate to="/auth" />} />
-          <Route path="/auth" element={<AuthPage/>} />
+          <Route path="/auth" element={<AuthPage setViewPageLoader={setViewPageLoader}/>} />
 
           {/* Rutas protegidas */}
           <Route element={<LoginRequiredRoutes />}>
diff --git a/cosiap_frontend/src/components/common/base/FormInput.jsx b/cosiap_frontend/src/components/common/base/FormInput.jsx
index 00adf8963f26d85ff47f065fdcdf3eedbe5e8c90..d0ad401e30b12d7792ac55035d5c53ccb8db0691 100644
--- a/cosiap_frontend/src/components/common/base/FormInput.jsx
+++ b/cosiap_frontend/src/components/common/base/FormInput.jsx
@@ -24,7 +24,7 @@ FormInput.propTypes = {
     type: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     className: PropTypes.string,
-    onChange: PropTypes.string,
+    onChange: PropTypes.func,
     register: PropTypes.func.isRequired,
     errors: PropTypes.oneOfType([
         PropTypes.object,
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
index 99c83437b3bd6769b9bbb3bb36f4188440349de8..8523ff457fc088d9274b2766576bbfc3e372029e 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
@@ -1,8 +1,10 @@
 
 export default function LayoutBaseAuthenticator({title, children}) {
     return (
+        <>
         <div className="min-h-screen bg-white relative flex items-center justify-center">
-            <div className="flex w-full min-h-screen">
+            
+            <div className="flex w-full min-h-screen ">
                 <div className="bg-[var(--principal-mf)] w-full sm:w-8/12 min-h-screen">
                 
                 </div>
@@ -14,6 +16,7 @@ export default function LayoutBaseAuthenticator({title, children}) {
                     
                 </div>
             </div>
+            
             {/* Contenido de authentication */}
             <div className="absolute inset-0 flex items-center justify-center">
             <div
@@ -34,11 +37,12 @@ export default function LayoutBaseAuthenticator({title, children}) {
                             {title}
                         </h1>
                     </div>
-
+                    
                     {children}
                 </div>
                 
             </div>
         </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/ui/PageLoader.jsx b/cosiap_frontend/src/components/common/ui/PageLoader.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..62f2b86fec635e0417baa0a9c218ef3f65b2f4b7
--- /dev/null
+++ b/cosiap_frontend/src/components/common/ui/PageLoader.jsx
@@ -0,0 +1,8 @@
+
+export default function PageLoader() {
+    return (
+        <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-400 bg-opacity-55">
+            <div className="border-white h-20 w-20 animate-spin rounded-full border-8 border-t-[var(--principal-f)]"/>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/AuthPage.jsx b/cosiap_frontend/src/components/users/AuthPage.jsx
index 75bbf61aa25dfada2ef84590ebb79121f36c5a0f..5a1913d622f0c667152524dd85b3549eb88605aa 100644
--- a/cosiap_frontend/src/components/users/AuthPage.jsx
+++ b/cosiap_frontend/src/components/users/AuthPage.jsx
@@ -3,15 +3,15 @@ import { Login } from "./Login/Login";
 import Register from './Register/Register';
 import { useState } from 'react';
 
-export function AuthPage() {
+export function AuthPage( {setViewPageLoader} ) {
     const [component, setComponent] = useState('Login')
 
     const renderPage = () => {
         switch (component) {
             case 'Login':
-              return <Login setComponent={setComponent}/>;
+              return <Login setComponent={setComponent} setViewPageLoader={setViewPageLoader}/>;
             case 'Register':
-                return <Register setComponent={setComponent} />;
+                return <Register setComponent={setComponent} setViewPageLoader={setViewPageLoader}/>;
             // case 'resetPassword':
             //   return <ResetPassword setView={setView} />;
             default:
@@ -20,10 +20,13 @@ export function AuthPage() {
     }
 
     return (
+        <>
+
         <LayoutBaseAuthenticator
             title = {component === 'Login' ? "Inicio de sesión" : component ===  'Register' ? "Registrarse" : "Recuperar contraseña"}
         >
             {renderPage()}
         </LayoutBaseAuthenticator>
+        </>
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Login/Login.jsx b/cosiap_frontend/src/components/users/Login/Login.jsx
index da4d585bbec15e8edf1227bbc9ad34ebd8373e6f..b59eea06df739fe53260d9f3af5f604053d3a716 100644
--- a/cosiap_frontend/src/components/users/Login/Login.jsx
+++ b/cosiap_frontend/src/components/users/Login/Login.jsx
@@ -1,10 +1,10 @@
 
 import { LoginForm } from './LoginForm';
 
-export function Login( {setComponent} ) {
+export function Login( {setComponent, setViewPageLoader} ) {
     return (
         <>
-            <LoginForm />
+            <LoginForm setViewPageLoader={setViewPageLoader}/>
             <p className="uppercase mt-5 scroll-mt-10 text-center text-sm text-gray-500">
                 ¿Haz olvidado tu contraseña?
             </p>
diff --git a/cosiap_frontend/src/components/users/Login/LoginForm.jsx b/cosiap_frontend/src/components/users/Login/LoginForm.jsx
index a3344bbc0ff323a870e18bbcc7e4561c1bfff9e2..d81f83c3e41be3c07df0f465ed58fd4ee96dd210 100644
--- a/cosiap_frontend/src/components/users/Login/LoginForm.jsx
+++ b/cosiap_frontend/src/components/users/Login/LoginForm.jsx
@@ -18,7 +18,7 @@ const validationSchema = Yup.object({
     password: Yup.string().required("Requerido"),
 });
 
-export function LoginForm() {
+export function LoginForm( {setViewPageLoader} ) {
     const [loginError, setLoginError] = useState('')
     const navigate = useNavigate();
     const { setToken } = useAutenticacion();
@@ -32,6 +32,7 @@ export function LoginForm() {
     
     
     const onSubmit = async (data) => {
+        setViewPageLoader(true)
         try {
             const response = await api.usuarios.token.login(data);
             console.log("Login successful:", response.data);    
@@ -41,6 +42,7 @@ export function LoginForm() {
             console.error("Login failed:", error);
             setLoginError(error.response.data.detail)
         }
+        setViewPageLoader(false)
     };
 
     return (
diff --git a/cosiap_frontend/src/components/users/Register/Register.jsx b/cosiap_frontend/src/components/users/Register/Register.jsx
index 9b6b4cb44f6b3f681be4a2232cd20a621f9386c7..e343e9a37e68dfc61ceed895420000422f7448df 100644
--- a/cosiap_frontend/src/components/users/Register/Register.jsx
+++ b/cosiap_frontend/src/components/users/Register/Register.jsx
@@ -1,14 +1,14 @@
 import { useState } from "react";
 import RegisterForm from "./RegisterForm";
 
-export default function Register( {setComponent} ) {
+export default function Register( {setComponent, setViewPageLoader} ) {
     const [sentEmail, setSentEmail] = useState(false);
     return (
         <>
             {
                 !sentEmail ? (
                     <>
-                        <RegisterForm setSentEmail={setSentEmail} />
+                        <RegisterForm setSentEmail={setSentEmail} setViewPageLoader={setViewPageLoader}/>
                         <p className="uppercase cursor-pointer no-underline hover:underline mt-2 text-center text-sm text-principal_mf" onClick={() => setComponent('Login')}>
                             Iniciar sesión
                         </p>
diff --git a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
index 7cd781fb85022ae9766427b19eea7c15f1d0a926..017fddff712d599be51ac66fab5fdb674addbfba 100644
--- a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
+++ b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
@@ -25,7 +25,7 @@ const validationSchema = Yup.object({
         .oneOf([Yup.ref('password'), null], 'Las contraseñas no coinciden')
 });
 
-export default function RegisterForm( {setSentEmail} ) {
+export default function RegisterForm( {setSentEmail, setViewPageLoader} ) {
     const [registerErrorMessage, setRegisterErrorMessage] = useState('');
     const {
         register,
@@ -36,6 +36,7 @@ export default function RegisterForm( {setSentEmail} ) {
     });
 
     const handleFormSubmission = async (data) => {
+        setViewPageLoader(true);
         try {
           const response = await api.usuarios.post(data);
           console.log("Registration successful:", response.data);
@@ -45,6 +46,7 @@ export default function RegisterForm( {setSentEmail} ) {
           console.log(error.response.data.detail);
           setRegisterErrorMessage(error.response.data);
         }
+        setViewPageLoader(false);
       };
 
     return (