diff --git a/db/clickhouse/migrations/12_add_heatmap.sql b/db/clickhouse/migrations/12_add_heatmap.sql
index 1c983ab0d..a9253899b 100644
--- a/db/clickhouse/migrations/12_add_heatmap.sql
+++ b/db/clickhouse/migrations/12_add_heatmap.sql
@@ -14,6 +14,9 @@ CREATE TABLE umami.heatmap_event
     viewport_h Nullable(Int32),
     page_h Nullable(Int32),
     scroll_pct Nullable(UInt8),
+    replay_chunk_index Nullable(UInt32),
+    replay_event_index Nullable(UInt32),
+    replay_time_ms Nullable(Int64),
     created_at DateTime('UTC')
 )
 ENGINE = MergeTree
diff --git a/db/clickhouse/schema.sql b/db/clickhouse/schema.sql
index 0408d7885..0f7f84156 100644
--- a/db/clickhouse/schema.sql
+++ b/db/clickhouse/schema.sql
@@ -416,6 +416,9 @@ CREATE TABLE umami.heatmap_event
     viewport_h Nullable(Int32),
     page_h Nullable(Int32),
     scroll_pct Nullable(UInt8),
+    replay_chunk_index Nullable(UInt32),
+    replay_event_index Nullable(UInt32),
+    replay_time_ms Nullable(Int64),
     created_at DateTime('UTC')
 )
 ENGINE = MergeTree
