diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index feb5531..e1b82a4 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,5 +1,5 @@
 import { QuestionMark } from "@mui/icons-material";
-import { Box, IconButton, Popper } from "@mui/material";
+import { Box, ClickAwayListener, IconButton, Popper } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import EmojiPicker from "emoji-picker-react";
 import React from "react";
@@ -239,26 +239,29 @@
     const id = open ? 'simple-popover' : undefined
   
     return (
-      <Box>
-        <SquareButton
-          aria-describedby={id}
-          aria-label="select emoji"
-          Icon={EmojiIcon}
-          onClick={handleOpenEmojiPicker}
-        />
-        <Popper
-          id={id}
-          open={open}
-          anchorEl={anchorEl}
-          onClose={handleClose}
-        >
-          <EmojiPicker.default
-            onEmojiClick={onEmojiClick}
-            disableAutoFocus={true}
-            disableSkinTonePicker={true}
-            native
-          />
-        </Popper>
-      </Box>
+        <ClickAwayListener onClickAway={handleClose}>
+            <Box>
+                <SquareButton
+                    aria-describedby={id}
+                    aria-label="select emoji"
+                    Icon={EmojiIcon}
+                    onClick={handleOpenEmojiPicker}
+                />
+                <Popper
+                    id={id}
+                    open={open}
+                    anchorEl={anchorEl}
+                    onClose={handleClose}
+                >
+                    <EmojiPicker.default
+                        onEmojiClick={onEmojiClick}
+                        disableAutoFocus={true}
+                        disableSkinTonePicker={true}
+                        native
+                    />
+                </Popper>
+            </Box>
+        </ClickAwayListener>
     )
-  }
+}
+