From bfb967f5be305c4f424683614ab5f186af97086f Mon Sep 17 00:00:00 2001
From: Celso <celopez@my.bridgeport.edu>
Date: Wed, 28 Aug 2024 16:34:40 -0400
Subject: [PATCH 1/2] Implements redesign of SideMenu

---
 frontend/assets/svg/ChatBubbleV2.svg          |  6 +++
 frontend/assets/svg/HomeIconOutline.svg       |  3 ++
 frontend/assets/svg/KAIAvatar.svg             | 19 ++++++++
 .../layouts/MainAppLayout/ MainAppLayout.jsx  |  4 +-
 .../layouts/MainAppLayout/NavMenu/NavMenu.jsx | 20 ++++++---
 .../layouts/MainAppLayout/NavMenu/styles.js   | 40 ++++++++---------
 .../MainAppLayout/SideMenu/SideMenu.jsx       | 36 ++++++++++++---
 .../layouts/MainAppLayout/SideMenu/styles.js  | 44 ++++++++++---------
 frontend/layouts/MainAppLayout/styles.js      | 22 +++++++++-
 9 files changed, 137 insertions(+), 57 deletions(-)
 create mode 100644 frontend/assets/svg/ChatBubbleV2.svg
 create mode 100644 frontend/assets/svg/HomeIconOutline.svg
 create mode 100644 frontend/assets/svg/KAIAvatar.svg

