diff --git a/frontend/syntaxmeets/src/components/SyntaxChat/ParticipantsList.js b/frontend/syntaxmeets/src/components/SyntaxChat/ParticipantsList.js
index 54588a8cc..f35584e60 100644
--- a/frontend/syntaxmeets/src/components/SyntaxChat/ParticipantsList.js
+++ b/frontend/syntaxmeets/src/components/SyntaxChat/ParticipantsList.js
@@ -12,6 +12,7 @@ import {
   List,
 } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
+import CloseSharpIcon from '@material-ui/icons/CloseSharp';
 
 const useStyles = makeStyles({
   list: {
@@ -78,6 +79,7 @@ function ParticipantsList(props) {
         open={openList}
         onClose={() => setOpenList(false)}
       >
+        <CloseSharpIcon style={{padding: "5px", fontSize: "3em", cursor: "pointer"}} onClick={() => setOpenList(false)} />
         <div
           className={classes.list}
           style={{
diff --git a/frontend/syntaxmeets/src/components/SyntaxChat/SyntaxChat.js b/frontend/syntaxmeets/src/components/SyntaxChat/SyntaxChat.js
index 41727ada5..942747774 100644
--- a/frontend/syntaxmeets/src/components/SyntaxChat/SyntaxChat.js
+++ b/frontend/syntaxmeets/src/components/SyntaxChat/SyntaxChat.js
@@ -12,6 +12,7 @@ import {
 import SendIcon from "@material-ui/icons/Send";
 import ForumIcon from "@material-ui/icons/Forum";
 import { ChatMessage } from "./ChatMessage";
+import CloseSharpIcon from '@material-ui/icons/CloseSharp';
 
 const useStyles = makeStyles({
   list: {
@@ -98,6 +99,7 @@ const SyntaxChat = (props) => {
         Chat Box
       </Button>
       <Drawer anchor={"right"} open={state} onClose={toggleDrawer(false)}>
+      <CloseSharpIcon style={{padding: "5px", fontSize: "3em", cursor: "pointer"}} onClick={toggleDrawer(false)} />
         <div
           className={classes.list}
           style={{ display: "flex", flexDirection: "column" }}