diff --git a/src/components/room/RoomMessageBubble.tsx b/src/components/room/RoomMessageBubble.tsx
index 9f64c7a..cd8736c 100644
--- a/src/components/room/RoomMessageBubble.tsx
+++ b/src/components/room/RoomMessageBubble.tsx
@@ -6,9 +6,10 @@ import { parseFunctionCalls, type FunctionCall } from '@/lib/functionCallParser'
 import { cn } from '@/lib/utils';
 import { AlertCircle, AlertTriangle, ChevronDown, ChevronUp, Copy, Edit2, Reply as ReplyIcon, Trash2, History, MoreHorizontal, MessageSquare } from 'lucide-react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { SmilePlus } from 'lucide-react';
 import { useUser, useRoom } from '@/contexts';
-import { memo, useMemo, useState, useCallback, useRef } from 'react';
+import { memo, useMemo, useCallback, useRef } from 'react';
 import { toast } from 'sonner';
 import { ModelIcon } from './icon-match';
 import { FunctionCallBadge } from './FunctionCallBadge';
@@ -79,10 +80,7 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
   const [isEditing, setIsEditing] = useState(false);
   const [editContent, setEditContent] = useState(message.content);
   const [isSavingEdit, setIsSavingEdit] = useState(false);
-  const [showReactionPicker, setShowReactionPicker] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-  const reactionButtonRef = useRef<HTMLButtonElement>(null);
-  const [reactionPickerPosition, setReactionPickerPosition] = useState<{ top: number; left: number } | null>(null);
 
   const isAi = ['ai', 'system', 'tool'].includes(message.sender_type);
   const isSystem = message.sender_type === 'system';
@@ -121,20 +119,8 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
     } catch (err) {
       console.warn('[RoomMessage] Failed to update reaction:', err);
     }
-    setShowReactionPicker(false);
   }, [roomId, message.id, message.reactions, wsClient]);
 
-  const handleOpenReactionPicker = useCallback(() => {
-    if (reactionButtonRef.current) {
-      const rect = reactionButtonRef.current.getBoundingClientRect();
-      setReactionPickerPosition({
-        top: rect.bottom + 8, // 8px below the button
-        left: rect.left + rect.width / 2,
-      });
-    }
-    setShowReactionPicker(true);
-  }, []);
-
   const functionCalls = useMemo<FunctionCall[]>(
     () =>
       message.content_type === 'text' || message.content_type === 'Text'
@@ -408,16 +394,37 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
       {!isEditing && !isRevoked && !isPending && (
         <div className="flex items-start gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
           {/* Add reaction */}
-          <Button
-            variant="ghost"
-            size="sm"
-            ref={reactionButtonRef}
-            className="size-7 p-0 text-muted-foreground hover:bg-accent hover:text-foreground"
-            onClick={handleOpenReactionPicker}
-            title="Add reaction"
-          >
-            <SmilePlus className="size-3.5" />
-          </Button>
+          <Popover>
+            <PopoverTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="size-7 p-0 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  title="Add reaction"
+                >
+                  <SmilePlus className="size-3.5" />
+                </Button>
+              }
+            />
+            <PopoverContent className="w-auto p-2" align="start" sideOffset={4}>
+              <p className="mb-2 text-xs font-medium text-muted-foreground">Select emoji</p>
+              <div className="grid grid-cols-8 gap-1">
+                {COMMON_EMOJIS.map((emoji) => (
+                  <Button
+                    key={emoji}
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleReaction(emoji)}
+                    className="size-7 p-0 text-base hover:bg-accent"
+                    title={emoji}
+                  >
+                    {emoji}
+                  </Button>
+                ))}
+              </div>
+            </PopoverContent>
+          </Popover>
           {/* Reply */}
           {onReply && (
             <Button
@@ -493,28 +500,6 @@ export const RoomMessageBubble = memo(function RoomMessageBubble({
         </div>
       )}
 
-      {/* Emoji picker overlay - positioned relative to the reaction button */}
-      {showReactionPicker && (
-        <>
-          <div className="fixed inset-0 z-40" onClick={() => setShowReactionPicker(false)} />
-          <div
-            className="fixed z-50"
-            style={{
-              top: reactionPickerPosition?.top ?? '50%',
-              left: reactionPickerPosition?.left ?? '50%',
-              transform: reactionPickerPosition ? 'translateX(-50%)' : 'translate(-50%, -50%)',
-            }}
-          >
-            <div className="rounded-lg border border-border bg-popover p-3 shadow-xl">
-              <p className="mb-2 text-xs font-medium text-muted-foreground">Select emoji</p>
-              <EmojiPicker onEmojiSelect={(emoji) => {
-                handleReaction(emoji);
-                setShowReactionPicker(false);
-              }} />
-            </div>
-          </div>
-        </>
-      )}
     </div>
   );
 });