diff --git a/frontend/src/pages/app/resources/css/_reactions.scss b/frontend/src/pages/app/resources/css/_reactions.scss
index aa97cef..cee538f 100644
--- a/frontend/src/pages/app/resources/css/_reactions.scss
+++ b/frontend/src/pages/app/resources/css/_reactions.scss
@@ -9,6 +9,7 @@
     margin-top: 8px;
     margin-left: 10px;
     margin-right: 10px;
+    animation: messageReactionsFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .reaction-button {
@@ -221,6 +222,18 @@
 }
 
 // Animation for reactions appearing/disappearing
+@keyframes messageReactionsFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 @keyframes reactionFadeIn {
     from {
         opacity: 0;
diff --git a/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx b/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx
index f086ac4..808a82e 100644
--- a/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx
+++ b/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx
@@ -12,21 +12,32 @@ export function MessageReactions({ reactions, onReactionClick, messageId }: Mess
     const { user } = useAppState();
     const [visibleReactions, setVisibleReactions] = useState<Reaction[]>([]);
     const [animatingReactions, setAnimatingReactions] = useState<Set<string>>(new Set());
+    const [isVisible, setIsVisible] = useState(false);
 
     // Handle reactions with animation
     useEffect(() => {
         if (!reactions || reactions.length === 0) {
-            // Animate out all visible reactions
-            visibleReactions.forEach(reaction => {
-                setAnimatingReactions(prev => new Set(prev).add(reaction.emoji));
+            // If we have visible reactions, animate them out
+            if (visibleReactions.length > 0) {
+                visibleReactions.forEach(reaction => {
+                    setAnimatingReactions(prev => new Set(prev).add(reaction.emoji));
+                });
+                // After animation completes, hide the component
                 setTimeout(() => {
                     setVisibleReactions([]);
                     setAnimatingReactions(new Set());
+                    setIsVisible(false);
                 }, 200);
-            });
+            } else {
+                // No visible reactions, hide immediately
+                setIsVisible(false);
+            }
             return;
         }
 
+        // Show the component when we have reactions
+        setIsVisible(true);
+
         // Deduplicate reactions by emoji (safety measure)
         const uniqueReactions = reactions.reduce((acc, reaction) => {
             const existing = acc.find(r => r.emoji === reaction.emoji);
@@ -78,7 +89,8 @@ export function MessageReactions({ reactions, onReactionClick, messageId }: Mess
         });
     }, [reactions]);
 
-    if (!reactions || reactions.length === 0) {
+    // Don't render if not visible
+    if (!isVisible) {
         return null;
     }