diff --git a/frontend/src/components/GroupMessageChatArea.js b/frontend/src/components/GroupMessageChatArea.js
index 959f8e31..0d891e10 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/AdminAccountData.scss b/frontend/src/components/css/AdminAccountData.scss
index 443d972e..991f43d6 100644
--- a/frontend/src/components/css/AdminAccountData.scss
+++ b/frontend/src/components/css/AdminAccountData.scss
@@ -137,5 +137,3 @@
     width: 100% !important;
   }
 }
-
-
diff --git a/frontend/src/components/css/Appointments.scss b/frontend/src/components/css/Appointments.scss
index 7e4a93b6..e01d6511 100644
--- a/frontend/src/components/css/Appointments.scss
+++ b/frontend/src/components/css/Appointments.scss
@@ -291,7 +291,7 @@
   flex-direction: row;
   margin-bottom: 5%;
   margin-left: 1%;
-  height: 100%
+  height: 100%;
 }
 
 .appointment-card {
diff --git a/frontend/src/components/css/Home.scss b/frontend/src/components/css/Home.scss
index 455ab650..656f518c 100644
--- a/frontend/src/components/css/Home.scss
+++ b/frontend/src/components/css/Home.scss
@@ -141,8 +141,8 @@
 
 @media (max-width: 600px) {
   .btn-d {
-  width: 100%;
-  margin: 10px 0;
+    width: 100%;
+    margin: 10px 0;
   }
   .btn-dc {
     flex-direction: column;
diff --git a/frontend/src/components/css/Messages.scss b/frontend/src/components/css/Messages.scss
index 55fcdf19..b2cba649 100644
--- a/frontend/src/components/css/Messages.scss
+++ b/frontend/src/components/css/Messages.scss
@@ -128,7 +128,7 @@
   min-height: calc(100vh - #{($nav-header-height + $footer-gap)} - 90px);
 }
 .group-conversation-content {
-  max-height: calc(100vh - #{($nav-header-height + $footer-gap)});
+  max-height: calc(100vh - #{($nav-header-height + $footer-gap)} - 40px);
 }
 
 .no-messages {
@@ -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;
diff --git a/frontend/src/components/css/Profile.scss b/frontend/src/components/css/Profile.scss
index 1909612e..022e8fa1 100644
--- a/frontend/src/components/css/Profile.scss
+++ b/frontend/src/components/css/Profile.scss
@@ -37,7 +37,7 @@
   }
 
   .mentor-profile-heading {
-    margin: 0
+    margin: 0;
   }
 }