diff --git a/client/package.json b/client/package.json
index 26e650e..df27980 100644
--- a/client/package.json
+++ b/client/package.json
@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "emoji-picker-react": "^3.4.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-emoji-render": "^1.2.4",
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 5270e9a..6269e3b 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,51 +1,90 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles';
-import { IconButton, InputBase, Paper } from '@material-ui/core'
-import SendIcon from '@material-ui/icons/Send';
+import { makeStyles } from '@material-ui/core/styles'
+import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
+import SendIcon from '@material-ui/icons/Send'
+import EmojiIcon from '@material-ui/icons/EmojiEmotionsRounded'
+import EmojiPicker from 'emoji-picker-react'
 
 const useStyles = makeStyles((theme) => ({
-    root: {
-      margin: 16,
-      padding: '2px 4px',
-      display: 'flex',
-      alignItems: 'center',
-      borderRadius: 8
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1,
-    },
-    iconButton: {
-      padding: 10,
-    },
-    divider: {
-      height: 28,
-      margin: 4,
-    },
-  }));
+  root: {
+    margin: 16,
+    padding: '2px 4px',
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1,
+  },
+  iconButton: {
+    padding: 10,
+  },
+  divider: {
+    height: 28,
+    margin: 4,
+  },
+}));
 
-  export default function SendMessageForm(props) {
-    const classes = useStyles();
+export default function SendMessageForm(props) {
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [currentMessage, setCurrentMessage] = React.useState("")
 
-    const handleSubmit = e => {
-        e.preventDefault()
-    }
+  const handleOpenEmojiPicker = e => {
+    setAnchorEl(anchorEl ? null : e.currentTarget)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+  const handleSubmit = e => {
+    e.preventDefault()
+  }
+  const handleInputChange = (event) => {
+    setCurrentMessage(event.target.value);
+  };
+  const onEmojiClick = (e, emojiObject) => {
+    console.log(emojiObject.emoji)
+    setCurrentMessage(currentMessage + emojiObject.emoji)
+    handleClose()
+  }
+  const open = Boolean(anchorEl)
+  const id = open ? 'simple-popover' : undefined
 
-    return (
-        <div className="send-message-form">
-        <Paper component="form"
-            onSubmit={handleSubmit}
-            className="send-message-card"
-            className={classes.root}>
-            <InputBase
-                className={classes.input}
-                placeholder="Write something nice"
-                height="35"
-            />
-            <IconButton type="submit" className={classes.iconButton} aria-label="search">
-                <SendIcon />
-            </IconButton>
-        </Paper>
-        </div>
-    )
+  return (
+    <div className="send-message-form">
+      <Paper component="form"
+        onSubmit={handleSubmit}
+        className="send-message-card"
+        className={classes.root}>
+        <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
+          <EmojiIcon />
+        </IconButton>
+        <Popper
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+        >
+          <EmojiPicker
+            onEmojiClick={onEmojiClick}
+            disableAutoFocus={true}
+            disableSkinTonePicker={true}
+            native
+          />
+        </Popper>
+
+        <InputBase
+          className={classes.input}
+          placeholder="Write something nice"
+          height="35"
+          value={currentMessage}
+          onChange={handleInputChange}
+        />
+        <IconButton type="submit" className={classes.iconButton} aria-label="search">
+          <SendIcon />
+        </IconButton>
+      </Paper>
+    </div>
+  )
 }