diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index ac36dc7fd..748fcd61b 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -100,7 +100,12 @@
 							{#if file.type === 'image'}
 								<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
 							{:else}
-								<FileItem url={file.url} name={file.name} type={file.type} />
+								<FileItem
+									url={file.url}
+									name={file.name}
+									type={file.type}
+									colorClassName="bg-white dark:bg-gray-850 "
+								/>
 							{/if}
 						</div>
 					{/each}
diff --git a/src/lib/components/common/FileItem.svelte b/src/lib/components/common/FileItem.svelte
index b20c5a80b..6ae011cae 100644
--- a/src/lib/components/common/FileItem.svelte
+++ b/src/lib/components/common/FileItem.svelte
@@ -5,6 +5,7 @@
 	const dispatch = createEventDispatcher();
 
 	export let className = 'w-72';
+	export let colorClassName = 'bg-white dark:bg-gray-800';
 	export let url: string | null = null;
 
 	export let clickHandler: Function | null = null;
@@ -18,7 +19,7 @@
 
 <div class="relative group">
 	<button
-		class="h-14 {className} flex items-center space-x-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-800 text-left"
+		class="h-14 {className} flex items-center space-x-3 {colorClassName} rounded-xl border border-gray-100 dark:border-gray-800 text-left"
 		type="button"
 		on:click={async () => {
 			if (clickHandler === null) {