diff --git a/frontend/assets/svg/ChatBubbleV2.svg b/frontend/assets/svg/ChatBubbleV2.svg
new file mode 100644
index 000000000..2a0bda336
--- /dev/null
+++ b/frontend/assets/svg/ChatBubbleV2.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2344 18.0699C15.1783 21.1263 10.6529 21.7867 6.9495 20.074C6.40279 19.8539 5.95457 19.676 5.52846 19.676C4.34157 19.683 2.86425 20.8339 2.09645 20.067C1.32864 19.2991 2.48035 17.8206 2.48035 16.6266C2.48035 16.2004 2.3095 15.7602 2.08941 15.2124C0.375917 11.5096 1.03719 6.98269 4.09334 3.92721C7.99468 0.0244319 14.3331 0.0244322 18.2344 3.9262C22.1428 7.83501 22.1358 14.1681 18.2344 18.0699Z" stroke="#9E94A5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1025 11.4131H15.1115" stroke="#9E94A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.0935 11.4131H11.1025" stroke="#9E94A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.08449 11.4131H7.09349" stroke="#9E94A5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/assets/svg/HomeIconOutline.svg b/frontend/assets/svg/HomeIconOutline.svg
new file mode 100644
index 000000000..3fa83e49d
--- /dev/null
+++ b/frontend/assets/svg/HomeIconOutline.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1629 7.90625V17.9999C19.1629 19.1045 18.2675 19.9999 17.1629 19.9999H7.1629C6.05833 19.9999 5.1629 19.1045 5.1629 17.9999V7.90625M2.1629 10L11.016 3.80285C11.7046 3.3208 12.6212 3.3208 13.3098 3.80285L22.1629 10" stroke="#AC92FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/assets/svg/KAIAvatar.svg b/frontend/assets/svg/KAIAvatar.svg
new file mode 100644
index 000000000..8ad7f17f8
--- /dev/null
+++ b/frontend/assets/svg/KAIAvatar.svg
@@ -0,0 +1,19 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_1338_1421)">
+<circle cx="53" cy="49" r="23" fill="#9E86FF"/>
+</g>
+<path d="M48.973 50.7485L53.0484 54H48.4433L45.4714 51.4106C44.4562 50.5278 43.9854 50.1011 43.647 49.7628C43.6617 50.2189 43.6911 50.7044 43.6911 51.1752V54H40.6309V44.1572H43.6911V46.4377C43.6911 47.0409 43.6617 47.6441 43.6323 48.1591C44.0148 47.806 44.5445 47.3057 45.442 46.5554L48.2815 44.1572H52.6953L48.9289 46.9821C47.6194 47.9678 47.0162 48.4092 46.3836 48.7917C46.9426 49.1743 47.7077 49.7186 48.973 50.7485Z" fill="white"/>
+<path d="M63.6133 52H55.8333L57.0833 50.28H58.7633C59.1633 50.28 59.6333 50.28 59.9533 50.3C59.7733 50.06 59.4933 49.65 59.2733 49.33L58.0733 47.56L54.9333 52H52.4833L56.7733 45.95C57.0533 45.56 57.4633 45.2 58.1133 45.2C58.7333 45.2 59.1433 45.53 59.4333 45.95L63.6133 52ZM67.4509 45.31V52H65.3809V45.31H67.4509Z" fill="white"/>
+<defs>
+<filter id="filter0_d_1338_1421" x="0" y="0" width="106" height="106" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="15"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1338_1421"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1338_1421" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/frontend/layouts/MainAppLayout/ MainAppLayout.jsx b/frontend/layouts/MainAppLayout/ MainAppLayout.jsx
index a2690b2ba..af9204ee4 100644
--- a/frontend/layouts/MainAppLayout/ MainAppLayout.jsx	
+++ b/frontend/layouts/MainAppLayout/ MainAppLayout.jsx	
@@ -52,7 +52,9 @@ const MainAppLayout = (props) => {
   const renderApp = () => {
     return (
       <>
-        <SideMenu />
+        <Grid {...styles.navBarContainer}>
+          <SideMenu />
+        </Grid>
         <Grid {...styles.contentGridProps(extraContentProps, isToolPage)}>
           {children}
         </Grid>
diff --git a/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx b/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx
index db5f4cb3f..28a19d68d 100644
--- a/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx
+++ b/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx
@@ -1,8 +1,10 @@
 import { Grid, MenuItem } from '@mui/material';
 import { useRouter } from 'next/router';
 
-import Briefcase from '@/assets/svg/Briefcase.svg';
-import ChatBubble from '@/assets/svg/ChatBubble.svg';
+import DiscoveryIcon from '@/assets/svg/add-block.svg';
+
+import ChatBubble from '@/assets/svg/ChatBubbleV2.svg';
+import HomeIcon from '@/assets/svg/HomeIconOutline.svg';
 
 import ROUTES from '@/constants/routes';
 
@@ -12,17 +14,23 @@ import { chatRegex, homeRegex } from '@/regex/routes';
 
 const PAGES = [
   {
-    name: 'Kai Tools',
+    name: 'Home',
     link: ROUTES.HOME,
-    icon: <Briefcase />,
+    icon: <HomeIcon />,
     id: 'page_1',
   },
   {
-    name: 'Kai Chat',
+    name: 'Discovery',
     link: ROUTES.CHAT,
-    icon: <ChatBubble />,
+    icon: <DiscoveryIcon />,
     id: 'page_2',
   },
+  {
+    name: 'Chat',
+    link: ROUTES.CHAT,
+    icon: <ChatBubble />,
+    id: 'page_3',
+  },
 ];
 
 /**
diff --git a/frontend/layouts/MainAppLayout/NavMenu/styles.js b/frontend/layouts/MainAppLayout/NavMenu/styles.js
index 70b6d0a1d..679fcf878 100644
--- a/frontend/layouts/MainAppLayout/NavMenu/styles.js
+++ b/frontend/layouts/MainAppLayout/NavMenu/styles.js
@@ -3,49 +3,47 @@ const styles = {
     container: true,
     item: true,
     mobileSmall: true,
-    rowGap: { laptop: 2, desktop: 4 },
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
     px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start',
   },
   menuItemProps: (isActive) => ({
     sx: {
       py: 0,
       px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
-      width: '100%',
-      borderRadius: '24px',
+      maxWidth: '160px',
+      maxHeight: '40px',
+      borderRadius: '8px',
+      background: '#24272F',
+      m: 1,
+      border: isActive ? '1px solid #9D74FF' : '1px solid transparent',
       color: (theme) =>
-        isActive
-          ? `${theme.palette.Background.purple}95`
-          : theme.palette.Common.White['100p'],
+        isActive ? `${theme.palette.Background.purple}95` : '#9E94A5',
       path: {
-        fill: (theme) =>
-          isActive
-            ? `${theme.palette.Background.purple}95`
-            : theme.palette.Common.White['100p'],
         stroke: (theme) =>
-          isActive
-            ? `${theme.palette.Background.purple}95`
-            : theme.palette.Common.White['100p'],
+          isActive ? `${theme.palette.Background.purple}95` : '#9E94A5',
       },
       transition: (theme) => theme.transitions.create('all'),
       ':hover': {
-        color: (theme) => theme.palette.Common.White['100p'],
+        color: '#9E94A5',
         background: (theme) => `${theme.palette.Background.purple}30`,
         path: {
-          fill: (theme) => theme.palette.Common.White['100p'],
-          stroke: (theme) => theme.palette.Common.White['100p'],
+          stroke: '#9E94A5',
         },
       },
     },
   }),
   innerMenuGridProps: {
     container: true,
+    item: true,
     mobileSmall: 12,
-    columnGap: 4,
+    columnGap: 1,
+    display: 'flex',
+    flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
+    bgColor: '#24272F',
   },
   menuIconGridProps: {
     container: true,
@@ -62,7 +60,7 @@ const styles = {
   menuTitleGridProps: {
     container: true,
     item: true,
-    justifyContent: 'flex-start˝',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     mobileSmall: true,
     fontSize: { mobileSmall: '16px', desktop: '18px' },
diff --git a/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx b/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx
index 9e0e57253..4a4c7c903 100644
--- a/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx
+++ b/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx
@@ -4,7 +4,7 @@ import { Button, Grid, Typography } from '@mui/material';
 import { signOut } from 'firebase/auth';
 import { useRouter } from 'next/router';
 
-import LargeLogo from '@/assets/svg/MenuLogo.svg';
+import KAIAvatar from '@/assets/svg/KAIAvatar.svg';
 
 import ROUTES from '@/constants/routes';
 
@@ -30,10 +30,9 @@ const SideMenu = () => {
     return (
       <Grid onClick={() => router.push(ROUTES.HOME)} {...styles.logoGridProps}>
         <Grid {...styles.logoImageGridProps}>
-          <LargeLogo />
+          <KAIAvatar />
         </Grid>
         <Grid {...styles.titleGridProps}>
-          <Typography {...styles.titleProps}>KAI.AI</Typography>
           <Typography {...styles.subtitleProps}>
             AI Teaching Assistant
           </Typography>
@@ -42,16 +41,38 @@ const SideMenu = () => {
     );
   };
 
+  const renderProfileImage = () => {
+    return (
+      <Grid {...styles.profileImageGridProps}>
+        <Grid {...styles.logoImageGridProps}>
+          <KAIAvatar />
+        </Grid>
+        <Grid {...styles.titleGridProps}>
+          <Typography {...styles.subtitleProps} color="#9E94A5">
+            Alysa Myers
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  };
+
   const renderLogout = () => {
     return (
       <Grid {...styles.logoutGridProps}>
         <Button
           onClick={handleSignOutUser}
-          startIcon={<LogoutOutlined />}
+          endIcon={
+            <LogoutOutlined
+              sx={{
+                background: '#24272F',
+                borderRadius: '6px',
+                height: '24px',
+                width: '24px',
+              }}
+            />
+          }
           {...styles.logoutButtonProps}
-        >
-          Logout
-        </Button>
+        />
       </Grid>
     );
   };
@@ -60,6 +81,7 @@ const SideMenu = () => {
     <Grid {...styles.mainGridProps}>
       {renderLogo()}
       <NavMenu />
+      {renderProfileImage()}
       {renderLogout()}
     </Grid>
   );
diff --git a/frontend/layouts/MainAppLayout/SideMenu/styles.js b/frontend/layouts/MainAppLayout/SideMenu/styles.js
index 8fe3cd99b..6735c1ec0 100644
--- a/frontend/layouts/MainAppLayout/SideMenu/styles.js
+++ b/frontend/layouts/MainAppLayout/SideMenu/styles.js
@@ -2,21 +2,17 @@ const styles = {
   mainGridProps: {
     container: true,
     item: true,
-    width: '360px',
-    flexDirection: 'column',
-    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+    flexDirection: 'row',
     alignItems: 'center',
-    py: { laptop: 4, desktop: 5, desktopMedium: 6 },
-    bgcolor: (theme) => theme.palette.Dark_Colors.Dark[6],
+    bgcolor: (theme) => theme.palette.Dark_Colors.Dark[6], // proper color #181A205E; change it later in development
   },
   logoGridProps: {
     container: true,
     item: true,
-    columnGap: 1,
     width: 'auto',
     justifyContent: 'center',
-    alignItems: 'center',
-    mb: 8,
     sx: {
       cursor: 'pointer',
     },
@@ -25,7 +21,7 @@ const styles = {
   logoutGridProps: {
     container: true,
     item: true,
-    width: '100%',
+    width: 'auto',
     px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
   },
   logoutButtonProps: {
@@ -38,20 +34,17 @@ const styles = {
       px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
       borderColor: 'transparent',
       transition: (theme) => theme.transitions.create('all'),
-      span: {
-        mr: 4,
-      },
-      color: (theme) => theme.palette.Common.White['100p'],
+      color: '#9E94A5',
       path: {
-        fill: (theme) => theme.palette.Common.White['100p'],
-        stroke: (theme) => theme.palette.Common.White['100p'],
+        fill: '#9E94A5',
+        stroke: '#9E94A5',
       },
       ':hover': {
-        color: (theme) => theme.palette.Common.White['100p'],
+        color: '#9E94A5',
         background: (theme) => `${theme.palette.Background.purple}30`,
         path: {
-          fill: (theme) => theme.palette.Common.White['100p'],
-          stroke: (theme) => theme.palette.Common.White['100p'],
+          fill: '#9E94A5',
+          stroke: '#9E94A5',
         },
       },
     },
@@ -62,12 +55,21 @@ const styles = {
     mobileSmall: 'auto',
     height: 'auto',
   },
+  profileImageGridProps: {
+    container: true,
+    item: true,
+    width: 'auto',
+    justifyContent: 'center',
+    sx: {
+      cursor: 'pointer',
+    },
+    px: { laptop: 2, desktop: 3, desktopMedium: 4 },
+  },
   titleGridProps: {
     container: true,
     item: true,
     mobileSmall: true,
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
     alignItems: 'center',
   },
   titleProps: {
@@ -78,7 +80,7 @@ const styles = {
   subtitleProps: {
     fontFamily: 'Satoshi Bold',
     fontSize: '16px',
-    color: '#AD83FF',
+    color: 'white',
     textAlign: 'left',
   },
 };
diff --git a/frontend/layouts/MainAppLayout/styles.js b/frontend/layouts/MainAppLayout/styles.js
index e25049d43..f8133fc86 100644
--- a/frontend/layouts/MainAppLayout/styles.js
+++ b/frontend/layouts/MainAppLayout/styles.js
@@ -1,10 +1,30 @@
 const styles = {
   mainGridProps: {
-    position: 'relative',
     container: true,
     mobileSmall: 12,
     height: '100vh',
     maxHeight: '100vh',
+    width: '100vw',
+    maxWidth: '100vw',
+    justifyContent: 'center',
+    padding: 0,
+  },
+  navBarContainer: {
+    position: 'fixed',
+    display: 'flex',
+    justifyContent: 'center',
+    width: '1380px',
+    maxWidth: '100%',
+    height: '62xp',
+    maxHeight: '100%',
+    py: 2,
+    zIndex: 1,
+    sx: (theme) => ({
+      inset: '0 auto auto auto',
+      [theme.breakpoints.down('laptop')]: {
+        display: 'none',
+      },
+    }),
   },
   contentGridProps: (extraContentProps, isToolPage) => ({
     container: true,

From d60d63a489100fd27efbd6ace99a4d7644754bab Mon Sep 17 00:00:00 2001
From: Celso <celopez@my.bridgeport.edu>
Date: Tue, 3 Sep 2024 11:55:17 -0400
Subject: [PATCH 2/2] Implements ui revamp of the SideMenu to a Navbar.

---
 frontend/assets/svg/KAIAvatar.svg             |  2 +-
 .../layouts/MainAppLayout/ MainAppLayout.jsx  | 10 +++++--
 .../layouts/MainAppLayout/NavMenu/NavMenu.jsx |  2 +-
 .../layouts/MainAppLayout/NavMenu/styles.js   |  1 +
 .../MainAppLayout/SideMenu/SideMenu.jsx       | 17 ++---------
 .../layouts/MainAppLayout/SideMenu/styles.js  | 28 ++++++++++++++++---
 frontend/layouts/MainAppLayout/styles.js      | 28 +++++++++++++------
 7 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/frontend/assets/svg/KAIAvatar.svg b/frontend/assets/svg/KAIAvatar.svg
index 8ad7f17f8..81ad1cb86 100644
--- a/frontend/assets/svg/KAIAvatar.svg
+++ b/frontend/assets/svg/KAIAvatar.svg
@@ -1,4 +1,4 @@
-<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="62px" height="62px" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_1338_1421)">
 <circle cx="53" cy="49" r="23" fill="#9E86FF"/>
 </g>
diff --git a/frontend/layouts/MainAppLayout/ MainAppLayout.jsx b/frontend/layouts/MainAppLayout/ MainAppLayout.jsx
index b4f8b88d7..aed4eabcf 100644
--- a/frontend/layouts/MainAppLayout/ MainAppLayout.jsx	
+++ b/frontend/layouts/MainAppLayout/ MainAppLayout.jsx	
@@ -11,6 +11,7 @@ import Loader from '@/components/Loader';
 
 import ImageURLs from '@/assets/urls';
 
+import SideMenu from './SideMenu';
 import styles from './styles';
 
 import { setLoading } from '@/redux/slices/authSlice';
@@ -53,11 +54,16 @@ const MainAppLayout = (props) => {
 
   const renderApp = () => {
     return (
-      <Grid {...styles.contentGridProps(extraContentProps, isToolPage)}>
+      <Grid {...styles.mainGrid}>
         <Grid {...styles.bgGridProps}>
           <Image src={ImageURLs.GridBg} alt="grid_bg" {...styles.bgProps} />
         </Grid>
-        <Grid {...styles.childrenWrapProps}>{children}</Grid>
+        <Grid {...styles.navBarContainer}>
+          <SideMenu user={user.data} />
+        </Grid>
+        <Grid {...styles.contentGridProps(extraContentProps, isToolPage)}>
+          <Grid {...styles.childrenWrapProps}>{children}</Grid>
+        </Grid>
       </Grid>
     );
   };
diff --git a/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx b/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx
index 28a19d68d..b87a56180 100644
--- a/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx
+++ b/frontend/layouts/MainAppLayout/NavMenu/NavMenu.jsx
@@ -21,7 +21,7 @@ const PAGES = [
   },
   {
     name: 'Discovery',
-    link: ROUTES.CHAT,
+    link: ROUTES.CHAT, // TODO change the link to the new discovery page
     icon: <DiscoveryIcon />,
     id: 'page_2',
   },
diff --git a/frontend/layouts/MainAppLayout/NavMenu/styles.js b/frontend/layouts/MainAppLayout/NavMenu/styles.js
index 679fcf878..435476833 100644
--- a/frontend/layouts/MainAppLayout/NavMenu/styles.js
+++ b/frontend/layouts/MainAppLayout/NavMenu/styles.js
@@ -6,6 +6,7 @@ const styles = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
+    height: '100%',
     px: { laptop: 1, desktop: 1.5, desktopMedium: 2 },
   },
   menuItemProps: (isActive) => ({
diff --git a/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx b/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx
index 4a4c7c903..66c275565 100644
--- a/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx
+++ b/frontend/layouts/MainAppLayout/SideMenu/SideMenu.jsx
@@ -19,7 +19,7 @@ import { auth } from '@/redux/store';
  *
  * @return {ReactNode} The rendered Side Menu.
  */
-const SideMenu = () => {
+const SideMenu = ({ user }) => {
   const router = useRouter();
 
   const handleSignOutUser = () => {
@@ -48,9 +48,7 @@ const SideMenu = () => {
           <KAIAvatar />
         </Grid>
         <Grid {...styles.titleGridProps}>
-          <Typography {...styles.subtitleProps} color="#9E94A5">
-            Alysa Myers
-          </Typography>
+          <Typography {...styles.subtitleProps}>{user?.fullName}</Typography>
         </Grid>
       </Grid>
     );
@@ -61,16 +59,7 @@ const SideMenu = () => {
       <Grid {...styles.logoutGridProps}>
         <Button
           onClick={handleSignOutUser}
-          endIcon={
-            <LogoutOutlined
-              sx={{
-                background: '#24272F',
-                borderRadius: '6px',
-                height: '24px',
-                width: '24px',
-              }}
-            />
-          }
+          endIcon={<LogoutOutlined {...styles.logOutOutlineProps} />}
           {...styles.logoutButtonProps}
         />
       </Grid>
diff --git a/frontend/layouts/MainAppLayout/SideMenu/styles.js b/frontend/layouts/MainAppLayout/SideMenu/styles.js
index 6735c1ec0..5d6ef9aec 100644
--- a/frontend/layouts/MainAppLayout/SideMenu/styles.js
+++ b/frontend/layouts/MainAppLayout/SideMenu/styles.js
@@ -2,17 +2,21 @@ const styles = {
   mainGridProps: {
     container: true,
     item: true,
+    display: 'flex',
     height: '100%',
     width: '100%',
     flexDirection: 'row',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    bgcolor: (theme) => theme.palette.Dark_Colors.Dark[6], // proper color #181A205E; change it later in development
+    bgcolor: 'rgba(24, 26, 32, 0.37)',
   },
   logoGridProps: {
     container: true,
     item: true,
     width: 'auto',
-    justifyContent: 'center',
+    height: '100%',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
     sx: {
       cursor: 'pointer',
     },
@@ -49,17 +53,31 @@ const styles = {
       },
     },
   },
+
+  logOutOutlineProps: {
+    sx: {
+      background: '#24272F',
+      borderRadius: '6px',
+      height: '24px',
+      width: '24px',
+    },
+  },
+
   logoImageGridProps: {
     container: true,
     item: true,
     mobileSmall: 'auto',
-    height: 'auto',
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
   },
   profileImageGridProps: {
     container: true,
     item: true,
+    height: '100%',
     width: 'auto',
     justifyContent: 'center',
+    alignItems: 'center',
     sx: {
       cursor: 'pointer',
     },
@@ -70,6 +88,8 @@ const styles = {
     item: true,
     mobileSmall: true,
     justifyContent: 'flex-end',
+    height: '100%',
+    width: 'auto',
     alignItems: 'center',
   },
   titleProps: {
@@ -80,7 +100,7 @@ const styles = {
   subtitleProps: {
     fontFamily: 'Satoshi Bold',
     fontSize: '16px',
-    color: 'white',
+    color: '#9E94A5',
     textAlign: 'left',
   },
 };
diff --git a/frontend/layouts/MainAppLayout/styles.js b/frontend/layouts/MainAppLayout/styles.js
index 27d19c89c..935fb5df0 100644
--- a/frontend/layouts/MainAppLayout/styles.js
+++ b/frontend/layouts/MainAppLayout/styles.js
@@ -1,24 +1,35 @@
 const styles = {
   mainGridProps: {
+    position: 'relative',
     container: true,
     mobileSmall: 12,
     height: '100vh',
     maxHeight: '100vh',
+  },
+  mainGrid: {
+    position: 'relative',
+    container: true,
+    flexDirection: 'column',
+    height: '100vh',
     width: '100vw',
-    maxWidth: '100vw',
-    justifyContent: 'center',
-    padding: 0,
+    alignItems: 'center',
+    color: 'white',
+    overflow: 'hidden',
+    sx: {
+      background:
+        'radial-gradient(circle at center -100px, #4A426A 0%, #201E2B 50%, #000000 100%)',
+    },
   },
   navBarContainer: {
     position: 'fixed',
-    display: 'flex',
     justifyContent: 'center',
-    width: '1380px',
+    width: '1400px',
     maxWidth: '100%',
     height: '62xp',
     maxHeight: '100%',
     py: 2,
-    zIndex: 1,
+    zIndex: 10,
+    backgroundColor: 'transparent',
     sx: (theme) => ({
       inset: '0 auto auto auto',
       [theme.breakpoints.down('laptop')]: {
@@ -32,10 +43,9 @@ const styles = {
     mobileSmall: true,
     justifyContent: 'center',
     alignItems: 'flex-start',
+    marginTop: '80px',
     sx: {
       position: 'relative',
-      background:
-        'radial-gradient(circle at center -100px, #4A426A 0%, #201E2B 50%, #000000 100%)',
       py: {
         desktopLarge: 5,
         desktop: 4,
@@ -53,6 +63,7 @@ const styles = {
   }),
   bgGridProps: {
     position: 'fixed',
+    overflow: 'hidden',
     inset: '0 auto auto auto',
     width: '753px',
     height: '395px',
@@ -80,6 +91,7 @@ const styles = {
       },
     },
   },
+
   accountDetailsGridProps: {
     item: true,
     container: true,