diff --git a/src/components/game/animations/CommunityAnimation.tsx b/src/components/game/animations/CommunityAnimation.tsx
index 4aa2002..d3aab66 100644
--- a/src/components/game/animations/CommunityAnimation.tsx
+++ b/src/components/game/animations/CommunityAnimation.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import { motion } from 'framer-motion';
 
 export const CommunityAnimation = ({ className = '' }: { className?: string }) => {
-  // Create multiple community groups with members
+  // Create multiple community groups with members, now using percentages for better spacing
   const groups = Array.from({ length: 3 }, (_, i) => ({
-    x: 25 + i * 25, // Spread groups horizontally
+    x: 20 + i * 30, // Better horizontal distribution (20%, 50%, 80%)
     y: 50, // Center vertically
     members: Array.from({ length: 8 }, (_, j) => ({
       id: i * 8 + j,
-      initialX: Math.random() * 100,
-      initialY: Math.random() * 100,
+      // Distribute initial positions across the full container
+      initialX: Math.random() * 90 + 5, // 5-95% to keep within bounds
+      initialY: Math.random() * 90 + 5, // 5-95% to keep within bounds
     }))
   }));
 
@@ -21,36 +22,56 @@ export const CommunityAnimation = ({ className = '' }: { className?: string }) =
           {group.members.map((member) => (
             <motion.div
               key={member.id}
-              className="absolute w-3 h-3 bg-yellow-500 rounded-full"
+              className="absolute w-2 h-2 bg-yellow-500 rounded-full"
               initial={{
                 x: `${member.initialX}%`,
                 y: `${member.initialY}%`,
                 opacity: 0,
+                scale: 0.5,
               }}
               animate={{
                 x: `${group.x}%`,
                 y: `${group.y}%`,
                 opacity: 1,
+                scale: 1,
               }}
               transition={{
                 duration: 2,
-                delay: member.id * 0.2,
+                delay: member.id * 0.1, // Reduced delay for faster animation
                 ease: "easeOut",
               }}
+              style={{
+                position: 'absolute',
+                transform: 'translate(-50%, -50%)', // Center the dot
+              }}
             />
           ))}
           
-          {/* Community boundary circles */}
+          {/* Community boundary circles with improved sizing and positioning */}
           <motion.div
-            className="absolute w-20 h-20 rounded-full border-2 border-yellow-500/30"
+            className="absolute rounded-full border-2 border-yellow-500/30"
             style={{
+              width: '25%', // Relative sizing
+              height: '60%', // Taller to accommodate members
               x: `${group.x}%`,
               y: `${group.y}%`,
               transform: 'translate(-50%, -50%)',
             }}
-            initial={{ scale: 0, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            transition={{ delay: 1.5, duration: 1 }}
+            initial={{ 
+              scale: 0, 
+              opacity: 0,
+              rotate: -180,
+            }}
+            animate={{ 
+              scale: 1, 
+              opacity: 1,
+              rotate: 0,
+            }}
+            transition={{ 
+              delay: 1.5, 
+              duration: 1,
+              ease: "easeOut",
+            }}
           />
         </React.Fragment>
       ))}