diff --git a/package-lock.json b/package-lock.json
index 80239008..e2107f09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24967,7 +24967,7 @@
     },
     "packages/pkg.emoji.picker": {
       "name": "@xipkg/emojipicker",
-      "version": "1.0.9",
+      "version": "1.0.10",
       "license": "MIT",
       "dependencies": {
         "@xipkg/button": "^3.1.7",
diff --git a/packages/pkg.emoji.picker/EmojiCategory.tsx b/packages/pkg.emoji.picker/EmojiCategory.tsx
index 4ae34ef6..4a6e033c 100644
--- a/packages/pkg.emoji.picker/EmojiCategory.tsx
+++ b/packages/pkg.emoji.picker/EmojiCategory.tsx
@@ -3,7 +3,6 @@ import { Button } from '@xipkg/button';
 import { useVisibleRows, useIntersectionObserver } from './hooks';
 import { BUFFER_ROWS, ROW_HEIGHT, ROW_SIZE, categoryIntersections } from './constants';
 import { CategoryT } from './types';
-import { cn } from '@xipkg/utils';
 
 type EmojiCategoryPropsT = {
   isIntersectionEnabled?: boolean;
@@ -86,14 +85,9 @@ export const EmojiCategory = memo(
                 key={emoji.name + emoji.unicode}
                 title={`:${emoji.name}:`}
                 variant="ghost"
-                className={cn(
-                  'h-6 w-6 translate-y-4 rounded-[4px] p-1 opacity-0 transition-transform duration-300',
-                  'animate-fade-in hover:bg-gray-10 dark:hover:bg-gray-90',
-                )}
+                className="hover:bg-gray-10 dark:hover:bg-gray-90 h-6 w-6 rounded-sm p-1"
                 onClick={() => handleEmojiClick(emoji.unicode)}
                 style={{
-                  animationDelay: '10ms',
-                  animationFillMode: 'forwards',
                   fontFamily: 'Apple Color Emoji, Twemoji Mozilla, Noto Color Emoji, Android Emoji',
                 }}
               >
diff --git a/packages/pkg.emoji.picker/EmojiPicker.tsx b/packages/pkg.emoji.picker/EmojiPicker.tsx
index 4e690018..8db58e6c 100644
--- a/packages/pkg.emoji.picker/EmojiPicker.tsx
+++ b/packages/pkg.emoji.picker/EmojiPicker.tsx
@@ -115,7 +115,7 @@ export const EmojiPicker = ({ recentEmojis, onEmojiSelect }: EmojiPickerPropsT)
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="bg-gray-0 h-auto rounded-[4px] p-1 dark:bg-gray-100">
+        <Button variant="ghost" className="bg-gray-0 h-auto rounded-sm p-1 dark:bg-gray-100">
           <Emotions className="text-gray-80 dark:text-gray-0" />
         </Button>
       </DropdownMenuTrigger>
@@ -143,7 +143,7 @@ export const EmojiPicker = ({ recentEmojis, onEmojiSelect }: EmojiPickerPropsT)
                         />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent side="right" className="z-[99]">
+                    <TooltipContent side="right" className="z-99">
                       <p>{name}</p>
                     </TooltipContent>
                   </Tooltip>
diff --git a/packages/pkg.emoji.picker/package.json b/packages/pkg.emoji.picker/package.json
index f913478d..1a26722d 100644
--- a/packages/pkg.emoji.picker/package.json
+++ b/packages/pkg.emoji.picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xipkg/emojipicker",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",