diff --git a/frontend/app/initialize.tsx b/frontend/app/initialize.tsx
index 0928cea07..0157f48de 100644
--- a/frontend/app/initialize.tsx
+++ b/frontend/app/initialize.tsx
@@ -35,7 +35,12 @@ const customTheme: ThemeConfig = {
 
       itemActiveBg: colors['active-blue'],
       itemSelectedBg: colors['active-blue'],
-      itemSelectedColor: colors['teal']
+      itemSelectedColor: colors['teal'],
+
+      itemMarginBlock: 0,
+      itemPaddingInline: 50,
+      iconMarginInlineEnd: 14,
+      collapsedWidth: 180,
     },
     Button: {
       colorPrimary: colors.teal
diff --git a/frontend/app/layout/SideMenu.tsx b/frontend/app/layout/SideMenu.tsx
index b88f77295..87710ca05 100644
--- a/frontend/app/layout/SideMenu.tsx
+++ b/frontend/app/layout/SideMenu.tsx
@@ -47,14 +47,14 @@ function SideMenu(props: Props) {
       const updatedItems = category.items.map(item => {
         if (item.hidden) return item;
 
-          const isHidden = [
-            (item.key === MENU.NOTES && modules.includes(MODULES.NOTES)),
-            (item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS || item.key === MENU.STATS) && modules.includes(MODULES.ASSIST),
-            (item.key === MENU.SESSIONS && modules.includes(MODULES.OFFLINE_RECORDINGS)),
-            (item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS)),
-            (item.isAdmin && !isAdmin),
-            (item.isEnterprise && !isEnterprise)
-          ].some(cond => cond);
+        const isHidden = [
+          (item.key === MENU.NOTES && modules.includes(MODULES.NOTES)),
+          (item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS || item.key === MENU.STATS) && modules.includes(MODULES.ASSIST),
+          (item.key === MENU.SESSIONS && modules.includes(MODULES.OFFLINE_RECORDINGS)),
+          (item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS)),
+          (item.isAdmin && !isAdmin),
+          (item.isEnterprise && !isEnterprise)
+        ].some(cond => cond);
 
         return { ...item, hidden: isHidden };
       });
@@ -81,7 +81,7 @@ function SideMenu(props: Props) {
 
 
   const menuRoutes: any = {
-    exit: () => props.history.push(withSiteId(routes.sessions(), siteId)),
+    [MENU.EXIT]: () => props.history.push(withSiteId(routes.sessions(), siteId)),
     [MENU.SESSIONS]: () => withSiteId(routes.sessions(), siteId),
     [MENU.BOOKMARKS]: () => withSiteId(routes.bookmarks(), siteId),
     [MENU.NOTES]: () => withSiteId(routes.notes(), siteId),
@@ -122,7 +122,7 @@ function SideMenu(props: Props) {
   const isMenuItemActive = (key: string) => {
     const { pathname } = location;
     const activeRoute = menuRoutes[key];
-    if (activeRoute) {
+    if (activeRoute && !key.includes('exit')) {
       const route = activeRoute();
       return pathname.startsWith(route);
     }
@@ -142,17 +142,6 @@ function SideMenu(props: Props) {
         style={{ marginTop: '8px', border: 'none' }}
         selectedKeys={menu.flatMap(category => category.items.filter((item: any) => isMenuItemActive(item.key)).map(item => item.key))}
       >
-        {isPreferencesActive && (
-          <Menu.ItemGroup>
-            <Menu.Item
-              key='exit'
-              // style={{ color: '#333', height: '32px' }}
-              icon={<SVG name='arrow-bar-left' size={16} />}
-            >
-              {!isCollapsed && <Text className='ml-2'>Exit</Text>}
-            </Menu.Item>
-          </Menu.ItemGroup>
-        )}
         {menu.map((category, index) => (
           <React.Fragment key={category.key}>
             {!category.hidden && (
@@ -160,11 +149,26 @@ function SideMenu(props: Props) {
                 {index > 0 && <Divider style={{ margin: '6px 0' }} />}
                 <Menu.ItemGroup
                   key={category.key}
-                  title={<div style={{ paddingLeft: isCollapsed ? '' : '6px' }}
-                              className={cn({ 'text-center': isCollapsed })}>{category.title}</div>}
+                  title={category.title}
+                  // title={<div style={{ paddingLeft: isCollapsed ? '' : '6px' }}
+                  //             className={cn({ 'text-center': isCollapsed })}>{category.title}</div>}
                 >
                   {category.items.filter((item: any) => !item.hidden).map((item: any) => {
                     const isActive = isMenuItemActive(item.key);
+
+                    if (item.key === MENU.EXIT) {
+                      return (
+                        <Menu.Item
+                          key={item.key}
+                          style={{ paddingLeft: '20px' }}
+                          icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
+                          className={cn('!rounded hover-fill-teal')}
+                        >
+                          {item.label}
+                        </Menu.Item>
+                      );
+                    }
+
                     return item.children ? (
                       <Menu.SubMenu
                         key={item.key}
@@ -178,7 +182,8 @@ function SideMenu(props: Props) {
                     ) : (
                       <Menu.Item
                         key={item.key}
-                        icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} className={"hover-fill-teal"} />}
+                        icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''}
+                                    className={'hover-fill-teal'} />}
                         style={{ paddingLeft: '20px' }}
                         className={cn('!rounded hover-fill-teal')}
                         itemIcon={item.leading ?
diff --git a/frontend/app/layout/data.ts b/frontend/app/layout/data.ts
index e7de5f7aa..18a343e13 100644
--- a/frontend/app/layout/data.ts
+++ b/frontend/app/layout/data.ts
@@ -54,6 +54,7 @@ export const enum MENU {
   FEATURE_FLAGS = 'feature-flags',
   PREFERENCES = 'preferences',
   SUPPORT = 'support',
+  EXIT = 'exit',
 }
 
 export const categories: Category[] = [
@@ -74,7 +75,7 @@ export const categories: Category[] = [
     items: [
       { label: 'Cobrowse', key: MENU.LIVE_SESSIONS, icon: 'broadcast' },
       { label: 'Recordings', key: MENU.RECORDINGS, icon: 'record-btn', isEnterprise: true },
-      { label: 'Cobrowsing Report', key: MENU.STATS, icon: 'file-bar-graph', isEnterprise: true },
+      { label: 'Cobrowsing Report', key: MENU.STATS, icon: 'file-bar-graph', isEnterprise: true }
     ]
   },
   {
@@ -106,6 +107,13 @@ export const categories: Category[] = [
 ];
 
 export const preferences: Category[] = [
+  {
+    title: '',
+    key: 'exit',
+    items: [
+      { label: 'Exit', key: MENU.EXIT, icon: 'arrow-bar-left' }
+    ]
+  },
   {
     title: 'Preferences',
     key: 'preferences',