diff --git a/servicio-usuarios/src/schemas/user.schema.ts b/servicio-usuarios/src/schemas/user.schema.ts
index 160a5951..e9fa6dd7 100644
--- a/servicio-usuarios/src/schemas/user.schema.ts
+++ b/servicio-usuarios/src/schemas/user.schema.ts
@@ -10,7 +10,7 @@ export class User {
   @Prop({index: true})
   dni!: string;
 
-  @Prop({required: true})
+  @Prop()
   name: string;
 
   @Prop({required: true})
diff --git a/servicio-usuarios/src/users/users.service.ts b/servicio-usuarios/src/users/users.service.ts
index b9e289a1..32e5125d 100644
--- a/servicio-usuarios/src/users/users.service.ts
+++ b/servicio-usuarios/src/users/users.service.ts
@@ -29,7 +29,7 @@ export class UsersService {
     let passwordEncriptada = Md5.init(user.password);
     user.password = passwordEncriptada;
 
-    this.userModel.create(user)
+    this.userModel.create(user);
 
 
     let community = await this.findCommunity(user.community_id);
@@ -98,10 +98,12 @@ export class UsersService {
         if (err) {
           reject(err);
         } else {
+          console.log(res);
+          console.log(Md5.init(password));
           let passwordEncriptada = Md5.init(password);
           if (res[0].password == passwordEncriptada) {
             resolve(res[0]);
-            console.log(res[0])
+            res[0].token = '1234';
           } else {
             resolve(null);
           }
diff --git a/web-ui/web-react/src/App.js b/web-ui/web-react/src/App.js
index 01c0e9ac..f9e077b6 100644
--- a/web-ui/web-react/src/App.js
+++ b/web-ui/web-react/src/App.js
@@ -53,6 +53,17 @@ import './App.scss';
 import LogIn from './components/LogIn';
 import { PrimeIcons } from 'primereact/api';
 import AreasComunes from './components/AreasComunes';
+import { Cookies } from 'react-cookie';
+import useToken from './components/useToken';
+
+function setToken(userToken) {
+  sessionStorage.setItem('token', JSON.stringify(userToken.token));
+}
+function getToken() {
+  const tokenString = sessionStorage.getItem('token');
+  const userToken = JSON.parse(tokenString);
+  return userToken?.token
+}
 
 
 const App = () => {
@@ -66,6 +77,9 @@ const App = () => {
   const [mobileTopbarMenuActive, setMobileTopbarMenuActive] = useState(false);
   const copyTooltipRef = useRef();
   const location = useLocation();
+  
+
+  const { token, setToken } = useToken();
 
   PrimeReact.ripple = true;
 
@@ -351,7 +365,6 @@ const App = () => {
   });
 
 
-  const [token, setToken] = useState();
 
   if(!token) {
     return <LogIn setToken={setToken} />
@@ -364,9 +377,104 @@ const App = () => {
       <h1>Application</h1>
       <BrowserRouter>
         <Switch>
-          <Route path="/dashboard">
-            <Dashboard colorMode={layoutColorMode} location={location} />
-          </Route>
+        <div className={wrapperClass} onClick={onWrapperClick}>
+      <Tooltip
+        ref={copyTooltipRef}
+        target=".block-action-copy"
+        position="bottom"
+        content="Copied to clipboard"
+        event="focus"
+      />
+
+      <AppTopbar
+        onToggleMenuClick={onToggleMenuClick}
+        layoutColorMode={layoutColorMode}
+        mobileTopbarMenuActive={mobileTopbarMenuActive}
+        onMobileTopbarMenuClick={onMobileTopbarMenuClick}
+        onMobileSubTopbarMenuClick={onMobileSubTopbarMenuClick}
+      />
+
+      <div className="layout-sidebar" onClick={onSidebarClick}>
+        <AppMenu
+          model={menu}
+          onMenuItemClick={onMenuItemClick}
+          layoutColorMode={layoutColorMode}
+        />
+      </div>
+
+      <div className="layout-main-container">
+        <div className="layout-main">
+          <Route
+            path="/"
+            exact
+            render={() => (
+              <Dashboard colorMode={layoutColorMode} location={location} />
+            )}
+          />
+          <Route path="/formlayout" component={FormLayoutDemo} />
+          <Route path="/input" component={InputDemo} />
+          <Route path="/floatlabel" component={FloatLabelDemo} />
+          <Route path="/invalidstate" component={InvalidStateDemo} />
+          <Route path="/button" component={ButtonDemo} />
+          <Route path="/table" component={TableDemo} />
+          <Route path="/list" component={ListDemo} />
+          <Route path="/tree" component={TreeDemo} />
+          <Route path="/panel" component={PanelDemo} />
+          <Route path="/overlay" component={OverlayDemo} />
+          <Route path="/media" component={MediaDemo} />
+          <Route path="/menu" component={MenuDemo} />
+          <Route path="/messages" component={MessagesDemo} />
+          <Route path="/blocks" component={BlocksDemo} />
+          <Route path="/icons" component={IconsDemo} />
+          <Route path="/file" component={FileDemo} />
+          <Route
+            path="/chart"
+            render={() => (
+              <ChartDemo colorMode={layoutColorMode} location={location} />
+            )}
+          />
+          <Route path="/misc" component={MiscDemo} />
+          <Route path="/timeline" component={TimelineDemo} />
+          <Route path="/crud" component={Crud} />
+          <Route path="/empty" component={EmptyPage} />
+          <Route path="/documentation" component={Documentation} />
+          <Route
+            path="/administradoresSistema"
+            component={AdministradoresSistema}
+          />
+          <Route
+            path="/administradoresComunidad"
+            component={AdministradoresComunidad}
+          />
+          <Route path="/guardasSeguridad" component={GuardasSeguridad} />
+          <Route path="/comunidadesViviendas" component={Communities} />
+          <Route path="/inquilinos" component={Inquilinos} />
+          <Route path="/areasComunes" component={AreasComunes} />
+        </div>
+
+        <AppFooter layoutColorMode={layoutColorMode} />
+      </div>
+
+      <AppConfig
+        rippleEffect={ripple}
+        onRippleEffect={onRipple}
+        inputStyle={inputStyle}
+        onInputStyleChange={onInputStyleChange}
+        layoutMode={layoutMode}
+        onLayoutModeChange={onLayoutModeChange}
+        layoutColorMode={layoutColorMode}
+        onColorModeChange={onColorModeChange}
+      />
+
+      <CSSTransition
+        classNames="layout-mask"
+        timeout={{ enter: 200, exit: 200 }}
+        in={mobileMenuActive}
+        unmountOnExit
+      >
+        <div className="layout-mask p-component-overlay"></div>
+      </CSSTransition>
+            </div> 
           
         </Switch>
       </BrowserRouter>
diff --git a/web-ui/web-react/src/components/LogIn.js b/web-ui/web-react/src/components/LogIn.js
index 29361404..19685aa0 100644
--- a/web-ui/web-react/src/components/LogIn.js
+++ b/web-ui/web-react/src/components/LogIn.js
@@ -4,7 +4,21 @@ import { Button } from 'primereact/button';
 
 import PropTypes from 'prop-types';
 
-const LogIn = ({ setToken }) => {
+
+async function loginUser(credentials) {
+  return fetch('http://localhost:4000/user/loginUser', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(credentials)
+  })
+  .then(data => data.json())
+  .then(data => data.message);
+}
+
+
+export default function LogIn({ setToken }) {
 
   let emptyLogin = {
     _id: null,
@@ -16,30 +30,20 @@ const LogIn = ({ setToken }) => {
   }
 
 
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState();
+  const [password, setPassword] = useState();
   const [errorMessages, setErrorMessages] = useState({});
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [login, setLogin] = useState(emptyLogin);
 
 
-  async function loginUser(credentials) {
-    return fetch('http://localhost:4000/user/loginUser', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(credentials)
-    })
-    .then(data => data.json())
-    .then(data => console.log(data.message))
-  }
+  
 
   const handleSubmit = async e => {
     e.preventDefault();
     const token = await loginUser({
-      email: email,
-      password: password
+      email,
+      password
     });
     setToken(await token);
   }
@@ -50,8 +54,8 @@ const LogIn = ({ setToken }) => {
     );
 
   const errors = {
-    email: "coreo requerido",
-    pass: "contraseña requerida"
+    email: "correo requerido",
+    password: "contraseña requerida"
   };
 
   return (
@@ -59,9 +63,9 @@ const LogIn = ({ setToken }) => {
 
       <div className="grid form justify-content-center my-5">
         <div className="col-5">
-          <form className="card">
+          <div className="card" >
             <h5>Iniciar Sesión</h5>
-            <div className="p-fluid formgrid grid">
+            <form className="p-fluid formgrid grid" onSubmit={handleSubmit}>
               <div className="field col-12">
                 <label htmlFor="email">Correo electrónico</label>
                 <InputText id="email"
@@ -73,16 +77,16 @@ const LogIn = ({ setToken }) => {
               <div className="field col-12 ">
                 <label htmlFor="password">Contraseña</label>
                 <InputText id="password"
-                  type="text"
+                  type="password"
                   onChange={e => setPassword(e.target.value)}
                   placeholder='Contraseña'
                 />
                 {renderErrorMessage("password")}
               </div>
 
-              <Button label="Iniciar sesión" type="submit" onClick={ handleSubmit}></Button>
-            </div>
-          </form>
+              <Button label="Iniciar sesión" type="submit"></Button>
+            </form>
+          </div>
         </div>
 
 
@@ -95,5 +99,3 @@ const LogIn = ({ setToken }) => {
 LogIn.propTypes = {
   setToken: PropTypes.func.isRequired
 }
-
-export default LogIn
\ No newline at end of file
diff --git a/web-ui/web-react/src/components/useToken.js b/web-ui/web-react/src/components/useToken.js
new file mode 100644
index 00000000..180fd060
--- /dev/null
+++ b/web-ui/web-react/src/components/useToken.js
@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+export default function useToken() {
+    const getToken = () => {
+        const tokenString = localStorage.getItem('token');
+        if (tokenString) {
+            const userToken = JSON.parse(tokenString);
+            return userToken?.token;
+        }
+    };
+    const [token, setToken] = useState(getToken());
+
+    const saveToken = userToken => {
+        let tokenJSON = {
+            "token": userToken.token
+        }
+        localStorage.setItem('token', JSON.stringify(tokenJSON));
+        setToken(tokenJSON);
+    };
+
+    return {
+        setToken: saveToken,
+        token
+    }
+}
\ No newline at end of file