diff --git a/package-lock.json b/package-lock.json
index 306ade85a..4c0386397 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "electron-squirrel-startup": "^1.0.1",
         "howler": "^2.2.4",
         "mri": "^1.2.0",
+        "panzoom": "^9.4.4",
         "pinia": "^4.0.2",
         "semver": "^7.8.5",
         "unzip-crx-3": "^0.2.0",
@@ -5144,6 +5145,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "license": "MIT",
+      "dependencies": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -5449,6 +5459,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT"
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "dev": true,
@@ -12012,6 +12028,12 @@
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA==",
       "license": "MIT"
     },
+    "node_modules/ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -12646,6 +12668,17 @@
       "version": "1.0.11",
       "license": "(MIT AND Zlib)"
     },
+    "node_modules/panzoom": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz",
+      "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==",
+      "license": "MIT",
+      "dependencies": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -16543,6 +16576,12 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "dev": true,
@@ -20051,6 +20090,14 @@
       "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==",
       "dev": true
     },
+    "amator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+      "integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+      "requires": {
+        "bezier-easing": "^2.0.3"
+      }
+    },
     "ansi-escapes": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-5.0.0.tgz",
@@ -20250,6 +20297,11 @@
       "version": "0.6.1",
       "dev": true
     },
+    "bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+    },
     "big.js": {
       "version": "5.2.2",
       "dev": true
@@ -24596,6 +24648,11 @@
       "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-4.0.0.tgz",
       "integrity": "sha512-yFehXNWRs4cM0+dz7QxCd06hTbWbSkV0ISsqBfkntU6TOY4Qm3Q88fRRLOddkGh2Qq6dZvnKVAahfhjcUvLnyA=="
     },
+    "ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -25008,6 +25065,16 @@
     "pako": {
       "version": "1.0.11"
     },
