diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index 33f40d7af..5f0fbe663 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -39,7 +39,8 @@ const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
   const { RCInstance, ECOptions } = useRCContext();
   const { theme } = useTheme();
-  const styles = getChatInputStyles(theme);
+  const { mode } = useTheme();
+  const styles = getChatInputStyles(theme, mode);
 
   const inputRef = useRef(null);
   const typingRef = useRef();
@@ -517,7 +518,13 @@ const ChatInput = ({ scrollToBottom }) => {
           (editMessage.msg || editMessage.attachments) && styles.editMessage,
         ]}
       >
-        <Box css={styles.inputBox}>
+        <Box
+          css={[
+            styles.inputBox,
+            (editMessage.msg || editMessage.attachments) &&
+              styles.messageEditing,
+          ]}
+        >
           <Input
             textArea
             rows={1}
@@ -529,7 +536,11 @@ const ChatInput = ({ scrollToBottom }) => {
                 ? 'This room is read only'
                 : 'Sign in to chat'
             }
-            css={styles.textInput}
+            css={[
+              styles.textInput,
+              (editMessage.msg || editMessage.attachments) &&
+                styles.messageEditing,
+            ]}
             onChange={onTextChange}
             onBlur={() => {
               sendTypingStop();
diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 21e7a2473..4b9b39a47 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { darken, lighten } from '@embeddedchat/ui-elements';
 
-export const getChatInputStyles = (theme) => {
+export const getChatInputStyles = (theme, mode) => {
   const styles = {
     inputWithFormattingBox: css`
       border: 1px solid ${theme.colors.border};
@@ -58,10 +58,23 @@ export const getChatInputStyles = (theme) => {
         font-size: 18px;
       }
     `,
+
     quoteContainer: css`
       max-height: 300px;
       overflow: scroll;
     `,
+
+    messageEditing: css`
+      background-color: ${mode === 'light'
+        ? lighten(theme.colors.warning, 0.85)
+        : darken(theme.colors.warningForeground, 0.75)};
+
+      &:hover {
+        background-color: ${mode === 'light'
+          ? lighten(theme.colors.warning, 0.85)
+          : darken(theme.colors.warningForeground, 0.75)};
+      }
+    `,
   };
 
   return styles;
diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 8c380d241..1918c05fc 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
+import { lighten, darken } from '@embeddedchat/ui-elements';
 
-export const getMessageStyles = ({ theme }) => {
+export const getMessageStyles = ({ theme, mode }) => {
   const styles = {
     main: css`
       display: flex;
@@ -13,9 +14,14 @@ export const getMessageStyles = ({ theme }) => {
       color: ${theme.colors.foreground};
     `,
     messageEditing: css`
-      background-color: ${theme.colors.secondary};
+      background-color: ${mode === 'light'
+        ? lighten(theme.colors.warning, 0.85)
+        : darken(theme.colors.warningForeground, 0.75)};
+
       &:hover {
-        background-color: ${theme.colors.secondary};
+        background-color: ${mode === 'light'
+          ? lighten(theme.colors.warning, 0.85)
+          : darken(theme.colors.warningForeground, 0.75)};
       }
     `,