diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
index 15d3642d4..8c0543c5f 100644
--- a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
+++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
@@ -13,13 +13,13 @@ const PLAY_ICON_NAMES = {
   notPlayed: 'play-fill',
   played: 'play-circle-light',
   hovered: 'play-hover',
-};
+} as const
 
 const getDefaultIconName = (isViewed: any) =>
   !isViewed ? PLAY_ICON_NAMES.notPlayed : PLAY_ICON_NAMES.played;
 
 interface Props {
-  isAssist: boolean;
+  isAssist?: boolean;
   viewed: boolean;
   sessionId: string;
   onClick?: () => void;
@@ -35,7 +35,7 @@ function PlayLink(props: Props) {
   const defaultIconName = getDefaultIconName(viewed);
 
   const [isHovered, toggleHover] = useState(false);
-  const [iconName, setIconName] = useState(defaultIconName);
+  const [iconName, setIconName] = useState<typeof PLAY_ICON_NAMES[keyof typeof PLAY_ICON_NAMES]>(defaultIconName);
 
   useEffect(() => {
     if (isHovered) setIconName(PLAY_ICON_NAMES.hovered);
@@ -46,12 +46,21 @@ function PlayLink(props: Props) {
     ? liveSessionRoute(sessionId, queryParams)
     : sessionRoute(sessionId);
 
-  const handleBeforeOpen = () => {
+  const handleBeforeOpen = (e: any) => {
+    const replayLink = withSiteId(
+      link + (props.query ? props.query : ''),
+      props.siteId
+    );
     if (props.beforeOpen) {
-      props.beforeOpen();
-      history.push(
-        withSiteId(link + (props.query ? props.query : ''), props.siteId)
-      );
+      // check for ctrl or shift
+      if (e.ctrlKey || e.shiftKey || e.metaKey) {
+        e.preventDefault();
+        return window.open(replayLink, '_blank');
+      } else {
+        e.preventDefault();
+        props.beforeOpen();
+        history.push(replayLink);
+      }
     }
   };
 
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 326d0377b..bec5edde8 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -196,7 +196,7 @@ function SessionItem(props: RouteComponentProps & Props) {
       console.error('Error while prefetching first mob', e);
     }
   };
-  const openSession = () => {
+  const populateData = () => {
     if (
       props.live
       || isAssist
@@ -430,7 +430,7 @@ function SessionItem(props: RouteComponentProps & Props) {
                      onClick={onClick}
                      queryParams={queryParams}
                      query={query}
-                     beforeOpen={props.live || isAssist ? undefined : openSession}
+                     beforeOpen={props.live || isAssist ? undefined : populateData}
                    />
                    {bookmarked && (
                      <div className="ml-2 cursor-pointer">