diff --git a/client/package.json b/client/package.json
index 2fd75cd4..a953f82e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,9 +12,12 @@
     "env": "echo $NODE_ENV"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "axios": "^1.4.0",
+    "emoji-mart": "^5.5.2",
     "framer-motion": "^10.16.1",
     "immer": "^10.0.2",
     "react": "^18.2.0",
diff --git a/client/src/components/molecules/ChatInput.tsx b/client/src/components/molecules/ChatInput.tsx
index f721aa5c..2d44d566 100644
--- a/client/src/components/molecules/ChatInput.tsx
+++ b/client/src/components/molecules/ChatInput.tsx
@@ -1,5 +1,7 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { css } from "@emotion/react";
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
 
 import { EmoticonIcon, SendIcon } from "@/assets";
 import { Divider, TextAreaAutosize } from "@/components/atoms";
@@ -51,6 +53,12 @@ interface Props {
 }
 
 export const ChatInput: React.FC<Props> = ({ send }) => {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const absolutePosition = css`
+    position: absolute;
+    transform: translate(0%, -100%);
+  `;
+
   const { input, setValue } = useInput();
 
   /** TODO: disable send button based on `validated` */
@@ -87,7 +95,30 @@ export const ChatInput: React.FC<Props> = ({ send }) => {
           />
           <Divider dir="vertical" />
         </div>
-        <EmoticonIcon />
+        <EmoticonIcon
+          onClick={e => {
+            e.stopPropagation();
+            setPickerOpen(p => !p);
+          }}
+        />
+        {pickerOpen && (
+          <div css={absolutePosition}>
+            <Picker
+              data={data}
+              onEmojiSelect={(emoji: { native: string }) =>
+                setValue(s => s + emoji.native)
+              }
+              onClickOutside={() => setPickerOpen(false)}
+              // emojiButtonRadius="50%"
+              // emojiButtonSize={24}
+              // emojiSize={16}
+              // dynamicWidth={true}
+              isNative
+              previewPosition="none"
+              skinTonePosition="none"
+            />
+          </div>
+        )}
         <SendIcon onClick={sendCurrent} />
         {/* TODO: Replace with button / add hover, actove effect */}
       </form>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c02c172d..dcf8290b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,12 @@ importers:
 
   client:
     dependencies:
+      '@emoji-mart/data':
+        specifier: ^1.1.2
+        version: 1.1.2
+      '@emoji-mart/react':
+        specifier: ^1.1.1
+        version: 1.1.1(emoji-mart@5.5.2)(react@18.2.0)
       '@emotion/react':
         specifier: ^11.11.1
         version: 11.11.1(@types/react@18.0.26)(react@18.2.0)
@@ -71,6 +77,9 @@ importers:
       axios:
         specifier: ^1.4.0
         version: 1.4.0
+      emoji-mart:
+        specifier: ^5.5.2
+        version: 5.5.2
       framer-motion:
         specifier: ^10.16.1
         version: 10.16.1(react-dom@18.2.0)(react@18.2.0)
@@ -116,7 +125,7 @@ importers:
         version: 10.4.13(postcss@8.4.29)
       vite:
         specifier: ^4.0.0
-        version: 4.0.0(@types/node@20.4.7)
+        version: 4.0.0
       vite-plugin-svgr:
         specifier: ^3.2.0
         version: 3.2.0(vite@4.0.0)
@@ -607,6 +616,20 @@ packages:
       kuler: 2.0.0
     dev: false
 
+  /@emoji-mart/data@1.1.2:
+    resolution: {integrity: sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==}
+    dev: false
+
+  /@emoji-mart/react@1.1.1(emoji-mart@5.5.2)(react@18.2.0):
+    resolution: {integrity: sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==}
+    peerDependencies:
+      emoji-mart: ^5.2
+      react: ^16.8 || ^17 || ^18
+    dependencies:
+      emoji-mart: 5.5.2
+      react: 18.2.0
+    dev: false
+
   /@emotion/babel-plugin@11.11.0:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
@@ -1565,7 +1588,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.11)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.0.0(@types/node@20.4.7)
+      vite: 4.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2244,17 +2267,6 @@ packages:
       ms: 2.0.0
     dev: false
 
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: true
-
   /debug@3.2.7(supports-color@5.5.0):
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -2394,6 +2406,10 @@ packages:
     resolution: {integrity: sha512-xqeGw3Gr6o3uyHy/yKjdnDQHY2RQvXcGC2cfHjccK1IGkH6cX1WQBN8EeC/YpwPhGkBaikDTecJ8+ssxSVRQlw==}
     dev: true
 
+  /emoji-mart@5.5.2:
+    resolution: {integrity: sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==}
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -5543,13 +5559,13 @@ packages:
       '@rollup/pluginutils': 5.0.3
       '@svgr/core': 7.0.0
       '@svgr/plugin-jsx': 7.0.0
-      vite: 4.0.0(@types/node@20.4.7)
+      vite: 4.0.0
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /vite@4.0.0(@types/node@20.4.7):
+  /vite@4.0.0:
     resolution: {integrity: sha512-ynad+4kYs8Jcnn8J7SacS9vAbk7eMy0xWg6E7bAhS1s79TK+D7tVFGXVZ55S7RNLRROU1rxoKlvZ/qjaB41DGA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -5574,7 +5590,6 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.4.7
       esbuild: 0.16.17
       postcss: 8.4.28
       resolve: 1.22.4