diff --git a/components/comments/comment-composer.tsx b/components/comments/comment-composer.tsx
index 2a9eeb6..7c9d28b 100644
--- a/components/comments/comment-composer.tsx
+++ b/components/comments/comment-composer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useId, useRef, useState, type ClipboardEvent, type FormEvent } from "react";
+import { useEffect, useId, useRef, useState, type ClipboardEvent, type ComponentProps, type FormEvent } from "react";
 import dynamic from "next/dynamic";
 import { ImagePlusIcon, SmilePlusIcon, XIcon } from "lucide-react";
 import { toast } from "sonner";
@@ -15,7 +15,12 @@ import type { CommentImage, CommentItem } from "@/lib/comments/types";
 import { CommentImageView } from "./comment-image";
 import { COMMENT_ERRORS } from "./client";
 
-const EmojiPicker = dynamic(() => import("emoji-picker-react"), { ssr: false });
+const EmojiPicker = dynamic(async () => {
+  const { default: Picker, EmojiStyle } = await import("emoji-picker-react");
+  return function NativeEmojiPicker(props: ComponentProps<typeof Picker>) {
+    return <Picker {...props} emojiStyle={EmojiStyle.NATIVE} />;
+  };
+}, { ssr: false });
 
 function FilePreview({ file }: { file: File }) {
   const imageRef = useRef<HTMLImageElement>(null);