diff --git a/src/components/Chat/MessagePanel/InputBox/MessageInput.module.css b/src/components/Chat/MessagePanel/InputBox/MessageInput.module.css
index fb57b8346f..d0b4c65d00 100644
--- a/src/components/Chat/MessagePanel/InputBox/MessageInput.module.css
+++ b/src/components/Chat/MessagePanel/InputBox/MessageInput.module.css
@@ -355,4 +355,7 @@
         height: 1.2rem;
     }
 
+}
+section[class^="emoji-scroll-wrapper"]{
+    scroll-behavior: auto;
 }
\ No newline at end of file
diff --git a/src/components/Chat/MessagePanel/InputBox/MessageInput.tsx b/src/components/Chat/MessagePanel/InputBox/MessageInput.tsx
index 66134e0e56..a6120a42d3 100644
--- a/src/components/Chat/MessagePanel/InputBox/MessageInput.tsx
+++ b/src/components/Chat/MessagePanel/InputBox/MessageInput.tsx
@@ -656,7 +656,10 @@ export default function MessageInput(props: MessageInputProps) {
                         </div>
                     </div>
                     {showEmojiPicker && (
-                        <div className={styles.emojiPicker}>
+                        <div
+                            className={styles.emojiPicker}
+                            style={{ width: '100%' }}
+                        >
                             <span className={styles.emoji_close_button}>
                                 <RiCloseFill
                                     size={20}
@@ -691,7 +694,6 @@ export default function MessageInput(props: MessageInputProps) {
                                 <Picker
                                     pickerStyle={{
                                         width: '100%',
-                                        height: '89%',
                                     }}
                                     onEmojiClick={handleEmojiClick}
                                     disableSkinTonePicker={true}