diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index 5a2499421..e5876b69e 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.tsx
@@ -1,12 +1,12 @@
 import { SmileOutlined } from '@ant-design/icons';
-import { Button, Input } from 'antd';
-import React, { useState, useMemo } from 'react';
+import { Button, Popover } from 'antd';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Transforms, createEditor, Node, BaseEditor, Text } from 'slate';
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
+import EmojiPicker from './EmojiPicker';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom } from '../../stores/ClientConfigStore';
-import { getCaretPosition, convertToText, convertOnPaste } from '../chat';
 import { MessageType } from '../../../interfaces/socket-events';
 import s from './ChatTextField.module.scss';
 
@@ -71,7 +71,7 @@ const Element = props => {
 
 const serialize = node => {
   if (Text.isText(node)) {
-    let string = node.text; // escapeHtml(node.text);
+    let string = node.text;
     if (node.bold) {
       string = `<strong>${string}</strong>`;
     }
@@ -115,6 +115,19 @@ export default function ChatTextField(props: Props) {
 
   const handleChange = e => {};
 
+  const handleEmojiSelect = emoji => {
+    console.log(emoji);
+    if (!emoji.native) {
+      // Custom emoji
+      const { src } = emoji;
+      insertImage(editor, src);
+    } else {
+      // Native emoji
+      const { native } = emoji;
+      Transforms.insertText(editor, native);
+    }
+  };
+
   const onKeyDown = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -141,9 +154,18 @@ export default function ChatTextField(props: Props) {
       <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
         <SmileOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
       </Button>
+
       <Button size={size} type="primary" onClick={sendMessage}>
         Submit
       </Button>
+
+      <Popover
+        content={<EmojiPicker onEmojiSelect={handleEmojiSelect} />}
+        trigger="click"
+        onVisibleChange={visible => setShowEmojis(visible)}
+        visible={showEmojis}
+        placement="bottomLeft"
+      />
     </div>
   );
 }
diff --git a/web/components/chat/ChatTextField/EmojiPicker.tsx b/web/components/chat/ChatTextField/EmojiPicker.tsx
new file mode 100644
index 000000000..61fb1cfea
--- /dev/null
+++ b/web/components/chat/ChatTextField/EmojiPicker.tsx
@@ -0,0 +1,28 @@
+import data from '@emoji-mart/data';
+import { Picker } from 'emoji-mart';
+import React, { useRef, useEffect } from 'react';
+
+export default function EmojiPicker(props) {
+  const ref = useRef();
+
+  // TODO: Pull this custom emoji data in from the emoji API.
+  const custom = [
+    {
+      emojis: [
+        {
+          id: 'party_parrot',
+          name: 'Party Parrot',
+          keywords: ['dance', 'dancing'],
+          skins: [{ src: 'https://watch.owncast.online/img/emoji/bluntparrot.gif' }],
+        },
+      ],
+    },
+  ];
+
+  // useEffect(() => {
+  //   // eslint-disable-next-line no-new
+  //   new Picker({ ...props, data, custom, ref });
+  // }, []);
+
+  return <div>emoji picker goes here</div>;
+}
diff --git a/web/package-lock.json b/web/package-lock.json
index 769ee8586..d30f72cbe 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/icons": "4.7.0",
+        "@emoji-mart/data": "^1.0.1",
         "@storybook/react": "^6.4.22",
         "antd": "4.18.9",
         "autoprefixer": "^10.4.4",
@@ -16,6 +17,7 @@
         "chartkick": "4.1.1",
         "classnames": "2.3.1",
         "date-fns": "2.28.0",
+        "emoji-mart": "^5.0.0",
         "lodash": "4.17.21",
         "markdown-it": "12.3.2",
         "next": "^12.1.5",
@@ -2069,6 +2071,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emoji-mart/data": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.0.1.tgz",
+      "integrity": "sha512-5X6DbIdyFvSFMfGdPkPd/yxQmtfMptZg5UUSL+afb39SdbPvobJY7VhzGM0IekxjszW3ygxZ2X5mVhy5AqF5vQ=="
+    },
     "node_modules/@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -15761,6 +15768,11 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-mart": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.0.0.tgz",
+      "integrity": "sha512-4O75LxV/RPOrtC9+0qhHhfPgJgW/Kwc4zv15h190liC3vJ/5RVibIrnPlDZ0xqYx0bPVOy3W/QcDTZY+jq1qOw=="
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -33137,6 +33149,11 @@
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
     },
+    "@emoji-mart/data": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.0.1.tgz",
+      "integrity": "sha512-5X6DbIdyFvSFMfGdPkPd/yxQmtfMptZg5UUSL+afb39SdbPvobJY7VhzGM0IekxjszW3ygxZ2X5mVhy5AqF5vQ=="
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -43707,6 +43724,11 @@
       "dev": true,
       "peer": true
     },
+    "emoji-mart": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.0.0.tgz",
+      "integrity": "sha512-4O75LxV/RPOrtC9+0qhHhfPgJgW/Kwc4zv15h190liC3vJ/5RVibIrnPlDZ0xqYx0bPVOy3W/QcDTZY+jq1qOw=="
+    },
     "emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
diff --git a/web/package.json b/web/package.json
index 94b782a17..9ffa344df 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.7.0",
+    "@emoji-mart/data": "^1.0.1",
     "@storybook/react": "^6.4.22",
     "antd": "4.18.9",
     "autoprefixer": "^10.4.4",
@@ -19,6 +20,7 @@
     "chartkick": "4.1.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
+    "emoji-mart": "^5.0.0",
     "lodash": "4.17.21",
     "markdown-it": "12.3.2",
     "next": "^12.1.5",
diff --git a/web/stories/ChatTextField.stories.tsx b/web/stories/ChatTextField.stories.tsx
index 9a4880047..cb9d3d80a 100644
--- a/web/stories/ChatTextField.stories.tsx
+++ b/web/stories/ChatTextField.stories.tsx
@@ -32,7 +32,7 @@ export const Example = Template.bind({});
 export const LongerMessage = Template.bind({});
 LongerMessage.args = {
   value:
-    'Lorem ipsum dolor sit amet, <img src="https://watch.owncast.online/img/emoji/bluntparrot.gif" width="40px" /> consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    'Lorem ipsum dolor sit amet,  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 };
 
 LongerMessage.parameters = {