+    "panzoom": {
+      "version": "9.4.4",
+      "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.4.tgz",
+      "integrity": "sha512-r1KfkNZvsBw59IPq7Yy+GWZnZE1YCG/t7aG6caSkij/TBqdxTzmxNTm/lHf3h6qlVMFisIGIO+lgS2Ym23PIoA==",
+      "requires": {
+        "amator": "^1.1.0",
+        "ngraph.events": "^1.2.2",
+        "wheel": "^1.0.0"
+      }
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -27603,6 +27670,11 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "wheel": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+      "integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
+    },
     "which": {
       "version": "2.0.2",
       "dev": true,
diff --git a/package.json b/package.json
index 813255d69..334715110 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "electron-squirrel-startup": "^1.0.1",
     "howler": "^2.2.4",
     "mri": "^1.2.0",
+    "panzoom": "^9.4.4",
     "pinia": "^4.0.2",
     "semver": "^7.8.5",
     "unzip-crx-3": "^0.2.0",
diff --git a/src/talk/renderer/Viewer/ViewerApp.vue b/src/talk/renderer/Viewer/ViewerApp.vue
index 675f70661..df3619f64 100644
--- a/src/talk/renderer/Viewer/ViewerApp.vue
+++ b/src/talk/renderer/Viewer/ViewerApp.vue
@@ -7,6 +7,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { computed, ref } from 'vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcModal from '@nextcloud/vue/components/NcModal'
 import IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'
@@ -19,6 +20,7 @@ function noop() {}
 const isOpen = ref(false)
 const onClose = ref(noop)
 const file = ref(null)
+const viewerRef = ref(null)
 
 const viewComponent = computed(() => file.value && window.OCA.Viewer.availableHandlers.find((handler) => handler.mimes.includes(file.value.mime))?.component)
 
@@ -67,9 +69,19 @@ defineExpose({
 		<component
 			:is="viewComponent"
 			v-if="viewComponent"
+			ref="viewerRef"
 			:file="file" />
 
 		<template #actions>
+			<NcActionButton
+				v-for="action in (viewerRef?.actions ?? [])"
+				:key="action.key"
+				@click="action.onClick()">
+				<template #icon>
+					<component :is="action.icon" :size="20" />
+				</template>
+				{{ action.label }}
+			</NcActionButton>
 			<NcActionLink :href="link">
 				<template #icon>
 					<IconOpenInNew :size="20" />
diff --git a/src/talk/renderer/Viewer/ViewerHandlerImages.vue b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
index 2f3762d58..cbd99e501 100644
--- a/src/talk/renderer/Viewer/ViewerHandlerImages.vue
+++ b/src/talk/renderer/Viewer/ViewerHandlerImages.vue
@@ -4,7 +4,11 @@
 -->
 
 <script setup>
-import { computed } from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+import panzoom from 'panzoom'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+import IconRotateLeft from 'vue-material-design-icons/RotateLeft.vue'
+import IconRotateRight from 'vue-material-design-icons/RotateRight.vue'
 import ViewerHandlerMedia from './ViewerHandlerMedia.vue'
 import { generateFilePreviewUrl } from './viewer.utils.ts'
 
@@ -14,19 +18,306 @@ const props = defineProps({
 		required: true,
 	},
 })
+const ZOOM_MIN = 1
+const ZOOM_MAX = 8
+const ZOOM_FACTOR = 3
+const ROTATION_STEP = 90
+// Smooth zoom animations in panzoom undershoot their target by up to ~0.1%
+// of the zoom range (amator never calls step() for the final t=1 frame), so
+// after zooming out the scale is ~1.002..1.007, never exactly 1. All
+// fit-state checks go through this epsilon, and the 'zoomend' handler snaps
+// the settled scale back to exactly ZOOM_MIN.
+const SCALE_EPSILON = 0.01
 
 const src = computed(() => generateFilePreviewUrl(props.file.fileid, props.file.etag))
+
+const panzoomWrapperRef = useTemplateRef('panzoomWrapper')
+const imageRef = useTemplateRef('image')
+let instance = null
+const scale = ref(1)
+const grabbing = ref(false)
+const rotation = ref(0)
+// Extra downscale so an image rotated by an odd number of quarter turns
+// still fits the container
+const rotationFitScale = ref(1)
+// Fit box of the *image* (not the wrapper) in unscaled container coordinates.
+// Built from layout values only — CSS transforms never affect offsetWidth or
+// clientWidth, so bounds math never reads mid-animation (stale) geometry.
+let fitBox = null
+
+const imageStyle = computed(() => ({
+	transform: `rotate(${rotation.value}deg) scale(${rotationFitScale.value})`,
+}))
+
+const isFitZoom = () => scale.value <= ZOOM_MIN + SCALE_EPSILON
+
+const cursorClass = computed(() => {
+	if (isFitZoom()) {
+		return 'viewer-image--zoom-in'
+	}
+	return grabbing.value ? 'viewer-image--grabbing' : 'viewer-image--grab'
+})
+
+/**
+ *
+ */
+function measureFitBox() {
+	const image = imageRef.value
+	const width = image?.offsetWidth
+	const height = image?.offsetHeight
+	const containerWidth = panzoomWrapperRef.value.clientWidth
+	const containerHeight = panzoomWrapperRef.value.clientHeight
+	if (!width || !height || !containerWidth || !containerHeight) {
+		fitBox = null
+		return
+	}
+	const rotated = (rotation.value / ROTATION_STEP) % 2 !== 0
+	rotationFitScale.value = rotated
+		? Math.min(1, containerWidth / height, containerHeight / width)
+		: 1
+	const visualWidth = (rotated ? height : width) * rotationFitScale.value
+	const visualHeight = (rotated ? width : height) * rotationFitScale.value
+	// The image is flex-centered in the wrapper, so its center is always the
+	// container center in layout coordinates
+	fitBox = {
+		cx: containerWidth / 2,
+		cy: containerHeight / 2,
+		halfW: visualWidth / 2,
+		halfH: visualHeight / 2,
+	}
+}
+
+/**
+ * Clamp/center the transform in place. Mutating panzoom's transform model
+ * synchronously inside its event handlers applies before the pending repaint
+ * and, unlike calling moveTo() from a handler, cannot re-trigger events.
+ * Per axis: if the scaled image fits the container — keep it centered,
+ * otherwise never let an image edge move inside the container edge.
+ *
+ * @param {object} transform - Panzoom transform model to adjust
+ */
+function applyBounds(transform) {
+	if (!fitBox) {
+		return
+	}
+	const containerWidth = panzoomWrapperRef.value.clientWidth
+	const containerHeight = panzoomWrapperRef.value.clientHeight
+
+	const halfW = fitBox.halfW * transform.scale
+	const centerX = fitBox.cx * transform.scale + transform.x
+	if (halfW * 2 <= containerWidth + 1) {
+		transform.x = containerWidth / 2 - fitBox.cx * transform.scale
+	} else if (centerX - halfW > 0) {
+		transform.x -= centerX - halfW
+	} else if (centerX + halfW < containerWidth) {
+		transform.x += containerWidth - (centerX + halfW)
+	}
+
+	const halfH = fitBox.halfH * transform.scale
+	const centerY = fitBox.cy * transform.scale + transform.y
+	if (halfH * 2 <= containerHeight + 1) {
+		transform.y = containerHeight / 2 - fitBox.cy * transform.scale
+	} else if (centerY - halfH > 0) {
+		transform.y -= centerY - halfH
+	} else if (centerY + halfH < containerHeight) {
+		transform.y += containerHeight - (centerY + halfH)
+	}
+}
+
+/**
+ *
+ */
+function reclamp() {
+	if (!instance) {
+		return
+	}
+	const transform = instance.getTransform()
+	// moveTo triggers the 'pan' event (a single applyBounds pass) and
+	// schedules a repaint of the corrected values
+	instance.moveTo(transform.x, transform.y)
+}
+
+/**
+ *
+ */
+function initPanzoom() {
+	instance = panzoom(panzoomWrapperRef.value, {
+		minZoom: ZOOM_MIN,
+		maxZoom: ZOOM_MAX,
+		// Disable inertia so the image stops exactly where bounds put it
+		smoothScroll: false,
+		// At fit zoom there is nothing to pan — let panzoom ignore the mousedown
+		beforeMouseDown: () => isFitZoom(),
+	})
+	instance.on('zoom', (pz) => {
+		const transform = pz.getTransform()
+		applyBounds(transform)
+		scale.value = transform.scale
+	})
+	instance.on('zoomend', (pz) => {
+		const transform = pz.getTransform()
+		if (transform.scale <= ZOOM_MIN + SCALE_EPSILON) {
+			// The zoom-out animation settled near fit — snap to exactly ZOOM_MIN
+			transform.scale = ZOOM_MIN
+			scale.value = ZOOM_MIN
+			reclamp()
+		}
+	})
+	instance.on('pan', (pz) => {
+		applyBounds(pz.getTransform())
+	})
+	instance.on('panstart', () => {
+		if (isFitZoom()) {
+			return
+		}
+		grabbing.value = true
+	})
+	instance.on('panend', () => {
+		grabbing.value = false
+	})
+}
+
+/**
+ *
+ */
+function disposePanzoom() {
+	instance?.dispose()
+	instance = null
+	if (panzoomWrapperRef.value) {
+		panzoomWrapperRef.value.style.transform = ''
+	}
+	scale.value = 1
+	grabbing.value = false
+	fitBox = null
+}
+
+/**
+ * @param {Function} handleLoadEnd - Callback to signal load completion
+ */
+function onImageLoad(handleLoadEnd) {
+	handleLoadEnd(false)
+	measureFitBox()
+	initPanzoom()
+}
+
+/**
+ * @param {Function} handleLoadEnd - Callback to signal load error
+ */
+function onImageError(handleLoadEnd) {
+	handleLoadEnd(true)
+	disposePanzoom()
+}
+
+/**
+ * @param {MouseEvent} event - The double-click event
+ */
+function onDoubleClick(event) {
+	if (!instance) {
+		return
+	}
+	const rect = event.currentTarget.getBoundingClientRect()
+	const x = event.clientX - rect.left
+	const y = event.clientY - rect.top
+	if (isFitZoom()) {
+		instance.smoothZoom(x, y, ZOOM_FACTOR)
+	} else {
+		// applyBounds re-centers the image on every animation frame while it
+		// zooms out, and the 'zoomend' handler snaps the final scale to fit
+		instance.smoothZoomAbs(x, y, ZOOM_MIN)
+	}
+}
+
+/**
+ * @param {number} step - Rotation step in degrees (±ROTATION_STEP)
+ */
+function onRotate(step) {
+	rotation.value += step
+	measureFitBox()
+	reclamp()
+}
+
+const actions = computed(() => [
+	{ key: 'rotate-left', label: t('talk_desktop', 'Rotate left'), icon: IconRotateLeft, onClick: () => onRotate(-ROTATION_STEP) },
+	{ key: 'rotate-right', label: t('talk_desktop', 'Rotate right'), icon: IconRotateRight, onClick: () => onRotate(ROTATION_STEP) },
+])
+
+defineExpose({ actions })
+
+watch(src, () => {
+	disposePanzoom()
+	rotation.value = 0
+	rotationFitScale.value = 1
+})
+
+let resizeObserver = null
+
+onMounted(() => {
+	resizeObserver = new ResizeObserver(() => {
+		measureFitBox()
+		reclamp()
+	})
+	resizeObserver.observe(panzoomWrapperRef.value)
+})
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect()
+	disposePanzoom()
+})
 </script>
 
 <template>
