diff --git a/packages/uikit b/packages/uikit
index 8429761f8..231f15dac 160000
--- a/packages/uikit
+++ b/packages/uikit
@@ -1 +1 @@
-Subproject commit 8429761f8b8d5c7944aef9a9902ae7c27fb9da7a
+Subproject commit 231f15dac40e247c1811716c5a22846915ec4d16
diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx
index fde51ea1f..cdaccd272 100644
--- a/src/components/CustomChannelComponent.tsx
+++ b/src/components/CustomChannelComponent.tsx
@@ -80,7 +80,7 @@ const Root = styled.div<RootStyleProps>`
       // @link: https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming
       font-size: ${isIOSMobile ? 16 : 14}px;
       font-family: 'Roboto', sans-serif;
-      line-height: 20px;
+      line-height: 24px; // because top & bottom padding is 8px each and the input height is 40px.
       resize: none;
       border: none;
       outline: none;
@@ -112,7 +112,8 @@ const Root = styled.div<RootStyleProps>`
       }
     }
     .sendbird-message-input--placeholder {
-      top: 9px;
+      top: 50%;
+      transform: translateY(-50%);
     }
   }
 `;
diff --git a/src/components/CustomTypingIndicatorBubble.tsx b/src/components/CustomTypingIndicatorBubble.tsx
index bef73254e..69299928a 100644
--- a/src/components/CustomTypingIndicatorBubble.tsx
+++ b/src/components/CustomTypingIndicatorBubble.tsx
@@ -35,7 +35,7 @@ const blink = keyframes`
 
 const TypingDotsContainer = styled.div`
   align-items: center;
-  border-radius: 16px;
+  border-radius: 100px;
   display: flex;
   gap: 6px;
   justify-content: center;
@@ -67,6 +67,7 @@ const TypingDot = styled.span`
 const Root = styled.div`
   display: flex;
   align-items: flex-end;
+  margin-top: 16px;
 `;
 
 function TypingDots() {
diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index 2ffc3a201..e5447a674 100644
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -1,5 +1,5 @@
 import { MessageFormItemStyle } from '@sendbird/chat/message';
-import { ReactElement, ReactNode, useState } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import styled from 'styled-components';
 
 import Icon, { IconColors, IconTypes } from '@uikit/ui/Icon';
@@ -34,25 +34,26 @@ const OptionalText = styled.span`
 const Root = styled.div<Pick<InputProps, 'errorMessage'>>`
   padding-bottom: 12px;
   width: 100%;
+
   .sendbird-input .sendbird-input__input {
     color: ${({ theme }) => theme.textColor.incomingMessage} !important;
     height: fit-content;
-    background-color: ${({ theme }) => theme.bgColor.formInput} !important;
+    background-color: ${({ theme }) => theme.bgColor.formInput.default} !important;
     border: ${({ theme, errorMessage }) =>
       `solid 1px ${errorMessage ? theme.borderColor.formInput.error : theme.borderColor.formInput.default}`} !important;
-    ::placeholder {
-      color: ${({ theme }) => theme.textColor.placeholder};
-    }
+
     &:disabled {
       pointer-events: none;
-      background-color: ${({ theme }) => theme.bgColor.formInputDisabled} !important;
+      background-color: ${({ theme }) => theme.bgColor.formInput.disabled} !important;
       border: none !important;
     }
+
     &:focus {
       border: ${({ theme }) => `solid 1px ${theme.borderColor.formInput.focus}`} !important;
       outline: none;
       box-shadow: 0 0 0 1px ${({ theme }) => theme.borderColor.formInput.focus};
     }
+
     &:active {
       border: ${({ theme }) => `solid 1px ${theme.borderColor.formInput.active}`} !important;
     }
@@ -64,6 +65,26 @@ interface ChipProps {
   isSubmitted?: boolean;
 }
 
+interface PlaceholderProps {
+  numMaxLines?: number;
+}
+
+const Placeholder = styled.div<PlaceholderProps>`
+  width: calc(100% - 26px); // (12px side padding + 1px border) * 2 = 26px
+  height: calc(100% - 16px); // (7px padding + 1px border) * 2 = 16px
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ numMaxLines }) => numMaxLines ?? 1};
+  -webkit-box-orient: vertical;
+  position: absolute;
+  pointer-events: none;
+  top: 8px;
+  left: 13px;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${({ theme }) => theme.textColor.placeholder};
+`;
+
 const Chip = styled.div<ChipProps>`
   border-radius: 100px;
   padding: ${({ isSubmitted }) => (isSubmitted ? '6px 16px' : '5px 15px')};
@@ -170,7 +191,7 @@ const SubmittedTextInputContainer = styled.div<SubmittedTextInputContainerProps>
   word-wrap: break-word;
   width: calc(100% - 24px);
   color: ${({ theme }) => theme.textColor.incomingMessage};
-  background-color: ${({ theme }) => theme.bgColor.formInputDisabled} !important;
+  background-color: ${({ theme }) => theme.bgColor.formInput.disabled} !important;
   border: none;
   pointer-events: none;
   ${({ isTextarea }) => {
@@ -189,6 +210,25 @@ const SubmittedTextInputContainer = styled.div<SubmittedTextInputContainerProps>
   white-space: pre-wrap;
 `;
 
+interface SubmittedTextInputComponentProps {
+  layout: string;
+  currentValue: string;
+  isValid: boolean | undefined;
+}
+
+const SubmittedTextInputComponent = ({ layout, currentValue, isValid }: SubmittedTextInputComponentProps) => {
+  return (
+    <SubmittedTextInputContainer isTextarea={layout === 'textarea'}>
+      <SubmittedText>{currentValue}</SubmittedText>
+      {isValid && (
+        <CheckIconContainer>
+          <Icon type={IconTypes.DONE} fillColor={IconColors.SECONDARY_2} width="20px" height="20px" />
+        </CheckIconContainer>
+      )}
+    </SubmittedTextInputContainer>
+  );
+};
+
 const SubmittedText = styled.div`
   width: calc(100% - 24px);
   line-height: 20px;
@@ -216,21 +256,23 @@ const CheckIconForChip = styled(Icon)<CheckIconProps>`
 
 const InputContainer = styled.div`
   width: 100%;
+  position: relative;
 `;
 
 export interface InputProps {
   name: string;
   style: MessageFormItemStyle;
-  required?: boolean;
-  disabled?: boolean;
-  isValid?: boolean;
+  isSubmitted: boolean;
   errorMessage: string | null;
   values: string[];
-  placeHolder?: string;
-  onFocused?: (isFocus: boolean) => void;
+  isInvalidated: boolean;
+  isSubmitTried: boolean;
   onChange: (values: string[]) => void;
-  isSubmitted: boolean;
   layout: MessageFormItemStyle['layout'];
+  required?: boolean;
+  isValid?: boolean;
+  placeHolder?: string;
+  onFocused?: (isFocus: boolean) => void;
 }
 
 type ChipState = 'default' | 'selected' | 'submittedDefault' | 'submittedSelected';
@@ -245,10 +287,11 @@ const FormInput = (props: InputProps) => {
     layout,
     name,
     required,
-    disabled,
     errorMessage,
     isValid,
     values,
+    isInvalidated,
+    isSubmitTried,
     style,
     onFocused,
     onChange,
@@ -260,15 +303,11 @@ const FormInput = (props: InputProps) => {
   const { min = 1, max = 1 } = resultCount ?? {};
   const chipDataList: ChipData[] = getInitialChipDataList();
 
-  const [isFocused, setIsFocused] = useState(false);
-
   const handleFocus = () => {
-    setIsFocused(true);
     onFocused?.(true);
   };
 
   const handleBlur = () => {
-    setIsFocused(false);
     onFocused?.(false);
   };
 
@@ -291,14 +330,9 @@ const FormInput = (props: InputProps) => {
     let newDraftedValues: string[];
     if (min === 1 && max === 1) {
       // Single select
-      newDraftedValues = [chipDataList[index].option];
+      newDraftedValues = chipDataList[index].state === 'selected' ? [] : [chipDataList[index].option];
     } else {
-      /**
-       * Multi select case
-       * Upon chip click, if it is:
-       *   1. not selected and can select more -> select the chip. Keep other selected chips as is.
-       *   2. already selected ->  deselect the chip. Keep other selected chips as is.
-       */
+      // Multi select
       newDraftedValues = chipDataList.reduce((acc, chipData, i) => {
         if (i === index) {
           if (chipData.state === 'default' && values.length < max) {
@@ -312,7 +346,7 @@ const FormInput = (props: InputProps) => {
         return acc;
       }, [] as string[]);
     }
-    if (newDraftedValues.length > 0) onChange(newDraftedValues);
+    onChange(newDraftedValues);
   };
 
   return (
@@ -356,28 +390,26 @@ const FormInput = (props: InputProps) => {
               return (
                 <InputContainer>
                   {isSubmitted ? (
-                    <SubmittedTextInputContainer isTextarea={true}>
-                      <SubmittedText>{currentValue}</SubmittedText>
-                      {isValid && (
-                        <CheckIconContainer>
-                          <Icon type={IconTypes.DONE} fillColor={IconColors.SECONDARY_2} width="20px" height="20px" />
-                        </CheckIconContainer>
-                      )}
-                    </SubmittedTextInputContainer>
+                    <>
+                      <SubmittedTextInputComponent layout={layout} currentValue={currentValue} isValid={isValid} />
+                      {!currentValue && <Placeholder>No Response</Placeholder>}
+                    </>
                   ) : (
-                    <TextArea
-                      className="sendbird-input__input"
-                      required={required}
-                      disabled={disabled}
-                      value={currentValue}
-                      onFocus={handleFocus}
-                      onBlur={handleBlur}
-                      onChange={(event) => {
-                        const value = event.target.value;
-                        onChange(value ? [value] : []);
-                      }}
-                      placeholder={!disabled ? placeHolder : ''}
-                    />
+                    <>
+                      <TextArea
+                        className="sendbird-input__input"
+                        required={required}
+                        disabled={isSubmitted}
+                        value={currentValue}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        onChange={(event) => {
+                          const value = event.target.value;
+                          onChange(value ? [value] : []);
+                        }}
+                      />
+                      {placeHolder && !currentValue && <Placeholder numMaxLines={4}>{placeHolder}</Placeholder>}
+                    </>
                   )}
                 </InputContainer>
               );
@@ -390,30 +422,29 @@ const FormInput = (props: InputProps) => {
               return (
                 <InputContainer>
                   {isSubmitted ? (
-                    <SubmittedTextInputContainer>
-                      <SubmittedText>{currentValue}</SubmittedText>
-                      {isValid && (
-                        <CheckIconContainer>
-                          <Icon type={IconTypes.DONE} fillColor={IconColors.SECONDARY_2} width="20px" height="20px" />
-                        </CheckIconContainer>
-                      )}
-                    </SubmittedTextInputContainer>
+                    <>
+                      <SubmittedTextInputComponent layout={layout} currentValue={currentValue} isValid={isValid} />
+                      {!currentValue && <Placeholder>No Response</Placeholder>}
+                    </>
                   ) : (
-                    <Input
-                      type={layout}
-                      className="sendbird-input__input"
-                      name={name}
-                      required={required}
-                      disabled={disabled}
-                      value={currentValue}
-                      onFocus={handleFocus}
-                      onBlur={handleBlur}
-                      onChange={(event) => {
-                        const value = event.target.value;
-                        onChange(value ? [value] : []);
-                      }}
-                      placeholder={!disabled ? placeHolder : ''}
-                    />
+                    <>
+                      <Input
+                        type={layout === 'number' ? 'text' : layout}
+                        inputMode={layout === 'number' ? 'numeric' : 'text'}
+                        className="sendbird-input__input"
+                        name={name}
+                        required={required}
+                        disabled={isSubmitted}
+                        value={currentValue}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        onChange={(event) => {
+                          const value = event.target.value;
+                          onChange(value ? [value] : []);
+                        }}
+                      />
+                      {placeHolder && !currentValue && <Placeholder>{placeHolder}</Placeholder>}
+                    </>
                   )}
                 </InputContainer>
               );
@@ -423,7 +454,14 @@ const FormInput = (props: InputProps) => {
             }
           }
         })()}
-        {!isFocused && errorMessage && <ErrorLabel type={LabelTypography.CAPTION_3}>{errorMessage}</ErrorLabel>}
+        {/*
+        If there is an error message for the input, display it IFF any of below is true:
+        1. Submit button has been clicked after initial load.
+        2. Input has been focused out.
+        */}
+        {errorMessage && (isSubmitTried || isInvalidated) && (
+          <ErrorLabel type={LabelTypography.CAPTION_3}>{errorMessage}</ErrorLabel>
+        )}
       </div>
     </Root>
   );
diff --git a/src/components/messages/FallbackUserMessage.tsx b/src/components/messages/FallbackUserMessage.tsx
new file mode 100644
index 000000000..af393f43a
--- /dev/null
+++ b/src/components/messages/FallbackUserMessage.tsx
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+interface FallbackUserMessageProps {
+  text: string;
+}
+
+const Container = styled.div`
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border-radius: 16px;
+  background-color: ${({ theme }) => theme.bgColor.incomingMessage};
+`;
+
+const Label = styled.div`
+  color: ${({ theme }) => theme.textColor.placeholder};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+`;
+
+export default function FallbackUserMessage({ text }: FallbackUserMessageProps) {
+  return (
+    <Container>
+      <Label>{text}</Label>
+    </Container>
+  );
+}
diff --git a/src/components/messages/FormMessage.tsx b/src/components/messages/FormMessage.tsx
index e824b2285..8ea42fb30 100644
--- a/src/components/messages/FormMessage.tsx
+++ b/src/components/messages/FormMessage.tsx
@@ -1,13 +1,15 @@
 import { MessageForm } from '@sendbird/chat/message';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 
+import { isFormVersionCompatible } from '@uikit/modules/GroupChannel/context/utils';
 import Button from '@uikit/ui/Button';
 import Label, { LabelTypography } from '@uikit/ui/Label';
 import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal';
 import { CoreMessageType } from '@uikit/utils';
 
-import { elementIds } from '../../const';
+import FallbackUserMessage from './FallbackUserMessage';
+import { elementIds, widgetStringSet } from '../../const';
 import { useConstantState } from '../../context/ConstantContext';
 import FormInput from '../FormInput';
 
@@ -17,9 +19,11 @@ interface Props {
 }
 
 interface FormValue {
+  itemId: number;
   draftValues: string[];
   required: boolean;
   errorMessage: string | null;
+  isInvalidated: boolean;
 }
 
 const Root = styled.div`
@@ -35,6 +39,20 @@ const Root = styled.div`
 
 const SubmitButton = styled(Button)`
   width: 100%;
+
+  &&& {
+    ${({ theme, disabled }) => {
+      if (disabled) {
+        const disabledBgColor = `${theme.bgColor.formButton.disabled};`;
+        return {
+          'background-color': disabledBgColor,
+          '&:hover': {
+            'background-color': disabledBgColor,
+          },
+        };
+      }
+    }};
+  }
 `;
 
 interface ButtonTextProps {
@@ -42,40 +60,45 @@ interface ButtonTextProps {
 }
 
 const ButtonText = styled.div<ButtonTextProps>`
-  color: ${({ theme, disabled }) => (disabled ? 'inherit' : theme.textColor.activeButton)};
+  color: ${({ theme, disabled }) => {
+    return disabled ? theme.textColor.formButton.disabled : theme.textColor.activeButton;
+  }};
 `;
 
 export default function FormMessage(props: Props) {
   const { message, form } = props;
-  const { items, id: formId } = form;
+  const { items } = form;
   const { stringSet } = useConstantState();
 
   const [submitFailed, setSubmitFailed] = useState(false);
-  const [isInputFocused, setIsInputFocused] = useState(false);
-
+  const [isSubmitTried, setIsSubmitTried] = useState(false);
   const [formValues, setFormValues] = useState<FormValue[]>(() => {
     const initialFormValues: FormValue[] = [];
-    items.forEach(({ required, style }) => {
+    items.forEach(({ id, required, style }) => {
       const { defaultOptions = [], layout } = style;
       initialFormValues.push({
+        itemId: id,
         draftValues: layout === 'chip' ? defaultOptions : [],
         required,
         errorMessage: null,
+        isInvalidated: false,
       });
     });
     return initialFormValues;
   });
 
+  if (!isFormVersionCompatible(props.form.version)) {
+    return <FallbackUserMessage text={widgetStringSet.formVersionInvalidFallbackMessage} />;
+  }
+
   const isSubmitted = form.isSubmitted;
   const hasError = formValues.some(({ errorMessage }) => !!errorMessage);
+  const hasInvalidated = formValues.some(({ isInvalidated }) => isInvalidated);
+  const isButtonDisabled = (hasError && (isSubmitTried || hasInvalidated)) || isSubmitted;
 
-  const handleSubmit = useCallback(async () => {
+  const handleSubmit = async () => {
+    setIsSubmitTried(true);
     try {
-      // If any of required fields are not valid,
-      const hasError = formValues.some(({ errorMessage }) => errorMessage);
-      if (hasError) {
-        return;
-      }
       // If form is empty, ignore submit
       const isMissingRequired = formValues.some(
         (formValue) => formValue.required && (!formValue.draftValues || formValue.draftValues.length === 0),
@@ -94,26 +117,20 @@ export default function FormMessage(props: Props) {
         });
         return;
       }
-      if (formValues.some((formValue) => formValue.draftValues.length > 1)) {
-        formValues.forEach((formValue, index) => {
-          items[index].draftValues = formValue.draftValues;
-        });
-        await message.submitMessageForm();
-      } else {
-        const answers: Record<string, string> = {};
-        formValues.forEach((formValue, index) => {
-          const item = items[index];
-          if (formValue.draftValues.length > 0) {
-            answers[item.id] = formValue.draftValues[0];
-          }
-        });
-        await message.submitMessageForm({ formId, answers });
+      // If any of required fields are not valid,
+      const hasError = formValues.some(({ errorMessage }) => errorMessage);
+      if (hasError) {
+        return;
       }
+      formValues.forEach((formValue, index) => {
+        items[index].draftValues = formValue.draftValues;
+      });
+      await message.submitMessageForm();
     } catch (error) {
       setSubmitFailed(true);
       console.error(error);
     }
-  }, [formValues, message.messageId, message.submitMessageForm, formId]);
+  };
 
   return (
     <Root>
@@ -128,12 +145,32 @@ export default function FormMessage(props: Props) {
             style={style}
             placeHolder={placeholder}
             values={item.submittedValues ?? draftValues}
+            isInvalidated={formValues[index].isInvalidated}
+            isSubmitTried={isSubmitTried}
             errorMessage={errorMessage}
             isValid={isSubmitted}
-            disabled={isSubmitted}
+            isSubmitted={isSubmitted}
             name={name}
             required={required}
-            onFocused={(isFocus) => setIsInputFocused(isFocus)}
+            onFocused={(isFocus) => {
+              if (errorMessage && !isFocus && !formValues[index].isInvalidated) {
+                setFormValues(([...newInputs]) => {
+                  newInputs[index] = {
+                    ...newInputs[index],
+                    isInvalidated: true,
+                  };
+                  return newInputs;
+                });
+              } else if (!errorMessage) {
+                setFormValues(([...newInputs]) => {
+                  newInputs[index] = {
+                    ...newInputs[index],
+                    isInvalidated: false,
+                  };
+                  return newInputs;
+                });
+              }
+            }}
             onChange={(values) => {
               setFormValues(([...newInputs]) => {
                 newInputs[index] = {
@@ -152,15 +189,12 @@ export default function FormMessage(props: Props) {
                 return newInputs; // Return the new array
               });
             }}
-            isSubmitted={isSubmitted}
           />
         );
       })}
-      <SubmitButton onClick={handleSubmit} disabled={(!isInputFocused && hasError) || isSubmitted}>
+      <SubmitButton onClick={handleSubmit} disabled={isButtonDisabled}>
         <Label type={LabelTypography.BUTTON_2}>
-          <ButtonText disabled={(!isInputFocused && hasError) || isSubmitted}>
-            {isSubmitted ? 'Submitted successfully' : 'Submit'}
-          </ButtonText>
+          <ButtonText disabled={isButtonDisabled}>{isSubmitted ? 'Submitted successfully' : 'Submit'}</ButtonText>
         </Label>
       </SubmitButton>
       {submitFailed && (
diff --git a/src/const.ts b/src/const.ts
index 69d16f2c8..c0a442eb4 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -379,4 +379,5 @@ export const widgetServiceName = {
 
 export const widgetStringSet = {
   messageInputDisabledPlaceholder: 'Waiting for the bot’s reply…',
+  formVersionInvalidFallbackMessage: 'Form type messages are not available in this version.',
 };
diff --git a/src/theme.ts b/src/theme.ts
index a962eacab..aa95c4653 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -17,8 +17,10 @@ export interface CommonTheme {
     carouselItem: string;
     carouselButton: string;
     carouselButtonIcon: string;
-    formInput: string;
-    formInputDisabled: string;
+    formInput: {
+      default: string;
+      disabled: string;
+    };
     formChip: {
       default: string;
       selected: string;
@@ -27,6 +29,9 @@ export interface CommonTheme {
       hover: string;
       focus: string;
     };
+    formButton: {
+      disabled: string;
+    };
     messageDataContent: {
       sidebar: string;
     };
@@ -52,6 +57,9 @@ export interface CommonTheme {
       hover: string;
       focus: string;
     };
+    formButton: {
+      disabled: string;
+    };
     activeButton: string;
     messageDataContent: {
       default: string;
@@ -142,8 +150,10 @@ export function getTheme({
         carouselItem: 'var(--sendbird-light-background-50)',
         carouselButton: 'var(--sendbird-light-background-50)',
         carouselButtonIcon: 'var(--sendbird-light-background-400)',
-        formInput: 'var(--sendbird-light-background-50)',
-        formInputDisabled: 'var(--sendbird-dark-ondark-02)',
+        formInput: {
+          default: 'var(--sendbird-light-background-50)',
+          disabled: 'var(--sendbird-dark-ondark-02)',
+        },
         formChip: {
           default: 'var(--sendbird-light-background-50)',
           selected: 'var(--sendbird-light-primary-100)',
@@ -152,6 +162,9 @@ export function getTheme({
           hover: 'var(--sendbird-light-background-50)',
           focus: 'var(--sendbird-light-background-50)',
         },
+        formButton: {
+          disabled: 'var(--sendbird-light-onlight-04)',
+        },
         messageDataContent: {
           sidebar: 'var(--sendbird-light-background-200)',
         },
@@ -177,6 +190,9 @@ export function getTheme({
           hover: 'var(--sendbird-light-primary-300)',
           focus: 'var(--sendbird-light-onlight-02)',
         },
+        formButton: {
+          disabled: 'var(--sendbird-light-background-50)',
+        },
         activeButton: satColorForAccentColor ?? 'var(--sendbird-dark-ondark-01)',
         messageDataContent: {
           default: 'var(--sendbird-light-onlight-01)',
@@ -241,8 +257,10 @@ export function getTheme({
         carouselItem: 'var(--sendbird-dark-background-500)',
         carouselButton: 'var(--sendbird-dark-background-400)',
         carouselButtonIcon: 'var(--sendbird-dark-background-50)',
-        formInput: 'var(--sendbird-light-onlight-03)',
-        formInputDisabled: 'var(--sendbird-light-onlight-04)',
+        formInput: {
+          default: 'var(--sendbird-light-onlight-03)',
+          disabled: 'var(--sendbird-light-onlight-04)',
+        },
         formChip: {
           default: 'var(--sendbird-light-onlight-03)',
           selected: 'var(--sendbird-dark-background-600)',
@@ -251,6 +269,9 @@ export function getTheme({
           hover: 'var(--sendbird-light-onlight-03)',
           focus: 'var(--sendbird-light-onlight-03)',
         },
+        formButton: {
+          disabled: 'var(--sendbird-dark-ondark-04)',
+        },
         messageDataContent: {
           sidebar: 'var(--sendbird-dark-background-400)',
         },
@@ -276,6 +297,9 @@ export function getTheme({
           hover: 'var(--sendbird-dark-primary-200)',
           focus: 'var(--sendbird-dark-ondark-02)',
         },
+        formButton: {
+          disabled: 'var(--sendbird-light-onlight-01)',
+        },
         activeButton: accentColor ? getColorBasedOnSaturation(accentColor, 0.88) : 'var(--sendbird-light-onlight-01)',
         messageDataContent: {
           default: 'var(--sendbird-dark-ondark-01)',