diff --git a/frontend/src/components/GroupMessageChatArea.js b/frontend/src/components/GroupMessageChatArea.js
index 959f8e31a..0d891e101 100644
--- a/frontend/src/components/GroupMessageChatArea.js
+++ b/frontend/src/components/GroupMessageChatArea.js
@@ -28,6 +28,7 @@ function GroupMessageChatArea(props) {
   const [replyInputFlags, setReplyInputFlags] = useState({});
   const [refreshFlag, setRefreshFlag] = useState(false);
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [emojiUp, setEmojiUp] = useState(false);
   const [showReplyEmojiPicker, setShowReplyEmojiPicker] = useState(false);
 
   const scrollToBottom = () => {
@@ -196,6 +197,7 @@ function GroupMessageChatArea(props) {
             setDotMenuFlags(dot_temp);
             setRefreshFlag(!refreshFlag);
             setReplyMessageText("");
+            setShowEmojiPicker(false);
           }}
         >
           {t("messages.reply")}
@@ -329,10 +331,32 @@ function GroupMessageChatArea(props) {
                       alt=""
                       className="emoji-icon"
                       src="https://icons.getbootstrap.com/assets/icons/emoji-smile.svg"
-                      onClick={() => setShowEmojiPicker((val) => !val)}
+                      onClick={(e) => {
+                        console.log(
+                          "eee",
+                          e,
+                          e.target.getBoundingClientRect(),
+                          window.innerHeight
+                        );
+                        if (
+                          e.target.getBoundingClientRect().y <
+                          window.innerHeight / 2
+                        ) {
+                          setEmojiUp(false);
+                        } else {
+                          setEmojiUp(true);
+                        }
+                        setShowEmojiPicker((val) => !val);
+                      }}
                     />
                     {showEmojiPicker && (
-                      <div className="emoji-container">
+                      <div
+                        className={
+                          emojiUp
+                            ? "up emoji-container"
+                            : "down emoji-container"
+                        }
+                      >
                         <EmojiPicker
                           onEmojiClick={(e) => onEmojiClick(e, "reply")}
                         />
diff --git a/frontend/src/components/css/Messages.scss b/frontend/src/components/css/Messages.scss
index 55fcdf197..a07473a40 100644
--- a/frontend/src/components/css/Messages.scss
+++ b/frontend/src/components/css/Messages.scss
@@ -251,10 +251,15 @@
 }
 .emoji-container {
   position: absolute;
-  bottom: 50px;
   right: 30px;
   max-width: 450px;
 }
+.emoji-container.down {
+  top: 50px;
+}
+.emoji-container.up {
+  bottom: 50px;
+}
 .conversation-footer {
   .emoji-icon {
     height: 20px;