diff --git a/src/lib/components/chat/MessageInput/Documents.svelte b/src/lib/components/chat/MessageInput/Documents.svelte
index cff3aa725..64c4bc458 100644
--- a/src/lib/components/chat/MessageInput/Documents.svelte
+++ b/src/lib/components/chat/MessageInput/Documents.svelte
@@ -162,7 +162,7 @@
 									.substring(1)
 									.startsWith('https://youtu.be'))}
 						<button
-							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-100 selected-command-option-button"
+							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button"
 							type="button"
 							on:click={() => {
 								const url = prompt.split(' ')?.at(0)?.substring(1);
@@ -177,7 +177,7 @@
 								}
 							}}
 						>
-							<div class=" font-medium text-black line-clamp-1">
+							<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
 								{prompt.split(' ')?.at(0)?.substring(1)}
 							</div>
 
@@ -185,7 +185,7 @@
 						</button>
 					{:else if prompt.split(' ')?.at(0)?.substring(1).startsWith('http')}
 						<button
-							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-100 selected-command-option-button"
+							class="px-3 py-1.5 rounded-xl w-full text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 selected-command-option-button"
 							type="button"
 							on:click={() => {
 								const url = prompt.split(' ')?.at(0)?.substring(1);
@@ -200,7 +200,7 @@
 								}
 							}}
 						>
-							<div class=" font-medium text-black line-clamp-1">
+							<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
 								{prompt.split(' ')?.at(0)?.substring(1)}
 							</div>