diff --git a/frontend/app/components/Session_/BugReport/BugReportModal.tsx b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
index 9d4f729a2..d898eb0f5 100644
--- a/frontend/app/components/Session_/BugReport/BugReportModal.tsx
+++ b/frontend/app/components/Session_/BugReport/BugReportModal.tsx
@@ -181,7 +181,7 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
         <MetaInfo envObject={envObject} metadata={metadata} />
         <Steps xrayProps={xrayProps} notes={notes} members={members} />
         <Comments />
-        <Session user={userDisplayName} sessionId={sessionId} sessionUrl={sessionUrl} />
+        <Session user={userDisplayName} sessionUrl={sessionUrl} />
         <div id="pdf-ignore" className="flex items-center gap-2 mt-4">
           <Button icon="file-pdf" variant="primary" onClick={onGen} loading={isRendering}>
             Download Bug Report
diff --git a/frontend/app/components/Session_/BugReport/components/Session.tsx b/frontend/app/components/Session_/BugReport/components/Session.tsx
index c545fadec..cfa35d91d 100644
--- a/frontend/app/components/Session_/BugReport/components/Session.tsx
+++ b/frontend/app/components/Session_/BugReport/components/Session.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import SectionTitle from './SectionTitle';
-import PlayLink from 'Shared/SessionItem/PlayLink';
+import { Icon } from 'UI'
 import { Tooltip } from 'react-tippy'
 
-export default function Session({ user, sessionId, sessionUrl }: { user: string, sessionId: string, sessionUrl: string }) {
+export default function Session({ user, sessionUrl }: { user: string, sessionUrl: string }) {
 
   const onSessionClick = () => {
     window.open(sessionUrl, '_blank').focus();
@@ -14,14 +14,14 @@ export default function Session({ user, sessionId, sessionUrl }: { user: string,
       <SectionTitle>Session recording</SectionTitle>
       {/* @ts-ignore */}
       <Tooltip title="Play session in new tab">
-        <div className="border hover:border-main cursor-pointer rounded flex items-center justify-between p-2" onClick={onSessionClick}>
+        <div className="border hover:border-main hover:bg-active-blue cursor-pointer rounded flex items-center justify-between p-2" onClick={onSessionClick}>
           <div className="flex flex-col">
             <div className="text-lg">{user}</div>
             <div className="text-disabled-text">
               {sessionUrl}
             </div>
           </div>
-          <PlayLink newTab isAssist={false} viewed={false} sessionId={sessionId} />
+          <Icon name="play-fill" size={38} color="teal" />
         </div>
       </Tooltip>
     </div>
diff --git a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx
index 41f414bf0..136bfe0fc 100644
--- a/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx
+++ b/frontend/app/components/Session_/BugReport/components/StepsComponents/SubModalItems.tsx
@@ -37,7 +37,7 @@ export const NetworkComp = ({ item }: { item: INetworkReq }) => (
       <div>{safeStr(item.url)}</div>
     </div>
     <div className="flex items-center gap-2">
-      <div className="px-1 bg-light-blue-bg rounded-xl font-mono">{item.status}</div>
+      <div className="rounded bg-active-blue px-2 whitespace-nowrap overflow-hidden text-clip font-mono">{item.status}</div>
       <div className={item.success ? '' : 'text-red'}>{safeStr(item.message)}</div>
     </div>
   </div>
@@ -57,8 +57,8 @@ export const NetworkReq = observer(({ item }: { item: INetworkReq }) => {
 
 export const NoteComp = ({ item }: { item: INoteItem }) => (
   <div className="flex items-start flex-col z-10">
-    <div className="font-semibold">{item.title}</div>
-    <div className="text-secondary">{item.message}</div>
+    <div>{item.message}</div>
+    <div className="text-disabled-text text-sm">{item.title}</div>
   </div>
 );
 
diff --git a/frontend/app/components/Session_/components/HeaderMenu.tsx b/frontend/app/components/Session_/components/HeaderMenu.tsx
index 49bbf7f4c..53b42a438 100644
--- a/frontend/app/components/Session_/components/HeaderMenu.tsx
+++ b/frontend/app/components/Session_/components/HeaderMenu.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Icon } from 'UI';
 import styles from './menu.module.css';
 import cn from 'classnames';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 
 interface MenuItem {
   key: number;
@@ -30,20 +31,22 @@ export default class ItemMenu extends React.PureComponent<Props> {
     this.setState({ displayed: !this.state.displayed });
   };
 
+  closeMenu = () => {
+    this.setState({ displayed: false })
+  }
+
   render() {
     const { items } = this.props;
     const { displayed } = this.state;
 
     return (
       <div className={styles.wrapper}>
+        <OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
         <div
           onClick={this.toggleMenu}
           className={cn(
             'flex items-center cursor-pointer select-none',
-            'rounded p-2 hover:bg-gray-light-shade',
-            {
-              'bg-gray-light': displayed,
-            }
+            'rounded p-2', displayed ? 'bg-gray-light' : 'hover:bg-gray-light-shade'
           )}
         >
           <div
@@ -69,6 +72,7 @@ export default class ItemMenu extends React.PureComponent<Props> {
             ) : null
           )}
         </div>
+        </OutsideClickDetectingDiv>
       </div>
     );
   }