diff --git a/package.json b/package.json
index 38a9390eb0..05416884f9 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,6 @@
   },
   "dependencies": {
     "@clerk/nextjs": "4.22.0",
-    "@emoji-mart/data": "1.1.2",
-    "@emoji-mart/react": "1.1.1",
     "@floating-ui/react-dom": "2.0.1",
     "@mx-space/api-client": "1.4.3",
     "@radix-ui/react-dialog": "1.0.4",
@@ -54,6 +52,7 @@
     "daisyui": "3.2.1",
     "dayjs": "1.11.9",
     "emoji-mart": "5.5.2",
+    "emoji-picker-react": "4.4.10",
     "foxact": "0.2.16",
     "framer-motion": "^10.13.0",
     "idb-keyval": "6.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aafdb04d5c..c019c5a738 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,6 @@ dependencies:
   '@clerk/nextjs':
     specifier: 4.22.0
     version: 4.22.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0)
-  '@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)
   '@floating-ui/react-dom':
     specifier: 2.0.1
     version: 2.0.1(react-dom@18.2.0)(react@18.2.0)
@@ -59,6 +53,9 @@ dependencies:
   emoji-mart:
     specifier: 5.5.2
     version: 5.5.2
+  emoji-picker-react:
+    specifier: 4.4.10
+    version: 4.4.10(react@18.2.0)
   foxact:
     specifier: 0.2.16
     version: 0.2.16(react@18.2.0)
@@ -1122,20 +1119,6 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /@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/is-prop-valid@0.8.8:
     resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
     requiresBuild: true
@@ -3914,6 +3897,16 @@ packages:
     resolution: {integrity: sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==}
     dev: false
 
+  /emoji-picker-react@4.4.10(react@18.2.0):
+    resolution: {integrity: sha512-/5o57w8BKiCHklyqfYCeUlm00R9tdm2ZmJd0p6Q3/Ul7E7eMh+/FduuRFn3UVQCl5F6i4kOdREMz7EJ7YI1vMg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      clsx: 1.2.1
+      react: 18.2.0
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
diff --git a/src/components/widgets/shared/EmojiPicker.tsx b/src/components/widgets/shared/EmojiPicker.tsx
index fa475c04e8..d3172ff174 100644
--- a/src/components/widgets/shared/EmojiPicker.tsx
+++ b/src/components/widgets/shared/EmojiPicker.tsx
@@ -1,50 +1,17 @@
-import { useQuery } from '@tanstack/react-query'
-import { memo, useCallback } from 'react'
+import EmojiPicker$, { EmojiStyle } from 'emoji-picker-react'
+import { memo } from 'react'
 import type { FC } from 'react'
 
-import { Loading } from '~/components/ui/loading'
-
 export const EmojiPicker: FC<{
   onEmojiSelect: (emoji: string) => void
 }> = memo(({ onEmojiSelect }) => {
-  const { data, isLoading } = useQuery({
-    queryKey: ['emoji-data'],
-    queryFn: () =>
-      fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data', {
-        next: {
-          revalidate: 60 * 60 * 24 * 7,
-        },
-      }).then((response) => response.json()),
-
-    staleTime: Number.POSITIVE_INFINITY,
-  })
-  const handleSelect = useCallback((emoji: any) => {
-    return onEmojiSelect(emoji.native)
-  }, [])
-
-  const handleDivRef = (divEl: HTMLDivElement) => {
-    import('emoji-mart').then(
-      (m) =>
-        new m.Picker({
-          ref: {
-            current: divEl,
-          },
-          data,
-          onEmojiSelect: handleSelect,
-          maxFrequentRows: 0,
-        }),
-    )
-  }
-
-  if (isLoading)
-    return (
-      <Loading className="flex h-[435px] w-[352px] rounded-md bg-slate-100 center dark:bg-neutral-800" />
-    )
-
   return (
-    <div className="w-[352px]">
-      <div ref={handleDivRef} />
-    </div>
+    <EmojiPicker$
+      onEmojiClick={(e) => {
+        onEmojiSelect(e.emoji)
+      }}
+      emojiStyle={EmojiStyle.NATIVE}
+    />
   )
 })
 EmojiPicker.displayName = 'EmojiPicker'