diff --git a/packages/ui/package.json b/packages/ui/package.json
index a93ec5c3a5..60d7dea2b9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -95,6 +95,7 @@
     "react-hotkeys-hook": "^4.4.4",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
+    "react-zoom-pan-pinch": "^4.0.3",
     "reflect-metadata": "catalog:",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
index aa7a904c15..4946346cf3 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.test.tsx
@@ -1,8 +1,9 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ArtifactPreview } from "./ArtifactPreview";
 import {
   artifactHtmlDocument,
+  artifactPreviewBlob,
   markdownDocument,
 } from "./artifactPreviewDocument";
 
@@ -102,6 +103,118 @@ describe("ArtifactPreview", () => {
     expect(frame).toHaveAttribute("sandbox", "");
   });
 
+  it.each([
+    ["image.png", "image/png"],
+    ["image.jpg", "image/jpeg"],
+    ["image.gif", "image/gif"],
+    ["image.webp", "image/webp"],
+    ["image.bmp", "image/bmp"],
+    ["image.ico", "image/x-icon"],
+    ["image.tiff", "image/tiff"],
+    ["image.avif", "image/avif"],
+  ])("normalizes %s served as octet-stream", async (name, mimeType) => {
+    const blob = await artifactPreviewBlob(
+      new Blob(["image"], { type: "application/octet-stream" }),
+      name,
+    );
+
+    expect(blob.type).toBe(mimeType);
+  });
+
+  it("shows working image controls instead of an iframe", () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["image"], { type: "image/png" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="image.png"
+      />,
+    );
+
+    expect(screen.getByRole("img", { name: "image.png" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Zoom in" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Zoom out" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Fit to view" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByTitle("Preview of image.png")).not.toBeInTheDocument();
+
+    const zoomOut = screen.getByRole("button", { name: "Zoom out" });
+    fireEvent.click(zoomOut);
+    fireEvent.click(zoomOut);
+    fireEvent.click(zoomOut);
+    fireEvent.click(zoomOut);
+    expect(screen.getByText("10%")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Fit to view" }));
+    expect(screen.getByText("100%")).toBeInTheDocument();
+  });
+
+  it("zooms with a trackpad pinch gesture", async () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["image"], { type: "image/png" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="image.png"
+      />,
+    );
+
+    const image = screen.getByRole("img", { name: "image.png" });
+    const viewport = image.closest(".react-transform-wrapper");
+    expect(viewport).not.toBeNull();
+    fireEvent.wheel(viewport as Element, {
+      ctrlKey: true,
+      deltaY: -100,
+      clientX: 100,
+      clientY: 100,
+    });
+
+    await waitFor(() => {
+      const percentage = Number.parseInt(
+        screen.getByText(/%$/).textContent ?? "0",
+        10,
+      );
+      expect(percentage).toBeGreaterThan(100);
+    });
+  });
+
+  it("shows the preview error when an image cannot be decoded", () => {
+    useQuery.mockReturnValue({
+      data: new Blob(["not an image"], { type: "image/png" }),
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <ArtifactPreview
+        taskId="task-1"
+        runId="run-1"
+        artifactId="artifact-1"
+        name="broken.png"
+      />,
+    );
+
+    fireEvent.error(screen.getByRole("img", { name: "broken.png" }));
+    expect(
+      screen.getByText("This artifact can’t be previewed."),
+    ).toBeInTheDocument();
+  });
+
   it("renders GFM Markdown while escaping embedded HTML", () => {
     const document = markdownDocument(
       "# Report\n\n**Ready**\n\n| Name | Value |\n| --- | --- |\n| Cost | 12 |\n\n<script>alert('no')</script>",
diff --git a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
index ba1d4ccb26..c13bb02d41 100644
--- a/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
+++ b/packages/ui/src/features/sessions/components/ArtifactPreview.tsx
@@ -4,22 +4,38 @@ import {
 } from "@posthog/core/sessions/sessionService";
 import { useService } from "@posthog/di/react";
 import { Spinner } from "@posthog/quill";
+import { isAllowedImageMimeType } from "@posthog/shared";
 import {
   getAuthIdentity,
   useAuthStateValue,
 } from "@posthog/ui/features/auth/store";
 import { AUTH_SCOPED_QUERY_META } from "@posthog/ui/features/auth/useCurrentUser";
 import { useQuery } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
-import {
-  artifactHtmlDocument,
-  markdownDocument,
-} from "./artifactPreviewDocument";
+import { useEffect, useMemo, useState } from "react";
+import { ZoomableImage } from "../../../primitives/SafeImagePreview";
+import { artifactPreviewBlob } from "./artifactPreviewDocument";
+
+function ArtifactPreviewError() {
+  return (
+    <div className="flex h-full items-center justify-center text-muted-foreground">
+      This artifact can’t be previewed.
+    </div>
+  );
+}
 
-const MARKDOWN_EXTENSIONS = new Set(["md", "mdx", "markdown"]);
+function ArtifactImagePreview({ src, name }: { src: string; name: string }) {
+  const [hasError, setHasError] = useState(false);
 
-function extension(filename: string): string {
-  return filename.split(".").pop()?.toLowerCase() ?? "";
+  if (hasError) return <ArtifactPreviewError />;
+  return (
+    <ZoomableImage
+      src={src}
+      alt={name}
+      controls
+      className="size-full bg-(--gray-2) p-4"
+      onError={() => setHasError(true)}
+    />
+  );
 }
 
 export function ArtifactPreview({
@@ -46,18 +62,7 @@ export function ArtifactPreview({
       if (!url) throw new Error("Artifact is unavailable");
       const response = await fetch(url);
       if (!response.ok) throw new Error("Artifact preview failed");
-      const blob = await response.blob();
-      if (MARKDOWN_EXTENSIONS.has(extension(name))) {
-        return new Blob([markdownDocument(await blob.text())], {
-          type: "text/html",
-        });
-      }
-      if (extension(name) === "html" || extension(name) === "htm") {
-        return new Blob([artifactHtmlDocument(await blob.text())], {
-          type: "text/html",
-        });
-      }
-      return blob;
+      return artifactPreviewBlob(await response.blob(), name);
     },
     enabled: authIdentity !== null,
     staleTime: Infinity,
@@ -83,11 +88,10 @@ export function ArtifactPreview({
     );
   }
   if (isError || !previewUrl) {
-    return (
-      <div className="flex h-full items-center justify-center text-muted-foreground">
-        This artifact can’t be previewed.
-      </div>
-    );
+    return <ArtifactPreviewError />;
+  }
+  if (data && isAllowedImageMimeType(data.type)) {
+    return <ArtifactImagePreview src={previewUrl} name={name} />;
   }
   return (
     <iframe
diff --git a/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts b/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
index b92e9ddb8b..77ee9a74f8 100644
--- a/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
+++ b/packages/ui/src/features/sessions/components/artifactPreviewDocument.ts
@@ -1,9 +1,16 @@
+import { getImageMimeType, isAllowedImageMimeType } from "@posthog/shared";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { applyCspToHtml } from "../../mcp-apps/utils/mcp-app-csp";
 
+const MARKDOWN_EXTENSIONS = new Set(["md", "mdx", "markdown"]);
+
+function extension(filename: string): string {
+  return filename.split(".").pop()?.toLowerCase() ?? "";
+}
+
 export function artifactHtmlDocument(html: string): string {
   return applyCspToHtml(html);
 }
@@ -16,3 +23,28 @@ export function markdownDocument(markdown: string): string {
     :root{font:15px/1.6 system-ui,sans-serif;color-scheme:light dark}body{box-sizing:border-box;margin:0 auto;max-width:900px;padding:32px;color:CanvasText;background:Canvas}h1,h2{border-bottom:1px solid color-mix(in srgb,CanvasText 18%,transparent);padding-bottom:.3em}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.25em}a{color:LinkText}blockquote{margin-left:0;padding-left:1em;border-left:4px solid color-mix(in srgb,CanvasText 25%,transparent);color:GrayText}pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}code{border-radius:4px;background:color-mix(in srgb,CanvasText 8%,transparent);padding:.15em .3em}pre{overflow:auto;border-radius:6px;background:color-mix(in srgb,CanvasText 8%,transparent);padding:16px}pre code{background:none;padding:0}table{border-spacing:0;border-collapse:collapse}th,td{border:1px solid color-mix(in srgb,CanvasText 20%,transparent);padding:6px 12px}img{max-width:100%}hr{border:0;border-top:1px solid color-mix(in srgb,CanvasText 20%,transparent)}
   </style></head><body>${content}</body></html>`);
 }
+
+export async function artifactPreviewBlob(
+  blob: Blob,
+  filename: string,
+): Promise<Blob> {
+  const filenameMimeType = getImageMimeType(filename);
+  const imageMimeType = isAllowedImageMimeType(blob.type)
+    ? blob.type.toLowerCase()
+    : filenameMimeType;
+
+  if (isAllowedImageMimeType(imageMimeType)) {
+    return new Blob([blob], { type: imageMimeType });
+  }
+  if (MARKDOWN_EXTENSIONS.has(extension(filename))) {
+    return new Blob([markdownDocument(await blob.text())], {
+      type: "text/html",
+    });
+  }
+  if (["html", "htm"].includes(extension(filename))) {
+    return new Blob([artifactHtmlDocument(await blob.text())], {
+      type: "text/html",
+    });
+  }
+  return blob;
+}
diff --git a/packages/ui/src/primitives/SafeImagePreview.tsx b/packages/ui/src/primitives/SafeImagePreview.tsx
index 67a58b3f71..9c73fbe9f7 100644
--- a/packages/ui/src/primitives/SafeImagePreview.tsx
+++ b/packages/ui/src/primitives/SafeImagePreview.tsx
@@ -1,3 +1,8 @@
+import {
+  ArrowsInSimple,
+  MagnifyingGlassMinus,
+  MagnifyingGlassPlus,
+} from "@phosphor-icons/react";
 import {
   buildImageDataUrl,
   isAllowedImageMimeType,
@@ -5,7 +10,11 @@ import {
 } from "@posthog/shared";
 import { Flex, Text } from "@radix-ui/themes";
 import { useState } from "react";
-import { useImagePanAndZoom } from "./hooks/useImagePanAndZoom";
+import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 8;
+const SCALE_STEP = 0.25;
 
 interface SafeImagePreviewProps {
   /** Base64-encoded image data (no data URL prefix). */
@@ -16,6 +25,105 @@ interface SafeImagePreviewProps {
   style?: React.CSSProperties;
   /** Rendered when the image fails to decode or has a disallowed mime type. */
   fallback?: React.ReactNode;
+  controls?: boolean;
+}
+
+interface ZoomableImageProps {
+  src: string;
+  alt: string;
+  className?: string;
+  style?: React.CSSProperties;
+  controls?: boolean;
+  onError?: () => void;
+}
+
+export function ZoomableImage({
+  src,
+  alt,
+  className,
+  style,
+  controls = false,
+  onError,
+}: ZoomableImageProps) {
+  const [scale, setScale] = useState(1);
+
+  return (
+    <div
+      className={`relative overflow-hidden ${className ?? "max-h-full max-w-full"}`}
+      style={style}
+    >
+      <TransformWrapper
+        minScale={MIN_SCALE}
+        maxScale={MAX_SCALE}
+        centerOnInit
+        centerZoomedOut
+        smooth={false}
+        wheel={{ wheelDisabled: true }}
+        trackPadPanning={{ disabled: false }}
+        doubleClick={{ mode: "reset" }}
+        zoomAnimation={{ disabled: true }}
+        onTransform={(_, state) => setScale(state.scale)}
+      >
+        {({ zoomIn, zoomOut, resetTransform }) => (
+          <>
+            <TransformComponent
+              wrapperStyle={{ width: "100%", height: "100%" }}
+              contentStyle={{
+                width: "100%",
+                height: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <img
+                src={src}
+                alt={alt}
+                draggable={false}
+                className="max-h-full max-w-full object-contain"
+                onError={onError}
+              />
+            </TransformComponent>
+            {controls && (
+              <div className="-translate-x-1/2 absolute bottom-3 left-1/2 flex items-center gap-1 rounded-md border border-(--gray-a5) bg-(--color-panel-solid) p-1 shadow-sm">
+                <button
+                  type="button"
+                  title="Zoom out"
+                  aria-label="Zoom out"
+                  disabled={scale <= MIN_SCALE}
+                  onClick={() => zoomOut(SCALE_STEP, 0)}
+                  className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3) disabled:opacity-40"
+                >
+                  <MagnifyingGlassMinus size={16} />
+                </button>
+                <span className="w-11 text-center text-(--gray-11) text-xs">
+                  {Math.round(scale * 100)}%
+                </span>
+                <button
+                  type="button"
+                  title="Zoom in"
+                  aria-label="Zoom in"
+                  disabled={scale >= MAX_SCALE}
+                  onClick={() => zoomIn(SCALE_STEP, 0)}
+                  className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3) disabled:opacity-40"
+                >
+                  <MagnifyingGlassPlus size={16} />
+                </button>
+                <button
+                  type="button"
+                  title="Fit to view"
+                  aria-label="Fit to view"
+                  onClick={() => resetTransform(0)}
+                  className="flex size-7 items-center justify-center rounded text-(--gray-11) hover:bg-(--gray-a3)"
+                >
+                  <ArrowsInSimple size={16} />
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
 }
 
 function DefaultFallback() {
@@ -37,10 +145,10 @@ export function SafeImagePreview({
   className,
   style,
   fallback,
+  controls,
 }: SafeImagePreviewProps) {
   const [hasError, setHasError] = useState(false);
   const [lastSource, setLastSource] = useState({ base64, mimeType });
-  const zoom = useImagePanAndZoom();
 
   if (lastSource.base64 !== base64 || lastSource.mimeType !== mimeType) {
     setLastSource({ base64, mimeType });
@@ -57,30 +165,13 @@ export function SafeImagePreview({
   }
 
   return (
-    <div
-      ref={zoom.containerRef}
-      className={`flex touch-none select-none items-center justify-center overflow-hidden ${className ?? "max-h-full max-w-full"}`}
-      style={{
-        ...style,
-        cursor: zoom.isDragging
-          ? "grabbing"
-          : zoom.isZoomed
-            ? "grab"
-            : style?.cursor,
-      }}
-    >
-      <img
-        src={buildImageDataUrl(mimeType, base64)}
-        alt={alt ?? "image preview"}
-        draggable={false}
-        className="max-h-full max-w-full object-contain"
-        style={{
-          transform: zoom.transform,
-          transformOrigin: "center center",
-          willChange: "transform",
-        }}
-        onError={() => setHasError(true)}
-      />
-    </div>
+    <ZoomableImage
+      src={buildImageDataUrl(mimeType, base64)}
+      alt={alt ?? "image preview"}
+      className={className}
+      style={style}
+      controls={controls}
+      onError={() => setHasError(true)}
+    />
   );
 }
diff --git a/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx b/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
deleted file mode 100644
index 0a50d3aff8..0000000000
--- a/packages/ui/src/primitives/hooks/useImagePanAndZoom.test.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import { useImagePanAndZoom } from "@posthog/ui/primitives/hooks/useImagePanAndZoom";
-import { act, fireEvent, render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-type HookResult = ReturnType<typeof useImagePanAndZoom>;
-
-interface HarnessProps {
-  onRender: (result: HookResult) => void;
-  options?: Parameters<typeof useImagePanAndZoom>[0];
-}
-
-function Harness({ onRender, options }: HarnessProps) {
-  const result = useImagePanAndZoom(options);
-  onRender(result);
-  return (
-    <div
-      data-testid="container"
-      ref={result.containerRef}
-      style={{ width: 200, height: 200 }}
-    />
-  );
-}
-
-function setupHarness(options?: Parameters<typeof useImagePanAndZoom>[0]) {
-  let latest: HookResult | null = null;
-  const view = render(
-    <Harness
-      onRender={(result) => {
-        latest = result;
-      }}
-      options={options}
-    />,
-  );
-  const container = view.getByTestId("container");
-  container.getBoundingClientRect = () =>
-    ({
-      x: 0,
-      y: 0,
-      left: 0,
-      top: 0,
-      right: 200,
-      bottom: 200,
-      width: 200,
-      height: 200,
-      toJSON: () => ({}),
-    }) as DOMRect;
-  container.setPointerCapture = () => {};
-  container.releasePointerCapture = () => {};
-  container.hasPointerCapture = () => true;
-  return {
-    container,
-    get current() {
-      if (!latest) throw new Error("hook did not render");
-      return latest;
-    },
-  };
-}
-
-function parseTransform(transform: string) {
-  const match = transform.match(
-    /translate\(([-0-9.]+)px, ([-0-9.]+)px\) scale\(([-0-9.]+)\)/,
-  );
-  if (!match) throw new Error(`unexpected transform: ${transform}`);
-  return {
-    tx: Number.parseFloat(match[1]),
-    ty: Number.parseFloat(match[2]),
-    scale: Number.parseFloat(match[3]),
-  };
-}
-
-describe("useImagePanAndZoom", () => {
-  it("starts at identity transform and not zoomed", () => {
-    const harness = setupHarness();
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-    expect(harness.current.isZoomed).toBe(false);
-  });
-
-  it.each([
-    { modifier: "ctrlKey", label: "trackpad pinch" },
-    { modifier: "metaKey", label: "Cmd + wheel" },
-  ] as const)("zooms in via $label", ({ modifier }) => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        [modifier]: true,
-        deltaY: -100,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    expect(harness.current.isZoomed).toBe(true);
-    expect(parseTransform(harness.current.transform).scale).toBeGreaterThan(1);
-  });
-
-  it("ignores wheel without modifier when not zoomed", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        deltaY: 200,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("pans on wheel without modifier when zoomed in", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -200,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    const beforePan = parseTransform(harness.current.transform);
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        deltaX: 30,
-        deltaY: 40,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    const afterPan = parseTransform(harness.current.transform);
-    expect(afterPan.tx).toBeCloseTo(beforePan.tx - 30);
-    expect(afterPan.ty).toBeCloseTo(beforePan.ty - 40);
-    expect(afterPan.scale).toBe(beforePan.scale);
-  });
-
-  it.each([
-    { direction: "in", deltaY: -2000, expected: 4 },
-    { direction: "out", deltaY: 2000, expected: 1 },
-  ])("clamps scale at the $direction limit", ({ deltaY, expected }) => {
-    const harness = setupHarness({ minScale: 1, maxScale: 4 });
-    for (let i = 0; i < 50; i++) {
-      act(() => {
-        fireEvent.wheel(harness.container, {
-          ctrlKey: true,
-          deltaY,
-          clientX: 100,
-          clientY: 100,
-        });
-      });
-    }
-    expect(parseTransform(harness.current.transform).scale).toBe(expected);
-  });
-
-  it("snaps to identity when zooming all the way back to scale 1", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 150,
-        clientY: 150,
-      });
-    });
-    expect(harness.current.isZoomed).toBe(true);
-    for (let i = 0; i < 50; i++) {
-      act(() => {
-        fireEvent.wheel(harness.container, {
-          ctrlKey: true,
-          deltaY: 200,
-          clientX: 0,
-          clientY: 0,
-        });
-      });
-    }
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("double-click resets to identity", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    expect(harness.current.isZoomed).toBe(true);
-    act(() => {
-      fireEvent.dblClick(harness.container);
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-    expect(harness.current.isZoomed).toBe(false);
-  });
-
-  it("reset() returns to identity", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 80,
-        clientY: 80,
-      });
-    });
-    act(() => {
-      harness.current.reset();
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("ignores pointer drag when not zoomed", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.pointerDown(harness.container, {
-        pointerId: 1,
-        button: 0,
-        clientX: 50,
-        clientY: 50,
-      });
-      fireEvent.pointerMove(harness.container, {
-        pointerId: 1,
-        clientX: 120,
-        clientY: 90,
-      });
-      fireEvent.pointerUp(harness.container, { pointerId: 1 });
-    });
-    expect(parseTransform(harness.current.transform)).toEqual({
-      tx: 0,
-      ty: 0,
-      scale: 1,
-    });
-  });
-
-  it("pans on pointer drag when zoomed", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -300,
-        clientX: 100,
-        clientY: 100,
-      });
-    });
-    const before = parseTransform(harness.current.transform);
-    act(() => {
-      fireEvent.pointerDown(harness.container, {
-        pointerId: 1,
-        button: 0,
-        clientX: 50,
-        clientY: 50,
-      });
-      fireEvent.pointerMove(harness.container, {
-        pointerId: 1,
-        clientX: 80,
-        clientY: 30,
-      });
-    });
-    const dragging = parseTransform(harness.current.transform);
-    expect(dragging.tx).toBeCloseTo(before.tx + 30);
-    expect(dragging.ty).toBeCloseTo(before.ty - 20);
-    expect(dragging.scale).toBe(before.scale);
-    expect(harness.current.isDragging).toBe(true);
-    act(() => {
-      fireEvent.pointerUp(harness.container, { pointerId: 1 });
-      fireEvent.pointerMove(harness.container, {
-        pointerId: 1,
-        clientX: 999,
-        clientY: 999,
-      });
-    });
-    expect(parseTransform(harness.current.transform)).toEqual(dragging);
-    expect(harness.current.isDragging).toBe(false);
-  });
-
-  it("zooms toward the cursor position", () => {
-    const harness = setupHarness();
-    act(() => {
-      fireEvent.wheel(harness.container, {
-        ctrlKey: true,
-        deltaY: -100,
-        clientX: 150,
-        clientY: 100,
-      });
-    });
-    const { tx, ty, scale } = parseTransform(harness.current.transform);
-    const cursorOffsetX = 150 - 100;
-    const cursorOffsetY = 100 - 100;
-    expect(tx).toBeCloseTo(cursorOffsetX - cursorOffsetX * scale);
-    expect(ty).toBeCloseTo(cursorOffsetY - cursorOffsetY * scale);
-  });
-});
diff --git a/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts b/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
deleted file mode 100644
index 942bae42a5..0000000000
--- a/packages/ui/src/primitives/hooks/useImagePanAndZoom.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import {
-  type RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-interface UseImagePanAndZoomOptions {
-  minScale?: number;
-  maxScale?: number;
-}
-
-interface UseImagePanAndZoomResult {
-  containerRef: RefObject<HTMLDivElement | null>;
-  transform: string;
-  isZoomed: boolean;
-  isDragging: boolean;
-  reset: () => void;
-}
-
-interface ZoomState {
-  scale: number;
-  tx: number;
-  ty: number;
-}
-
-const IDENTITY: ZoomState = { scale: 1, tx: 0, ty: 0 };
-
-function clamp(value: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, value));
-}
-
-export function useImagePanAndZoom(
-  options: UseImagePanAndZoomOptions = {},
-): UseImagePanAndZoomResult {
-  const minScale = options.minScale ?? 1;
-  const maxScale = options.maxScale ?? 8;
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [state, setState] = useState<ZoomState>(IDENTITY);
-  const [isDragging, setIsDragging] = useState(false);
-  const stateRef = useRef(state);
-  stateRef.current = state;
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    let drag: {
-      pointerId: number;
-      startX: number;
-      startY: number;
-      startTx: number;
-      startTy: number;
-    } | null = null;
-
-    const handleWheel = (event: WheelEvent) => {
-      if (event.ctrlKey || event.metaKey) {
-        event.preventDefault();
-        const rect = el.getBoundingClientRect();
-        const cursorX = event.clientX - (rect.left + rect.width / 2);
-        const cursorY = event.clientY - (rect.top + rect.height / 2);
-        setState((prev) => {
-          const nextScale = clamp(
-            prev.scale * Math.exp(-event.deltaY * 0.01),
-            minScale,
-            maxScale,
-          );
-          if (nextScale === prev.scale) return prev;
-          if (nextScale === 1) return IDENTITY;
-          const ratio = nextScale / prev.scale;
-          return {
-            scale: nextScale,
-            tx: cursorX - (cursorX - prev.tx) * ratio,
-            ty: cursorY - (cursorY - prev.ty) * ratio,
-          };
-        });
-        return;
-      }
-      if (stateRef.current.scale <= 1) return;
-      event.preventDefault();
-      setState((prev) => ({
-        scale: prev.scale,
-        tx: prev.tx - event.deltaX,
-        ty: prev.ty - event.deltaY,
-      }));
-    };
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (event.button !== 0) return;
-      if (stateRef.current.scale <= 1) return;
-      el.setPointerCapture(event.pointerId);
-      drag = {
-        pointerId: event.pointerId,
-        startX: event.clientX,
-        startY: event.clientY,
-        startTx: stateRef.current.tx,
-        startTy: stateRef.current.ty,
-      };
-      setIsDragging(true);
-    };
-
-    const handlePointerMove = (event: PointerEvent) => {
-      if (!drag || drag.pointerId !== event.pointerId) return;
-      const dx = event.clientX - drag.startX;
-      const dy = event.clientY - drag.startY;
-      const startTx = drag.startTx;
-      const startTy = drag.startTy;
-      setState((prev) => ({
-        scale: prev.scale,
-        tx: startTx + dx,
-        ty: startTy + dy,
-      }));
-    };
-
-    const handlePointerUp = (event: PointerEvent) => {
-      if (!drag || drag.pointerId !== event.pointerId) return;
-      if (el.hasPointerCapture(event.pointerId)) {
-        el.releasePointerCapture(event.pointerId);
-      }
-      drag = null;
-      setIsDragging(false);
-    };
-
-    const handleDoubleClick = () => setState(IDENTITY);
-
-    el.addEventListener("wheel", handleWheel, { passive: false });
-    el.addEventListener("pointerdown", handlePointerDown);
-    el.addEventListener("pointermove", handlePointerMove);
-    el.addEventListener("pointerup", handlePointerUp);
-    el.addEventListener("pointercancel", handlePointerUp);
-    el.addEventListener("dblclick", handleDoubleClick);
-
-    return () => {
-      el.removeEventListener("wheel", handleWheel);
-      el.removeEventListener("pointerdown", handlePointerDown);
-      el.removeEventListener("pointermove", handlePointerMove);
-      el.removeEventListener("pointerup", handlePointerUp);
-      el.removeEventListener("pointercancel", handlePointerUp);
-      el.removeEventListener("dblclick", handleDoubleClick);
-    };
-  }, [minScale, maxScale]);
-
-  const reset = useCallback(() => setState(IDENTITY), []);
-
-  return {
-    containerRef,
-    transform: `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`,
-    isZoomed: state.scale > 1,
-    isDragging,
-    reset,
-  };
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6680b87dd7..65ef2c8cbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1427,6 +1427,9 @@ importers:
       react-resizable-panels:
         specifier: ^3.0.6
         version: 3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-zoom-pan-pinch:
+        specifier: ^4.0.3
+        version: 4.0.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       reflect-metadata:
         specifier: 'catalog:'
         version: 0.2.2
@@ -13767,6 +13770,13 @@ packages:
       react: 19.2.6
       react-dom: 19.2.6
 
+  react-zoom-pan-pinch@4.0.3:
+    resolution: {integrity: sha512-N2Hi6L78fFmhRra+ORpFSW7WST5x6kxpOPplIvtB0b7b+U2anpo1z1wLgaWRPS2kUSqcraRG+JgBCIlDJnqqAg==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: 19.2.6
+      react-dom: 19.2.6
+
   react-resizable-panels@4.10.0:
     resolution: {integrity: sha512-frjewRQt7TCv/vCH1pJfjZ7RxAhr5pKuqVQtVgzFq/vherxBFOWyC3xMbryx5Ti2wylViGUFc93Etg4rB3E0UA==}
     peerDependencies:
@@ -29620,6 +29630,11 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
 
+  react-zoom-pan-pinch@4.0.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
   react-resizable-panels@4.10.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       react: 19.2.6