diff --git a/react-ui/src/components/login/viewmodel/login.viewmodel.ts b/react-ui/src/components/login/viewmodel/login.viewmodel.ts
index 60c39b55ab7efe77b90fe5c449504f1d1193e2e6..fabb0a8613cfee92f864beef15a998dda159238f 100755
--- a/react-ui/src/components/login/viewmodel/login.viewmodel.ts
+++ b/react-ui/src/components/login/viewmodel/login.viewmodel.ts
@@ -7,9 +7,9 @@ export interface PageLoginState {
 }
 
 export default function useLoginViewModel() {
-    const {login, loginProperties} = useAuth();
-    const {isLoading: loginLoading, error: loginError, reset: resetLogin} = loginProperties!;
-    
+    const { login, loginProperties } = useAuth();
+    const { isLoading: loginLoading, error: loginError, reset: resetLogin } = loginProperties;
+
     const [localFormState, updateLocalFormState] = useState({
         submitted: false,
         valid: false,
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
index 713e634814717755dc2f0fdca1343bc1e3c2844f..52429031b69b6ef664707c5397f67153c04b08f8 100755
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
@@ -8,7 +8,6 @@
 
     &:hover {
         color: map-get($theme-colors, primary);
-        font-weight: 600;
     }
 
     &.active {
@@ -17,12 +16,14 @@
     }
 }
 
+#navbar {
+    padding: 1em !important;
+}
+
 // Add these styles to your protected.layout.scss
 nav {
-    border-radius: 0 0 $border-radius $border-radius;
-    box-shadow:
-        0px 4px 8px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 35%),
-        0px 2px 4px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 20%);
+    border-radius: $border-radius $border-radius;
+    padding: 0 !important;
 
     .head-links {
         text-decoration: none;
@@ -44,9 +45,7 @@ nav {
 
     .dropdown-menu {
         border-radius: $border-radius;
-        box-shadow:
-            0px 4px 8px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 35%),
-            0px 2px 4px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 20%);
+        box-shadow: $box-shadow;
         border: none;
         padding: 8px;
 
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
index b1d70b823b2cf6dce87eefedebb9e5902cbf34e9..5dc56545596d9eb52b2099343049e217dd5339b7 100755
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
@@ -6,7 +6,7 @@ import { MenuProvider } from '@provider/menu/menu.provider';
 import { DEVICE_URL, LOGIN_URL } from '@routes';
 import { fetchPnds, fetchUser } from '@shared/routine/user.routine';
 import React, { useEffect } from "react";
-import { Dropdown } from "react-bootstrap";
+import { Col, Container, Dropdown, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Link, Outlet, useNavigate } from "react-router-dom";
 import "./protected.layout.scss";
@@ -71,29 +71,35 @@ export const ProtectedLayout = () => {
 
   const HorizontalNavbar = () => {
     return (
-      <nav className="bg-white border-bottom border-dark py-2 d-flex align-items-center z-3 position-relative">
-        <Link to="/"><img src={logo} className="mx-4 me-5" width={25} alt="logo" /></Link>
-        <Link className={"head-links" + handleActiveLink(DEVICE_URL)} to="/">{t('protected.link.device_list')}</Link>
-        <Link className={"head-links" + handleActiveLink('/map')} to="/">{t('protected.link.map')}</Link>
-        <Link className={"head-links" + handleActiveLink('/configuration_management')} to="/">{t('protected.link.configuration_mgmt')}</Link>
+      <Container fluid>
+        <Row>
+          <Col>
+            <nav id="navbar" className="bg-white mx-4 mt-4 d-flex align-items-center c-box">
+              <Link to="/"><img src={logo} className="mx-4" width={45} alt="logo" /></Link>
+              <Link className={"head-links" + handleActiveLink(DEVICE_URL)} to="/">{t('protected.link.device_list')}</Link>
+              <Link className={"head-links" + handleActiveLink('/map')} to="/">{t('protected.link.map')}</Link>
+              <Link className={"head-links" + handleActiveLink('/configuration_management')} to="/">{t('protected.link.configuration_mgmt')}</Link>
 
-        <Dropdown className="ms-auto px-3">
-          <Dropdown.Toggle as={UserIconToggle}>
-            <FontAwesomeIcon icon={faCircleUser} className="clickable" size="2x" />
-          </Dropdown.Toggle>
+              <Dropdown className="ms-auto px-3">
+                <Dropdown.Toggle as={UserIconToggle}>
+                  <FontAwesomeIcon icon={faCircleUser} className="clickable" size="2x" />
+                </Dropdown.Toggle>
 
-          <Dropdown.Menu as={UserIconMenu}>
-            <Dropdown.Item eventKey="1">{user?.name}</Dropdown.Item>
-            <hr />
-            <Dropdown.Item eventKey="2">
-              <Link className="text-decoration-none text-reset" to="/">{t('protected.link.settings')}</Link>
-            </Dropdown.Item>
-            <Dropdown.Item eventKey="3" onClick={logout}>
-              <Link className="text-decoration-none text-reset" to="/"><FontAwesomeIcon className="clickable" icon={faRightFromBracket} />{t('protected.link.settings')}</Link>
-            </Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-      </nav>
+                <Dropdown.Menu as={UserIconMenu}>
+                  <Dropdown.Item eventKey="1">{user?.name}</Dropdown.Item>
+                  <hr />
+                  <Dropdown.Item eventKey="2">
+                    <Link className="text-decoration-none text-reset" to="/">{t('protected.link.settings')}</Link>
+                  </Dropdown.Item>
+                  <Dropdown.Item eventKey="3" onClick={logout}>
+                    <Link className="text-decoration-none text-reset" to="/"><FontAwesomeIcon className="clickable" icon={faRightFromBracket} /><span className="ms-1">{t('global.menu_item.logout')}</span></Link>
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </nav>
+          </Col>
+        </Row>
+      </Container>
     )
   }
 
diff --git a/react-ui/src/shared/style/box.scss b/react-ui/src/shared/style/box.scss
index 934861a2bc12db2aee1490f0cfa40b342919d59d..418fe4af09f4297e6f88308c577b6493bc6c126c 100755
--- a/react-ui/src/shared/style/box.scss
+++ b/react-ui/src/shared/style/box.scss
@@ -20,11 +20,11 @@ $border-width: 2px;
             border-box;
     border: $border-width solid transparent;
 
-    box-shadow: 0px 1px 2px rgba(map-get($theme-colors, "dark"), 0.12);
+    box-shadow: $box-shadow;
 }
 
 .abstract-box {
-    padding: 16px $box-padding;
+    padding: $box-padding;
     font-size: 0.9em;
     border-radius: calc($border-radius / 2);
 }
diff --git a/react-ui/src/shared/style/colors.scss b/react-ui/src/shared/style/colors.scss
index d91ffb44e5fac78ba0bcd1acf5a9f49f3baf7b33..29c971f863a63613015ad8165fe0ba24278c3a16 100755
--- a/react-ui/src/shared/style/colors.scss
+++ b/react-ui/src/shared/style/colors.scss
@@ -8,4 +8,6 @@ $theme-colors: (
   "black": #000000
 );
 
+$box-shadow: 0px 4px 8px rgba(map-get($theme-colors, "primary"), 0.2);
+
 @import "/node_modules/bootstrap/scss/bootstrap";