diff --git a/web-ui/web-react/src/App.js b/web-ui/web-react/src/App.js
index 12c09705..b5137fb9 100644
--- a/web-ui/web-react/src/App.js
+++ b/web-ui/web-react/src/App.js
@@ -71,112 +71,112 @@ const App = () => {
     const location = useLocation();
     const [cookies, setCookies] = useCookies();
 
-  PrimeReact.ripple = true;
+    PrimeReact.ripple = true;
 
-  let menuClick = false;
-  let mobileTopbarMenuClick = false;
+    let menuClick = false;
+    let mobileTopbarMenuClick = false;
 
-  useEffect(() => {
-    if (mobileMenuActive) {
-      addClass(document.body, 'body-overflow-hidden');
-    } else {
-      removeClass(document.body, 'body-overflow-hidden');
-    }
-  }, [mobileMenuActive]);
+    useEffect(() => {
+        if (mobileMenuActive) {
+            addClass(document.body, 'body-overflow-hidden');
+        } else {
+            removeClass(document.body, 'body-overflow-hidden');
+        }
+    }, [mobileMenuActive]);
 
-  useEffect(() => {
-    copyTooltipRef &&
-      copyTooltipRef.current &&
-      copyTooltipRef.current.updateTargetEvents();
-  }, [location]);
+    useEffect(() => {
+        copyTooltipRef &&
+            copyTooltipRef.current &&
+            copyTooltipRef.current.updateTargetEvents();
+    }, [location]);
 
-  const onInputStyleChange = (inputStyle) => {
-    setInputStyle(inputStyle);
-  };
+    const onInputStyleChange = (inputStyle) => {
+        setInputStyle(inputStyle);
+    };
 
-  const onRipple = (e) => {
-    PrimeReact.ripple = e.value;
-    setRipple(e.value);
-  };
+    const onRipple = (e) => {
+        PrimeReact.ripple = e.value;
+        setRipple(e.value);
+    };
 
-  const onLayoutModeChange = (mode) => {
-    setLayoutMode(mode);
-  };
+    const onLayoutModeChange = (mode) => {
+        setLayoutMode(mode);
+    };
 
-  const onColorModeChange = (mode) => {
-    setLayoutColorMode(mode);
-  };
+    const onColorModeChange = (mode) => {
+        setLayoutColorMode(mode);
+    };
 
-  const onWrapperClick = (event) => {
-    if (!menuClick) {
-      setOverlayMenuActive(false);
-      setMobileMenuActive(false);
-    }
-
-    if (!mobileTopbarMenuClick) {
-      setMobileTopbarMenuActive(false);
-    }
-
-    mobileTopbarMenuClick = false;
-    menuClick = false;
-  };
-
-  const onToggleMenuClick = (event) => {
-    menuClick = true;
-
-    if (isDesktop()) {
-      if (layoutMode === 'overlay') {
-        if (mobileMenuActive === true) {
-          setOverlayMenuActive(true);
+    const onWrapperClick = (event) => {
+        if (!menuClick) {
+            setOverlayMenuActive(false);
+            setMobileMenuActive(false);
         }
 
-        setOverlayMenuActive((prevState) => !prevState);
-        setMobileMenuActive(false);
-      } else if (layoutMode === 'static') {
-        setStaticMenuInactive((prevState) => !prevState);
-      }
-    } else {
-      setMobileMenuActive((prevState) => !prevState);
-    }
+        if (!mobileTopbarMenuClick) {
+            setMobileTopbarMenuActive(false);
+        }
 
-    event.preventDefault();
-  };
+        mobileTopbarMenuClick = false;
+        menuClick = false;
+    };
 
-  const onSidebarClick = () => {
-    menuClick = true;
-  };
+    const onToggleMenuClick = (event) => {
+        menuClick = true;
 
-  const onMobileTopbarMenuClick = (event) => {
-    mobileTopbarMenuClick = true;
+        if (isDesktop()) {
+            if (layoutMode === 'overlay') {
+                if (mobileMenuActive === true) {
+                    setOverlayMenuActive(true);
+                }
 
-    setMobileTopbarMenuActive((prevState) => !prevState);
-    event.preventDefault();
-  };
+                setOverlayMenuActive((prevState) => !prevState);
+                setMobileMenuActive(false);
+            } else if (layoutMode === 'static') {
+                setStaticMenuInactive((prevState) => !prevState);
+            }
+        } else {
+            setMobileMenuActive((prevState) => !prevState);
+        }
 
-  const onMobileSubTopbarMenuClick = (event) => {
-    mobileTopbarMenuClick = true;
+        event.preventDefault();
+    };
 
-    event.preventDefault();
-  };
+    const onSidebarClick = () => {
+        menuClick = true;
+    };
 
-  const onMenuItemClick = (event) => {
-    if (!event.item.items) {
-      setOverlayMenuActive(false);
-      setMobileMenuActive(false);
-    }
-  };
-  const isDesktop = () => {
-    return window.innerWidth >= 992;
-  };
+    const onMobileTopbarMenuClick = (event) => {
+        mobileTopbarMenuClick = true;
+
+        setMobileTopbarMenuActive((prevState) => !prevState);
+        event.preventDefault();
+    };
+
+    const onMobileSubTopbarMenuClick = (event) => {
+        mobileTopbarMenuClick = true;
+
+        event.preventDefault();
+    };
+
+    const onMenuItemClick = (event) => {
+        if (!event.item.items) {
+            setOverlayMenuActive(false);
+            setMobileMenuActive(false);
+        }
+    };
+    const isDesktop = () => {
+        return window.innerWidth >= 992;
+    };
 
     const menu2 = [
         {
-            label: 'Home',
+            label: 'Inicio',
             items: [
                 { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
-                { label: 'Administradores del sistema', icon: 'pi pi-fw pi-id-card', to: '/administradoresSistema' },
-                { label: 'Administradores de comunidad', icon: 'pi pi-fw pi-id-card', to: '/administradoresComunidad' },
-                { label: 'Comunidadades', icon: 'pi pi-fw pi-id-card', to: '/comunidadesViviendas' },
+                { label: 'Administradores del sistema',icon: PrimeIcons.USERS, to: '/administradoresSistema' },
+                { label: 'Administradores de comunidad', icon: PrimeIcons.USERS, to: '/administradoresComunidad' },
+                { label: 'Comunidades', icon: PrimeIcons.BUILDING, to: '/comunidadesViviendas' },
             ]
         }
     ]
@@ -184,11 +184,16 @@ const App = () => {
 
     const menu3 = [
         {
-            label: 'Home',
+            label: 'Inicio',
             items: [
                 { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
-                { label: 'Inquilinos', icon: 'pi pi-fw pi-id-card', to: '/inquilinos' },
-                { label: 'Guardas de seguridad', icon: 'pi pi-fw pi-id-card', to: '/guardasSeguridad' },
+                { label: 'Inquilinos', icon: PrimeIcons.USERS, to: '/inquilinos' },
+                { label: 'Guardas de seguridad', icon: PrimeIcons.LOCK, to: '/guardasSeguridad' },
+                {
+                    label: 'Áreas Comunes de Comunidad',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/areasComunes',
+                },
             ]
         },
     ]
@@ -203,184 +208,188 @@ const App = () => {
 
     const menu = [
         {
-          label: 'Administradores del sistema',
-          icon: PrimeIcons.USERS,
-          to: '/administradoresSistema',
+            label: 'Inicio',
+            items:
+            [
+                {
+                    label: 'Administradores del sistema',
+                    icon: PrimeIcons.USERS,
+                    to: '/administradoresSistema',
+                },
+                {
+                    label: 'Administradores de comunidad',
+                    icon: PrimeIcons.USERS,
+                    to: '/administradoresComunidad',
+                },
+                {
+                    label: 'Guardas de seguridad',
+                    icon: PrimeIcons.LOCK,
+                    to: '/guardasSeguridad',
+                },
+                {
+                    label: 'Comunidades',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/comunidadesViviendas',
+                },
+                {
+                    label: 'Inquilinos',
+                    icon: PrimeIcons.USER,
+                    to: '/inquilinos'
+                },
+                {
+                    label: 'Áreas Comunes de Comunidad',
+                    icon: PrimeIcons.BUILDING,
+                    to: '/areasComunes',
+                },
+                { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
+            ],
         },
         {
-          label: 'Administradores de comunidad',
-          icon: PrimeIcons.USERS,
-          to: '/administradoresComunidad',
+            label: 'UI Components',
+            icon: 'pi pi-fw pi-sitemap',
+            items: [
+                {
+                    label: 'Form Layout',
+                    icon: 'pi pi-fw pi-id-card',
+                    to: '/formlayout',
+                },
+                { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },
+                {
+                    label: 'Float Label',
+                    icon: 'pi pi-fw pi-bookmark',
+                    to: '/floatlabel',
+                },
+                {
+                    label: 'Invalid State',
+                    icon: 'pi pi-fw pi-exclamation-circle',
+                    to: 'invalidstate',
+                },
+                { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },
+                { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },
+                { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },
+                { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },
+                { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },
+                { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },
+                { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' },
+                { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },
+                { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },
+                { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },
+                { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },
+                { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },
+            ],
         },
         {
-          label: 'Guardas de seguridad',
-          icon: PrimeIcons.LOCK,
-          to: '/guardasSeguridad',
+            label: 'UI Blocks',
+            items: [
+                {
+                    label: 'Free Blocks',
+                    icon: 'pi pi-fw pi-eye',
+                    to: '/blocks',
+                    badge: 'NEW',
+                },
+                {
+                    label: 'All Blocks',
+                    icon: 'pi pi-fw pi-globe',
+                    url: 'https://www.primefaces.org/primeblocks-react',
+                },
+            ],
         },
         {
-          label: 'Comunidades',
-          icon: PrimeIcons.BUILDING,
-          to: '/comunidadesViviendas',
+            label: 'Icons',
+            items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }],
         },
         {
-          label: 'Inquilinos',
-          icon: PrimeIcons.USER,
-          to: '/inquilinos'
+            label: 'Pages',
+            icon: 'pi pi-fw pi-clone',
+            items: [
+                { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },
+                { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },
+                { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' },
+            ],
         },
         {
-          label: 'Áreas Comunes de Comunidad',
-          icon: PrimeIcons.BUILDING,
-          to: '/areasComunes',
+            label: 'Menu Hierarchy',
+            icon: 'pi pi-fw pi-search',
+            items: [
+                {
+                    label: 'Submenu 1',
+                    icon: 'pi pi-fw pi-bookmark',
+                    items: [
+                        {
+                            label: 'Submenu 1.1',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                        {
+                            label: 'Submenu 1.2',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    label: 'Submenu 2',
+                    icon: 'pi pi-fw pi-bookmark',
+                    items: [
+                        {
+                            label: 'Submenu 2.1',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                        {
+                            label: 'Submenu 2.2',
+                            icon: 'pi pi-fw pi-bookmark',
+                            items: [
+                                { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
+                                { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' },
+                            ],
+                        },
+                    ],
+                },
+            ],
         },
-        { label: 'Log in', icon: 'pi pi-fw pi-id-card', to: '/logIn' },
-      ],
-    },
-    {
-      label: 'UI Components',
-      icon: 'pi pi-fw pi-sitemap',
-      items: [
-        {
-          label: 'Form Layout',
-          icon: 'pi pi-fw pi-id-card',
-          to: '/formlayout',
-        },
-        { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input' },
-        {
-          label: 'Float Label',
-          icon: 'pi pi-fw pi-bookmark',
-          to: '/floatlabel',
-        },
-        {
-          label: 'Invalid State',
-          icon: 'pi pi-fw pi-exclamation-circle',
-          to: 'invalidstate',
-        },
-        { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button' },
-        { label: 'Table', icon: 'pi pi-fw pi-table', to: '/table' },
-        { label: 'List', icon: 'pi pi-fw pi-list', to: '/list' },
-        { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree' },
-        { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel' },
-        { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay' },
-        { label: 'Media', icon: 'pi pi-fw pi-image', to: '/media' },
-        { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menu' },
-        { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages' },
-        { label: 'File', icon: 'pi pi-fw pi-file', to: '/file' },
-        { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart' },
-        { label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc' },
-      ],
-    },
-    {
-      label: 'UI Blocks',
-      items: [
-        {
-          label: 'Free Blocks',
-          icon: 'pi pi-fw pi-eye',
-          to: '/blocks',
-          badge: 'NEW',
-        },
-        {
-          label: 'All Blocks',
-          icon: 'pi pi-fw pi-globe',
-          url: 'https://www.primefaces.org/primeblocks-react',
-        },
-      ],
-    },
-    {
-      label: 'Icons',
-      items: [{ label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/icons' }],
-    },
-    {
-      label: 'Pages',
-      icon: 'pi pi-fw pi-clone',
-      items: [
-        { label: 'Crud', icon: 'pi pi-fw pi-user-edit', to: '/crud' },
-        { label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/timeline' },
-        { label: 'Empty', icon: 'pi pi-fw pi-circle-off', to: '/empty' },
-      ],
-    },
-    {
-      label: 'Menu Hierarchy',
-      icon: 'pi pi-fw pi-search',
-      items: [
-        {
-          label: 'Submenu 1',
-          icon: 'pi pi-fw pi-bookmark',
-          items: [
-            {
-              label: 'Submenu 1.1',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-            {
-              label: 'Submenu 1.2',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-          ],
-        },
-        {
-          label: 'Submenu 2',
-          icon: 'pi pi-fw pi-bookmark',
-          items: [
-            {
-              label: 'Submenu 2.1',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-            {
-              label: 'Submenu 2.2',
-              icon: 'pi pi-fw pi-bookmark',
-              items: [
-                { label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' },
-                { label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-bookmark' },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ];
+    ];
 
-  const addClass = (element, className) => {
-    if (element.classList) element.classList.add(className);
-    else element.className += ' ' + className;
-  };
+    const addClass = (element, className) => {
+        if (element.classList) element.classList.add(className);
+        else element.className += ' ' + className;
+    };
 
-  const removeClass = (element, className) => {
-    if (element.classList) element.classList.remove(className);
-    else
-      element.className = element.className.replace(
-        new RegExp(
-          '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)',
-          'gi',
-        ),
-        ' ',
-      );
-  };
+    const removeClass = (element, className) => {
+        if (element.classList) element.classList.remove(className);
+        else
+            element.className = element.className.replace(
+                new RegExp(
+                    '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)',
+                    'gi',
+                ),
+                ' ',
+            );
+    };
 
-  const wrapperClass = classNames('layout-wrapper', {
-    'layout-overlay': layoutMode === 'overlay',
-    'layout-static': layoutMode === 'static',
-    'layout-static-sidebar-inactive':
-      staticMenuInactive && layoutMode === 'static',
-    'layout-overlay-sidebar-active':
-      overlayMenuActive && layoutMode === 'overlay',
-    'layout-mobile-sidebar-active': mobileMenuActive,
-    'p-input-filled': inputStyle === 'filled',
-    'p-ripple-disabled': ripple === false,
-    'layout-theme-light': layoutColorMode === 'light',
-  });
+    const wrapperClass = classNames('layout-wrapper', {
+        'layout-overlay': layoutMode === 'overlay',
+        'layout-static': layoutMode === 'static',
+        'layout-static-sidebar-inactive':
+            staticMenuInactive && layoutMode === 'static',
+        'layout-overlay-sidebar-active':
+            overlayMenuActive && layoutMode === 'overlay',
+        'layout-mobile-sidebar-active': mobileMenuActive,
+        'p-input-filled': inputStyle === 'filled',
+        'p-ripple-disabled': ripple === false,
+        'layout-theme-light': layoutColorMode === 'light',
+    });
 
     return (
 
@@ -429,6 +438,7 @@ const App = () => {
                             <Route path="/guardasSeguridad" component={GuardasSeguridad} />
                             <Route path="/comunidadesViviendas" component={Communities} />
                             <Route path="/inquilinos" component={Inquilinos} />
+                            <Route path="/areasComunes" component={AreasComunes} />
                             <Route path="/login" component={LoginLocalStorage} />
 
                         </div>
diff --git a/web-ui/web-react/src/AppMenu.js b/web-ui/web-react/src/AppMenu.js
index dd1c636c..3f46d74c 100644
--- a/web-ui/web-react/src/AppMenu.js
+++ b/web-ui/web-react/src/AppMenu.js
@@ -6,179 +6,161 @@ import { Ripple } from 'primereact/ripple';
 import { Badge } from 'primereact/badge';
 
 const AppSubmenu = (props) => {
-  const [activeIndex, setActiveIndex] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(null);
 
-  const onMenuItemClick = (event, item, index) => {
-    //avoid processing disabled items
-    if (item.disabled) {
-      event.preventDefault();
-      return true;
-    }
+    const onMenuItemClick = (event, item, index) => {
+        //avoid processing disabled items
+        if (item.disabled) {
+            event.preventDefault();
+            return true;
+        }
 
-    //execute command
-    if (item.command) {
-      item.command({ originalEvent: event, item: item });
-    }
+        //execute command
+        if (item.command) {
+            item.command({ originalEvent: event, item: item });
+        }
 
-    if (index === activeIndex) setActiveIndex(null);
-    else setActiveIndex(index);
+        if (index === activeIndex) setActiveIndex(null);
+        else setActiveIndex(index);
 
-    if (props.onMenuItemClick) {
-      props.onMenuItemClick({
-        originalEvent: event,
-        item: item,
-      });
-    }
-  };
+        if (props.onMenuItemClick) {
+            props.onMenuItemClick({
+                originalEvent: event,
+                item: item,
+            });
+        }
+    };
 
-  const onKeyDown = (event) => {
-    if (event.code === 'Enter' || event.code === 'Space') {
-      event.preventDefault();
-      event.target.click();
-    }
-  };
+    const onKeyDown = (event) => {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            event.target.click();
+        }
+    };
 
-  const renderLinkContent = (item) => {
-    let submenuIcon = item.items && (
-      <i className="pi pi-fw pi-angle-down menuitem-toggle-icon"></i>
-    );
-    let badge = item.badge && <Badge value={item.badge} />;
+    const renderLinkContent = (item) => {
+        let submenuIcon = item.items && (
+            <i className="pi pi-fw pi-angle-down menuitem-toggle-icon"></i>
+        );
+        let badge = item.badge && <Badge value={item.badge} />;
 
-    return (
-      <React.Fragment>
-        <i className={item.icon}></i>
-        <span>{item.label}</span>
-        {submenuIcon}
-        {badge}
-        <Ripple />
-      </React.Fragment>
-    );
-  };
-
-  const renderLink = (item, i) => {
-    let content = renderLinkContent(item);
-
-    if (item.to) {
-      return (
-        <NavLink
-          aria-label={item.label}
-          onKeyDown={onKeyDown}
-          role="menuitem"
-          className="p-ripple"
-          activeClassName="router-link-active router-link-exact-active"
-          to={item.to}
-          onClick={(e) => onMenuItemClick(e, item, i)}
-          exact
-          target={item.target}
-        >
-          {content}
-        </NavLink>
-      );
-    } else {
-      return (
-        <a
-          tabIndex="0"
-          aria-label={item.label}
-          onKeyDown={onKeyDown}
-          role="menuitem"
-          href={item.url}
-          className="p-ripple"
-          onClick={(e) => onMenuItemClick(e, item, i)}
-          target={item.target}
-        >
-          {content}
-        </a>
-      );
-    }
-  };
-
-  let items =
-    props.items &&
-    props.items.map((item, i) => {
-      let active = activeIndex === i;
-      let styleClass = classNames(item.badgeStyleClass, {
-        'layout-menuitem-category': props.root,
-        'active-menuitem': active && !item.to,
-      });
-
-      if (props.root) {
         return (
-          <li className={styleClass} key={i} role="none">
-            {props.root === true && (
-              <React.Fragment>
-                <div
-                  className="layout-menuitem-root-text"
-                  aria-label={item.label}
+            <React.Fragment>
+                <i className={item.icon}></i>
+                <span>{item.label}</span>
+                {submenuIcon}
+                {badge}
+                <Ripple />
+            </React.Fragment>
+        );
+    };
+
+    const renderLink = (item, i) => {
+        let content = renderLinkContent(item);
+
+        if (item.to) {
+            return (
+                <NavLink
+                    aria-label={item.label}
+                    onKeyDown={onKeyDown}
+                    role="menuitem"
+                    className="p-ripple"
+                    activeClassName="router-link-active router-link-exact-active"
+                    to={item.to}
+                    onClick={(e) => onMenuItemClick(e, item, i)}
+                    exact
+                    target={item.target}
                 >
-                  {item.label}
-                </div>
-                <AppSubmenu
-                  items={item.items}
-                  onMenuItemClick={props.onMenuItemClick}
-                />
-              </React.Fragment>
-            )}
-          </li>
-        );
-      } else {
-        return (
-          <li className={styleClass} key={i} role="none">
-            {renderLink(item, i)}
-            <CSSTransition
-              classNames="layout-submenu-wrapper"
-              timeout={{ enter: 1000, exit: 450 }}
-              in={active}
-              unmountOnExit
-            >
-              <AppSubmenu
-                items={item.items}
-                onMenuItemClick={props.onMenuItemClick}
-              />
-            </CSSTransition>
-          </li>
-        );
-      }
-    });
+                    {content}
+                </NavLink>
+            );
+        } else {
+            return (
+                <a
+                    tabIndex="0"
+                    aria-label={item.label}
+                    onKeyDown={onKeyDown}
+                    role="menuitem"
+                    href={item.url}
+                    className="p-ripple"
+                    onClick={(e) => onMenuItemClick(e, item, i)}
+                    target={item.target}
+                >
+                    {content}
+                </a>
+            );
+        }
+    };
 
-  return items ? (
-    <ul className={props.className} role="menu">
-      {items}
-    </ul>
-  ) : null;
+    let items =
+        props.items &&
+        props.items.map((item, i) => {
+            let active = activeIndex === i;
+            let styleClass = classNames(item.badgeStyleClass, {
+                'layout-menuitem-category': props.root,
+                'active-menuitem': active && !item.to,
+            });
+
+            if (props.root) {
+                return (
+                    <li className={styleClass} key={i} role="none">
+                        {props.root === true && (
+                            <React.Fragment>
+                                <div
+                                    className="layout-menuitem-root-text"
+                                    aria-label={item.label}
+                                >
+                                    {item.label}
+                                </div>
+                                <AppSubmenu
+                                    items={item.items}
+                                    onMenuItemClick={props.onMenuItemClick}
+                                />
+                            </React.Fragment>
+                        )}
+                    </li>
+                );
+            } else {
+                return (
+                    <li className={styleClass} key={i} role="none">
+                        {renderLink(item, i)}
+                        <CSSTransition
+                            classNames="layout-submenu-wrapper"
+                            timeout={{ enter: 1000, exit: 450 }}
+                            in={active}
+                            unmountOnExit
+                        >
+                            <AppSubmenu
+                                items={item.items}
+                                onMenuItemClick={props.onMenuItemClick}
+                            />
+                        </CSSTransition>
+                    </li>
+                );
+            }
+        });
+
+    return items ? (
+        <ul className={props.className} role="menu">
+            {items}
+        </ul>
+    ) : null;
 };
 
 export const AppMenu = (props) => {
-  return (
-    <div className="layout-menu-container">
-      <AppSubmenu
-        items={props.model}
-        className="layout-menu"
-        onMenuItemClick={props.onMenuItemClick}
-        root={true}
-        role="menu"
-      />
-      <a
-        href="https://www.primefaces.org/primeblocks-react"
-        className="block mt-3"
-      >
-        <img
-          alt="primeblocks"
-          className="w-full"
-          src={
-            props.layoutColorMode === 'light'
-              ? 'assets/layout/images/banner-primeblocks.png'
-              : 'assets/layout/images/banner-primeblocks-dark.png'
-          }
-        />
-      </a>
-    </div>
-  );
-};
-
     return (
         <div className="layout-menu-container">
-            <AppSubmenu items={props.model} className="layout-menu"  onMenuItemClick={props.onMenuItemClick} root={true} role="menu" />
-            
+            <AppSubmenu
+                items={props.model}
+                className="layout-menu"
+                onMenuItemClick={props.onMenuItemClick}
+                root={true}
+                role="menu"
+            />
+           
         </div>
     );
+
+
+    
 }
diff --git a/web-ui/web-react/src/AppTopbar.js b/web-ui/web-react/src/AppTopbar.js
index d0ad87f3..be2a90bf 100644
--- a/web-ui/web-react/src/AppTopbar.js
+++ b/web-ui/web-react/src/AppTopbar.js
@@ -6,12 +6,7 @@ import Cookies from 'universal-cookie';
 const cookies = new Cookies();
 
 export const AppTopbar = (props) => {
-  return (
-    <div className="layout-topbar">
-      <Link to="/" className="layout-topbar-logo">
-        <img src={'assets/layout/images/logo-dark.svg'} alt="logo" />
-        <span>KATOIKIA</span>
-      </Link>
+ 
 
      function cerrarSesion()  {
         cookies.remove('id', { path: "/" });
diff --git a/web-ui/web-react/src/components/LogIn.js b/web-ui/web-react/src/components/LogIn.js
index 466bf3d6..8777a82f 100644
--- a/web-ui/web-react/src/components/LogIn.js
+++ b/web-ui/web-react/src/components/LogIn.js
@@ -39,9 +39,6 @@ const LogIn = () => {
 
             {/* <Button label="Registrar" onClick={registrarAdmin}></Button> */}
           </div>
-        </div>
-      </div>
-    </div>
   );
 };