diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index c67632999412e9d184856c3962abaec872d37473..feef957305f3729d61a38362d2e199c61c00a1e0 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -9,6 +9,7 @@ import Register from './components/users/Register/Register';
 import ResetPassword from './components/users/Password/ResetPassword';
 import Inicio from "./components/users/Inicio";
 import { useState } from 'react';
+import LayoutBaseAuthenticator from './components/common/layouts/LayoutBaseAuthenticator';
 
 
 function App() {
@@ -28,17 +29,20 @@ function App() {
       
       <Autenticador>
         <Routes>
-          {/* Rutas publicas */}
-          <Route path="/" element={<Navigate to="/authentication" />} />
-          <Route path="/authentication" element={<Login setViewPageLoader={setViewPageLoader}/>} />
-          <Route path="/authentication/register" element={<Register setViewPageLoader={setViewPageLoader}/>} />
-          <Route path="/authentication/reset_password" element={<ResetPassword setViewPageLoader={setViewPageLoader}/>} />
+          {/* Rutas públicas */}
+
+          {/* Componente del layout */}
+          <Route element={<LayoutBaseAuthenticator />}>
+            {/* Componentes hijos del layout autenticador */}
+            <Route path="/" element={<Navigate to="/authentication" />} />
+            <Route path="/authentication" element={<Login setViewPageLoader={setViewPageLoader} />} />
+            <Route path="/authentication/register" element={<Register setViewPageLoader={setViewPageLoader} />} />
+            <Route path="/authentication/reset_password" element={<ResetPassword setViewPageLoader={setViewPageLoader} />} />
+          </Route>
 
           {/* Rutas protegidas */}
           <Route element={<LoginRequiredRoutes />}>
-
             <Route path="/inicio" element={<Inicio />} />
-
           </Route>
         </Routes>
       </Autenticador>
diff --git a/cosiap_frontend/src/components/Inicio.jsx b/cosiap_frontend/src/components/Inicio.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..16cacd1ea86cbfb92e04ac975d25cf57c0bfd76c
--- /dev/null
+++ b/cosiap_frontend/src/components/Inicio.jsx
@@ -0,0 +1,10 @@
+
+export default function Inicio() {
+  
+
+  return (
+    <>
+      
+    </>
+  );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
index 6ea0ecfaa857e618b3f1456fcda510882e4242b7..008eab3a4a8d424418c1f85f5412e95579688023 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
@@ -1,5 +1,17 @@
+import { useLocation, Outlet } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+export default function LayoutBaseAuthenticator({children}) {
+
+    // Contiene la informacion de la url actual
+    const location = useLocation();
+    
+    const [sectionURL, setSectionURL] = useState("");
+
+    useEffect(() => {
+        setSectionURL(location.pathname.split('/').filter(Boolean).pop());
+    }, [location]); // Si location cambia, se ejecutara el useEffect
 
-export default function LayoutBaseAuthenticator({title, children}) {
     return (
         <>
         <div className="min-h-screen bg-white relative flex items-center justify-center">
@@ -34,11 +46,16 @@ export default function LayoutBaseAuthenticator({title, children}) {
                         <h1
                             className="uppercase mt-10 text-center font-semibold text-3xl text-[var(--principal-mf)]"
                         >
-                            {title}
+                            {/* Dependiendo de la url es el titulo de la sección */}
+                            { sectionURL === 'authentication' ? 'Iniciar sesión' : (
+                                sectionURL === 'register' ? 'Registrarse' : (
+                                    sectionURL === 'reset_password' ? 'Restablecer contraseña' : ''
+                                )
+                            ) }
                         </h1>
                     </div>
                     
-                    {children}
+                    <Outlet /> {/* Renderiza los componentes hijos */}
                 </div>
                 
             </div>
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1c1cae11ce353f3e08178810849368277d8c4988
--- /dev/null
+++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx
@@ -0,0 +1,129 @@
+import { useState, useEffect, useRef } from "react";
+import { useLocation, Outlet } from "react-router-dom";
+import Navbar from "@/components/common/layouts/LayoutsNavigation/Navbar/Navbar";
+import Sidebar from "@/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar";
+import SettingsToggle from "@/components/common/layouts/LayoutsNavigation/SettingsToggle";
+import Settings from "@/components/common/layouts/LayoutsNavigation/Settings";
+
+
+const linksItemsSolicitante = [
+  {
+    nameIcon: 'library_books',
+    nameItem: 'Modalidades',
+    navigate: '/modalidades',
+    isSelected: false
+  },
+  {
+    nameIcon: 'history',
+    nameItem: 'Historial',
+    navigate: '/historial',
+    isSelected: false
+  },
+  {
+    nameIcon: 'mark_as_unread',
+    nameItem: 'Recepción de ayuda',
+    navigate: '/recepcion_ayuda',
+    isSelected: false
+  },
+  {
+    nameIcon: 'help',
+    nameItem: 'Ayuda',
+    isSelected: false,
+    subMenu: [
+      {
+        nameItem: 'Manual',
+        isSelected: false,
+        navigate: '/ayuda/manual',
+      }
+    ]
+  },
+  {
+    nameIcon: 'account_circle',
+    nameItem: 'Perfil',
+    navigate: '/perfil',
+    isSelected: false
+  }
+];
+
+export default function LayoutBaseNavigation() {
+  const [viewMenu, setViewMenu] = useState(false);
+  const [selectedNav, setSelectedNav] = useState("vertical");
+  const [viewSettings, setViewSettings] = useState(false);
+  const [links, setLinks] = useState([...linksItemsSolicitante]);
+
+  const settingsRef = useRef();
+  const settingsToggleRef = useRef();
+
+  const location = useLocation();
+  const [sectionURL, setSectionURL] = useState("");
+
+  useEffect(() => {
+    setSectionURL(location.pathname.split('/').filter(Boolean).pop());
+  }, [location]);
+
+  useEffect(() => {
+    const updatedLinks = links.map(link => {
+      // Verificación directa basada en 'nameItem' y 'navigate'
+      const isSelected = link.nameItem.toLowerCase() === sectionURL.toLowerCase() ||
+                         link.navigate?.split('/').pop().toLowerCase() === sectionURL.toLowerCase();
+
+      // Actualizar submenú si existe
+      const updatedSubMenu = link.subMenu?.map(sub => ({
+        ...sub,
+        isSelected: sub.nameItem.toLowerCase() === sectionURL.toLowerCase() ||
+                    sub.navigate?.split('/').pop().toLowerCase() === sectionURL.toLowerCase()
+      }));
+
+      // Marcar padre si algún subelemento está seleccionado
+      const isParentSelected = updatedSubMenu?.some(sub => sub.isSelected);
+
+      return {
+        ...link,
+        isSelected: isSelected || isParentSelected,
+        ...(updatedSubMenu && { subMenu: updatedSubMenu })
+      };
+    });
+
+    setLinks(updatedLinks);
+  }, [sectionURL]);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (settingsRef.current && !settingsRef.current.contains(event.target) &&
+          settingsToggleRef.current && !settingsToggleRef.current.contains(event.target)) {
+        setViewSettings(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="static min-h-screen bg-[#C6C4C4] overflow-x-hidden">
+      {selectedNav === 'horizontal' && (
+        <Navbar linksItems={links} viewMenu={viewMenu} setViewMenu={setViewMenu}/>
+      )}
+      {selectedNav === 'vertical' && (
+        <Sidebar linksItems={links} viewMenu={viewMenu} setViewMenu={setViewMenu}/>
+      )}
+
+      <div className={`w-full h-full ${selectedNav === 'vertical' ? 'lg:ml-[17.3%]' : ''}`}>
+        <div 
+          className="absolute flex cursor-pointer h-10 w-10 right-0 bg-[var(--principal-c)] border-y-4 border-l-4 border-[var(--principal-mf)]  rounded-s-3xl mt-2"
+          onClick={() => setViewSettings(!viewSettings)}
+        >
+          <SettingsToggle settingsToggleRef={settingsToggleRef} />
+        </div>
+        {viewSettings && (
+          <Settings settingsRef={settingsRef} selectedNav={selectedNav} setSelectedNav={setSelectedNav}/>
+        )}
+
+        <div className={`h-full ${selectedNav === 'vertical' ? 'lg:max-w-[82.7%]' : 'w-full'}`}>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx
index fd5ac5362d5206ad2f194df781b816fb58f23edf..c0f41073d52c57ce0f3447a7c71ca08aaff26b92 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx
@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function MobileMenu({ menuRef, linksItems }) {
+    const navigate = useNavigate();
+
     // useState para manejar la visibilidad del submenú de "Ayuda"
     const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false);
 
@@ -15,8 +18,8 @@ export default function MobileMenu({ menuRef, linksItems }) {
                             linksItems.map((item) => (
                                 <>
                                     {/* Enlace principal de cada ítem del menú */}
-                                    <a key={item.nameItem} href="#"
-                                        className={`flex space-x-3 rounded-md px-3 py-2 text-base font-semibold 
+                                    <a key={item.nameItem}
+                                        className={`cursor-pointer flex space-x-3 rounded-md px-3 py-2 text-base font-semibold 
                                             ${item.isSelected || (viewSubMenuHelp && item.nameItem === 'Ayuda') 
                                                 ? 'bg-[--principal-mf] text-white' 
                                                 : 'text-[var(--principal-mf)] hover:bg-[--principal-mf] hover:text-white'}`}
@@ -24,6 +27,8 @@ export default function MobileMenu({ menuRef, linksItems }) {
                                             // Si el ítem es "Ayuda", alterna la visibilidad del submenú
                                             if (item.nameItem === 'Ayuda') {
                                                 setViewSubMenuHelp(!viewSubMenuHelp);
+                                            }else{
+                                                navigate(item.navigate);
                                             }
                                         }}
                                     >
@@ -72,13 +77,17 @@ export default function MobileMenu({ menuRef, linksItems }) {
 
 // Componente para renderizar el submenú de "Ayuda"
 function SubMenuAyuda({ viewSubMenuHelp, items }) {
+    const navigate = useNavigate();
+    
     return (
         // Si el submenú está visible, mapea sus ítems para generar enlaces
         viewSubMenuHelp && (
             items.map((item) => (
                 <a key={item.nameItem} href="#" className={`ml-8 flex space-x-3 px-3 py-1 text-base font-semibold 
-                    ${item.isSelected ? 'text-[var(--principal-mf)] border-l-4 border-[var(--principal-f)]' 
-                                      : 'hover:text-[var(--principal-mf)] hover:border-l-4 hover:border-[var(--principal-f)]'}`}>
+                    ${item.isSelected ? 'cursor-pointer text-[var(--principal-mf)] border-l-4 border-[var(--principal-f)]' 
+                                      : 'cursor-pointer hover:text-[var(--principal-mf)] hover:border-l-4 hover:border-[var(--principal-f)]'}`}
+                    onClick={() => navigate(item.navigate)}
+                    >
                     <span>
                         {item.nameItem} {/* Nombre del ítem del submenú */}
                     </span>
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx
index f78b21a92e3ad8cf0be3efbfef52270bd459c87c..72c3dffb1baa3d3546dd7fd079d6dd82e8f16b68 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx
@@ -1,9 +1,15 @@
+import { useNavigate } from "react-router-dom";
+
+
 export default function NavbarBrand() {
+  const navigate = useNavigate();
+
     return (
         <>
             {/* Contenedor del texto "COSIAP" */}
             <div className="m-2 lg:m-auto lg:z-20 flex lg:fixed lg:h-16 lg:w-60 items-center lg:rounded-br-full lg:bg-[#E1E1E1]">
-                <div className="flex px-2 lg:ml-2 lg:mr-10 items-center">
+                <div className=" cursor-pointer flex px-2 lg:ml-2 lg:mr-10 items-center"
+                  onClick={() => navigate('/inicio')}>
                   <img src="http://localhost:8000/static/images/cosiap_favicon.png" className="w-9 h-9 mr-2"/>
                   <div className="text-[var(--principal-mf)] text-4xl font-extrabold">
                     cosiap
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx
index ddbef7d2e8d78ac73e5f59e4d6124429965d7b4d..0e70a2a99adf2a4fe0351bc12253fb577ea8ca31 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx
@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function NavbarLinks({ linksItems, notificationsToggle }) {
+    const navigate = useNavigate();
     // Estado para controlar la visibilidad del submenú de ayuda
     const [viewMenuHelp, setViewMenuHelp] = useState(false);
 
@@ -39,16 +41,17 @@ export default function NavbarLinks({ linksItems, notificationsToggle }) {
                             linksItems ? (
                                 linksItems.map((item, key) => (
                                     <div key={item.nameItem} className="flex items-center">
-                                        <a 
-                                            href="#" 
+                                        <a
                                             ref={item.nameItem === 'Ayuda' ? buttonHelpRef : null}
                                             className={item.isSelected || (item.nameItem === 'Ayuda' && viewMenuHelp) 
-                                                ? "px-4 py-2 text-base font-semibold border-b-2 border-[var(--principal-mf)] text-[var(--principal-mf)] flex items-center space-x-2 group"
-                                                : "px-4 py-2 text-base font-semibold text-gray-600 hover:border-b-2 hover:border-[var(--principal-mf)] hover:text-[var(--principal-mf)] flex items-center space-x-2 group"}
+                                                ? "cursor-pointer px-4 py-2 text-base font-semibold border-b-2 border-[var(--principal-mf)] text-[var(--principal-mf)] flex items-center space-x-2 group"
+                                                : "cursor-pointer px-4 py-2 text-base font-semibold text-gray-600 hover:border-b-2 hover:border-[var(--principal-mf)] hover:text-[var(--principal-mf)] flex items-center space-x-2 group"}
                                             onClick={() => {
                                                 // Al hacer clic en 'Ayuda', alternar la visibilidad del submenú
                                                 if (item.nameItem === 'Ayuda') {
                                                     setViewMenuHelp(!viewMenuHelp);
+                                                }else{
+                                                    navigate(item.navigate)
                                                 }
                                             }}
                                         >
@@ -90,10 +93,10 @@ export default function NavbarLinks({ linksItems, notificationsToggle }) {
                             // Verifica si 'Ayuda' tiene un submenú y lo renderiza
                             linksItems.find(item => item.nameItem === 'Ayuda').subMenu ? (
                                 linksItems.find(item => item.nameItem === 'Ayuda').subMenu.map((subItem, key) => (
-                                    <div key={key} className={`mb-2 ${subItem.isSelected ? "border-l-2 border-[var(--principal-f)] " : "hover:border-l-4 hover:border-[var(--principal-f)] "}`}>
+                                    <div key={key} className={`mb-2 ${subItem.isSelected ? "border-l-4 border-[var(--principal-f)] " : "hover:border-l-4 hover:border-[var(--principal-f)] "}`}>
                                         <a
-                                            href="#"
-                                            className={subItem.isSelected ? "block px-4 py-2 text-sm font-semibold text-[var(--principal-mf)]" : "block px-4 py-2 text-sm hover:font-semibold text-gray-700 hover:text-[var(--principal-mf)]"}
+                                            className={subItem.isSelected ? "cursor-pointer block px-4 py-2 text-sm font-semibold text-[var(--principal-mf)]" : "cursor-pointer block px-4 py-2 text-sm hover:font-semibold text-gray-700 hover:text-[var(--principal-mf)]"}
+                                            onClick={() => navigate(subItem.navigate)}
                                         >
                                             {subItem.nameItem}
                                         </a>
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx
index a8e39f9512aa47a1f3aaad03a2be842b7c406928..44c4898db5991cff77f8c1bacbcdfb67ee4f6516 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx
@@ -9,19 +9,19 @@ export default function Settings( {settingsRef, selectedNav, setSelectedNav} ){
                     <div className="flex mt-2 justify-center space-x-6 flex-row">
                         <a 
                             className={`flex py-1 px-6 rounded-3xl border-2 border-[var(--principal-f)] cursor-pointer
-                                ${selectedNav === 'sidebar' ? 'bg-[var(--principal-f)] text-white' : ' text-[var(--principal-f)] hover:bg-[var(--principal-f)] hover:text-white'}`
+                                ${selectedNav === 'vertical' ? 'bg-[var(--principal-f)] text-white' : ' text-[var(--principal-f)] hover:bg-[var(--principal-f)] hover:text-white'}`
                             }
-                            onClick={() => setSelectedNav('sidebar')}
+                            onClick={() => setSelectedNav('vertical')}
                         >
-                            Sidebar
+                            Vertical
                         </a>
                         <a 
                             className={`flex py-1 px-6 rounded-3xl border-2 border-[var(--principal-f)]  cursor-pointer
-                                ${selectedNav === 'navbar' ? 'bg-[var(--principal-f)] text-white' : 'text-[var(--principal-f)] hover:bg-[var(--principal-f)] hover:text-white'}`
+                                ${selectedNav === 'horizontal' ? 'bg-[var(--principal-f)] text-white' : 'text-[var(--principal-f)] hover:bg-[var(--principal-f)] hover:text-white'}`
                             }
-                            onClick={() => setSelectedNav('navbar')}
+                            onClick={() => setSelectedNav('horizontal')}
                         >
-                            Navbar
+                            Horizontal
                         </a>
                     </div>
                 </div>
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx
index 45deddd5e835803ff737be36620d9d9f7909bd1d..e4fb6de23c995df62f9cb7ee636b898fa664828e 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import MobileMenuToggle from "@/components/common/layouts/LayoutsNavigation/MobileMenuToggle";
 import NotificationToggle from "@/components/common/layouts/LayoutsNavigation/NotificationToggle";
 import SidebarLinks from "@/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks";
@@ -7,6 +8,7 @@ import Notifications from "@/components/common/layouts/LayoutsNavigation/Sidebar
 import MobileMenu from "@/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu";
 
 export default function Sidebar( {linksItems, viewMenu, setViewMenu} ){
+    const navigate = useNavigate();
     // Estado para controlar la visibilidad de las notificaciones
     const [viewNotifications, setViewNotifications] = useState(false);
 
@@ -55,7 +57,8 @@ export default function Sidebar( {linksItems, viewMenu, setViewMenu} ){
             {/* Contenedor de parte superior */}
             <div className="absolute z-20 right-0 left-0 top-0 h-14 lg:h-10 w-full bg-[#E1E1E1]">
                 <div className="relative flex items-center justify-center lg:justify-end">
-                    <div className="flex lg:hidden px-2 m-2 items-center">
+                    <div className="flex lg:hidden px-2 m-2 items-center cursor-pointer"
+                        onClick={() => navigate('/inicio')}>
                         <img src="http://localhost:8000/static/images/cosiap_favicon.png" className="w-9 h-9 mr-2"/>
                         <div className="text-[var(--principal-mf)] text-4xl font-extrabold">
                             cosiap
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx
index f466461974913a60c94983a548c79c5cf3e5ccc8..3dde7c5ae79762872e066e8fbd52a7b200377fcc 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx
@@ -1,6 +1,10 @@
+import { useNavigate } from "react-router-dom";
+
 export default function SidebarBrand(){
+    const navigate = useNavigate();
+
     return (
-        <>
+        <div onClick={() => navigate('/inicio')} className="cursor-pointer">
             <div className="flex justify-center">
                 <img src="http://localhost:8000/static/images/cosiap_favicon.png" className="w-20 h-20"/>
             </div>
@@ -9,6 +13,6 @@ export default function SidebarBrand(){
                     cosiap
                 </div>
             </div>
-        </>
+        </div>
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx
index 171e707c587b2593168d710164292811aa00926d..d5b456f989fd2df5db6290dde5b7642492e15765 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx
@@ -1,16 +1,17 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function SidebarLinks( {linksItems} ) {
+    const navigate = useNavigate();
     const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false);
 
-
     return (
         // Si existe linksItems, mapea cada uno para generar enlaces
         linksItems ? (
             linksItems.map((item) => (
                 <>
                     {/* Enlace principal de cada ítem del menú */}
-                    <a key={item.nameItem} href="#"
+                    <a key={item.nameItem}
                         className={`flex items-center space-x-3 px-3 py-2 text-sm font-semibold cursor-pointer 
                             ${item.isSelected || (viewSubMenuHelp && item.nameItem === 'Ayuda') 
                                 ? 'border-l-4 border-[var(--principal-f)] text-[var(--principal-mf)]' 
@@ -19,6 +20,8 @@ export default function SidebarLinks( {linksItems} ) {
                             // Si el ítem es "Ayuda", alterna la visibilidad del submenú
                             if (item.nameItem === 'Ayuda') {
                                 setViewSubMenuHelp(!viewSubMenuHelp);
+                            }else{
+                                navigate(item.navigate);
                             }
                         }}
                     >
@@ -53,13 +56,16 @@ export default function SidebarLinks( {linksItems} ) {
 
 // Componente para renderizar el submenú de "Ayuda"
 function SubMenuAyuda({ viewSubMenuHelp, items }) {
+    const navigate = useNavigate();
     return (
         // Si el submenú está visible, mapea sus ítems para generar enlaces
         viewSubMenuHelp && (
             items.map((item) => (
-                <a key={item.nameItem} href="#" className={`ml-8 flex space-x-3 px-3 py-1 text-base font-semibold 
-                    ${item.isSelected ? 'text-[var(--principal-mf)] border-l-4 border-[var(--principal-f)]' 
-                                      : 'hover:text-[var(--principal-mf)] hover:border-l-4 hover:border-[var(--principal-f)]'}`}>
+                <a key={item.nameItem} className={`ml-8 flex space-x-3 px-3 py-1 text-base font-semibold 
+                    ${item.isSelected ? 'cursor-pointer text-[var(--principal-mf)] border-l-4 border-[var(--principal-f)]' 
+                                      : 'cursor-pointer hover:text-[var(--principal-mf)] hover:border-l-4 hover:border-[var(--principal-f)]'}`}
+                    onClick={() => navigate(item.navigate)}
+                    >
                     <span>
                         {item.nameItem} {/* Nombre del ítem del submenú */}
                     </span>
diff --git a/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx b/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx
index b9219626ad61725287116784992e90e70dbaff4d..784e8ac1728fe7edff70184fe8ca04d0f1e28bb1 100644
--- a/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx
+++ b/cosiap_frontend/src/components/common/utility/LoginRequiredRoutes.jsx
@@ -5,7 +5,7 @@ export const LoginRequiredRoutes = () => {
   const { token } = useAutenticacion();
 
   if (token === null) {
-    return <Navigate to="/auth" />;
+    return <Navigate to="/authentication" />;
   } else if (token === undefined) {
     return null; // O un spinner de carga o marcador de posición
   } else {
diff --git a/cosiap_frontend/src/components/users/Inicio.jsx b/cosiap_frontend/src/components/users/Inicio.jsx
deleted file mode 100644
index 84cfb12a3199ede875a7b73bc31592e121409670..0000000000000000000000000000000000000000
--- a/cosiap_frontend/src/components/users/Inicio.jsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import Navbar from "@/components/common/layouts/LayoutsNavigation/Navbar/Navbar";
-import Sidebar from "@/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar";
-import SettingsToggle from "@/components/common/layouts/LayoutsNavigation/SettingsToggle";
-import Settings from "@/components/common/layouts/LayoutsNavigation/Settings";
-
-const linksItemsSolicitante = [
-  {
-    nameIcon: 'library_books',
-    nameItem: 'Modalidades',
-    isSelected: true
-  },
-  {
-    nameIcon: 'history',
-    nameItem: 'Historial',
-    isSelected: false
-  },
-  {
-    nameIcon: 'mark_as_unread',
-    nameItem: 'Recepción de ayuda',
-    isSelected: false
-  },
-  {
-    nameIcon: 'help',
-    nameItem: 'Ayuda',
-    isSelected: false,
-    subMenu: [
-      {
-        nameItem: 'Manual',
-        isSelected: false
-      },
-      {
-        nameItem: 'Chat',
-        isSelected: false
-      }
-    ]
-  },
-
-  {
-    nameIcon: 'account_circle',
-    nameItem: 'Perfil',
-    isSelected: false
-  }
-];
-
-
-
-export default function Inicio() {
-  // Estado para controlar la visibilidad de los menus de pantalla chicas
-  const [viewMenu, setViewMenu] = useState(false);
-  const [selectedNav, setSelectedNav] = useState("sidebar");
-  const [viewSettings, setViewSettings] = useState(false);
-
-  const settingsRef = useRef();
-  const settingsToggleRef = useRef();
-
-  // Efecto para manejar los clics fuera de settings
-  useEffect(() => {
-    function handleClickOutside(event) {
-        // Cierra el menú si se hace clic fuera de él y de su botón de toggle
-        if (settingsRef.current && !settingsRef.current.contains(event.target) &&
-            settingsToggleRef.current && !settingsToggleRef.current.contains(event.target)) {
-            setViewSettings(false);
-        }
-    }
-    // Añade el event listener para detectar clics fuera de los elementos
-    document.addEventListener("mousedown", handleClickOutside);
-    // Remueve el event listener cuando el componente se desmonte
-    return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <>
-      <div className="static min-h-screen bg-[#C6C4C4] overflow-x-hidden">
-
-        {selectedNav === 'navbar' && (
-          <Navbar linksItems = {linksItemsSolicitante} viewMenu={viewMenu} setViewMenu={setViewMenu}/>
-        )}
-        {selectedNav === 'sidebar' && (
-          <Sidebar linksItems = {linksItemsSolicitante} viewMenu={viewMenu} setViewMenu={setViewMenu}/>
-        )}
-
-        <div className={`w-full h-full ${selectedNav === 'sidebar' ? 'lg:ml-[17.3%]': ''}`}>
-            <div 
-              className="absolute flex cursor-pointer h-10 w-10 right-0 bg-[var(--principal-c)] border-y-4 border-l-4 border-[var(--principal-mf)]  rounded-s-3xl mt-2"
-              onClick={() => setViewSettings(!viewSettings)}
-              >
-              <SettingsToggle settingsToggleRef={settingsToggleRef} />
-            </div>
-            {viewSettings && (
-              <Settings settingsRef={settingsRef} selectedNav={selectedNav} setSelectedNav={setSelectedNav}/>
-            )}
-
-            {/* Aqui se pondrian los componentes */}
-            <div className={`h-full ${selectedNav === 'sidebar' ? 'lg:max-w-[82.7%]': 'w-full'}`}>
-               <div className="bg-red-600">
-                dsadssa
-                </div>
-            </div>
-        </div>
-      </div>
-    </>
-  );
-}
\ 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 2c90335c06929d5856598c00b136b50efded766a..36a3f6747005cb5e0e143466b39c07f9a0ee283b 100644
--- a/cosiap_frontend/src/components/users/Login/Login.jsx
+++ b/cosiap_frontend/src/components/users/Login/Login.jsx
@@ -8,13 +8,13 @@ export function Login( {setViewPageLoader} ) {
     const navigate = useNavigate();
 
     return (
-        <LayoutBaseAuthenticator title="Iniciar sesión">
+        <>
             <LoginForm setViewPageLoader={setViewPageLoader}/>
             <p className="uppercase mt-5 scroll-mt-10 text-center text-sm text-gray-500">
                 ¿Haz olvidado tu contraseña?
             </p>
             <p className="uppercase cursor-pointer no-underline hover:underline mt-2 text-center text-sm text-[var(--principal-mf)]" onClick={() => navigate('reset_password')}>
-                Reestablecer contraseña
+                Restablecer contraseña
             </p>
             <p className="uppercase mt-2 text-center text-sm text-gray-500">
                 ¿Aun no tienes cuenta?
@@ -22,6 +22,7 @@ export function Login( {setViewPageLoader} ) {
             <p className="uppercase cursor-pointer no-underline hover:underline mt-2 text-center text-sm text-[var(--principal-mf)]" onClick={() => navigate('register')}>
                 Registrate
             </p>
-        </LayoutBaseAuthenticator>
+        </>
+        
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Password/ResetPassword.jsx b/cosiap_frontend/src/components/users/Password/ResetPassword.jsx
index 951c8a5154b1638c70a79f90634cb7d0b2c00593..69c72deb6b0bde2f2b989febf54a644e29d4ca84 100644
--- a/cosiap_frontend/src/components/users/Password/ResetPassword.jsx
+++ b/cosiap_frontend/src/components/users/Password/ResetPassword.jsx
@@ -45,33 +45,30 @@ export default function ResetPassword({ setViewPageLoader }){
     }
     
     return (
-        <LayoutBaseAuthenticator title="Restablecer contraseña">
-            <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-                {
-                    viewChangePasswordForm ? (
-                        <>
-                            <NewPasswordForm 
-                                uid={uid}
-                                token={token}
-                                setViewPageLoader={setViewPageLoader}
-                            />
-                        </>
-                    ) : (
-                        <>
-                            <div className="mt-6 uppercase text-center">
-                                <p className="font-bold">
-                                    Se le enviara un correo para restablecer la contraseña
-                                </p>
-                            </div>
-                            <ResetPasswordForm 
-                                setViewPageLoader={setViewPageLoader}
-                            />
-                        </>
-                    )
-                }
-            </div>
-            
-        </LayoutBaseAuthenticator>
+        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+            {
+                viewChangePasswordForm ? (
+                    <>
+                        <NewPasswordForm 
+                            uid={uid}
+                            token={token}
+                            setViewPageLoader={setViewPageLoader}
+                        />
+                    </>
+                ) : (
+                    <>
+                        <div className="mt-6 uppercase text-center">
+                            <p className="font-bold">
+                                Se le enviara un correo para restablecer la contraseña
+                            </p>
+                        </div>
+                        <ResetPasswordForm 
+                            setViewPageLoader={setViewPageLoader}
+                        />
+                    </>
+                )
+            }
+        </div>
     );
 
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx b/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx
index cc3f253b3ffe911c776024912aabde812360e944..0543fe64ecb198459a7e3568c61d906778617ad9 100644
--- a/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx
+++ b/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx
@@ -21,16 +21,15 @@ export default function ResetPasswordForm({ setViewPageLoader }){
 
     const handleFormSubmission = async (data) => {
         setViewPageLoader(true);
-
         try {
             const response = await api.usuarios.restablecerPassword(data);
             console.log('Password reset succesfuly: ', response.data);
-            setEmailSent(true);
+            
         } catch (error) {
             console.error('Password reset failed: ', error);
             console.log(error.response.data);
-            setFormError(error.response.data);
         }
+        setEmailSent(true);
         setViewPageLoader(false);
     }
     return (
diff --git a/cosiap_frontend/src/components/users/Register/Register.jsx b/cosiap_frontend/src/components/users/Register/Register.jsx
index 4ecbdae50432db44affbb7c41942d894e4582bef..0da1add319771551bdc03ad650d6123ac64a12e4 100644
--- a/cosiap_frontend/src/components/users/Register/Register.jsx
+++ b/cosiap_frontend/src/components/users/Register/Register.jsx
@@ -42,83 +42,75 @@ export default function Register({setViewPageLoader} ) {
         }
     }
 
-
-    function navigateLogin(){
-        navigate('/authentication');
-    }
-
     return (
-        <LayoutBaseAuthenticator title={verifySuccess === null ? 'Registrarse' : ''}>
-            
-            {
-                verifySuccess === null ? (
-                    !sentEmail ? (
-                        <>
-                            <RegisterForm setSentEmail={setSentEmail} setViewPageLoader={setViewPageLoader}/>
-                            <p className="uppercase cursor-pointer no-underline hover:underline mt-2 text-center text-sm text-[var(--principal-mf)]" onClick={navigateLogin}>
-                                Iniciar sesión
-                            </p>
-                        </>
-                    ) : (
-                        <>
-                            <div className="space-y-4 text-center">
-                                <div className="mt-6 uppercase relative">
-                                    <p className="font-bold text-xl">¡Correo de confirmación <br />enviado!</p>
-                                </div>
-                                <div className="mt-6 uppercase relative">
-                                    <p className="font-bold text-base">Se ha enviado un correo <br />electrónico para confirmar la <br />creación de tu cuenta.</p>
-                                </div>
-                            </div>
-                            <div className="text-center mt-10">
-                                <button className="uppercase py-2 px-4 bg-[var(--principal-f)] text-white font-semibold rounded-full shadow-md hover:bg-principal_mf focus:outline-none focus:ring focus:bg-principal_mf focus:ring-opacity-75" onClick={navigateLogin}>
-                                    Iniciar sesión
-                                </button>
-                            </div>
-                        </>
-                    )
-                ) : 
-                (
-                    <>
-                        <div className="space-y-4 text-center">
-                            <div className="mt-6 uppercase relative">
-                                <p className="font-bold text-xl">
-                                    {verifySuccess ? (
-                                        <>
-                                            ¡Haz confirmado la
-                                            creación de tu cuenta!
-                                        </>
-                                    ) : (
-                                        <>
-                                            Lo sentimos, tu token
-                                            de verificación ha expirado.
-                                        </>
-                                    )}
-                                </p>
-                            </div>
-                            <div className="mt-6 uppercase relative">
-                                <p className="font-bold text-base">
-                                    {verifySuccess ? (
-                                        <>
-                                            Ahora puedes iniciar sesión con <br />
-                                            tus credenciales
-                                        </>
-                                    ) : (
-                                        <>
-                                            Realiza de nuevo tu registro para<br />
-                                            un nuevo enlace de verificación
-                                        </>
-                                    )}
-                                </p>
-                            </div>
+        
+        verifySuccess === null ? (
+            !sentEmail ? (
+                <>
+                    <RegisterForm setSentEmail={setSentEmail} setViewPageLoader={setViewPageLoader}/>
+                    <p className="uppercase cursor-pointer no-underline hover:underline mt-2 text-center text-sm text-[var(--principal-mf)]" onClick={() => navigate('/authentication')}>
+                        Iniciar sesión
+                    </p>
+                </>
+            ) : (
+                <>
+                    <div className="space-y-4 text-center">
+                        <div className="mt-6 uppercase relative">
+                            <p className="font-bold text-xl">¡Correo de confirmación <br />enviado!</p>
                         </div>
-                        <div className="text-center mt-10">
-                            <button className="uppercase py-2 px-4 bg-[var(--principal-f)] text-white font-semibold rounded-full shadow-md hover:bg-principal_mf focus:outline-none focus:ring focus:bg-principal_mf focus:ring-opacity-75" onClick={navigateLogin}>
-                                Iniciar sesión
-                            </button>
+                        <div className="mt-6 uppercase relative">
+                            <p className="font-bold text-base">Se ha enviado un correo <br />electrónico para confirmar la <br />creación de tu cuenta.</p>
                         </div>
-                    </>
-                )
-            }
-        </LayoutBaseAuthenticator>
+                    </div>
+                    <div className="text-center mt-10">
+                        <button className="uppercase py-2 px-4 bg-[var(--principal-f)] text-white font-semibold rounded-full shadow-md hover:bg-principal_mf focus:outline-none focus:ring focus:bg-principal_mf focus:ring-opacity-75" onClick={() => navigate('/authentication')}>
+                            Iniciar sesión
+                        </button>
+                    </div>
+                </>
+            )
+        ) : 
+        (
+            <>
+                <div className="space-y-4 text-center">
+                    <div className="mt-6 uppercase relative">
+                        <p className="font-bold text-xl">
+                            {verifySuccess ? (
+                                <>
+                                    ¡Haz confirmado la
+                                    creación de tu cuenta!
+                                </>
+                            ) : (
+                                <>
+                                    Lo sentimos, tu token
+                                    de verificación ha expirado.
+                                </>
+                            )}
+                        </p>
+                    </div>
+                    <div className="mt-6 uppercase relative">
+                        <p className="font-bold text-base">
+                            {verifySuccess ? (
+                                <>
+                                    Ahora puedes iniciar sesión con <br />
+                                    tus credenciales
+                                </>
+                            ) : (
+                                <>
+                                    Realiza de nuevo tu registro para<br />
+                                    un nuevo enlace de verificación
+                                </>
+                            )}
+                        </p>
+                    </div>
+                </div>
+                <div className="text-center mt-10">
+                    <button className="uppercase py-2 px-4 bg-[var(--principal-f)] text-white font-semibold rounded-full shadow-md hover:bg-principal_mf focus:outline-none focus:ring focus:bg-principal_mf focus:ring-opacity-75" onClick={() => navigate('/authentication')}>
+                        Iniciar sesión
+                    </button>
+                </div>
+            </>
+        )
+    
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
index 153e0db2fc39c6d7e90d70f0ebf485b4a183be40..9c513478913af1b6566d12ef969c22014c7a9ff4 100644
--- a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
+++ b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
@@ -1,7 +1,6 @@
 import { RegisterInput } from "./RegisterInput";
 import { RegisterInputPassword } from "./RegisterInputPassword";
 import { useState } from "react";
-import { ErrorDisplay } from '@/components/common/ui/ErrorDisplay';
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { RegisterValidationSchema } from "@/components/FormsValidations";