diff --git a/prisma/migrations/20_add_heatmap/migration.sql b/prisma/migrations/20_add_heatmap/migration.sql
index c4d871305..6c73964af 100644
--- a/prisma/migrations/20_add_heatmap/migration.sql
+++ b/prisma/migrations/20_add_heatmap/migration.sql
@@ -13,6 +13,9 @@ CREATE TABLE "heatmap_event" (
     "viewport_h" INTEGER,
     "page_h" INTEGER,
     "scroll_pct" INTEGER,
+    "replay_chunk_index" INTEGER,
+    "replay_event_index" INTEGER,
+    "replay_time_ms" BIGINT,
     "created_at" TIMESTAMPTZ(6) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 
     CONSTRAINT "heatmap_event_pkey" PRIMARY KEY ("heatmap_event_id")
@@ -23,3 +26,4 @@ CREATE INDEX "heatmap_event_website_id_idx" ON "heatmap_event"("website_id");
 CREATE INDEX "heatmap_event_visit_id_idx" ON "heatmap_event"("visit_id");
 CREATE INDEX "heatmap_event_website_id_created_at_idx" ON "heatmap_event"("website_id", "created_at");
 CREATE INDEX "heatmap_event_website_id_url_path_event_type_created_at_idx" ON "heatmap_event"("website_id", "url_path", "event_type", "created_at");
+CREATE INDEX "heatmap_event_website_id_visit_id_replay_chunk_index_replay_event_index_idx" ON "heatmap_event"("website_id", "visit_id", "replay_chunk_index", "replay_event_index");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index ced346e6d..bd6d851cf 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -402,20 +402,23 @@ model SessionReplaySaved {
 }
 
 model HeatmapEvent {
-  id         String   @id() @map("heatmap_event_id") @db.Uuid
-  websiteId  String   @map("website_id") @db.Uuid
-  sessionId  String   @map("session_id") @db.Uuid
-  visitId    String   @map("visit_id") @db.Uuid
-  urlPath    String   @map("url_path") @db.VarChar(500)
-  eventType  Int      @map("event_type") @db.Integer
-  nodeId     Int?     @map("node_id") @db.Integer
-  x          Int?     @db.Integer
-  y          Int?     @db.Integer
-  viewportW  Int?     @map("viewport_w") @db.Integer
-  viewportH  Int?     @map("viewport_h") @db.Integer
-  pageH      Int?     @map("page_h") @db.Integer
-  scrollPct  Int?     @map("scroll_pct") @db.Integer
-  createdAt  DateTime @default(now()) @map("created_at") @db.Timestamptz(6)
+  id               String   @id() @map("heatmap_event_id") @db.Uuid
+  websiteId        String   @map("website_id") @db.Uuid
+  sessionId        String   @map("session_id") @db.Uuid
+  visitId          String   @map("visit_id") @db.Uuid
+  urlPath          String   @map("url_path") @db.VarChar(500)
+  eventType        Int      @map("event_type") @db.Integer
+  nodeId           Int?     @map("node_id") @db.Integer
+  x                Int?     @db.Integer
+  y                Int?     @db.Integer
+  viewportW        Int?     @map("viewport_w") @db.Integer
+  viewportH        Int?     @map("viewport_h") @db.Integer
+  pageH            Int?     @map("page_h") @db.Integer
+  scrollPct        Int?     @map("scroll_pct") @db.Integer
+  replayChunkIndex Int?     @map("replay_chunk_index") @db.Integer
+  replayEventIndex Int?     @map("replay_event_index") @db.Integer
+  replayTimeMs     BigInt?  @map("replay_time_ms") @db.BigInt
+  createdAt        DateTime @default(now()) @map("created_at") @db.Timestamptz(6)
 
   website Website @relation(fields: [websiteId], references: [id])
 
@@ -423,5 +426,6 @@ model HeatmapEvent {
   @@index([visitId])
   @@index([websiteId, createdAt])
   @@index([websiteId, urlPath, eventType, createdAt])
+  @@index([websiteId, visitId, replayChunkIndex, replayEventIndex])
   @@map("heatmap_event")
-}
\ No newline at end of file
+}
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
index 269a52bba..33b1ca5b7 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
+++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.module.css
@@ -1,7 +1,33 @@
+.layoutGrid {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .pageList {
+  min-width: 0;
+  padding-right: 6px;
+}
+
+.railDivider {
+  width: 1px;
+  height: 100%;
+  background: var(--gray-300, #d1d5db);
+  justify-self: center;
+}
+
+.contentColumn {
+  min-width: 0;
+  min-height: 0;
+  padding-left: 20px;
+}
+
+.pageListItems {
   overflow-y: auto;
+  padding-top: 8px;
   padding-right: 8px;
-  max-height: 100%;
+  max-height: 850px;
+  scrollbar-gutter: stable;
 }
 
 .pageButton {
@@ -10,7 +36,7 @@
   border: 0;
   background: transparent;
   border-radius: 6px;
-  padding: 8px 10px;
+  padding: 8px 10px 8px 6px;
   cursor: pointer;
   font: inherit;
   color: inherit;
@@ -26,25 +52,30 @@
   color: var(--surface-base);
 }
 
-.toggleButton {
-  border: 1px solid var(--border-base);
-  background: var(--surface-base);
-  border-radius: 6px;
+.summaryHeader {
+  min-width: 0;
+}
+
+.summaryPath {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summaryStats {
+  flex-wrap: wrap;
+}
+
+.summaryStat {
+  display: inline-flex;
+  align-items: center;
   padding: 4px 10px;
-  cursor: pointer;
-  font: inherit;
-  color: inherit;
-}
-
-.toggleButton:hover {
-  background: var(--interactive-bg-hover);
-}
-
-.toggleButtonSelected,
-.toggleButtonSelected:hover {
-  background: var(--surface-inverted);
-  color: var(--surface-base);
-  border-color: var(--surface-inverted);
+  border-radius: 999px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-base);
+  white-space: nowrap;
 }
 
 .scrollBand {
@@ -73,15 +104,27 @@
   min-width: 0;
 }
 
+.snapshotControlRow {
+  margin-top: 8px;
+}
+
 .canvas {
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid var(--border-base);
   border-radius: 8px;
   background: var(--surface-sunken);
   max-width: 100%;
 }
 
+.canvasClip {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  background: inherit;
+}
+
 .snapshot {
   position: absolute;
   top: 0;
@@ -117,11 +160,18 @@
   pointer-events: none;
 }
 
+.heatOverlay {
+  overflow: visible;
+}
+
 .canvasLoading {
   position: absolute;
   inset: 0;
   z-index: 2;
   background: var(--surface-sunken);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dot {
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
index 3ebadf362..24bb63de4 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/Heatmap.tsx
@@ -1,8 +1,8 @@
 'use client';
-import { Column, Grid, Heading, Loading, Row, Text } from '@umami/react-zen';
+import { Column, Grid, Heading, Loading, Row, Switch, Text } from '@umami/react-zen';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useResultQuery } from '@/components/hooks';
+import { useMessages, useResultQuery } from '@/components/hooks';
 import { useReplayQuery } from '@/components/hooks/queries/useReplayQuery';
 import { formatLongNumber } from '@/lib/format';
 import type { HeatmapMode, HeatmapPoint, HeatmapResult, HeatmapSnapshot } from '@/queries/sql';
@@ -17,6 +17,7 @@ function useElementWidth<T extends HTMLElement>() {
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
+    setWidth(el.getBoundingClientRect().width || el.clientWidth || 0);
     const ro = new ResizeObserver(entries => {
       const w = entries[0]?.contentRect.width ?? 0;
       setWidth(w);
@@ -31,6 +32,15 @@ interface ReplayData {
   events: any[];
 }
 
+interface ReplayInstance {
+  iframe?: HTMLIFrameElement;
+  wrapper?: HTMLDivElement;
+  on: (event: string, handler: (...args: any[]) => void) => void;
+  pause: (timeOffset?: number) => void;
+  disableInteract: () => void;
+  destroy: () => void;
+}
+
 interface ViewportBucket {
   width: number;
   height: number;
@@ -42,38 +52,97 @@ interface HeatmapProps {
   urlPath: string;
   onUrlPathChange: (urlPath: string) => void;
   mode: HeatmapMode;
-  onModeChange: (mode: HeatmapMode) => void;
+  search: string;
 }
 
-export function Heatmap({ websiteId, urlPath, onUrlPathChange, mode, onModeChange }: HeatmapProps) {
-  const { data, error, isLoading } = useResultQuery<HeatmapResult>('heatmap', {
+export function Heatmap({ websiteId, urlPath, onUrlPathChange, mode, search }: HeatmapProps) {
+  const {
+    data: pagesData,
+    error,
+    isLoading,
+  } = useResultQuery<HeatmapResult>('heatmap', {
     websiteId,
-    urlPath: urlPath || undefined,
     mode,
   });
 
-  const pages = data?.pages ?? [];
-  const points = data?.points ?? [];
-  const scroll = data?.scroll;
+  const {
+    data: detailData,
+    isLoading: isDetailLoading,
+    isFetching: isDetailFetching,
+  } = useResultQuery<HeatmapResult>(
+    'heatmap',
+    {
+      websiteId,
+      urlPath: urlPath || undefined,
+      mode,
+    },
+    {
+      enabled: Boolean(urlPath),
+    },
+  );
+
+  const pages = pagesData?.pages ?? [];
+  const filteredPages = useMemo(() => {
+    if (!search) {
+      return pages;
+    }
+
+    const value = search.toLowerCase();
+
+    return pages.filter(page => page.urlPath.toLowerCase().includes(value));
+  }, [pages, search]);
+  const points = detailData?.points ?? [];
+  const scroll = detailData?.scroll;
+  const snapshot = detailData?.snapshot ?? null;
+  const detailLoading = Boolean(urlPath) && (isDetailLoading || isDetailFetching);
+
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    if (filteredPages.length === 0) {
+      if (urlPath) {
+        onUrlPathChange('');
+      }
+      return;
+    }
+
+    if (!urlPath || filteredPages.some(page => page.urlPath === urlPath)) {
+      return;
+    }
+
+    onUrlPathChange(filteredPages[0].urlPath);
+  }, [filteredPages, isLoading, onUrlPathChange, urlPath]);
 
   return (
-    <LoadingPanel data={data} isLoading={isLoading} error={error} minHeight="900px">
-      <Grid columns="320px 1fr" gap minHeight="900px">
-        <PageList pages={pages} selected={urlPath} onSelect={onUrlPathChange} mode={mode} />
-        <Column gap>
-          <ModeToggle mode={mode} onChange={onModeChange} />
+    <LoadingPanel data={pagesData} isLoading={isLoading} error={error} minHeight="900px">
+      <Grid columns="320px 12px 1fr" minHeight="900px" className={styles.layoutGrid}>
+        <PageList
+          pages={filteredPages}
+          selected={urlPath}
+          onSelect={onUrlPathChange}
+          mode={mode}
+          hasSearch={Boolean(search)}
+        />
+        <div className={styles.railDivider} aria-hidden="true" />
+        <Column className={styles.contentColumn} gap>
           {urlPath ? (
             mode === 'scroll' ? (
               <ScrollHeatmapView
                 websiteId={websiteId}
+                urlPath={urlPath}
                 scroll={scroll}
-                snapshot={data?.snapshot ?? null}
+                snapshot={snapshot}
+                isLoading={detailLoading}
               />
             ) : (
               <HeatmapView
+                urlPath={urlPath}
                 websiteId={websiteId}
                 points={points}
-                snapshot={data?.snapshot ?? null}
+                snapshot={snapshot}
+                isLoading={detailLoading}
               />
             )
           ) : (
@@ -85,61 +154,43 @@ export function Heatmap({ websiteId, urlPath, onUrlPathChange, mode, onModeChang
   );
 }
 
-function ModeToggle({
-  mode,
-  onChange,
-}: {
-  mode: HeatmapMode;
-  onChange: (mode: HeatmapMode) => void;
-}) {
-  return (
-    <Row gap="2">
-      <button
-        type="button"
-        onClick={() => onChange('click')}
-        className={`${styles.toggleButton} ${mode === 'click' ? styles.toggleButtonSelected : ''}`}
-      >
-        Clicks
-      </button>
-      <button
-        type="button"
-        onClick={() => onChange('scroll')}
-        className={`${styles.toggleButton} ${mode === 'scroll' ? styles.toggleButtonSelected : ''}`}
-      >
-        Scroll
-      </button>
-    </Row>
-  );
-}
-
 function PageList({
   pages,
   selected,
   onSelect,
   mode,
+  hasSearch,
 }: {
   pages: HeatmapResult['pages'];
   selected: string;
   onSelect: (urlPath: string) => void;
   mode: HeatmapMode;
+  hasSearch: boolean;
 }) {
+  const { t, messages } = useMessages();
+
   return (
-    <Column className={styles.pageList} gap="2">
+    <Column className={styles.pageList} gap="1">
       <Heading size="lg">Pages</Heading>
-      {pages.length === 0 && <Text color="muted">No data yet</Text>}
-      {pages.map(p => (
-        <button
-          key={p.urlPath}
-          type="button"
-          onClick={() => onSelect(p.urlPath)}
-          className={`${styles.pageButton} ${selected === p.urlPath ? styles.pageButtonSelected : ''}`}
-        >
-          <Row alignItems="center" justifyContent="space-between" gap="2">
-            <Text truncate>{p.urlPath}</Text>
-            <Text color="muted">{formatLongNumber(mode === 'scroll' ? p.sessions : p.count)}</Text>
-          </Row>
-        </button>
-      ))}
+      <Column className={styles.pageListItems} gap="2">
+        {pages.length === 0 && (
+          <Text color="muted">{hasSearch ? 'No matching pages' : t(messages.noDataAvailable)}</Text>
+        )}
+        {pages.map(p => (
+          <button
+            key={p.urlPath}
+            type="button"
+            onClick={() => onSelect(p.urlPath)}
+            title={p.urlPath}
+            className={`${styles.pageButton} ${selected === p.urlPath ? styles.pageButtonSelected : ''}`}
+          >
+            <Row alignItems="center" justifyContent="space-between" gap="2">
+              <Text truncate>{p.urlPath}</Text>
+              <Text color="muted">{formatLongNumber(mode === 'scroll' ? p.sessions : p.count)}</Text>
+            </Row>
+          </button>
+        ))}
+      </Column>
     </Column>
   );
 }
@@ -164,13 +215,17 @@ function pickViewport(points: HeatmapPoint[]): ViewportBucket | null {
 }
 
 function HeatmapView({
+  urlPath,
   websiteId,
   points,
   snapshot,
+  isLoading,
 }: {
+  urlPath: string;
   websiteId: string;
   points: HeatmapPoint[];
   snapshot: HeatmapSnapshot | null;
+  isLoading: boolean;
 }) {
   const [showPage, setShowPage] = useState(true);
   const [snapshotReady, setSnapshotReady] = useState(false);
@@ -194,51 +249,55 @@ function HeatmapView({
     setSnapshotReady(!(showPage && snapshot));
   }, [containerWidth, showPage, snapshot]);
 
+  if (isLoading) {
+    return <CanvasLoading />;
+  }
+
   if (!viewport || visible.length === 0) {
     return <EmptyState />;
   }
 
-  const renderWidth = containerWidth > 0 ? Math.min(containerWidth, MAX_RENDER_WIDTH) : 0;
-  const scale = renderWidth ? renderWidth / viewport.width : 0;
+  const renderWidth = Math.min(containerWidth > 0 ? containerWidth : viewport.width, MAX_RENDER_WIDTH);
+  const scale = renderWidth / viewport.width;
   const renderHeight = Math.round(viewport.height * scale);
   const showSnapshot = renderWidth > 0 && showPage && !!snapshot;
   const showOverlay = !showSnapshot || snapshotReady;
 
   return (
     <Column gap>
-      <Row alignItems="center" justifyContent="space-between" gap>
-        <Text color="muted">
+      <Column gap="2" className={styles.summaryHeader}>
+        <Row alignItems="center" justifyContent="space-between" gap>
+          <Text color="muted" title={urlPath} className={styles.summaryPath}>
+            {urlPath}
+          </Text>
+        </Row>
+        <Row alignItems="center" justifyContent="space-between" gap className={styles.summaryStats}>
+          <Text color="muted" className={styles.summaryStat}>
           {visible.length} positions · {formatLongNumber(visible.reduce((s, p) => s + p.count, 0))}{' '}
           clicks · viewport {viewport.width}×{viewport.height}
-        </Text>
-        {snapshot && (
-          <button
-            type="button"
-            className={styles.toggleButton}
-            onClick={() => setShowPage(v => !v)}
-          >
-            {showPage ? 'Hide page' : 'Show page'}
-          </button>
-        )}
-      </Row>
+          </Text>
+        </Row>
+      </Column>
       <div ref={containerRef} className={styles.canvasWrapper}>
         <div
           className={styles.canvas}
           style={{ width: renderWidth || '100%', height: renderHeight || 0 }}
         >
-          {showSnapshot && !snapshotReady && <CanvasLoading />}
-          {showSnapshot && (
-            <ReplaySnapshot
-              websiteId={websiteId}
-              snapshot={snapshot}
-              width={viewport.width}
-              height={viewport.height}
-              scale={scale}
-              onReady={handleSnapshotReady}
-            />
-          )}
+          <div className={styles.canvasClip}>
+            {showSnapshot && !snapshotReady && <CanvasLoading />}
+            {showSnapshot && (
+              <ReplaySnapshot
+                websiteId={websiteId}
+                snapshot={snapshot}
+                width={viewport.width}
+                height={viewport.height}
+                scale={scale}
+                onReady={handleSnapshotReady}
+              />
+            )}
+          </div>
           {showOverlay && (
-            <div className={styles.overlay}>
+            <div className={`${styles.overlay} ${styles.heatOverlay}`}>
               {visible.map((p, i) => {
                 const intensity = Math.min(1, p.count / maxCount);
                 const size = 24 + intensity * 36;
@@ -261,18 +320,29 @@ function HeatmapView({
           )}
         </div>
       </div>
+      {snapshot && (
+        <Row justifyContent="center" className={styles.snapshotControlRow}>
+          <Switch isSelected={showPage} onChange={setShowPage}>
+            Show page
+          </Switch>
+        </Row>
+      )}
     </Column>
   );
 }
 
 function ScrollHeatmapView({
+  urlPath,
   websiteId,
   scroll,
   snapshot,
+  isLoading,
 }: {
+  urlPath: string;
   websiteId: string;
   scroll: HeatmapResult['scroll'] | undefined;
   snapshot: HeatmapSnapshot | null;
+  isLoading: boolean;
 }) {
   const [showPage, setShowPage] = useState(true);
   const [snapshotReady, setSnapshotReady] = useState(false);
@@ -284,13 +354,17 @@ function ScrollHeatmapView({
     setSnapshotReady(!(showPage && snapshot));
   }, [containerWidth, showPage, snapshot]);
 
+  if (isLoading) {
+    return <CanvasLoading />;
+  }
+
   if (!scroll || scroll.totalSessions === 0 || !scroll.pageH || !scroll.viewportW) {
     return <EmptyState message="No scroll data for this page yet." />;
   }
 
   const { buckets, totalSessions, pageH, viewportW, viewportH } = scroll;
-  const renderWidth = containerWidth > 0 ? Math.min(containerWidth, MAX_RENDER_WIDTH) : 0;
-  const scale = renderWidth ? renderWidth / viewportW : 0;
+  const renderWidth = Math.min(containerWidth > 0 ? containerWidth : viewportW, MAX_RENDER_WIDTH);
+  const scale = renderWidth / viewportW;
   const renderHeight = Math.round(pageH * scale);
   const showSnapshot = renderWidth > 0 && showPage && !!snapshot;
   const showOverlay = !showSnapshot || snapshotReady;
@@ -323,39 +397,34 @@ function ScrollHeatmapView({
 
   return (
     <Column gap>
-      <Row alignItems="center" justifyContent="space-between" gap>
-        <Text color="muted">
+      <Text color="muted" title={urlPath} className={styles.summaryPath}>
+        {urlPath}
+      </Text>
+      <Row alignItems="center" justifyContent="space-between" gap className={styles.summaryHeader}>
+        <Text color="muted" className={styles.summaryStat}>
           {formatLongNumber(totalSessions)} sessions · page {viewportW}×{pageH}
           {viewportH ? ` · viewport ${viewportH}` : ''}
         </Text>
-        {snapshot && (
-          <button
-            type="button"
-            className={styles.toggleButton}
-            onClick={() => setShowPage(v => !v)}
-          >
-            {showPage ? 'Hide page' : 'Show page'}
-          </button>
-        )}
       </Row>
       <div ref={containerRef} className={styles.canvasWrapper}>
         <div
           className={styles.canvas}
           style={{ width: renderWidth || '100%', height: renderHeight || 0 }}
         >
-          {showSnapshot && !snapshotReady && <CanvasLoading />}
-          {showSnapshot && (
-            <ReplaySnapshot
-              websiteId={websiteId}
-              snapshot={snapshot}
-              width={viewportW}
-              height={pageH}
-              scale={scale}
-              onReady={handleSnapshotReady}
-            />
-          )}
-          {showOverlay && (
-            <div className={styles.overlay}>
+          <div className={styles.canvasClip}>
+            {showSnapshot && !snapshotReady && <CanvasLoading />}
+            {showSnapshot && (
+              <ReplaySnapshot
+                websiteId={websiteId}
+                snapshot={snapshot}
+                width={viewportW}
+                height={pageH}
+                scale={scale}
+                onReady={handleSnapshotReady}
+              />
+            )}
+            {showOverlay && (
+              <div className={styles.overlay}>
               {bands.map(b => {
                 const top = Math.round((b.fromPct / 100) * renderHeight);
                 const bottom = Math.round((b.toPct / 100) * renderHeight);
@@ -379,10 +448,18 @@ function ScrollHeatmapView({
                   </div>
                 );
               })}
-            </div>
-          )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
+      {snapshot && (
+        <Row justifyContent="center" className={styles.snapshotControlRow}>
+          <Switch isSelected={showPage} onChange={setShowPage}>
+            Show page
+          </Switch>
+        </Row>
+      )}
     </Column>
   );
 }
@@ -403,8 +480,12 @@ function ReplaySnapshot({
   onReady: () => void;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
-  const replayerRef = useRef<any>(null);
-  const { data } = useReplayQuery(websiteId, snapshot.replayId) as { data?: ReplayData };
+  const replayerRef = useRef<ReplayInstance | null>(null);
+  const { data } = useReplayQuery(websiteId, snapshot.replayId, {
+    until: snapshot.timestamp,
+    chunkIndex: snapshot.chunkIndex,
+    eventIndex: snapshot.eventIndex,
+  }) as { data?: ReplayData };
 
   useEffect(() => {
     const container = containerRef.current;
@@ -425,34 +506,72 @@ function ReplaySnapshot({
         triggerFocus: false,
         pauseAnimation: true,
         useVirtualDom: false,
-      });
+        loadTimeout: 3000,
+      }) as ReplayInstance;
 
       replayerRef.current = replayer;
-      let ready = false;
+      let rebuilt = false;
+      let waitingForStyles = false;
+      let settled = false;
 
       const freeze = () => {
         const offset = Math.max(0, snapshot.timestamp - events[0].timestamp);
+        resizeReplayFrame(replayer, width, height);
         replayer.pause(offset);
         replayer.disableInteract();
         resizeReplayFrame(replayer, width, height);
       };
 
-      const handleReady = () => {
-        if (ready || cancelled) return;
-        ready = true;
+      const finalize = async () => {
+        if (settled || waitingForStyles || !rebuilt || cancelled) {
+          return;
+        }
 
-        requestAnimationFrame(() => {
-          if (cancelled) return;
-          freeze();
-          requestAnimationFrame(() => {
-            if (cancelled) return;
-            freeze();
-            onReady();
-          });
-        });
+        settled = true;
+
+        await waitForReplayLayout(replayer);
+
+        if (cancelled) {
+          return;
+        }
+
+        freeze();
+        await waitForAnimationFrames(2);
+
+        if (cancelled) {
+          return;
+        }
+
+        freeze();
+        onReady();
       };
 
-      replayer.on('fullsnapshot-rebuilded', handleReady);
+      replayer.on('load-stylesheet-start', () => {
+        waitingForStyles = true;
+      });
+
+      replayer.on('load-stylesheet-end', () => {
+        waitingForStyles = false;
+        void finalize();
+      });
+
+      replayer.on('fullsnapshot-rebuilded', () => {
+        rebuilt = true;
+        void finalize();
+      });
+
+      replayer.on('resize', (dimension: { width?: number; height?: number }) => {
+        resizeReplayFrame(
+          replayer,
+          dimension.width && Number.isFinite(dimension.width) ? dimension.width : width,
+          dimension.height && Number.isFinite(dimension.height) ? dimension.height : height,
+        );
+      });
+
+      setTimeout(() => {
+        waitingForStyles = false;
+        void finalize();
+      }, 3500);
     });
 
     return () => {
@@ -490,12 +609,59 @@ function CanvasLoading() {
   );
 }
 
-function resizeReplayFrame(replayer: any, width: number, height: number) {
+function waitForAnimationFrames(count = 2) {
+  return new Promise<void>(resolve => {
+    const step = (remaining: number) => {
+      if (remaining <= 0) {
+        resolve();
+        return;
+      }
+
+      requestAnimationFrame(() => step(remaining - 1));
+    };
+
+    step(count);
+  });
+}
+
+async function waitForReplayLayout(replayer: ReplayInstance) {
+  const fonts = replayer.iframe?.contentDocument?.fonts;
+
+  if (fonts?.ready) {
+    try {
+      await Promise.race([
+        fonts.ready.then(() => undefined),
+        new Promise(resolve => setTimeout(resolve, 1500)),
+      ]);
+    } catch {
+      // Ignore font readiness failures and fall back to frame settling.
+    }
+  }
+
+  await waitForAnimationFrames(3);
+}
+
+function syncReplayDocumentViewport(replayer: ReplayInstance, width: number, height: number) {
+  const doc = replayer.iframe?.contentDocument;
+  const html = doc?.documentElement;
+  const body = doc?.body;
+
+  if (html) {
+    html.style.margin = '0';
+  }
+
+  if (body) {
+    body.style.margin = '0';
+  }
+}
+
+function resizeReplayFrame(replayer: ReplayInstance, width: number, height: number) {
   const { iframe, wrapper } = replayer;
 
   if (wrapper) {
     wrapper.style.width = `${width}px`;
     wrapper.style.height = `${height}px`;
+    wrapper.style.overflow = 'hidden';
   }
 
   if (iframe) {
@@ -503,12 +669,15 @@ function resizeReplayFrame(replayer: any, width: number, height: number) {
     iframe.setAttribute('height', String(height));
     iframe.style.width = `${width}px`;
     iframe.style.height = `${height}px`;
+    iframe.style.display = 'block';
   }
+
+  syncReplayDocumentViewport(replayer, width, height);
 }
 
 function EmptyState({ message }: { message?: string } = {}) {
   return (
-    <Column alignItems="center" justifyContent="center" height="100%" gap>
+    <Column alignItems="center" justifyContent="center" minHeight="360px" gap>
       <Heading size="lg">{message ? 'No data' : 'Select a page'}</Heading>
       <Text color="muted">{message ?? 'Choose a page from the list to view its heatmap.'}</Text>
     </Column>
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx
index 2c0c8e4f0..1db3acd32 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/heatmaps/HeatmapsPage.tsx
@@ -1,26 +1,69 @@
 'use client';
-import { Column } from '@umami/react-zen';
+import { Column, Row, SearchField } from '@umami/react-zen';
 import { useState } from 'react';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { Panel } from '@/components/common/Panel';
+import { useMobile } from '@/components/hooks';
+import { FilterButtons } from '@/components/input/FilterButtons';
 import type { HeatmapMode } from '@/queries/sql';
 import { Heatmap } from './Heatmap';
+import styles from './Heatmap.module.css';
 
 export function HeatmapsPage({ websiteId }: { websiteId: string }) {
-  const [urlPath, setUrlPath] = useState<string>('');
+  const [urlPathByMode, setUrlPathByMode] = useState<Record<HeatmapMode, string>>({
+    click: '',
+    scroll: '',
+  });
   const [mode, setMode] = useState<HeatmapMode>('click');
+  const [search, setSearch] = useState('');
+  const { isPhone } = useMobile();
+
+  const buttons = [
+    { id: 'click', label: 'Clicks' },
+    { id: 'scroll', label: 'Scroll' },
+  ];
 
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
-      <Panel minHeight="900px" allowFullscreen>
-        <Heatmap
-          websiteId={websiteId}
-          urlPath={urlPath}
-          onUrlPathChange={setUrlPath}
-          mode={mode}
-          onModeChange={setMode}
-        />
+      <Panel minHeight="900px" allowFullscreen minWidth="0" width="100%" style={{ overflow: 'hidden' }}>
+        <Column gap="5" minWidth="0" width="100%" paddingTop="2">
+          <Column gap="4" minWidth="0" width="100%">
+            {isPhone ? (
+              <Column gap="3">
+                <Row>
+                  <SearchField value={search} onSearch={setSearch} placeholder="Search" />
+                </Row>
+                <Row justifyContent="flex-end">
+                  <FilterButtons
+                    items={buttons}
+                    value={mode}
+                    onChange={value => setMode(value as HeatmapMode)}
+                  />
+                </Row>
+              </Column>
+            ) : (
+              <Row alignItems="center" justifyContent="space-between" gap="4">
+                <SearchField value={search} onSearch={setSearch} placeholder="Search" />
+                <FilterButtons
+                  items={buttons}
+                  value={mode}
+                  onChange={value => setMode(value as HeatmapMode)}
+                />
+              </Row>
+            )}
+          </Column>
+
+          <Heatmap
+            websiteId={websiteId}
+            urlPath={urlPathByMode[mode]}
+            onUrlPathChange={urlPath =>
+              setUrlPathByMode(state => ({ ...state, [mode]: urlPath }))
+            }
+            mode={mode}
+            search={search}
+          />
+        </Column>
       </Panel>
     </Column>
   );
diff --git a/src/app/api/record/route.ts b/src/app/api/record/route.ts
index 59d51d59f..396f0b22c 100644
--- a/src/app/api/record/route.ts
+++ b/src/app/api/record/route.ts
@@ -116,7 +116,7 @@ export async function POST(request: Request) {
     });
 
     try {
-      const heatmapRows = extractHeatmapEvents(events).map(e => ({
+      const heatmapRows = extractHeatmapEvents(events, { chunkIndex }).map(e => ({
         websiteId,
         sessionId,
         visitId,
diff --git a/src/app/api/reports/heatmap/route.ts b/src/app/api/reports/heatmap/route.ts
index 79af35c3e..158cc7dd7 100644
--- a/src/app/api/reports/heatmap/route.ts
+++ b/src/app/api/reports/heatmap/route.ts
@@ -1,4 +1,4 @@
-import { parseRequest, setWebsiteDate } from '@/lib/request';
+import { getQueryFilters, parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { reportResultSchema } from '@/lib/schema';
 import { canViewWebsite } from '@/permissions';
@@ -17,7 +17,22 @@ export async function POST(request: Request) {
     return unauthorized();
   }
 
-  const parameters = (await setWebsiteDate(websiteId, body.parameters)) as HeatmapParameters;
+  const filters = await getQueryFilters(
+    {
+      ...body.filters,
+      startAt: body.parameters.startDate.getTime(),
+      endAt: body.parameters.endDate.getTime(),
+      timezone: body.parameters.timezone,
+      unit: body.parameters.unit,
+    },
+    websiteId,
+  );
+
+  const parameters = {
+    ...filters,
+    urlPath: body.parameters.urlPath,
+    mode: body.parameters.mode,
+  } as HeatmapParameters;
 
   const data = await getHeatmap(websiteId, parameters);
 
diff --git a/src/app/api/websites/[websiteId]/replays/[replayId]/route.ts b/src/app/api/websites/[websiteId]/replays/[replayId]/route.ts
index ff9a685aa..b3b749228 100644
--- a/src/app/api/websites/[websiteId]/replays/[replayId]/route.ts
+++ b/src/app/api/websites/[websiteId]/replays/[replayId]/route.ts
@@ -3,6 +3,72 @@ import { json, unauthorized } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getReplayChunks } from '@/queries/sql';
 
+function getEventTimestamp(event: any): number | null {
+  const timestamp = Number(event?.timestamp);
+
+  return Number.isFinite(timestamp) ? timestamp : null;
+}
+
+function parseOptionalInteger(value: string | null): number | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  const parsed = Number(value);
+
+  return Number.isInteger(parsed) ? parsed : undefined;
+}
+
+function mergeReplayEvents(
+  chunks: Awaited<ReturnType<typeof getReplayChunks>>,
+  {
+    until,
+    endChunkIndex,
+    endEventIndex,
+  }: { until?: number; endChunkIndex?: number; endEventIndex?: number },
+) {
+  const events: any[] = [];
+  let isSorted = true;
+  let lastTimestamp = -Infinity;
+
+  for (const chunk of chunks) {
+    if (endChunkIndex !== undefined && chunk.chunkIndex > endChunkIndex) {
+      continue;
+    }
+
+    for (let chunkEventIndex = 0; chunkEventIndex < chunk.events.length; chunkEventIndex++) {
+      const event = chunk.events[chunkEventIndex];
+      const timestamp = getEventTimestamp(event);
+
+      if (chunk.chunkIndex === endChunkIndex && endEventIndex !== undefined) {
+        if (chunkEventIndex > endEventIndex) {
+          continue;
+        }
+      }
+
+      if (until !== undefined && timestamp !== null && timestamp > until) {
+        continue;
+      }
+
+      if (timestamp !== null) {
+        if (timestamp < lastTimestamp) {
+          isSorted = false;
+        } else {
+          lastTimestamp = timestamp;
+        }
+      }
+
+      events.push(event);
+    }
+  }
+
+  if (!isSorted) {
+    events.sort((a, b) => (getEventTimestamp(a) ?? 0) - (getEventTimestamp(b) ?? 0));
+  }
+
+  return events;
+}
+
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ websiteId: string; replayId: string }> },
@@ -14,16 +80,18 @@ export async function GET(
   }
 
   const { websiteId, replayId } = await params;
+  const searchParams = new URL(request.url).searchParams;
+  const until = parseOptionalInteger(searchParams.get('until'));
+  const endChunkIndex = parseOptionalInteger(searchParams.get('chunkIndex'));
+  const endEventIndex = parseOptionalInteger(searchParams.get('eventIndex'));
+  const endAt = until !== undefined ? new Date(until) : undefined;
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const chunks = await getReplayChunks(websiteId, replayId);
-
-  const allEvents = chunks
-    .flatMap(chunk => chunk.events)
-    .sort((a, b) => a.timestamp - b.timestamp);
+  const chunks = await getReplayChunks(websiteId, replayId, { endAt, endChunkIndex });
+  const allEvents = mergeReplayEvents(chunks, { until, endChunkIndex, endEventIndex });
   const sessionId = chunks.length > 0 ? chunks[0].sessionId : null;
   const startedAt = chunks.length > 0 ? chunks[0].startedAt : null;
   const endedAt = chunks.length > 0 ? chunks[chunks.length - 1].endedAt : null;
diff --git a/src/components/hooks/queries/useReplayQuery.ts b/src/components/hooks/queries/useReplayQuery.ts
index 03d2ab747..22472dcb6 100644
--- a/src/components/hooks/queries/useReplayQuery.ts
+++ b/src/components/hooks/queries/useReplayQuery.ts
@@ -1,12 +1,23 @@
 import { useApi } from '../useApi';
 
-export function useReplayQuery(websiteId: string, replayId: string) {
+interface ReplayQueryOptions {
+  until?: number;
+  chunkIndex?: number;
+  eventIndex?: number;
+}
+
+export function useReplayQuery(
+  websiteId: string,
+  replayId: string,
+  options: ReplayQueryOptions = {},
+) {
   const { get, useQuery } = useApi();
+  const { until, chunkIndex, eventIndex } = options;
 
   return useQuery({
-    queryKey: ['replay', { websiteId, replayId }],
+    queryKey: ['replay', { websiteId, replayId, until, chunkIndex, eventIndex }],
     queryFn: () => {
-      return get(`/websites/${websiteId}/replays/${replayId}`);
+      return get(`/websites/${websiteId}/replays/${replayId}`, { until, chunkIndex, eventIndex });
     },
     enabled: Boolean(websiteId && replayId),
   });
diff --git a/src/components/input/FilterButtons.tsx b/src/components/input/FilterButtons.tsx
index ff37fb197..ffd573a43 100644
--- a/src/components/input/FilterButtons.tsx
+++ b/src/components/input/FilterButtons.tsx
@@ -1,5 +1,4 @@
 import { Box, ToggleGroup, ToggleGroupItem } from '@umami/react-zen';
-import { useState } from 'react';
 
 export interface FilterButtonsProps {
   items: { id: string; label: string }[];
@@ -8,18 +7,17 @@ export interface FilterButtonsProps {
 }
 
 export function FilterButtons({ items, value, onChange }: FilterButtonsProps) {
-  const [selected, setSelected] = useState(value);
-
-  const handleChange = (value: string) => {
-    setSelected(value);
-    onChange?.(value);
-  };
-
   return (
     <Box>
       <ToggleGroup
-        value={[selected]}
-        onChange={e => handleChange(e[0])}
+        value={[value]}
+        onChange={e => {
+          const nextValue = e[0];
+
+          if (nextValue) {
+            onChange?.(nextValue);
+          }
+        }}
         disallowEmptySelection={true}
       >
         {items.map(({ id, label }) => (
diff --git a/src/components/input/FilterEditForm.tsx b/src/components/input/FilterEditForm.tsx
index 662be24a0..81c198f97 100644
--- a/src/components/input/FilterEditForm.tsx
+++ b/src/components/input/FilterEditForm.tsx
@@ -28,7 +28,10 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
   const [currentMatch, setCurrentMatch] = useState<string>(match || 'all');
   const { isMobile } = useMobile();
   const isPixelLink = !websiteId || pathname.includes('/pixels') || pathname.includes('/links');
-  const excludeEvent = !pathname.endsWith('/events') && !pathname.endsWith('/replays');
+  const excludeEvent =
+    !pathname.endsWith('/events') &&
+    !pathname.endsWith('/replays') &&
+    !pathname.endsWith('/heatmaps');
   const isPerformance = pathname.includes('/performance');
 
   const excludedFields = isPixelLink
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index c1d62ed47..25a5f4726 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -315,7 +315,7 @@ export const reportSchema = reportBaseSchema;
 export const reportResultSchema = z.intersection(
   z.object({
     websiteId: z.uuid(),
-    filters: z.object({ ...filterParams }),
+    filters: z.object({ ...filterParams }).passthrough(),
   }),
   reportTypeSchema,
 );
diff --git a/src/queries/sql/heatmap/extractHeatmapEvents.ts b/src/queries/sql/heatmap/extractHeatmapEvents.ts
index 44ca1dc5b..cb8d65c79 100644
--- a/src/queries/sql/heatmap/extractHeatmapEvents.ts
+++ b/src/queries/sql/heatmap/extractHeatmapEvents.ts
@@ -18,6 +18,13 @@ export interface ExtractedHeatmapEvent {
   scrollPct: number | null;
   urlPath: string;
   createdAt: Date;
+  replayChunkIndex: number | null;
+  replayEventIndex: number | null;
+  replayTimeMs: number | null;
+}
+
+interface ExtractHeatmapEventOptions {
+  chunkIndex?: number;
 }
 
 function safePathname(href: unknown): string | null {
@@ -29,7 +36,10 @@ function safePathname(href: unknown): string | null {
   }
 }
 
-export function extractHeatmapEvents(events: any[]): ExtractedHeatmapEvent[] {
+export function extractHeatmapEvents(
+  events: any[],
+  { chunkIndex }: ExtractHeatmapEventOptions = {},
+): ExtractedHeatmapEvent[] {
   if (!Array.isArray(events) || events.length === 0) return [];
 
   let urlPath: string | null = null;
@@ -37,8 +47,10 @@ export function extractHeatmapEvents(events: any[]): ExtractedHeatmapEvent[] {
   let viewportH: number | null = null;
   const out: ExtractedHeatmapEvent[] = [];
 
-  for (const ev of events) {
+  for (const [eventIndex, ev] of events.entries()) {
     if (!ev || typeof ev !== 'object') continue;
+    const replayTimeMs =
+      typeof ev.timestamp === 'number' && Number.isFinite(ev.timestamp) ? ev.timestamp : null;
 
     if (ev.type === RRWEB_TYPE_META && ev.data) {
       const path = safePathname(ev.data.href);
@@ -72,7 +84,10 @@ export function extractHeatmapEvents(events: any[]): ExtractedHeatmapEvent[] {
               ? Math.max(0, Math.min(100, Math.round(p.scrollPct)))
               : null,
           urlPath: path,
-          createdAt: new Date(typeof ev.timestamp === 'number' ? ev.timestamp : Date.now()),
+          createdAt: new Date(replayTimeMs ?? Date.now()),
+          replayChunkIndex: chunkIndex ?? null,
+          replayEventIndex: eventIndex,
+          replayTimeMs,
         });
       }
       continue;
@@ -103,7 +118,10 @@ export function extractHeatmapEvents(events: any[]): ExtractedHeatmapEvent[] {
         pageH: null,
         scrollPct: null,
         urlPath,
-        createdAt: new Date(typeof ev.timestamp === 'number' ? ev.timestamp : Date.now()),
+        createdAt: new Date(replayTimeMs ?? Date.now()),
+        replayChunkIndex: chunkIndex ?? null,
+        replayEventIndex: eventIndex,
+        replayTimeMs,
       });
     }
   }
diff --git a/src/queries/sql/heatmap/getHeatmap.ts b/src/queries/sql/heatmap/getHeatmap.ts
index 56d4ff20c..fae50e95a 100644
--- a/src/queries/sql/heatmap/getHeatmap.ts
+++ b/src/queries/sql/heatmap/getHeatmap.ts
@@ -2,6 +2,7 @@ import clickhouse from '@/lib/clickhouse';
 import { HEATMAP_EVENT_TYPE } from '@/lib/constants';
 import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
 import prisma from '@/lib/prisma';
+import type { QueryFilters } from '@/lib/types';
 
 const FUNCTION_NAME = 'getHeatmap';
 
@@ -11,9 +12,7 @@ const SCROLL_BUCKET_SIZE = 5;
 
 export type HeatmapMode = 'click' | 'scroll';
 
-export interface HeatmapParameters {
-  startDate: Date;
-  endDate: Date;
+export interface HeatmapParameters extends QueryFilters {
   urlPath?: string;
   mode?: HeatmapMode;
 }
@@ -41,6 +40,8 @@ export interface HeatmapScrollBucket {
 export interface HeatmapSnapshot {
   replayId: string;
   timestamp: number;
+  chunkIndex: number | null;
+  eventIndex: number | null;
 }
 
 export interface HeatmapResult {
@@ -67,13 +68,546 @@ export async function getHeatmap(
   });
 }
 
-const emptyScroll = (): HeatmapResult['scroll'] => ({
-  buckets: [],
-  totalSessions: 0,
-  pageH: null,
-  viewportW: null,
-  viewportH: null,
-});
+interface SnapshotRow {
+  replayId: string;
+  timestamp: number | string;
+  chunkIndex: number | string | null;
+  eventIndex: number | string | null;
+}
+
+interface HeatmapFilterContext {
+  joinQuery: string;
+  queryParams: Record<string, any>;
+}
+
+async function relationalQuery(
+  websiteId: string,
+  parameters: HeatmapParameters,
+): Promise<HeatmapResult> {
+  const { rawQuery } = prisma;
+  const { startDate, endDate, urlPath, mode = 'click' } = parameters;
+  const eventType = mode === 'scroll' ? HEATMAP_EVENT_TYPE.scroll : HEATMAP_EVENT_TYPE.click;
+  const filterContext = getRelationalHeatmapFilterContext(websiteId, parameters);
+  const clickPageFilter =
+    mode === 'click'
+      ? `
+      and x is not null
+      and y is not null
+      and viewport_w is not null
+      and viewport_h is not null
+    `
+      : '';
+
+  const pages: HeatmapPage[] = await rawQuery(
+    `
+    select
+      h.url_path as "urlPath",
+      count(*)::int as count,
+      count(distinct h.visit_id)::int as sessions
+    from heatmap_event h
+    ${filterContext.joinQuery}
+    where h.website_id = {{websiteId::uuid}}
+      and h.event_type = {{eventType}}
+      and h.created_at between {{startDate}} and {{endDate}}
+      ${clickPageFilter}
+    group by h.url_path
+    order by sessions desc, count desc
+    limit ${PAGE_LIMIT}
+    `,
+    { ...filterContext.queryParams, websiteId, eventType, startDate, endDate },
+    FUNCTION_NAME,
+  );
+
+  if (!urlPath) {
+    return { mode, pages, points: [], snapshot: null, scroll: emptyScroll() };
+  }
+
+  if (mode === 'scroll') {
+    const bucketRows: { depth: number | string; sessions: number | string }[] = await rawQuery(
+      `
+      select
+        (floor(max_pct / ${SCROLL_BUCKET_SIZE}) * ${SCROLL_BUCKET_SIZE})::int as depth,
+        count(*)::int as sessions
+      from (
+        select h.visit_id, max(h.scroll_pct) as max_pct
+        from heatmap_event h
+        ${filterContext.joinQuery}
+        where h.website_id = {{websiteId::uuid}}
+          and h.event_type = {{eventType}}
+          and h.url_path = {{urlPath}}
+          and h.created_at between {{startDate}} and {{endDate}}
+          and h.scroll_pct is not null
+        group by h.visit_id
+      ) per_session
+      group by depth
+      order by depth
+      `,
+      { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate },
+      FUNCTION_NAME,
+    );
+
+    const dimRows: {
+      totalSessions: number | string;
+      pageH: number | null;
+      viewportW: number | null;
+      viewportH: number | null;
+    }[] = await rawQuery(
+      `
+      select
+        count(distinct h.visit_id)::int as "totalSessions",
+        (mode() within group (order by h.page_h))::int as "pageH",
+        (mode() within group (order by h.viewport_w))::int as "viewportW",
+        (mode() within group (order by h.viewport_h))::int as "viewportH"
+      from heatmap_event h
+      ${filterContext.joinQuery}
+      where h.website_id = {{websiteId::uuid}}
+        and h.event_type = {{eventType}}
+        and h.url_path = {{urlPath}}
+        and h.created_at between {{startDate}} and {{endDate}}
+        and h.scroll_pct is not null
+      `,
+      { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate },
+      FUNCTION_NAME,
+    );
+
+    const dim = dimRows[0];
+    const scroll = {
+      buckets: bucketRows.map(r => ({ depth: Number(r.depth), sessions: Number(r.sessions) })),
+      totalSessions: Number(dim?.totalSessions ?? 0),
+      pageH: dim?.pageH ?? null,
+      viewportW: dim?.viewportW ?? null,
+      viewportH: dim?.viewportH ?? null,
+    };
+    const snapshot = await getRelationalSnapshot(rawQuery, {
+      websiteId,
+      eventType,
+      urlPath,
+      startDate,
+      endDate,
+      viewportW: scroll.viewportW,
+      viewportH: scroll.viewportH,
+      filterContext,
+    });
+
+    return {
+      mode,
+      pages,
+      points: [],
+      snapshot,
+      scroll,
+    };
+  }
+
+  const rawPoints: HeatmapPoint[] = await rawQuery(
+    `
+    select
+      h.node_id as "nodeId",
+      h.x,
+      h.y,
+      h.viewport_w as "viewportW",
+      h.viewport_h as "viewportH",
+      count(*)::int as count
+    from heatmap_event h
+    ${filterContext.joinQuery}
+    where h.website_id = {{websiteId::uuid}}
+      and h.event_type = {{eventType}}
+      and h.url_path = {{urlPath}}
+      and h.created_at between {{startDate}} and {{endDate}}
+      and h.x is not null
+      and h.y is not null
+      and h.viewport_w is not null
+      and h.viewport_h is not null
+    group by h.node_id, h.x, h.y, h.viewport_w, h.viewport_h
+    order by count desc
+    limit ${POINT_LIMIT}
+    `,
+    { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate },
+    FUNCTION_NAME,
+  );
+
+  const viewport = pickSnapshotViewport(rawPoints);
+  const snapshot = await getRelationalSnapshot(rawQuery, {
+    websiteId,
+    eventType,
+    urlPath,
+    startDate,
+    endDate,
+    viewportW: viewport?.width ?? null,
+    viewportH: viewport?.height ?? null,
+    filterContext,
+  });
+
+  return { mode, pages, points: rawPoints, snapshot, scroll: emptyScroll() };
+}
+
+async function getRelationalSnapshot(
+  rawQuery: typeof prisma.rawQuery,
+  {
+    websiteId,
+    eventType,
+    urlPath,
+    startDate,
+    endDate,
+    viewportW,
+    viewportH,
+    filterContext,
+  }: {
+    websiteId: string;
+    eventType: number;
+    urlPath: string;
+    startDate: Date;
+    endDate: Date;
+    viewportW: number | null;
+    viewportH: number | null;
+    filterContext: HeatmapFilterContext;
+  },
+): Promise<HeatmapSnapshot | null> {
+  const viewportFilter =
+    viewportW && viewportH
+      ? `
+      and h.viewport_w = {{viewportW}}
+      and h.viewport_h = {{viewportH}}
+    `
+      : '';
+
+  const rows: SnapshotRow[] = await rawQuery(
+    `
+    with best_visit as (
+      select
+        h.visit_id as visit_id,
+        count(*) as event_count,
+        min(h.created_at) as first_seen
+      from heatmap_event h
+      ${filterContext.joinQuery}
+      where h.website_id = {{websiteId::uuid}}
+        and h.event_type = {{eventType}}
+        and h.url_path = {{urlPath}}
+        and h.created_at between {{startDate}} and {{endDate}}
+        ${viewportFilter}
+      group by h.visit_id
+      order by event_count desc, first_seen asc
+      limit 1
+    )
+    select
+      h.visit_id as "replayId",
+      coalesce(h.replay_time_ms, (extract(epoch from h.created_at) * 1000)::bigint) as "timestamp",
+      h.replay_chunk_index as "chunkIndex",
+      h.replay_event_index as "eventIndex"
+    from heatmap_event h
+    inner join best_visit bv on bv.visit_id = h.visit_id
+    inner join (
+      select distinct visit_id
+      from session_replay
+      where website_id = {{websiteId::uuid}}
+    ) sr on sr.visit_id = h.visit_id
+    ${filterContext.joinQuery}
+    where h.website_id = {{websiteId::uuid}}
+      and h.event_type = {{eventType}}
+      and h.url_path = {{urlPath}}
+      and h.created_at between {{startDate}} and {{endDate}}
+      ${viewportFilter}
+    order by
+      case when h.replay_chunk_index is null then 1 else 0 end asc,
+      h.replay_chunk_index asc nulls last,
+      h.replay_event_index asc nulls last,
+      h.created_at asc
+    limit 1
+    `,
+    { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate, viewportW, viewportH },
+    FUNCTION_NAME,
+  );
+
+  return mapSnapshot(rows[0]);
+}
+
+async function clickhouseQuery(
+  websiteId: string,
+  parameters: HeatmapParameters,
+): Promise<HeatmapResult> {
+  const { rawQuery } = clickhouse;
+  const { startDate, endDate, urlPath, mode = 'click' } = parameters;
+  const eventType = mode === 'scroll' ? HEATMAP_EVENT_TYPE.scroll : HEATMAP_EVENT_TYPE.click;
+  const filterContext = getClickhouseHeatmapFilterContext(websiteId, parameters);
+  const clickPageFilter =
+    mode === 'click'
+      ? `
+      and x is not null
+      and y is not null
+      and viewport_w is not null
+      and viewport_h is not null
+    `
+      : '';
+
+  const pageRows = await rawQuery<
+    { urlPath: string; count: string | number; sessions: string | number }[]
+  >(
+    `
+    select
+      h.url_path as urlPath,
+      count() as count,
+      uniq(h.visit_id) as sessions
+    from heatmap_event h
+    ${filterContext.joinQuery}
+    where h.website_id = {websiteId:UUID}
+      and h.event_type = {eventType:UInt8}
+      and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      ${clickPageFilter}
+    group by h.url_path
+    order by sessions desc, count desc
+    limit ${PAGE_LIMIT}
+    `,
+    { ...filterContext.queryParams, websiteId, eventType, startDate, endDate },
+    FUNCTION_NAME,
+  );
+
+  const pages: HeatmapPage[] = pageRows.map(p => ({
+    urlPath: p.urlPath,
+    count: Number(p.count),
+    sessions: Number(p.sessions),
+  }));
+
+  if (!urlPath) {
+    return { mode, pages, points: [], snapshot: null, scroll: emptyScroll() };
+  }
+
+  if (mode === 'scroll') {
+    const bucketRows = await rawQuery<{ depth: number | string; sessions: number | string }[]>(
+      `
+      select
+        intDiv(max_pct, ${SCROLL_BUCKET_SIZE}) * ${SCROLL_BUCKET_SIZE} as depth,
+        count() as sessions
+      from (
+        select h.visit_id, max(h.scroll_pct) as max_pct
+        from heatmap_event h
+        ${filterContext.joinQuery}
+        where h.website_id = {websiteId:UUID}
+          and h.event_type = {eventType:UInt8}
+          and h.url_path = {urlPath:String}
+          and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+          and h.scroll_pct is not null
+        group by h.visit_id
+      )
+      group by depth
+      order by depth
+      `,
+      { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate },
+      FUNCTION_NAME,
+    );
+
+    const dimRows = await rawQuery<
+      {
+        totalSessions: number | string;
+        pageH: number | null;
+        viewportW: number | null;
+        viewportH: number | null;
+      }[]
+    >(
+      `
+      select
+        uniq(h.visit_id) as totalSessions,
+        toInt32OrNull(toString(arrayElement(topK(1)(h.page_h), 1))) as pageH,
+        toInt32OrNull(toString(arrayElement(topK(1)(h.viewport_w), 1))) as viewportW,
+        toInt32OrNull(toString(arrayElement(topK(1)(h.viewport_h), 1))) as viewportH
+      from heatmap_event h
+      ${filterContext.joinQuery}
+      where h.website_id = {websiteId:UUID}
+        and h.event_type = {eventType:UInt8}
+        and h.url_path = {urlPath:String}
+        and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+        and h.scroll_pct is not null
+      `,
+      { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate },
+      FUNCTION_NAME,
+    );
+
+    const dim = dimRows[0];
+    const scroll = {
+      buckets: bucketRows.map(r => ({ depth: Number(r.depth), sessions: Number(r.sessions) })),
+      totalSessions: Number(dim?.totalSessions ?? 0),
+      pageH: dim?.pageH === null || dim?.pageH === undefined ? null : Number(dim.pageH),
+      viewportW:
+        dim?.viewportW === null || dim?.viewportW === undefined ? null : Number(dim.viewportW),
+      viewportH:
+        dim?.viewportH === null || dim?.viewportH === undefined ? null : Number(dim.viewportH),
+    };
+    const snapshot = await getClickhouseSnapshot(rawQuery, {
+      websiteId,
+      eventType,
+      urlPath,
+      startDate,
+      endDate,
+      viewportW: scroll.viewportW,
+      viewportH: scroll.viewportH,
+      filterContext,
+    });
+
+    return {
+      mode,
+      pages,
+      points: [],
+      snapshot,
+      scroll,
+    };
+  }
+
+  const pointRows = await rawQuery<
+    {
+      nodeId: number | null;
+      x: number;
+      y: number;
+      viewportW: number;
+      viewportH: number;
+      count: string | number;
+    }[]
+  >(
+    `
+    select
+      h.node_id as nodeId,
+      h.x,
+      h.y,
+      h.viewport_w as viewportW,
+      h.viewport_h as viewportH,
+      count() as count
+    from heatmap_event h
+    ${filterContext.joinQuery}
+    where h.website_id = {websiteId:UUID}
+      and h.event_type = {eventType:UInt8}
+      and h.url_path = {urlPath:String}
+      and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      and h.x is not null
+      and h.y is not null
+      and h.viewport_w is not null
+      and h.viewport_h is not null
+    group by h.node_id, h.x, h.y, h.viewport_w, h.viewport_h
+    order by count desc
+    limit ${POINT_LIMIT}
+    `,
+    { ...filterContext.queryParams, websiteId, eventType, urlPath, startDate, endDate },
+    FUNCTION_NAME,
+  );
+
+  const points: HeatmapPoint[] = pointRows.map(p => ({
+    nodeId: p.nodeId === null || p.nodeId === undefined ? null : Number(p.nodeId),
+    x: Number(p.x),
+    y: Number(p.y),
+    viewportW: Number(p.viewportW),
+    viewportH: Number(p.viewportH),
+    count: Number(p.count),
+  }));
+
+  const viewport = pickSnapshotViewport(points);
+  const snapshot = await getClickhouseSnapshot(rawQuery, {
+    websiteId,
+    eventType,
+    urlPath,
+    startDate,
+    endDate,
+    viewportW: viewport?.width ?? null,
+    viewportH: viewport?.height ?? null,
+    filterContext,
+  });
+
+  return { mode, pages, points, snapshot, scroll: emptyScroll() };
+}
+
+async function getClickhouseSnapshot(
+  rawQuery: typeof clickhouse.rawQuery,
+  {
+    websiteId,
+    eventType,
+    urlPath,
+    startDate,
+    endDate,
+    viewportW,
+    viewportH,
+    filterContext,
+  }: {
+    websiteId: string;
+    eventType: number;
+    urlPath: string;
+    startDate: Date;
+    endDate: Date;
+    viewportW: number | null;
+    viewportH: number | null;
+    filterContext: HeatmapFilterContext;
+  },
+): Promise<HeatmapSnapshot | null> {
+  const viewportFilter =
+    viewportW && viewportH
+      ? `
+      and h.viewport_w = {viewportW:UInt32}
+      and h.viewport_h = {viewportH:UInt32}
+    `
+      : '';
+
+  const rows = await rawQuery<SnapshotRow[]>(
+    `
+    with best_visit as (
+      select
+        h.visit_id as visit_id,
+        count() as event_count,
+        min(h.created_at) as first_seen
+      from heatmap_event h
+      ${filterContext.joinQuery}
+      where h.website_id = {websiteId:UUID}
+        and h.event_type = {eventType:UInt8}
+        and h.url_path = {urlPath:String}
+        and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+        ${viewportFilter}
+      group by h.visit_id
+      order by event_count desc, first_seen asc
+      limit 1
+    )
+    select
+      toString(h.visit_id) as replayId,
+      ifNull(h.replay_time_ms, toInt64(toUnixTimestamp(h.created_at)) * 1000) as timestamp,
+      h.replay_chunk_index as chunkIndex,
+      h.replay_event_index as eventIndex
+    from heatmap_event h
+    inner join best_visit bv on bv.visit_id = h.visit_id
+    inner join (
+      select distinct visit_id
+      from session_replay
+      where website_id = {websiteId:UUID}
+    ) sr on sr.visit_id = h.visit_id
+    ${filterContext.joinQuery}
+    where h.website_id = {websiteId:UUID}
+      and h.event_type = {eventType:UInt8}
+      and h.url_path = {urlPath:String}
+      and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      ${viewportFilter}
+    order by
+      isNull(h.replay_chunk_index) asc,
+      h.replay_chunk_index asc,
+      h.replay_event_index asc,
+      h.created_at asc
+    limit 1
+    `,
+    {
+      ...filterContext.queryParams,
+      websiteId,
+      eventType,
+      urlPath,
+      startDate,
+      endDate,
+      viewportW,
+      viewportH,
+    },
+    FUNCTION_NAME,
+  );
+
+  return mapSnapshot(rows[0]);
+}
+
+function emptyScroll(): HeatmapResult['scroll'] {
+  return {
+    buckets: [],
+    totalSessions: 0,
+    pageH: null,
+    viewportW: null,
+    viewportH: null,
+  };
+}
 
 function pickSnapshotViewport(points: HeatmapPoint[]): { width: number; height: number } | null {
   const buckets = new Map<string, { width: number; height: number; count: number }>();
@@ -98,426 +632,85 @@ function pickSnapshotViewport(points: HeatmapPoint[]): { width: number; height:
   return best ? { width: best.width, height: best.height } : null;
 }
 
-async function relationalQuery(
-  websiteId: string,
-  { startDate, endDate, urlPath, mode = 'click' }: HeatmapParameters,
-): Promise<HeatmapResult> {
-  const { rawQuery } = prisma;
-  const eventType = mode === 'scroll' ? HEATMAP_EVENT_TYPE.scroll : HEATMAP_EVENT_TYPE.click;
-
-  const pages: HeatmapPage[] = await rawQuery(
-    `
-    select
-      url_path as "urlPath",
-      count(*)::int as count,
-      count(distinct visit_id)::int as sessions
-    from heatmap_event
-    where website_id = {{websiteId::uuid}}
-      and event_type = {{eventType}}
-      and created_at between {{startDate}} and {{endDate}}
-    group by url_path
-    order by count desc
-    limit ${PAGE_LIMIT}
-    `,
-    { websiteId, eventType, startDate, endDate },
-    FUNCTION_NAME,
-  );
-
-  if (!urlPath) {
-    return { mode, pages, points: [], snapshot: null, scroll: emptyScroll() };
+function mapSnapshot(row?: SnapshotRow | null): HeatmapSnapshot | null {
+  if (!row) {
+    return null;
   }
 
-  if (mode === 'scroll') {
-    const bucketRows: { depth: number | string; sessions: number | string }[] = await rawQuery(
-      `
-      select
-        (floor(max_pct / ${SCROLL_BUCKET_SIZE}) * ${SCROLL_BUCKET_SIZE})::int as depth,
-        count(*)::int as sessions
-      from (
-        select visit_id, max(scroll_pct) as max_pct
-        from heatmap_event
-        where website_id = {{websiteId::uuid}}
-          and event_type = {{eventType}}
-          and url_path = {{urlPath}}
-          and created_at between {{startDate}} and {{endDate}}
-          and scroll_pct is not null
-        group by visit_id
-      ) per_session
-      group by depth
-      order by depth
-      `,
-      { websiteId, eventType, urlPath, startDate, endDate },
-      FUNCTION_NAME,
-    );
+  return {
+    replayId: row.replayId,
+    timestamp: Number(row.timestamp),
+    chunkIndex:
+      row.chunkIndex === null || row.chunkIndex === undefined ? null : Number(row.chunkIndex),
+    eventIndex:
+      row.eventIndex === null || row.eventIndex === undefined ? null : Number(row.eventIndex),
+  };
+}
 
-    const dimRows: {
-      totalSessions: number | string;
-      pageH: number | null;
-      viewportW: number | null;
-      viewportH: number | null;
-    }[] = await rawQuery(
-      `
-      select
-        count(distinct visit_id)::int as "totalSessions",
-        (mode() within group (order by page_h))::int as "pageH",
-        (mode() within group (order by viewport_w))::int as "viewportW",
-        (mode() within group (order by viewport_h))::int as "viewportH"
-      from heatmap_event
-      where website_id = {{websiteId::uuid}}
-        and event_type = {{eventType}}
-        and url_path = {{urlPath}}
-        and created_at between {{startDate}} and {{endDate}}
-        and scroll_pct is not null
-      `,
-      { websiteId, eventType, urlPath, startDate, endDate },
-      FUNCTION_NAME,
-    );
-
-    const dim = dimRows[0];
-    const scroll = {
-      buckets: bucketRows.map(r => ({ depth: Number(r.depth), sessions: Number(r.sessions) })),
-      totalSessions: Number(dim?.totalSessions ?? 0),
-      pageH: dim?.pageH ?? null,
-      viewportW: dim?.viewportW ?? null,
-      viewportH: dim?.viewportH ?? null,
-    };
-    const snapshot = await getRelationalSnapshot(rawQuery, {
+function getRelationalHeatmapFilterContext(
+  websiteId: string,
+  filters: QueryFilters,
+): HeatmapFilterContext {
+  const { parseFilters } = prisma;
+  const { filterQuery, cohortQuery, excludeBounceQuery, joinSessionQuery, queryParams } =
+    parseFilters({
+      ...filters,
       websiteId,
-      eventType,
-      urlPath,
-      startDate,
-      endDate,
-      viewportW: scroll.viewportW,
-      viewportH: scroll.viewportH,
     });
 
-    return {
-      mode,
-      pages,
-      points: [],
-      snapshot,
-      scroll,
-    };
+  if (!(filterQuery || cohortQuery || excludeBounceQuery)) {
+    return { joinQuery: '', queryParams };
   }
 
-  const rawPoints: HeatmapPoint[] = await rawQuery(
-    `
-    select
-      node_id as "nodeId",
-      x,
-      y,
-      viewport_w as "viewportW",
-      viewport_h as "viewportH",
-      count(*)::int as count
-    from heatmap_event
-    where website_id = {{websiteId::uuid}}
-      and event_type = {{eventType}}
-      and url_path = {{urlPath}}
-      and created_at between {{startDate}} and {{endDate}}
-      and x is not null
-      and y is not null
-      and viewport_w is not null
-      and viewport_h is not null
-    group by node_id, x, y, viewport_w, viewport_h
-    order by count desc
-    limit ${POINT_LIMIT}
+  return {
+    joinQuery: `
+    inner join (
+      select distinct website_event.website_id, website_event.session_id, website_event.visit_id
+      from website_event
+      ${joinSessionQuery}
+      ${cohortQuery}
+      ${excludeBounceQuery}
+      where website_event.website_id = {{websiteId::uuid}}
+        and website_event.created_at between {{startDate}} and {{endDate}}
+        ${filterQuery}
+    ) filtered_visits
+      on filtered_visits.website_id = h.website_id
+      and filtered_visits.session_id = h.session_id
+      and filtered_visits.visit_id = h.visit_id
     `,
-    { websiteId, eventType, urlPath, startDate, endDate },
-    FUNCTION_NAME,
-  );
+    queryParams,
+  };
+}
 
-  const viewport = pickSnapshotViewport(rawPoints);
-  const snapshot = await getRelationalSnapshot(rawQuery, {
+function getClickhouseHeatmapFilterContext(
+  websiteId: string,
+  filters: QueryFilters,
+): HeatmapFilterContext {
+  const { parseFilters } = clickhouse;
+  const { filterQuery, cohortQuery, excludeBounceQuery, queryParams } = parseFilters({
+    ...filters,
     websiteId,
-    eventType,
-    urlPath,
-    startDate,
-    endDate,
-    viewportW: viewport?.width ?? null,
-    viewportH: viewport?.height ?? null,
   });
 
-  return { mode, pages, points: rawPoints, snapshot, scroll: emptyScroll() };
-}
-
-async function getRelationalSnapshot(
-  rawQuery: typeof prisma.rawQuery,
-  {
-    websiteId,
-    eventType,
-    urlPath,
-    startDate,
-    endDate,
-    viewportW,
-    viewportH,
-  }: {
-    websiteId: string;
-    eventType: number;
-    urlPath: string;
-    startDate: Date;
-    endDate: Date;
-    viewportW: number | null;
-    viewportH: number | null;
-  },
-): Promise<HeatmapSnapshot | null> {
-  const viewportFilter =
-    viewportW && viewportH
-      ? `
-      and h.viewport_w = {{viewportW}}
-      and h.viewport_h = {{viewportH}}
-    `
-      : '';
-
-  const rows: { replayId: string; timestamp: number | string }[] = await rawQuery(
-    `
-    select
-      h.visit_id as "replayId",
-      (extract(epoch from h.created_at) * 1000)::bigint as "timestamp"
-    from heatmap_event h
-    inner join (
-      select distinct visit_id
-      from session_replay
-      where website_id = {{websiteId::uuid}}
-    ) sr on sr.visit_id = h.visit_id
-    where h.website_id = {{websiteId::uuid}}
-      and h.event_type = {{eventType}}
-      and h.url_path = {{urlPath}}
-      and h.created_at between {{startDate}} and {{endDate}}
-      ${viewportFilter}
-    order by h.created_at asc
-    limit 1
-    `,
-    { websiteId, eventType, urlPath, startDate, endDate, viewportW, viewportH },
-    FUNCTION_NAME,
-  );
-
-  const row = rows[0];
-  return row ? { replayId: row.replayId, timestamp: Number(row.timestamp) } : null;
-}
-
-async function clickhouseQuery(
-  websiteId: string,
-  { startDate, endDate, urlPath, mode = 'click' }: HeatmapParameters,
-): Promise<HeatmapResult> {
-  const { rawQuery } = clickhouse;
-  const eventType = mode === 'scroll' ? HEATMAP_EVENT_TYPE.scroll : HEATMAP_EVENT_TYPE.click;
-
-  const pageRows = await rawQuery<
-    { urlPath: string; count: string | number; sessions: string | number }[]
-  >(
-    `
-    select
-      url_path as urlPath,
-      count() as count,
-      uniq(visit_id) as sessions
-    from heatmap_event
-    where website_id = {websiteId:UUID}
-      and event_type = {eventType:UInt8}
-      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-    group by url_path
-    order by count desc
-    limit ${PAGE_LIMIT}
-    `,
-    { websiteId, eventType, startDate, endDate },
-    FUNCTION_NAME,
-  );
-
-  const pages: HeatmapPage[] = pageRows.map(p => ({
-    urlPath: p.urlPath,
-    count: Number(p.count),
-    sessions: Number(p.sessions),
-  }));
-
-  if (!urlPath) {
-    return { mode, pages, points: [], snapshot: null, scroll: emptyScroll() };
+  if (!(filterQuery || cohortQuery || excludeBounceQuery)) {
+    return { joinQuery: '', queryParams };
   }
 
-  if (mode === 'scroll') {
-    const bucketRows = await rawQuery<{ depth: number | string; sessions: number | string }[]>(
-      `
-      select
-        intDiv(max_pct, ${SCROLL_BUCKET_SIZE}) * ${SCROLL_BUCKET_SIZE} as depth,
-        count() as sessions
-      from (
-        select visit_id, max(scroll_pct) as max_pct
-        from heatmap_event
-        where website_id = {websiteId:UUID}
-          and event_type = {eventType:UInt8}
-          and url_path = {urlPath:String}
-          and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-          and scroll_pct is not null
-        group by visit_id
-      )
-      group by depth
-      order by depth
-      `,
-      { websiteId, eventType, urlPath, startDate, endDate },
-      FUNCTION_NAME,
-    );
-
-    const dimRows = await rawQuery<
-      {
-        totalSessions: number | string;
-        pageH: number | null;
-        viewportW: number | null;
-        viewportH: number | null;
-      }[]
-    >(
-      `
-      select
-        uniq(visit_id) as totalSessions,
-        toInt32OrNull(toString(arrayElement(topK(1)(page_h), 1))) as pageH,
-        toInt32OrNull(toString(arrayElement(topK(1)(viewport_w), 1))) as viewportW,
-        toInt32OrNull(toString(arrayElement(topK(1)(viewport_h), 1))) as viewportH
-      from heatmap_event
+  return {
+    joinQuery: `
+    inner join (
+      select distinct website_id, session_id, visit_id
+      from website_event
+      ${cohortQuery}
+      ${excludeBounceQuery}
       where website_id = {websiteId:UUID}
-        and event_type = {eventType:UInt8}
-        and url_path = {urlPath:String}
         and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-        and scroll_pct is not null
-      `,
-      { websiteId, eventType, urlPath, startDate, endDate },
-      FUNCTION_NAME,
-    );
-
-    const dim = dimRows[0];
-    const scroll = {
-      buckets: bucketRows.map(r => ({ depth: Number(r.depth), sessions: Number(r.sessions) })),
-      totalSessions: Number(dim?.totalSessions ?? 0),
-      pageH: dim?.pageH === null || dim?.pageH === undefined ? null : Number(dim.pageH),
-      viewportW:
-        dim?.viewportW === null || dim?.viewportW === undefined ? null : Number(dim.viewportW),
-      viewportH:
-        dim?.viewportH === null || dim?.viewportH === undefined ? null : Number(dim.viewportH),
-    };
-    const snapshot = await getClickhouseSnapshot(rawQuery, {
-      websiteId,
-      eventType,
-      urlPath,
-      startDate,
-      endDate,
-      viewportW: scroll.viewportW,
-      viewportH: scroll.viewportH,
-    });
-
-    return {
-      mode,
-      pages,
-      points: [],
-      snapshot,
-      scroll,
-    };
-  }
-
-  const pointRows = await rawQuery<
-    {
-      nodeId: number | null;
-      x: number;
-      y: number;
-      viewportW: number;
-      viewportH: number;
-      count: string | number;
-    }[]
-  >(
-    `
-    select
-      node_id as nodeId,
-      x,
-      y,
-      viewport_w as viewportW,
-      viewport_h as viewportH,
-      count() as count
-    from heatmap_event
-    where website_id = {websiteId:UUID}
-      and event_type = {eventType:UInt8}
-      and url_path = {urlPath:String}
-      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-      and x is not null
-      and y is not null
-      and viewport_w is not null
-      and viewport_h is not null
-    group by node_id, x, y, viewport_w, viewport_h
-    order by count desc
-    limit ${POINT_LIMIT}
+        ${filterQuery}
+    ) filtered_visits
+      on filtered_visits.website_id = h.website_id
+      and filtered_visits.session_id = h.session_id
+      and filtered_visits.visit_id = h.visit_id
     `,
-    { websiteId, eventType, urlPath, startDate, endDate },
-    FUNCTION_NAME,
-  );
-
-  const points: HeatmapPoint[] = pointRows.map(p => ({
-    nodeId: p.nodeId === null || p.nodeId === undefined ? null : Number(p.nodeId),
-    x: Number(p.x),
-    y: Number(p.y),
-    viewportW: Number(p.viewportW),
-    viewportH: Number(p.viewportH),
-    count: Number(p.count),
-  }));
-
-  const viewport = pickSnapshotViewport(points);
-  const snapshot = await getClickhouseSnapshot(rawQuery, {
-    websiteId,
-    eventType,
-    urlPath,
-    startDate,
-    endDate,
-    viewportW: viewport?.width ?? null,
-    viewportH: viewport?.height ?? null,
-  });
-
-  return { mode, pages, points, snapshot, scroll: emptyScroll() };
-}
-
-async function getClickhouseSnapshot(
-  rawQuery: typeof clickhouse.rawQuery,
-  {
-    websiteId,
-    eventType,
-    urlPath,
-    startDate,
-    endDate,
-    viewportW,
-    viewportH,
-  }: {
-    websiteId: string;
-    eventType: number;
-    urlPath: string;
-    startDate: Date;
-    endDate: Date;
-    viewportW: number | null;
-    viewportH: number | null;
-  },
-): Promise<HeatmapSnapshot | null> {
-  const viewportFilter =
-    viewportW && viewportH
-      ? `
-      and h.viewport_w = {viewportW:UInt32}
-      and h.viewport_h = {viewportH:UInt32}
-    `
-      : '';
-
-  const rows = await rawQuery<{ replayId: string; timestamp: string | number }[]>(
-    `
-    select
-      toString(h.visit_id) as replayId,
-      toUnixTimestamp(h.created_at) * 1000 as timestamp
-    from heatmap_event h
-    inner join (
-      select distinct visit_id
-      from session_replay
-      where website_id = {websiteId:UUID}
-    ) sr on sr.visit_id = h.visit_id
-    where h.website_id = {websiteId:UUID}
-      and h.event_type = {eventType:UInt8}
-      and h.url_path = {urlPath:String}
-      and h.created_at between {startDate:DateTime64} and {endDate:DateTime64}
-      ${viewportFilter}
-    order by h.created_at asc
-    limit 1
-    `,
-    { websiteId, eventType, urlPath, startDate, endDate, viewportW, viewportH },
-    FUNCTION_NAME,
-  );
-
-  const row = rows[0];
-  return row ? { replayId: row.replayId, timestamp: Number(row.timestamp) } : null;
+    queryParams,
+  };
 }
diff --git a/src/queries/sql/heatmap/saveHeatmapEvents.ts b/src/queries/sql/heatmap/saveHeatmapEvents.ts
index 71e0443e9..547884ce9 100644
--- a/src/queries/sql/heatmap/saveHeatmapEvents.ts
+++ b/src/queries/sql/heatmap/saveHeatmapEvents.ts
@@ -18,6 +18,9 @@ export interface HeatmapEventRow {
   pageH: number | null;
   scrollPct: number | null;
   createdAt: Date;
+  replayChunkIndex: number | null;
+  replayEventIndex: number | null;
+  replayTimeMs: number | null;
 }
 
 export async function saveHeatmapEvents(rows: HeatmapEventRow[]) {
@@ -46,7 +49,10 @@ async function relationalQuery(rows: HeatmapEventRow[]) {
       pageH: r.pageH,
       scrollPct: r.scrollPct,
       createdAt: r.createdAt,
-    })),
+      replayChunkIndex: r.replayChunkIndex,
+      replayEventIndex: r.replayEventIndex,
+      replayTimeMs: r.replayTimeMs,
+    })) as any,
   });
 }
 
@@ -69,6 +75,9 @@ async function clickhouseQuery(rows: HeatmapEventRow[]) {
     page_h: r.pageH,
     scroll_pct: r.scrollPct,
     created_at: getUTCString(r.createdAt),
+    replay_chunk_index: r.replayChunkIndex,
+    replay_event_index: r.replayEventIndex,
+    replay_time_ms: r.replayTimeMs,
   }));
 
   if (kafka.enabled) {
diff --git a/src/queries/sql/replays/getReplayChunks.ts b/src/queries/sql/replays/getReplayChunks.ts
index 5c192172e..182c0703a 100644
--- a/src/queries/sql/replays/getReplayChunks.ts
+++ b/src/queries/sql/replays/getReplayChunks.ts
@@ -15,15 +15,39 @@ export interface ReplayChunk {
   endedAt: Date;
 }
 
-export async function getReplayChunks(websiteId: string, visitId: string): Promise<ReplayChunk[]> {
+interface GetReplayChunksOptions {
+  endAt?: Date;
+  endChunkIndex?: number;
+}
+
+export async function getReplayChunks(
+  websiteId: string,
+  visitId: string,
+  options: GetReplayChunksOptions = {},
+): Promise<ReplayChunk[]> {
   return runQuery({
-    [PRISMA]: () => relationalQuery(websiteId, visitId),
-    [CLICKHOUSE]: () => clickhouseQuery(websiteId, visitId),
+    [PRISMA]: () => relationalQuery(websiteId, visitId, options),
+    [CLICKHOUSE]: () => clickhouseQuery(websiteId, visitId, options),
   });
 }
 
-async function relationalQuery(websiteId: string, visitId: string): Promise<ReplayChunk[]> {
+async function relationalQuery(
+  websiteId: string,
+  visitId: string,
+  { endAt, endChunkIndex }: GetReplayChunksOptions,
+): Promise<ReplayChunk[]> {
   const { rawQuery } = prisma;
+  const endAtFilter = endAt
+    ? `
+      and started_at <= {{endAt}}
+    `
+    : '';
+  const endChunkFilter =
+    endChunkIndex !== undefined
+      ? `
+      and chunk_index <= {{endChunkIndex}}
+    `
+      : '';
 
   const chunks: {
     sessionId: string;
@@ -46,9 +70,11 @@ async function relationalQuery(websiteId: string, visitId: string): Promise<Repl
     from session_replay
     where website_id = {{websiteId::uuid}}
       and visit_id = {{visitId::uuid}}
+      ${endAtFilter}
+      ${endChunkFilter}
     order by chunk_index asc
     `,
-    { websiteId, visitId },
+    { websiteId, visitId, endAt, endChunkIndex },
     FUNCTION_NAME,
   );
 
@@ -58,8 +84,23 @@ async function relationalQuery(websiteId: string, visitId: string): Promise<Repl
   }));
 }
 
-async function clickhouseQuery(websiteId: string, visitId: string): Promise<ReplayChunk[]> {
+async function clickhouseQuery(
+  websiteId: string,
+  visitId: string,
+  { endAt, endChunkIndex }: GetReplayChunksOptions,
+): Promise<ReplayChunk[]> {
   const { rawQuery } = clickhouse;
+  const endAtFilter = endAt
+    ? `
+      and started_at <= {endAt:DateTime64}
+    `
+    : '';
+  const endChunkFilter =
+    endChunkIndex !== undefined
+      ? `
+      and chunk_index <= {endChunkIndex:UInt32}
+    `
+      : '';
 
   const results = await rawQuery<
     {
@@ -82,11 +123,13 @@ async function clickhouseQuery(websiteId: string, visitId: string): Promise<Repl
       started_at,
       ended_at
     from session_replay
-    where website_id = {websiteId:UUID}
+    prewhere website_id = {websiteId:UUID}
       and visit_id = {visitId:UUID}
+      ${endAtFilter}
+      ${endChunkFilter}
     order by chunk_index asc
     `,
-    { websiteId, visitId },
+    { websiteId, visitId, endAt, endChunkIndex },
     FUNCTION_NAME,
   );