diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index 67284b59c..26ee72a2d 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect } from 'react';
 import WidgetWrapper from '../WidgetWrapper';
 import { useObserver } from 'mobx-react-lite';
-import { Icon } from 'UI';
+import { Icon, Loader } from 'UI';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
-import { Loader } from 'UI';
 
 interface IWiProps {
     category: Record<string, any>
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
index ad893528a..d7ae15483 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import FilterItem from 'Shared/Filters/FilterItem';
 import cn from 'classnames';
 
-import { Button } from 'UI';
+import { Button } from 'antd';
 
 interface Props {
   filter: Filter;
@@ -47,7 +47,7 @@ function ExcludeFilters(props: Props) {
           ))}
         </div>
       ) : (
-        <Button variant="text-primary" onClick={addPageFilter}>
+        <Button type="link" onClick={addPageFilter}>
           Add Exclusion
         </Button>
       )}
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index e87a4dd54..61c8ddb3a 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -85,7 +85,7 @@ function FilterSeries(props: Props) {
         },
         canDelete,
         hideHeader = false,
-        emptyMessage = 'Add user event or filter to define the series by clicking Add Step.',
+        emptyMessage = 'Add an event or filter step to define the series.',
         supportsEmpty = true,
         excludeFilterKeys = [],
         canExclude = false,
diff --git a/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx b/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
index 9c4f58a66..54f94aff9 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Icon } from 'UI';
-import {Input} from 'antd';
+import {Input, Tooltip} from 'antd';
 
 interface Props {
   name: string;
@@ -50,7 +50,12 @@ function SeriesName(props: Props) {
         <div className="text-base h-8 flex items-center border-transparent">{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }</div>
       )}
       
-      <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div>
+
+      <div className="ml-3 cursor-pointer " onClick={() => setEditing(true)}>
+        <Tooltip title='Rename' placement='bottom'>
+          <Icon name="pencil" size="14" />
+        </Tooltip>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
index a7f883049..e7cfea94f 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
@@ -182,7 +182,7 @@ const SeriesList = observer(() => {
                             emptyMessage={
                                 metric.metricType === TABLE
                                     ? 'Filter data using any event or attribute. Use Add Step button below to do so.'
-                                    : 'Add user event or filter to define the series by clicking Add Step.'
+                                    : 'Add an event or filter step to define the series.'
                             }
                         />
                     </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index fe5730f25..7019f0826 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -318,7 +318,7 @@ function WidgetForm(props: Props) {
                                         emptyMessage={
                                             isTable
                                                 ? 'Filter data using any event or attribute. Use Add Step button below to do so.'
-                                                : 'Add user event or filter to define the series by clicking Add Step.'
+                                                : 'Add an event or filter step to define the series.'
                                         }
                                     />
                                 </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index ceab4346d..8e317f8ba 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -103,7 +103,7 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
                 emptyMessage={
                   isTable
                     ? 'Filter data using any event or attribute. Use Add Step button below to do so.'
-                    : 'Add user event or filter to define the series by clicking Add Step.'
+                    : 'Add an event or filter step to define the series.'
                 }
                 expandable={isSingleSeries}
               />
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
index ae3ab3355..2db526d7a 100644
--- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
@@ -80,7 +80,11 @@ function WidgetName(props: Props) {
         </Tooltip>
 
       )}
-      { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div> }
+      { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}>
+        <Tooltip title='Rename' placement='bottom'>
+          <Icon name="pencil" size="16" />
+        </Tooltip>
+        </div> }
     </div>
   );
 }
diff --git a/frontend/app/components/Onboarding/components/SideMenu.tsx b/frontend/app/components/Onboarding/components/SideMenu.tsx
index 93a742417..a9571bdcf 100644
--- a/frontend/app/components/Onboarding/components/SideMenu.tsx
+++ b/frontend/app/components/Onboarding/components/SideMenu.tsx
@@ -52,7 +52,7 @@ function SideMenu(props: Props) {
                 color={activeTab === OB_TABS.INSTALLING ? 'teal' : 'gray'}
               />
             }
-            className={'!rounded hover-fill-teal'}
+            className={'!rounded-lg hover-fill-teal'}
           >
             Setup OpenReplay
           </Menu.Item>
@@ -66,7 +66,7 @@ function SideMenu(props: Props) {
                 color={activeTab === OB_TABS.IDENTIFY_USERS ? 'teal' : 'gray'}
               />
             }
-            className={'!rounded hover-fill-teal'}
+            className={'!rounded-lg hover-fill-teal'}
           >
             Identify Users
           </Menu.Item>
@@ -80,7 +80,7 @@ function SideMenu(props: Props) {
                 color={activeTab === OB_TABS.MANAGE_USERS ? 'teal' : 'gray'}
               />
             }
