diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 29ec88501..e92ceba1d 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -28,6 +28,12 @@
 	import Tooltip from '../common/Tooltip.svelte';
 	import PDFViewer from '../common/PDFViewer.svelte';
 	import ConfirmDialog from '../common/ConfirmDialog.svelte';
+	import Reset from '../icons/Reset.svelte';
+
+	import panzoom, { type PanZoom } from 'panzoom';
+
+	let pzInstance: PanZoom | null = null;
+	let imageSceneElement: HTMLElement | null = null;
 
 	const i18n = getContext('i18n');
 
@@ -86,6 +92,10 @@
 
 	const clearFilePreview = () => {
 		fileContent = null;
+		if (pzInstance) {
+			pzInstance.dispose();
+			pzInstance = null;
+		}
 		if (fileImageUrl) {
 			URL.revokeObjectURL(fileImageUrl);
 			fileImageUrl = null;
@@ -93,6 +103,22 @@
 		filePdfData = null;
 	};
 
+	const initImagePanzoom = (node: HTMLElement) => {
+		imageSceneElement = node;
+		pzInstance = panzoom(node, {
+			bounds: true,
+			boundsPadding: 0.1,
+			zoomSpeed: 0.065
+		});
+	};
+
+	const resetImageView = () => {
+		if (pzInstance) {
+			pzInstance.moveTo(0, 0);
+			pzInstance.zoomAbs(0, 0, 1);
+		}
+	};
+
 	const loadDir = async (path: string) => {
 		if (!configured) return;
 		loading = true;
@@ -253,6 +279,7 @@
 	});
 
 	onDestroy(() => {
+		pzInstance?.dispose();
 		if (fileImageUrl) URL.revokeObjectURL(fileImageUrl);
 	});
 </script>
@@ -334,7 +361,7 @@
 					<span class="text-gray-300 dark:text-gray-600 text-xs shrink-0 select-none mx-0.5">/</span
 					>
 					<span
-						class="text-xs shrink-0 px-1.5 py-0.5 text-gray-700 dark:text-gray-300 truncate max-w-[120px]"
+						class="text-xs shrink-0 px-1.5 py-0.5 text-gray-700 dark:text-gray-300"
 					>
 						{selectedFile.split('/').pop()}
 					</span>
@@ -413,38 +440,54 @@
 		</div>
 
 		<!-- Content -->
