diff --git a/src/components/message/MessageInput.tsx b/src/components/message/MessageInput.tsx
index c10d31c..2f72e29 100644
--- a/src/components/message/MessageInput.tsx
+++ b/src/components/message/MessageInput.tsx
@@ -196,6 +196,7 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
     } else {
       setMessage((prev) => prev + emoji.native);
     }
+    setShowEmojiPicker(false);
   };
 
   const handleGifSelect = (gif: { images: { original: { url: string } } }, e: React.SyntheticEvent) => {
@@ -349,6 +350,11 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
               />
             </button>
             {showGifPicker && (
+              <>
+                <div
+                  className="fixed inset-0 z-40 sm:hidden"
+                  onClick={() => setShowGifPicker(false)}
+                />
               <div
                 ref={gifPickerRef}
                 className="absolute bottom-full left-0 mb-2 z-50 bg-white border border-[#00293d]/10 rounded-[15px] shadow-lg overflow-hidden w-[min(360px,calc(100vw-32px))] h-[420px]"
@@ -378,6 +384,7 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
                   <span className="font-serif text-[10px] text-[#00293D]/40">Powered by GIPHY</span>
                 </div>
               </div>
+              </>
             )}
           </div>
 
@@ -396,15 +403,25 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
               />
             </button>
             {showEmojiPicker && (
-              <div ref={emojiPickerRef} className="absolute bottom-full left-0 mb-2 z-50">
-                <Picker
-                  data={data}
-                  onEmojiSelect={handleEmojiSelect}
-                  theme="light"
-                  previewPosition="none"
-                  skinTonePosition="search"
+              <>
+                <div
+                  className="fixed inset-0 z-40 sm:hidden"
+                  onClick={() => setShowEmojiPicker(false)}
                 />
-              </div>
+                <div
+                  ref={emojiPickerRef}
+                  className="fixed left-1/2 -translate-x-1/2 bottom-24 sm:absolute sm:bottom-full sm:left-0 sm:right-auto sm:translate-x-0 sm:mb-2 z-50 sm:origin-bottom-left"
+                >
+                  <Picker
+                    data={data}
+                    onEmojiSelect={handleEmojiSelect}
+                    theme="light"
+                    previewPosition="none"
+                    skinTonePosition="search"
+                    perLine={typeof window !== 'undefined' && window.innerWidth < 400 ? 7 : 9}
+                  />
+                </div>
+              </>
             )}
           </div>
         </div>