-            className={'!rounded hover-fill-teal'}
+            className={'!rounded-lg hover-fill-teal'}
           >
             Invite Collaborators
           </Menu.Item>
@@ -94,7 +94,7 @@ function SideMenu(props: Props) {
                 color={activeTab === OB_TABS.INTEGRATIONS ? 'teal' : 'gray'}
               />
             }
-            className={'!rounded hover-fill-teal'}
+            className={'!rounded-lg hover-fill-teal'}
           >
             Integrations
           </Menu.Item>
@@ -109,7 +109,7 @@ function SideMenu(props: Props) {
                 color={activeTab === 'support' ? 'teal' : 'gray'}
               />
             }
-            className={'!rounded hover-fill-teal'}
+            className={'!rounded-lg hover-fill-teal'}
           >
             Support
           </Menu.Item>
diff --git a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
index a24daa891..2dec6fc5d 100644
--- a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
+++ b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
@@ -1,11 +1,16 @@
 import React from 'react';
-import { Icon, Button } from 'UI';
+import { Alert, Space, Button } from 'antd';
 import { connect } from 'react-redux';
 import { onboarding as onboardingRoute } from 'App/routes';
 import { withRouter } from 'react-router-dom';
 import * as routes from '../../../routes';
+import { indigo } from 'tailwindcss/colors';
+import { SquareArrowOutUpRight } from 'lucide-react';
+
 
 const withSiteId = routes.withSiteId;
+const indigoWithOpacity = `rgba(${parseInt(indigo[500].slice(1, 3), 16)}, ${parseInt(indigo[500].slice(3, 5), 16)}, ${parseInt(indigo[500].slice(5, 7), 16)}, 0.1)`; // 0.5 is the opacity level
+
 
 const NoSessionsMessage = (props) => {
   const {
@@ -19,32 +24,35 @@ const NoSessionsMessage = (props) => {
   return (
     <>
       {showNoSessions && (
-        <div>
-          <div
-            className='rounded text-sm flex items-center p-2 justify-between mb-4'
-            style={{ backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)' }}
-          >
-            <div className='flex items-center w-full'>
-              <div className='flex-shrink-0 w-8 flex justify-center'>
-                <Icon name='info-circle' size='14' color='gray-darkest' />
-              </div>
-              <div className='ml-2 color-gray-darkest mr-auto text-base'>
-                It might take a few minutes for first recording to appear.
-                <a href='https://docs.openreplay.com/en/troubleshooting/session-recordings/' className='link ml-2'>
-                  Troubleshoot
-                </a>
-                .
-              </div>
-              <Button
-                variant='primary'
-                className='h-8 text-base'
-                onClick={() => props.history.push(onboardingPath)}
-              >
-                Complete Project Setup
-              </Button>
-            </div>
+            <div className="w-full mb-5">
+            <Space direction="vertical" className="w-full">
+              <Alert
+                className="border-transparent rounded-lg w-full"
+                message="Your sessions will appear here soon. It may take a few minutes as sessions are optimized for efficient playback."
+                type="warning"
+                showIcon
+                action={
+                  <Space>
+                    <Button
+                      type="link"
+                      size="small"
+                      onClick={() => window.open('https://docs.openreplay.com/en/troubleshooting/session-recordings/', '_blank')}
+                      icon={<SquareArrowOutUpRight size={16} />}
+                    >
+                      Troubleshoot
+                    </Button>
+                    <Button
+                      type="default"
+                      size="small"
+                      onClick={() => history.push(onboardingPath)}
+                    >
+                      Complete Project Setup
+                    </Button>
+                  </Space>
+                }
+              />
+            </Space>
           </div>
-        </div>
       )}
     </>
   );
diff --git a/frontend/app/layout/SideMenu.tsx b/frontend/app/layout/SideMenu.tsx
index e96cdc297..5b2a57cdb 100644
--- a/frontend/app/layout/SideMenu.tsx
+++ b/frontend/app/layout/SideMenu.tsx
@@ -177,7 +177,7 @@ function SideMenu(props: Props) {
                           key={item.key}
                           style={{ paddingLeft: '20px' }}
                           icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
-                          className={cn('!rounded hover-fill-teal')}
+                          className={cn('!rounded-lg hover-fill-teal')}
                         >
                           {item.label}
                         </Menu.Item>
@@ -200,7 +200,7 @@ function SideMenu(props: Props) {
                         icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''}
                                     className={'hover-fill-teal'} />}
                         style={{ paddingLeft: '20px' }}
-                        className={cn('!rounded hover-fill-teal')}
+                        className={cn('!rounded-lg hover-fill-teal')}
                         itemIcon={item.leading ?
                           <Icon name={item.leading} size={16} color={isActive ? 'teal' : ''} /> : null}>
                         {item.label}