diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index cf5081095..cd06dcf7f 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -16,6 +16,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
 	import Markdown from './Markdown.svelte';
+	import Image from '$lib/components/common/Image.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -128,7 +129,7 @@
 					{#each message.files as file}
 						<div class={($settings?.chatBubble ?? true) ? 'self-end' : ''}>
 							{#if file.type === 'image'}
-								<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
+								<Image src={file.url} imageClassName=" max-h-96 rounded-lg"  />
 							{:else}
 								<FileItem
 									item={file}
diff --git a/src/lib/components/common/Image.svelte b/src/lib/components/common/Image.svelte
index e6b8f34a2..a5b284448 100644
--- a/src/lib/components/common/Image.svelte
+++ b/src/lib/components/common/Image.svelte
@@ -6,6 +6,7 @@
 	export let alt = '';
 
 	export let className = ' w-full';
+	export let imageClassName = 'rounded-lg';
 
 	let _src = '';
 	$: _src = src.startsWith('/') ? `${WEBUI_BASE_URL}${src}` : src;
@@ -19,7 +20,7 @@
 		showImagePreview = true;
 	}}
 >
-	<img src={_src} {alt} class=" rounded-lg cursor-pointer" draggable="false" data-cy="image" />
+	<img src={_src} {alt} class={imageClassName} draggable="false" data-cy="image" />
 </button>
 
 <ImagePreview bind:show={showImagePreview} src={_src} {alt} />