diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index a690bf6f9..18f4a23a7 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -41,7 +41,7 @@ import stl from './FilterModal.module.css';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 
-const IconMap = {
+export const IconMap = {
   [FilterKey.CLICK]: <Pointer size={14}/>,
   [FilterKey.LOCATION]: <Navigation size={14} />,
   [FilterKey.INPUT]: <RectangleEllipsis size={14} />,
diff --git a/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx b/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
index 8468ed553..615b38912 100644
--- a/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
+++ b/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
@@ -1,67 +1,91 @@
 import React from 'react';
-import {Icon} from 'UI';
-import {Popover} from 'antd';
+import { Icon } from 'UI';
+import { Popover } from 'antd';
+import cn from 'classnames';
+import { IconMap } from "../../Filters/FilterModal/FilterModal";
 
 interface Props {
-    payload: any;
+  payload: any;
 }
 
 function NodeButton(props: Props) {
-    const {payload} = props;
+  const { payload } = props;
 
-    return (
-        <div className='relative'>
-            <Popover
-                content={<div className='bg-white rounded mt-1 text-xs'>
-                    <div className='border-b py-1 px-2 flex items-center'>
-                        <div className='w-6 shrink-0'>
-                            <Icon name='link-45deg' size={18}/>
-                        </div>
-                        <div className='ml-1'>{payload.name}</div>
-                    </div>
-                    <div className='border-b py-1 px-2 flex items-center'>
-                        <div className='w-6 shrink-0'>
-                            <Icon name='arrow-right-short' size={18} color='green'/>
-                        </div>
-                        <div className='ml-1 font-medium'>Continuing {Math.round(payload.value)}%</div>
-                    </div>
-                    {payload.avgTimeFromPrevious && (
-                        <div className='border-b py-1 px-2 flex items-center'>
-                            <div className='w-6 shrink-0'>
-                                <Icon name='clock-history' size={16}/>
-                            </div>
+  const payloadStr = payload.name;
 
-                            <div className='ml-1 font-medium'>
-                                Average time from previous step <span>{payload.avgTimeFromPrevious}</span>
-                            </div>
-                        </div>
-                    )}
-                </div>}>
-                <div
-                    className='flex items-center copy-popover select-none rounded shadow'
-                    style={{
-                        backgroundColor: 'white',
-                        padding: '3px 6px',
-                        // width: 'fit-content',
-                        maxWidth: '120px',
-                        fontSize: '12px',
-                        width: 'fit-content',
+  // we need to only trim the middle, so its readable
+  const safePName =
+    payloadStr.length > 70
+      ? `${payloadStr.slice(0, 25)}...${payloadStr.slice(-25)}`
+      : payloadStr;
 
-                    }}
-                >
-                    <div style={{
-                        maxWidth: '120px',
-                        width: 'fit-content',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        marginRight: '5px'
-                    }}>{payload.name}</div>
-                    <span style={{fontWeight: 'bold'}}>{Math.round(payload.value) + '%'}</span>
+  const eventIcon = IconMap[payload.eventType.toLowerCase()] ?? <Icon name='link-45deg' size={18}/>
+  return (
+    <div className="relative">
+      <Popover
+        content={
+          <div className="bg-white rounded mt-1 text-xs">
+            <div className="border-b py-1 px-2 flex items-center gap-1">
+              {eventIcon}
+              <div
+                className={cn(
+                  'text-ellipsis overflow-hidden',
+                  'max-w-80 whitespace-nowrap'
+                )}
+              >
+                {safePName}
+              </div>
+            </div>
+            <div className="border-b py-1 px-2 flex items-center gap-1">
+              <Icon name="arrow-right-short" size={18} color="green" />
+              <div className="ml-1 font-medium">
+                Continuing {Math.round(payload.value)}%
+              </div>
+            </div>
+            {payload.avgTimeFromPrevious && (
+              <div className="border-b py-1 px-2 flex items-center gap-1">
+                <Icon name="clock-history" size={16} />
+
+                <div className="ml-1 font-medium">
+                  Average time from previous step{' '}
+                  <span>{payload.avgTimeFromPrevious}</span>
                 </div>
-            </Popover>
+              </div>
+            )}
+          </div>
+        }
+      >
+        <div
+          className="flex items-center gap-1 copy-popover select-none rounded shadow"
+          style={{
+            backgroundColor: 'white',
+            padding: '3px 6px',
+            maxWidth: '180px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            fontSize: '12px',
+            width: 'fit-content',
+          }}
+        >
+          {eventIcon}
+          <div
+            style={{
+              maxWidth: '120px',
+              width: 'fit-content',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {payload.name}
+          </div>
+          <span style={{ fontWeight: 'bold' }}>
+            {Math.round(payload.value) + '%'}
+          </span>
         </div>
-    );
+      </Popover>
+    </div>
+  );
 }
 
 export default NodeButton;