-		<div class="flex-1 overflow-y-auto min-h-0 relative">
+		<div class="flex-1 {fileImageUrl !== null ? 'overflow-hidden' : 'overflow-y-auto'} min-h-0 relative">
 			{#if selectedFile !== null}
-				<!-- Floating download button -->
-				<button
-					class="absolute top-2 right-2 z-10 p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
-					on:click={() => downloadFile(selectedFile)}
-					aria-label={$i18n.t('Download')}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="1.5"
-						class="size-4"
+				<!-- Floating action buttons -->
+				<div class="absolute top-2 right-2 z-10 flex gap-1">
+					{#if fileImageUrl !== null}
+						<Tooltip content={$i18n.t('Reset view')}>
+							<button
+								class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
+								on:click={resetImageView}
+								aria-label={$i18n.t('Reset view')}
+							>
+								<Reset className="size-4" />
+							</button>
+						</Tooltip>
+					{/if}
+					<button
+						class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
+						on:click={() => downloadFile(selectedFile)}
+						aria-label={$i18n.t('Download')}
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
-						/>
-					</svg>
-				</button>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="size-4"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+							/>
+						</svg>
+					</button>
+				</div>
 				<!-- File preview -->
 				{#if fileLoading}
 					<div class="flex justify-center pt-8"><Spinner className="size-4" /></div>
 				{:else if fileImageUrl !== null}
-					<img
-						src={fileImageUrl}
-						alt={selectedFile?.split('/').pop()}
-						class="w-full h-auto object-contain p-3"
-					/>
+					<div class="w-full h-full" use:initImagePanzoom>
+						<img
+							src={fileImageUrl}
+							alt={selectedFile?.split('/').pop()}
+							class="w-full h-auto object-contain p-3"
+							draggable="false"
+						/>
+					</div>
 				{:else if filePdfData !== null}
 					<PDFViewer data={filePdfData} className="w-full h-full min-h-[400px]" />
 				{:else if fileContent !== null}
diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index d9eca93db..8b4b782fc 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -25,6 +25,9 @@
 	import dayjs from 'dayjs';
 	import Spinner from './Spinner.svelte';
 	import PDFViewer from './PDFViewer.svelte';
+	import Reset from '../icons/Reset.svelte';
+
+	import panzoom, { type PanZoom } from 'panzoom';
 
 	export let item;
 	export let show = false;
@@ -46,6 +49,23 @@
 	let excelError = '';
 	let rowCount = 0;
 
+	let pzInstance: PanZoom | null = null;
+
+	const initImagePanzoom = (node: HTMLElement) => {
+		pzInstance = panzoom(node, {
+			bounds: true,
+			boundsPadding: 0.1,
+			zoomSpeed: 0.065
+		});
+	};
+
+	const resetImageView = () => {
+		if (pzInstance) {
+			pzInstance.moveTo(0, 0);
+			pzInstance.zoomAbs(0, 0, 1);
+		}
+	};
+
 	$: isPDF =
 		item?.meta?.content_type === 'application/pdf' ||
 		(item?.name && item?.name.toLowerCase().endsWith('.pdf'));
@@ -197,6 +217,10 @@
 		if (item?.context === 'full') {
 			enableFullContent = true;
 		}
+
+		return () => {
+			pzInstance?.dispose();
+		};
 	});
 </script>
 
@@ -361,14 +385,27 @@
 				{/if}
 
 				{#if isImage}
-					<div class="w-full max-h-[70vh] overflow-auto">
+				<div class="relative w-full max-h-[70vh] overflow-hidden">
+					<div class="absolute top-2 right-2 z-10">
+						<Tooltip content={$i18n.t('Reset view')}>
+							<button
+								class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
+								on:click={resetImageView}
+							>
+								<Reset className="size-4" />
+							</button>
+						</Tooltip>
+					</div>
+					<div use:initImagePanzoom>
 						<img
 							src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
 							alt={item?.name ?? 'Image'}
 							class="w-full object-contain rounded-lg"
 							loading="lazy"
+							draggable="false"
 						/>
 					</div>
+				</div>
 				{:else if selectedTab === ''}
 					{#if item?.file?.data}
 						{@const rawContent = (item?.file?.data?.content ?? '').trim() || 'No content'}
diff --git a/src/lib/components/common/PDFViewer.svelte b/src/lib/components/common/PDFViewer.svelte
index 09d07f5a6..e7a25f308 100644
--- a/src/lib/components/common/PDFViewer.svelte
+++ b/src/lib/components/common/PDFViewer.svelte
@@ -1,29 +1,56 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, getContext } from 'svelte';
 	import pdfWorkerUrl from 'pdfjs-dist/build/pdf.worker.mjs?url';
+	import panzoom, { type PanZoom } from 'panzoom';
 	import Spinner from './Spinner.svelte';
+	import Tooltip from './Tooltip.svelte';
+	import Reset from '../icons/Reset.svelte';
+
+	const i18n = getContext('i18n');
 
 	export let url: string | null = null;
 	export let data: ArrayBuffer | Uint8Array | null = null;
 	export let className = 'w-full h-[70vh]';
 
-	let container: HTMLDivElement;
+	let outerContainer: HTMLDivElement;
+	let sceneElement: HTMLDivElement;
 	let loading = true;
 	let error = '';
 	let pdfDoc: any = null;
+	let pzInstance: PanZoom | null = null;
+
+	const initPanzoom = () => {
+		if (pzInstance) {
+			pzInstance.dispose();
+		}
+		if (sceneElement) {
+			pzInstance = panzoom(sceneElement, {
+				bounds: true,
+				boundsPadding: 0.1,
+				zoomSpeed: 0.065
+			});
+		}
+	};
+
+	const resetView = () => {
+		if (pzInstance) {
+			pzInstance.moveTo(0, 0);
+			pzInstance.zoomAbs(0, 0, 1);
+		}
+	};
 
 	const renderAllPages = async () => {
-		if (!pdfDoc || !container) return;
+		if (!pdfDoc || !sceneElement) return;
 
 		// Clear previous canvases
-		container.innerHTML = '';
+		sceneElement.innerHTML = '';
 
 		for (let i = 1; i <= pdfDoc.numPages; i++) {
 			const page = await pdfDoc.getPage(i);
 			const viewport = page.getViewport({ scale: 1 });
 
 			// Scale to fit container width
-			const containerWidth = container.clientWidth || 800;
+			const containerWidth = outerContainer?.clientWidth || 800;
 			const scale = containerWidth / viewport.width;
 			const scaledViewport = page.getViewport({ scale });
 
@@ -38,7 +65,7 @@
 				canvas.style.marginTop = '4px';
 			}
 
-			container.appendChild(canvas);
+			sceneElement.appendChild(canvas);
 
 			const ctx = canvas.getContext('2d');
 			await page.render({
@@ -46,6 +73,8 @@
 				viewport: scaledViewport
 			}).promise;
 		}
+
+		initPanzoom();
 	};
 
 	const loadPdf = async () => {
@@ -77,24 +106,12 @@
 		}
 	};
 
-	// Re-render on resize
-	let resizeObserver: ResizeObserver | null = null;
-
 	onMount(() => {
 		loadPdf();
-
-		resizeObserver = new ResizeObserver(() => {
-			if (pdfDoc && !loading) {
-				renderAllPages();
-			}
-		});
-		if (container) {
-			resizeObserver.observe(container);
-		}
 	});
 
 	onDestroy(() => {
-		resizeObserver?.disconnect();
+		pzInstance?.dispose();
 		if (pdfDoc) {
 			pdfDoc.destroy();
 			pdfDoc = null;
@@ -102,16 +119,31 @@
 	});
 </script>
 
-<div class="overflow-auto {className}" bind:this={container}>
-	{#if loading}
-		<div class="flex items-center justify-center h-full">
-			<Spinner className="size-5" />
-		</div>
-	{/if}
+<div class="relative overflow-hidden {className}" bind:this={outerContainer}>
+	<div bind:this={sceneElement} class="w-full">
+		{#if loading}
+			<div class="flex items-center justify-center h-full">
+				<Spinner className="size-5" />
+			</div>
+		{/if}
 
-	{#if error}
-		<div class="flex items-center justify-center h-full text-sm text-red-500">
-			{error}
+		{#if error}
+			<div class="flex items-center justify-center h-full text-sm text-red-500">
+				{error}
+			</div>
+		{/if}
+	</div>
+
+	{#if !loading && !error && pdfDoc}
+		<div class="absolute top-2 right-2 z-10">
+			<Tooltip content={$i18n.t('Reset view')}>
+				<button
+					class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
+					on:click={resetView}
+				>
+					<Reset className="size-4" />
+				</button>
+			</Tooltip>
 		</div>
 	{/if}
 </div>