-	<ViewerHandlerMedia v-slot="{ mediaClass, handleLoadEnd }">
-		<img
-			:key="src"
-			class="viewer-image"
-			:class="mediaClass"
-			:src="src"
-			:alt="file.basename"
-			@load="handleLoadEnd(false)"
-			@error="handleLoadEnd(true)">
+	<ViewerHandlerMedia v-slot="{ handleLoadEnd }">
+		<!-- Capture phase intercepts dblclick before panzoom's own handler (its
+			built-in dblclick zoom cannot be disabled via options); stop prevents
+			the parent viewer from reacting -->
+		<div class="viewer-image-container" @dblclick.capture.stop.prevent="onDoubleClick">
+			<div ref="panzoomWrapper" class="viewer-image-wrapper">
+				<img
+					:key="src"
+					ref="image"
+					class="viewer-image"
+					:class="cursorClass"
+					:style="imageStyle"
+					:src="src"
+					:alt="file.basename"
+					draggable="false"
+					@load="onImageLoad(handleLoadEnd)"
+					@error="onImageError(handleLoadEnd)">
+			</div>
+		</div>
 	</ViewerHandlerMedia>
 </template>
+
+<style scoped>
+.viewer-image-container {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.viewer-image-wrapper {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.viewer-image {
+	max-width: 100%;
+	max-height: 100%;
+	transition: transform 0.3s ease;
+}
+
+.viewer-image--zoom-in {
+	cursor: zoom-in;
+}
+
+.viewer-image--grab {
+	cursor: grab;
+}
+
+.viewer-image--grabbing {
+	cursor: grabbing;
+}
+</style>