diff --git a/frontend/app/Router.tsx b/frontend/app/Router.tsx
index e31d5273d..101fba9e8 100644
--- a/frontend/app/Router.tsx
+++ b/frontend/app/Router.tsx
@@ -271,7 +271,6 @@ const Router: React.FC<RouterProps> = (props) => {
               </Switch>
             </Suspense>
           </Loader>
-          {!isEnterprise && !isPlayer && <SupportCallout />}
         </Layout>
       </ModalProvider>
     ) :
diff --git a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx
index eda9c5a78..e5b23caec 100644
--- a/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx
+++ b/frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx
@@ -39,8 +39,6 @@ function ProjectDropdown(props: Props) {
   const showCurrent = hasSiteId(location.pathname) || siteChangeAvailable(location.pathname);
   const { showModal, hideModal } = useModal();
 
-  console.log('activeSite', activeSite);
-
   const handleSiteChange = (newSiteId: string) => {
     props.setSiteId(newSiteId); // Fixed: should set the new siteId, not the existing one
     props.fetchIntegrationVariables();
diff --git a/frontend/app/layout/Logo.tsx b/frontend/app/layout/Logo.tsx
index f38e93e74..5ddc3634d 100644
--- a/frontend/app/layout/Logo.tsx
+++ b/frontend/app/layout/Logo.tsx
@@ -15,7 +15,7 @@ function Logo(props: Props) {
   return (
     <NavLink to={withSiteId(SESSIONS_PATH, props.siteId)}>
       <Button type='link' className='p-0'>
-        <AnimatedSVG name={ICONS.LOGO_FULL} size='150' />
+        <AnimatedSVG name={ICONS.LOGO_FULL} size='120' />
       </Button>
     </NavLink>
   );
diff --git a/frontend/app/layout/SideMenu.tsx b/frontend/app/layout/SideMenu.tsx
index c4ef8ef7b..9e57add1a 100644
--- a/frontend/app/layout/SideMenu.tsx
+++ b/frontend/app/layout/SideMenu.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Divider, Menu, Typography } from 'antd';
+import { Divider, Menu, Typography, Drawer, Button, Space } from 'antd';
 import SVG from 'UI/SVG';
 import * as routes from 'App/routes';
 import { client, CLIENT_DEFAULT_TAB, CLIENT_TABS, withSiteId } from 'App/routes';
@@ -8,8 +8,10 @@ import { categories as main_menu, MENU, preferences, PREFERENCES_MENU } from './
 import { connect } from 'react-redux';
 import { MODULES } from 'Components/Client/Modules';
 import cn from 'classnames';
-import { Icon as IconX } from 'UI';
-import Icon from '@ant-design/icons';
+import { Icon } from 'UI';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import SupportModal from 'App/layout/SupportModal';
+
 
 const { Text } = Typography;
 
@@ -24,7 +26,7 @@ function SideMenu(props: RouteComponentProps<Props>) {
   // @ts-ignore
   const { siteId, modules } = props;
   const isPreferencesActive = props.location.pathname.includes('/client/');
-  console.log('modules', modules);
+  const [supportOpen, setSupportOpen] = React.useState(false);
 
   let menu = isPreferencesActive ? preferences : main_menu;
 
@@ -76,6 +78,10 @@ function SideMenu(props: RouteComponentProps<Props>) {
   };
 
   const handleClick = (item: any) => {
+    if (item.key === MENU.SUPPORT) {
+      setSupportOpen(true);
+      return;
+    }
     const handler = menuRoutes[item.key];
     if (handler) {
       const route = handler();
@@ -100,44 +106,50 @@ function SideMenu(props: RouteComponentProps<Props>) {
 
 
   return (
-    <Menu defaultSelectedKeys={['1']} mode='inline' onClick={handleClick}
-          style={{ backgroundColor: '#f6f6f6', border: 'none', marginTop: '8px' }}>
-      {isPreferencesActive &&
-        <Menu.Item key='exit' style={{ color: '#333', height: '32px' }} icon={<SVG name='arrow-bar-left' />}>
-          <Text className='ml-2'>Exit</Text>
-        </Menu.Item>}
-      {(isPreferencesActive ? preferences : main_menu).map((category, index) => (
-        <React.Fragment key={category.key}>
-          {index > 0 && <Divider style={{ margin: '6px 0' }} />}
-          <Menu.ItemGroup key={category.key}
-                          title={<Text className='uppercase text-sm' type='secondary'>{category.title}</Text>}>
-            {category.items.filter((item: any) => !item.hidden).map((item: any) => {
-              const isActive = isMenuItemActive(item.key);
-              return item.children ? (
-                <Menu.SubMenu
-                  key={item.key}
-                  title={<Text className={cn('ml-5 !rounded')}>{item.label}</Text>}
-                  icon={<SVG name={item.icon} size={16} />}>
-                  {item.children.map((child: any) => <Menu.Item
-                    className={cn('ml-8', { 'ant-menu-item-selected !bg-active-dark-blue': isMenuItemActive(child.key) })}
-                    key={child.key}>{child.label}</Menu.Item>)}
-                </Menu.SubMenu>
-              ) : (
-                <Menu.Item
-                  key={item.key}
-                  icon={<IconX name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
-                  style={{ color: '#333', height: '32px' }}
-                  className={cn('!rounded', { 'ant-menu-item-selected !bg-active-dark-blue': isActive })}
-                  itemIcon={item.leading ?
-                    <IconX name={item.leading} size={16} color={isActive ? 'teal' : ''} /> : null}>
-                  <Text className={cn('ml-2', { 'color-teal': isActive })}>{item.label}</Text>
-                </Menu.Item>
-              );
-            })}
-          </Menu.ItemGroup>
-        </React.Fragment>
-      ))}
-    </Menu>
+    <>
+      <Menu defaultSelectedKeys={['1']} mode='inline' onClick={handleClick}
+            style={{ backgroundColor: '#f6f6f6', border: 'none', marginTop: '8px' }}>
+        {isPreferencesActive &&
+          <Menu.Item key='exit' style={{ color: '#333', height: '32px' }} icon={<SVG name='arrow-bar-left' />}>
+            <Text className='ml-2'>Exit</Text>
+          </Menu.Item>}
+        {(isPreferencesActive ? preferences : main_menu).map((category, index) => (
+          <React.Fragment key={category.key}>
+            {index > 0 && <Divider style={{ margin: '6px 0' }} />}
+            <Menu.ItemGroup key={category.key}
+                            title={<Text className='uppercase text-sm' type='secondary'>{category.title}</Text>}>
+              {category.items.filter((item: any) => !item.hidden).map((item: any) => {
+                const isActive = isMenuItemActive(item.key);
+                return item.children ? (
+                  <Menu.SubMenu
+                    key={item.key}
+                    title={<Text className={cn('ml-5 !rounded')}>{item.label}</Text>}
+                    icon={<SVG name={item.icon} size={16} />}>
+                    {item.children.map((child: any) => <Menu.Item
+                      className={cn('ml-8', { 'ant-menu-item-selected !bg-active-dark-blue': isMenuItemActive(child.key) })}
+                      key={child.key}>{child.label}</Menu.Item>)}
+                  </Menu.SubMenu>
+                ) : (
+                  <Menu.Item
+                    key={item.key}
+                    icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
+                    style={{ color: '#333', height: '32px' }}
+                    className={cn('!rounded', { 'ant-menu-item-selected !bg-active-dark-blue': isActive })}
+                    itemIcon={item.leading ?
+                      <Icon name={item.leading} size={16} color={isActive ? 'teal' : ''} /> : null}>
+                    <Text className={cn('ml-2', { 'color-teal': isActive })}>{item.label}</Text>
+                  </Menu.Item>
+                );
+              })}
+            </Menu.ItemGroup>
+          </React.Fragment>
+        ))}
+      </Menu>
+      <SupportModal
+        onClose={() => {
+          setSupportOpen(false);
+        }} open={supportOpen} />
+    </>
   );
 }
 
diff --git a/frontend/app/layout/SupportModal.tsx b/frontend/app/layout/SupportModal.tsx
new file mode 100644
index 000000000..34821450d
--- /dev/null
+++ b/frontend/app/layout/SupportModal.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Icon } from 'UI';
+import { Button, Drawer, Space, Typography } from 'antd';
+import { ArrowRightOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+interface Props {
+  onClose: () => void;
+  open: boolean;
+}
+
+function SupportModal(props: Props) {
+  const { onClose, open } = props;
+  const WEBSITE_ID = window.env.CRISP_KEY;
+  return (
+    <Drawer title='Open Replay Support' placement='right' open={open} width={400} onClose={onClose}
+            closable={false}>
+      <div className='flex flex-col items-center'>
+        <div className='border p-3 bg-white flex rounded'>
+          <div className='shrink-0 w-10 mt-2'>
+            <Icon name='bookmark' size={18} />
+          </div>
+          <div className='flex flex-col'>
+            <Text className='font-medium'>Documentation</Text>
+            <Text type='secondary' className='text-sm'>
+              Deploy, manage and customize OpenReplay through quick starts, tutorials, samples, and guides.
+            </Text>
+            <div className='my-1' />
+            <Button type='link' style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
+                    onClick={() => {
+                      window.open('https://docs.openreplay.com');
+                    }}>
+              <Space>
+                <div>Browse Docs</div>
+                <ArrowRightOutlined />
+              </Space>
+            </Button>
+          </div>
+        </div>
+
+        <div className='my-2' />
+
+        <div className='border p-3 bg-white flex rounded'>
+          <div className='shrink-0 w-10 mt-2'>
+            <Icon name='slack' size={18} />
+          </div>
+          <div className='flex flex-col'>
+            <Text className='font-medium'>Slack Community</Text>
+            <Text type='secondary' className='text-sm'>
+              Ask OpenReplay community and get quick resolution to your questions from 1000+ members.
+            </Text>
+            <div className='my-1' />
+            <Button type='link'
+                    style={{ display: 'flex', justifyContent: 'space-between', padding: '0' }}
+                    onClick={() => {
+                      window.open('https://slack.openreplay.com', '_blank');
+                    }}>
+              <Space>
+                <div>Ask Community</div>
+                <ArrowRightOutlined />
+              </Space>
+            </Button>
+          </div>
+        </div>
+
+        <div className='my-2' />
+
+        {!!WEBSITE_ID && (
+          <div className='flex rounded border w-full'>
+            <iframe src={`https://go.crisp.chat/chat/embed/?website_id=${WEBSITE_ID}`}
+                    style={{ height: '415px', margin: '0', padding: '0', width: '100%' }} />
+          </div>
+        )}
+      </div>
+    </Drawer>
+  );
+}
+
+export default SupportModal;
\ No newline at end of file
diff --git a/frontend/app/layout/data.ts b/frontend/app/layout/data.ts
index d7f56edc1..0e001b740 100644
--- a/frontend/app/layout/data.ts
+++ b/frontend/app/layout/data.ts
@@ -77,7 +77,7 @@ export const categories: Category[] = [
     key: 'analytics',
     items: [
       { label: 'Dashboards', key: MENU.DASHBOARDS, icon: 'columns-gap' },
-      { label: 'Card', key: MENU.CARDS, icon: 'bar-chart-line' },
+      { label: 'Cards', key: MENU.CARDS, icon: 'bar-chart-line' },
       // {
       //   label: 'Cards', key: MENU.CARDS, icon: 'bar-chart-line', children: [
       //     { label: 'All', key: MENU.CARDS },