diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index 2a373389c..f18afba81 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
 import { toJS } from 'mobx'
+// import WebPlayer from "Player/web/WebPlayer";
+// inject mob file from chalice
 
 function ClickMapCard() {
   const { metricStore } = useStore()
diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx
index 54ea109ef..b45ebe1a3 100644
--- a/frontend/app/components/Session/LivePlayer.tsx
+++ b/frontend/app/components/Session/LivePlayer.tsx
@@ -88,7 +88,7 @@ function LivePlayer({
 
   const TABS = {
     EVENTS: 'User Steps',
-    HEATMAPS: 'Click Map',
+    CLICKMAP: 'Click Map',
   };
   const [activeTab, setActiveTab] = useState('');
 
diff --git a/frontend/app/components/Session/PlayerContent.js b/frontend/app/components/Session/PlayerContent.js
index 64d896455..f78b71897 100644
--- a/frontend/app/components/Session/PlayerContent.js
+++ b/frontend/app/components/Session/PlayerContent.js
@@ -9,10 +9,10 @@ import { observer } from 'mobx-react-lite';
 
 const TABS = {
   EVENTS: 'User Steps',
-  HEATMAPS: 'Click Map',
+  CLICKMAP: 'Click Map',
 };
 
-function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab }) {
+function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, isClickmap }) {
   const { store } = React.useContext(PlayerContext)
 
   const {
@@ -51,7 +51,7 @@ function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab }) {
             style={activeTab && !fullscreen ? { maxWidth: 'calc(100% - 270px)' } : undefined}
           >
             <div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
-              <PlayerBlock activeTab={activeTab} />
+              <PlayerBlock activeTab={activeTab} isClickmap={isClickmap} />
             </div>
           </div>
           {activeTab !== '' && (
diff --git a/frontend/app/components/Session/WebPlayer.tsx b/frontend/app/components/Session/WebPlayer.tsx
index 0f013526b..aeca54dbe 100644
--- a/frontend/app/components/Session/WebPlayer.tsx
+++ b/frontend/app/components/Session/WebPlayer.tsx
@@ -15,7 +15,7 @@ import { IPlayerContext, PlayerContext, defaultContextValue } from './playerCont
 
 const TABS = {
   EVENTS: 'User Steps',
-  HEATMAPS: 'Click Map',
+  CLICKMAP: 'Click Map',
 };
 
 function WebPlayer(props: any) {
@@ -23,10 +23,11 @@ function WebPlayer(props: any) {
     session,
     toggleFullscreen,
     closeBottomBlock,
-     live,
-     fullscreen,
-     jwt,
-     fetchList
+    live,
+    fullscreen,
+    fetchList,
+    isClickmap,
+    customSession,
   } = props;
   const { notesStore } = useStore();
   const [activeTab, setActiveTab] = useState('');
@@ -35,22 +36,28 @@ function WebPlayer(props: any) {
   const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
 
   useEffect(() => {
-    fetchList('issues');
-    const [WebPlayerInst, PlayerStore] = createWebPlayer(session, (state) =>
+    if (!isClickmap) {
+      fetchList('issues');
+    }
+    const usedSession = isClickmap ? customSession : session;
+
+    const [WebPlayerInst, PlayerStore] = createWebPlayer(usedSession, (state) =>
       makeAutoObservable(state)
     );
     setContextValue({ player: WebPlayerInst, store: PlayerStore });
 
     props.fetchMembers();
 
-    notesStore.fetchSessionNotes(session.sessionId).then((r) => {
-      const note = props.query.get('note');
-      if (note) {
-        WebPlayerInst.pause();
-        setNoteItem(notesStore.getNoteById(parseInt(note, 10), r));
-        setShowNote(true);
-      }
-    });
+    if (!isClickmap) {
+      notesStore.fetchSessionNotes(session.sessionId).then((r) => {
+        const note = props.query.get('note');
+        if (note) {
+          WebPlayerInst.pause();
+          setNoteItem(notesStore.getNoteById(parseInt(note, 10), r));
+          setShowNote(true);
+        }
+      });
+    }
 
     const jumptTime = props.query.get('jumpto');
     if (jumptTime) {
@@ -78,36 +85,39 @@ function WebPlayer(props: any) {
 
   return (
     <PlayerContext.Provider value={contextValue}>
-        <>
+      <>
+        {!isClickmap ? (
           <PlayerBlockHeader
-          // @ts-ignore TODO?
+            // @ts-ignore TODO?
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             tabs={TABS}
             fullscreen={fullscreen}
           />
-          {/* @ts-ignore  */}
-          <PlayerContent
-            activeTab={activeTab}
-            fullscreen={fullscreen}
-            live={live}
-            setActiveTab={setActiveTab}
-            session={session}
-          />
-          <Modal open={showNoteModal} onClose={onNoteClose}>
-            {showNoteModal ? (
-              <ReadNote
-                userEmail={
-                  props.members.find((m: Record<string, any>) => m.id === noteItem?.userId)
-                    ?.email || ''
-                }
-                note={noteItem}
-                onClose={onNoteClose}
-                notFound={!noteItem}
-              />
-            ) : null}
-          </Modal>
-        </>
+        ) : null}
+        {/* @ts-ignore  */}
+        <PlayerContent
+          activeTab={activeTab}
+          fullscreen={fullscreen}
+          live={live}
+          setActiveTab={setActiveTab}
+          session={session}
+          isClickmap={isClickmap}
+        />
+        <Modal open={showNoteModal} onClose={onNoteClose}>
+          {showNoteModal ? (
+            <ReadNote
+              userEmail={
+                props.members.find((m: Record<string, any>) => m.id === noteItem?.userId)?.email
+                || ''
+              }
+              note={noteItem}
+              onClose={onNoteClose}
+              notFound={!noteItem}
+            />
+          ) : null}
+        </Modal>
+      </>
     </PlayerContext.Provider>
   );
 }
@@ -115,7 +125,6 @@ function WebPlayer(props: any) {
 export default connect(
   (state: any) => ({
     session: state.getIn(['sessions', 'current']),
-    jwt: state.getIn(['user', 'jwt']),
     fullscreen: state.getIn(['components', 'player', 'fullscreen']),
     showEvents: state.get('showEvents'),
     members: state.getIn(['members', 'list']),
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index e0a467ca2..060857246 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -44,65 +44,66 @@ function Player(props) {
     activeTab,
     fullView,
     isMultiview,
+    isClickmap,
   } = props;
-  const playerContext = React.useContext(PlayerContext)
+  const playerContext = React.useContext(PlayerContext);
   const screenWrapper = React.useRef();
-  const bottomBlockIsActive = !fullscreen && bottomBlock !== NONE
+  const bottomBlockIsActive = !fullscreen && bottomBlock !== NONE;
 
   React.useEffect(() => {
     props.updateLastPlayedSession(props.sessionId);
     if (!props.closedLive || isMultiview) {
       const parentElement = findDOMNode(screenWrapper.current); //TODO: good architecture
-      playerContext.player.attach(parentElement)
+      playerContext.player.attach(parentElement);
       playerContext.player.play();
     }
-
-  }, [])
+  }, []);
 
   React.useEffect(() => {
     playerContext.player.scale();
-  }, [props.bottomBlock, props.fullscreen, playerContext.player])
+  }, [props.bottomBlock, props.fullscreen, playerContext.player]);
 
   if (!playerContext.player) return null;
 
   const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw';
   return (
     <div
-        className={cn(className, stl.playerBody, 'flex flex-col relative', fullscreen && 'pb-2')}
-        data-bottom-block={bottomBlockIsActive}
-      >
-        {fullscreen && <EscapeButton onClose={fullscreenOff} />}
-        <div className="relative flex-1 overflow-hidden">
-          <Overlay nextId={nextId} closedLive={closedLive} />
-          <div className={stl.screenWrapper} ref={screenWrapper} />
+      className={cn(className, stl.playerBody, 'flex flex-col relative', fullscreen && 'pb-2')}
+      data-bottom-block={bottomBlockIsActive}
+    >
+      {fullscreen && <EscapeButton onClose={fullscreenOff} />}
+      <div className="relative flex-1 overflow-hidden">
+        <Overlay nextId={nextId} closedLive={closedLive} />
+        <div className={stl.screenWrapper} ref={screenWrapper} />
+      </div>
+      {!fullscreen && !!bottomBlock && (
+        <div style={{ maxWidth, width: '100%' }}>
+          {bottomBlock === OVERVIEW && <OverviewPanel />}
+          {bottomBlock === CONSOLE && <ConsolePanel />}
+          {bottomBlock === NETWORK && <NetworkPanel />}
+          {/* {bottomBlock === STACKEVENTS && <StackEvents />} */}
+          {bottomBlock === STACKEVENTS && <StackEventPanel />}
+          {bottomBlock === STORAGE && <Storage />}
+          {bottomBlock === PROFILER && <ProfilerPanel />}
+          {bottomBlock === PERFORMANCE && <ConnectedPerformance />}
+          {bottomBlock === GRAPHQL && <GraphQL />}
+          {bottomBlock === EXCEPTIONS && <Exceptions />}
+          {bottomBlock === INSPECTOR && <Inspector />}
         </div>
-        {!fullscreen && !!bottomBlock && (
-          <div style={{ maxWidth, width: '100%' }}>
-            {bottomBlock === OVERVIEW && <OverviewPanel />}
-            {bottomBlock === CONSOLE && <ConsolePanel />}
-            {bottomBlock === NETWORK && (
-              <NetworkPanel />
-            )}
-            {/* {bottomBlock === STACKEVENTS && <StackEvents />} */}
-            {bottomBlock === STACKEVENTS && <StackEventPanel />}
-            {bottomBlock === STORAGE && <Storage />}
-            {bottomBlock === PROFILER && <ProfilerPanel />}
-            {bottomBlock === PERFORMANCE && <ConnectedPerformance />}
-            {bottomBlock === GRAPHQL && <GraphQL />}
-            {bottomBlock === EXCEPTIONS && <Exceptions />}
-            {bottomBlock === INSPECTOR && <Inspector />}
-          </div>
-        )}
-        {!fullView && !isMultiview && <Controls
+      )}
+      {!fullView && !isMultiview && !isClickmap ? (
+        <Controls
           speedDown={playerContext.player.speedDown}
           speedUp={playerContext.player.speedUp}
           jump={playerContext.player.jump}
-         />}
-      </div>
-  )
+        />
+      ) : null}
+    </div>
+  );
 }
 
-export default connect((state) => {
+export default connect(
+  (state) => {
     const isAssist = window.location.pathname.includes('/assist/');
     return {
       fullscreen: state.getIn(['components', 'player', 'fullscreen']),
@@ -118,4 +119,4 @@ export default connect((state) => {
     fullscreenOff,
     updateLastPlayedSession,
   }
-)(Player)
+)(Player);
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index 9d9d1698a..879d3c024 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -14,19 +14,21 @@ import styles from './playerBlock.module.css';
 }))
 export default class PlayerBlock extends React.PureComponent {
   render() {
-    const { fullscreen, sessionId, disabled, activeTab, jiraConfig, fullView = false, isMultiview } = this.props;
+    const { fullscreen, sessionId, disabled, activeTab, jiraConfig, fullView = false, isMultiview, isClickmap } = this.props;
 
+    const shouldShowSubHeader = !fullscreen && !fullView && !isMultiview && !isClickmap
     return (
-      <div className={cn(styles.playerBlock, 'flex flex-col overflow-x-hidden')} style={{ minWidth: isMultiview ? '100%' : undefined }}>
-        {!fullscreen && !fullView && !isMultiview && (
+      <div className={cn(styles.playerBlock, 'flex flex-col overflow-x-hidden')} style={{ minWidth: isMultiview || isClickmap ? '100%' : undefined }}>
+        {shouldShowSubHeader ? (
           <SubHeader sessionId={sessionId} disabled={disabled} jiraConfig={jiraConfig} />
-        )}
+        ) : null}
         <Player
           className="flex-1"
           fullscreen={fullscreen}
           activeTab={activeTab}
           fullView={fullView}
           isMultiview={isMultiview}
+          isClickmap={isClickmap}
         />
       </div>
     );
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.tsx b/frontend/app/components/Session_/PlayerBlockHeader.tsx
index c1b45f36e..cd19712c7 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.tsx
+++ b/frontend/app/components/Session_/PlayerBlockHeader.tsx
@@ -74,7 +74,7 @@ function PlayerBlockHeader(props: any) {
       return { label: key, value };
     });
 
-  const TABS = [props.tabs.EVENTS, props.tabs.HEATMAPS].map((tab) => ({
+  const TABS = [props.tabs.EVENTS, props.tabs.CLICKMAP].map((tab) => ({
     text: tab,
     key: tab,
   }));