diff --git a/packages/react/src/components/ChatInput/ChatInput.js b/packages/react/src/components/ChatInput/ChatInput.js
index 7f8aa1f42..6c3ad6767 100644
--- a/packages/react/src/components/ChatInput/ChatInput.js
+++ b/packages/react/src/components/ChatInput/ChatInput.js
@@ -23,7 +23,7 @@ import { CommandsList } from '../CommandList';
 import { ActionButton } from '../ActionButton';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { useToastBarDispatch } from '../../hooks/useToastBarDispatch';
-import ErrorModal from './ErrorModal';
+import { Modal } from '../Modal';
 
 const editingMessageCss = css`
   background-color: #fff8e0;
@@ -85,7 +85,7 @@ const ChatInput = ({ scrollToBottom }) => {
   const setIsLoginModalOpen = loginModalStore(
     (state) => state.setIsLoginModalOpen
   );
-  const [errorModal, setErrorModal] = useState("Message too long");
+  const [errorModal, setErrorModal] = useState(false);
   const [isAttachmentMode, setIsAttachmentMode] = useState(false);
 
 
@@ -121,16 +121,17 @@ const ChatInput = ({ scrollToBottom }) => {
   const openLoginModal = () => {
     setIsLoginModalOpen(true);
   };
-  const openErrorModal = (errorMessage) => {
-    setErrorModal(errorMessage);
+  const openErrorModal = () => {
+    setErrorModal(true);
   };
   const closeErrorModal = () => {
-    setErrorModal(null);
+    setErrorModal(false);
   };
 
   useEffect(() => {
     if(isAttachmentMode) sendMessage();
   }, [isAttachmentMode]);
+  
   const handleConvertToAttachment = () => {
     setIsAttachmentMode(true);
     closeErrorModal();
@@ -178,7 +179,7 @@ const ChatInput = ({ scrollToBottom }) => {
 
     const msgMaxLength = 500;
     if (message.length > msgMaxLength) {
-      openErrorModal('Message is too long!');
+      openErrorModal();
       return;
     }
 
@@ -530,7 +531,24 @@ const ChatInput = ({ scrollToBottom }) => {
         )}
       </Box>
       {errorModal && (
-        <ErrorModal message={errorModal} onClose={closeErrorModal} onConfirm={handleConvertToAttachment} />
+        <Modal css={css`padding: 1em;`}>
+          <Modal.Header>
+            <Modal.Title>
+              <Icon name="report" size="1.25rem" /> 
+              Message Too Long!
+            </Modal.Title>
+            <Modal.Close onClick={closeErrorModal} />
+          </Modal.Header>
+          <Modal.Content css={css`margin: 1em;`}> Send it as attachment instead? </Modal.Content>
+          <Modal.Footer>
+            <Button color="secondary" onClick={closeErrorModal}>
+              Cancel
+            </Button>
+            <Button onClick={handleConvertToAttachment} color="primary">
+              Ok
+            </Button>
+          </Modal.Footer>
+        </Modal>
       )}
     </Box>
   );
diff --git a/packages/react/src/components/ChatInput/ErrorModal.js b/packages/react/src/components/ChatInput/ErrorModal.js
deleted file mode 100644
index 2e5afc8c6..000000000
--- a/packages/react/src/components/ChatInput/ErrorModal.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/react';
-import { Button } from '../Button';
-import { Box } from '../Box';
-
-const outerContainerCss = css`
-  position:fixed;
-  background-color: rgba(0, 0, 0, 0.3);
-  left:0;
-  top:0;
-  bottom:0;
-  right:0;
-  z-index: 100;
-`;
-const containerCss = css`
-  background-color:white;
-  color: black;
-  position:fixed;
-  left:50%;
-  top:50%;
-  translate: -50% -50%;
-  width: 30rem;
-  padding: 1.5rem;
-  padding-bottom: 3rem;
-  border-radius: 10px;
-  z-index: 101;
-`;
-
-
-const ErrorModal = ({ message, onClose, onConfirm }) => {
-  return (
-    <>
-      <Box css={outerContainerCss} onClick={onClose}/>
-      <Box css={containerCss}>
-        <h2> <span css={css`opacity:60%;`}> ⚠︎ </span> {message} </h2>
-        <p>Send it as attachment instead?</p>
-        <Button css={css`position:absolute; right:1em;`} onClick={onConfirm}>Ok</Button>
-        <span css={css`position:absolute; top:1em; right:1em;cursor:pointer;scale:1.5;`} onClick={onClose}> ⨯ </span>
-      </Box>
-    </>
-  );
-};
-
-export default ErrorModal;