diff --git a/src/lib/components/chat/MessageInput/Documents.svelte b/src/lib/components/chat/MessageInput/Documents.svelte
index 5004594ee..fed9b8257 100644
--- a/src/lib/components/chat/MessageInput/Documents.svelte
+++ b/src/lib/components/chat/MessageInput/Documents.svelte
@@ -107,12 +107,12 @@
 				<div class=" text-lg font-semibold mt-2">#</div>
 			</div>
 
-			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white">
+			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white dark:bg-gray-850 dark:text-gray-100 ">
 				<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
 					{#each filteredItems as doc, docIdx}
 						<button
 							class=" px-3 py-1.5 rounded-xl w-full text-left {docIdx === selectedIdx
-								? ' bg-gray-100 selected-command-option-button'
+								? ' bg-gray-100 dark:bg-gray-600 dark:text-gray-100 selected-command-option-button'
 								: ''}"
 							type="button"
 							on:click={() => {
@@ -126,17 +126,17 @@
 							on:focus={() => {}}
 						>
 							{#if doc.type === 'collection'}
-								<div class=" font-medium text-black line-clamp-1">
+								<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
 									{doc?.title ?? `#${doc.name}`}
 								</div>
 
-								<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Collection')}</div>
+								<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">{$i18n.t('Collection')}</div>
 							{:else}
-								<div class=" font-medium text-black line-clamp-1">
+								<div class=" font-medium text-black dark:text-gray-100 line-clamp-1">
 									#{doc.name} ({doc.filename})
 								</div>
 
-								<div class=" text-xs text-gray-600 line-clamp-1">
+								<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">
 									{doc.title}
 								</div>
 							{/if}
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 1da5324ce..c986f8691 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -94,12 +94,12 @@
 				<div class=" text-lg font-semibold mt-2">/</div>
 			</div>
 
-			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white">
+			<div class="max-h-60 flex flex-col w-full rounded-r-xl bg-white dark:bg-gray-850">
 				<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5">
 					{#each filteredPromptCommands as command, commandIdx}
 						<button
 							class=" px-3 py-1.5 rounded-xl w-full text-left {commandIdx === selectedCommandIdx
-								? ' bg-gray-100 selected-command-option-button'
+								? ' bg-gray-100 dark:bg-gray-600 selected-command-option-button'
 								: ''}"
 							type="button"
 							on:click={() => {
@@ -110,11 +110,11 @@
 							}}
 							on:focus={() => {}}
 						>
-							<div class=" font-medium text-black">
+							<div class=" font-medium text-black dark:text-gray-100">
 								{command.command}
 							</div>
 
-							<div class=" text-xs text-gray-600">
+							<div class=" text-xs text-gray-600 dark:text-gray-100">
 								{command.title}
 							</div>
 						</button>
@@ -122,7 +122,7 @@
 				</div>
 
 				<div
-					class=" px-2 pb-1 text-xs text-gray-600 bg-white rounded-br-xl flex items-center space-x-1"
+					class=" px-2 pb-1 text-xs text-gray-600 dark:text-gray-100 bg-white dark:bg-gray-850 rounded-br-xl flex items-center space-x-1"
 				>
 					<div>
 						<svg