diff --git a/Client/src/Components/NavBar/index.css b/Client/src/Components/NavBar/index.css
index 271e5ac8c..1e85ae4bc 100644
--- a/Client/src/Components/NavBar/index.css
+++ b/Client/src/Components/NavBar/index.css
@@ -21,3 +21,9 @@
   width: 10px;
   height: 5px;
 }
+
+#icon-button {
+  color: transparent;
+  -webkit-transition: none;
+  transition: none;
+}
diff --git a/Client/src/Components/NavBar/index.jsx b/Client/src/Components/NavBar/index.jsx
index 74bb48532..c0cb00ddc 100644
--- a/Client/src/Components/NavBar/index.jsx
+++ b/Client/src/Components/NavBar/index.jsx
@@ -110,7 +110,11 @@ function NavBar() {
 
           <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+              <IconButton
+                id="icon-button"
+                onClick={handleOpenUserMenu}
+                sx={{ p: 0 }}
+              >
                 <div className="icon-button-toggle">
                   <Avatar
                     alt="Remy Sharp"
@@ -144,8 +148,17 @@ function NavBar() {
               onClose={handleCloseUserMenu}
             >
               {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
+                <MenuItem
+                  id="menu-item"
+                  key={setting}
+                  onClick={handleCloseUserMenu}
+                >
+                  <Typography
+                    fontSize="var(--env-var-font-size-medium)"
+                    textAlign="center"
+                  >
+                    {setting}
+                  </Typography>
                 </MenuItem>
               ))}
             </Menu>
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index 7f0615907..851722d9b 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -1,7 +1,7 @@
-import NavBar from '../../Components/NavBar';
-import { Outlet } from 'react-router';
-import DashboardSidebar from '../../Components/DashboardSidebar';
-import './index.css';
+import NavBar from "../../Components/NavBar";
+import { Outlet } from "react-router";
+import DashboardSidebar from "../../Components/DashboardSidebar";
+import "./index.css";
 
 const HomeLayout = () => {
   return (
@@ -10,8 +10,9 @@ const HomeLayout = () => {
       <div className="main-content">
         <NavBar />
       </div>
+      <Outlet />
     </div>
   );
-}
+};
 
 export default HomeLayout;