diff --git a/web/src/components/message-input/index.less b/web/src/components/message-input/index.less
index 89ed1b742..ce2ef7750 100644
--- a/web/src/components/message-input/index.less
+++ b/web/src/components/message-input/index.less
@@ -1,7 +1,6 @@
 .messageInputWrapper {
   margin-right: 20px;
   padding: '0px 0px 10px 0px';
-  background-color: #ffffff;
   border: 1px solid #d9d9d9;
   &:hover {
     border-color: #40a9ff;
diff --git a/web/src/components/message-input/index.tsx b/web/src/components/message-input/index.tsx
index 529ce73e3..95a4ee195 100644
--- a/web/src/components/message-input/index.tsx
+++ b/web/src/components/message-input/index.tsx
@@ -5,6 +5,7 @@ import {
   useRemoveNextDocument,
   useUploadAndParseDocument,
 } from '@/hooks/document-hooks';
+import { cn } from '@/lib/utils';
 import { getExtension } from '@/utils/document-util';
 import { formatBytes } from '@/utils/file-util';
 import {
@@ -222,7 +223,11 @@ const MessageInput = ({
   }, [conversationId, setFileList]);
 
   return (
-    <Flex gap={1} vertical className={styles.messageInputWrapper}>
+    <Flex
+      gap={1}
+      vertical
+      className={cn(styles.messageInputWrapper, 'dark:bg-black')}
+    >
       <TextArea
         size="large"
         placeholder={t('sendPlaceholder')}
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 95ee90c8c..836cfb693 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -406,7 +406,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       createAssistant: 'Create an Assistant',
       assistantSetting: 'Assistant settings',
       promptEngine: 'Prompt engine',
-      modelSetting: 'Model Setting',
+      modelSetting: 'Model settings',
       chat: 'Chat',
       newChat: 'New chat',
       send: 'Send',
@@ -532,8 +532,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       locale: 'Locale',
       selectLanguage: 'Select a language',
       reasoning: 'Reasoning',
-      reasoningTip:
-        `Whether to enable a reasoning workflow during question answering, as seen in models like Deepseek-R1 or OpenAI o1. When enabled, this allows the model to access external knowledge and tackle complex questions in a step-by-step manner, leveraging techniques like chain-of-thought reasoning. This approach enhances the model's ability to provide accurate responses by breaking down problems into manageable steps, improving performance on tasks that require logical reasoning and multi-step thinking.`,
+      reasoningTip: `Whether to enable a reasoning workflow during question answering, as seen in models like Deepseek-R1 or OpenAI o1. When enabled, this allows the model to access external knowledge and tackle complex questions in a step-by-step manner, leveraging techniques like chain-of-thought reasoning. This approach enhances the model's ability to provide accurate responses by breaking down problems into manageable steps, improving performance on tasks that require logical reasoning and multi-step thinking.`,
       tavilyApiKeyTip:
         'If an API key is correctly set here, Tavily-based web searches will be used to supplement knowledge base retrieval.',
       tavilyApiKeyMessage: 'Please enter your Tavily API Key',
diff --git a/web/src/pages/chat/chat-configuration-modal/index.tsx b/web/src/pages/chat/chat-configuration-modal/index.tsx
index 594a69d65..e19996b18 100644
--- a/web/src/pages/chat/chat-configuration-modal/index.tsx
+++ b/web/src/pages/chat/chat-configuration-modal/index.tsx
@@ -37,9 +37,9 @@ const validateMessages = {
 };
 
 enum ConfigurationSegmented {
-  AssistantSetting = 'Assistant settings',
-  PromptEngine = 'Prompt engine',
-  ModelSetting = 'Model settings',
+  AssistantSetting = 'Assistant Setting',
+  PromptEngine = 'Prompt Engine',
+  ModelSetting = 'Model Setting',
 }
 
 const segmentedMap = {