diff --git a/build-configs/src/ThemeType.ts b/build-configs/src/ThemeType.ts
index 48115205dc..489b40c66c 100644
--- a/build-configs/src/ThemeType.ts
+++ b/build-configs/src/ThemeType.ts
@@ -54,6 +54,8 @@ export type TypeChat = {
   answerMessageBackground: string
   userMessageBackground: string
   messageBorderColor: string
+  chatInputOutlineColor: string
+  chatInputPlaceholderColor: string
 }
 
 export type CommonColorPalette = CommonColors & {
diff --git a/build-configs/src/common/theme/colors.ts b/build-configs/src/common/theme/colors.ts
index e22af026c7..446b53fd9b 100644
--- a/build-configs/src/common/theme/colors.ts
+++ b/build-configs/src/common/theme/colors.ts
@@ -61,6 +61,8 @@ export const commonLightColors: CommonColorPalette = {
     answerMessageBackground: '#EAEEF9',
     userMessageBackground: '#F5F5F5',
     messageBorderColor: 'transparent',
+    chatInputOutlineColor: 'rgba(0, 0, 0, 0.38)',
+    chatInputPlaceholderColor: 'rgba(0, 0, 0, 0.6)',
   },
 }
 
@@ -104,5 +106,7 @@ export const commonDarkColors: CommonColorPalette = {
     answerMessageBackground: '#181818',
     userMessageBackground: '#20293A',
     messageBorderColor: '#C9C9C9',
+    chatInputOutlineColor: 'rgba(255, 255, 255, 0.38)',
+    chatInputPlaceholderColor: 'rgba(255, 255, 255, 0.6)',
   },
 }
diff --git a/web/src/@types/mui-theme.d.ts b/web/src/@types/mui-theme.d.ts
index a4d4bf7c34..ebd87674a1 100644
--- a/web/src/@types/mui-theme.d.ts
+++ b/web/src/@types/mui-theme.d.ts
@@ -41,6 +41,8 @@ declare module '@mui/material/styles' {
       answerMessageBackground: string
       userMessageBackground: string
       messageBorderColor: string
+      chatInputOutlineColor: string
+      chatInputPlaceholderColor: string
     }
   }
 
@@ -56,6 +58,8 @@ declare module '@mui/material/styles' {
       answerMessageBackground: string
       userMessageBackground: string
       messageBorderColor: string
+      chatInputOutlineColor: string
+      chatInputPlaceholderColor: string
     }
   }
 }
diff --git a/web/src/components/ChatInput.tsx b/web/src/components/ChatInput.tsx
index d2f50c69c9..b394c7109c 100644
--- a/web/src/components/ChatInput.tsx
+++ b/web/src/components/ChatInput.tsx
@@ -33,12 +33,27 @@ const StyledTextField = styled(TextField, { shouldForwardProp: prop => prop !==
       [theme.breakpoints.up('md')]: {
         flexDirection: 'row',
       },
+      // MUI hovers to text.primary, excluding the focused state
+      [`&:hover:not(.${outlinedInputClasses.focused}) .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: theme.palette.chat.chatInputPlaceholderColor,
+      },
+    },
+
+    [`& .${outlinedInputClasses.notchedOutline}`]: {
+      borderColor: theme.palette.chat.chatInputOutlineColor,
+      borderWidth: 2,
+    },
+
+    [`& .${outlinedInputClasses.input}::placeholder`]: {
+      color: theme.palette.chat.chatInputPlaceholderColor,
+      // The global placeholder opacity must not dim the color any further
+      opacity: 1,
     },
   }),
 )
 
 const ChatIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.text.secondary,
+  color: theme.palette.chat.chatInputPlaceholderColor,
   [`&.${buttonBaseClasses.focusVisible}`]: { color: theme.palette.text.primary },
 })) as typeof IconButton
 
@@ -51,7 +66,9 @@ const SendButton = styled(IconButton)(({ theme }) => ({
   '&:hover': {
     backgroundColor: theme.palette.primary.dark,
   },
-
+  [`&.${buttonBaseClasses.disabled}`]: {
+    color: theme.palette.chat.chatInputOutlineColor,
+  },
   [theme.breakpoints.up('md')]: {
     borderRadius: 12,
   },