diff --git a/apps/renderer/package.json b/apps/renderer/package.json
index ba27eeb76e..189734a5bc 100644
--- a/apps/renderer/package.json
+++ b/apps/renderer/package.json
@@ -85,7 +85,6 @@
     "react-selecto": "^1.26.3",
     "react-shadow": "20.5.0",
     "react-virtuoso": "4.12.0",
-    "react-zoom-pan-pinch": "^3.6.1",
     "rehype-infer-description-meta": "2.0.0",
     "rehype-parse": "9.0.1",
     "rehype-sanitize": "6.0.0",
diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
index 0d2554e65e..c81de0dfbe 100644
--- a/apps/renderer/src/components/ui/media/preview-media.tsx
+++ b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -8,7 +8,6 @@ import type { FC } from "react"
 import { Fragment, useCallback, useEffect, useRef, useState } from "react"
 import { Blurhash } from "react-blurhash"
 import { useTranslation } from "react-i18next"
-import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"
 import { Keyboard, Mousewheel } from "swiper/modules"
 import type { SwiperRef } from "swiper/react"
 import { Swiper, SwiperSlide } from "swiper/react"
@@ -323,63 +322,48 @@ const FallbackableImage: FC<
 
   const { height: windowHeight, width: windowWidth } = useWindowSize()
 
-  const wrapperClass = cn("relative !max-h-full", width <= height && "!h-full")
-  const wrapperStyle = {
-    // px-20 pb-8 pt-10
-    width:
-      width && height && width > height
-        ? `${Math.min((windowHeight - 32 - 40) * (width / height), width)}px`
-        : undefined,
-    maxWidth: width > height ? `${windowWidth - 80 - 80 - 400}px` : undefined,
-  }
-
   return (
-    <div
-      className={cn("center flex size-full flex-col", containerClassName)}
-      onClick={stopPropagation}
-    >
+    <div className={cn("center flex size-full flex-col", containerClassName)}>
       {!isAllError && (
-        <TransformWrapper wheel={{ step: 1 }}>
-          <TransformComponent
-            wrapperClass={wrapperClass}
-            wrapperStyle={wrapperStyle}
-            contentClass={wrapperClass}
-            contentStyle={wrapperStyle}
+        <div
+          className={cn("relative max-h-full", width <= height && "h-full")}
+          style={{
+            // px-20 pb-8 pt-10
+            width:
+              width && height && width > height
+                ? `${Math.min((windowHeight - 32 - 40) * (width / height), width)}px`
+                : undefined,
+            maxWidth: width > height ? `${windowWidth - 80 - 80 - 400}px` : undefined,
+          }}
+        >
+          <img
+            data-blurhash={blurhash}
+            src={currentSrc}
+            onLoad={() => setIsLoading(false)}
+            onError={handleError}
+            height={props.height}
+            width={props.width}
+            {...props}
+            className={cn(
+              "transition-opacity duration-700",
+              isLoading ? "opacity-0" : "opacity-100",
+              props.className,
+            )}
+            style={props.style}
+          />
+          <div
+            className={cn(
+              "center absolute inset-0 size-full transition-opacity duration-700",
+              isLoading ? "opacity-100" : "opacity-0",
+            )}
           >
-            <img
-              data-blurhash={blurhash}
-              src={currentSrc}
-              onLoad={() => setIsLoading(false)}
-              onError={handleError}
-              height={props.height}
-              width={props.width}
-              {...props}
-              className={cn(
-                "transition-opacity duration-700",
-                isLoading ? "opacity-0" : "opacity-100",
-                props.className,
-              )}
-              style={props.style}
-            />
-            <div
-              className={cn(
-                "center absolute inset-0 size-full transition-opacity duration-700",
-                isLoading ? "opacity-100" : "opacity-0",
-              )}
-            >
-              {blurhash ? (
-                <Blurhash
-                  hash={blurhash}
-                  resolutionX={32}
-                  resolutionY={32}
-                  className="!size-full"
-                />
-              ) : (
-                <i className="i-mgc-loading-3-cute-re size-8 animate-spin text-white/80" />
-              )}
-            </div>
-          </TransformComponent>
-        </TransformWrapper>
+            {blurhash ? (
+              <Blurhash hash={blurhash} resolutionX={32} resolutionY={32} className="!size-full" />
+            ) : (
+              <i className="i-mgc-loading-3-cute-re size-8 animate-spin text-white/80" />
+            )}
+          </div>
+        </div>
       )}
       {isAllError && (
         <div
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d45e87dac9..169a179bd2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -558,9 +558,6 @@ importers:
       react-virtuoso:
         specifier: 4.12.0
         version: 4.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-zoom-pan-pinch:
-        specifier: ^3.6.1
-        version: 3.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-infer-description-meta:
         specifier: 2.0.0
         version: 2.0.0
@@ -3430,8 +3427,8 @@ packages:
   '@radix-ui/react-avatar@1.1.1':
     resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -3601,8 +3598,8 @@ packages:
   '@radix-ui/react-label@2.1.0':
     resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -9259,13 +9256,6 @@ packages:
       react: '>=16 || >=17 || >= 18'
       react-dom: '>=16 || >=17 || >= 18'
 
-  react-zoom-pan-pinch@3.6.1:
-    resolution: {integrity: sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==}
-    engines: {node: '>=8', npm: '>=5'}
-    peerDependencies:
-      react: '*'
-      react-dom: '*'
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -20667,11 +20657,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-zoom-pan-pinch@3.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0