diff --git a/examples/apps/ai-collab/src/components/UserPresenceGroup.tsx b/examples/apps/ai-collab/src/components/UserPresenceGroup.tsx
index 37a5cd13927b..a10785621fa1 100644
--- a/examples/apps/ai-collab/src/components/UserPresenceGroup.tsx
+++ b/examples/apps/ai-collab/src/components/UserPresenceGroup.tsx
@@ -121,17 +121,28 @@ const UserPresenceGroup: React.FC<UserPresenceProps> = ({
 			{photoUrls.length === 0 ? (
 				<Avatar alt="User Photo" sx={{ width: 56, height: 56 }} />
 			) : (
-				photoUrls.map((photo, index) => (
-					<StyledBadge
-						key={index}
-						max={4}
-						overlap="circular"
-						anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-						variant="dot"
-					>
-						<Avatar alt="User Photo" src={photo} sx={{ width: 56, height: 56 }} />
-					</StyledBadge>
-				))
+				<>
+                    {photoUrls.slice(0, 4).map((photo, index) => (
+                        <StyledBadge
+                            key={index}
+                            overlap="circular"
+                            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+                            variant="dot"
+                        >
+                            <Avatar alt="User Photo" src={photo} sx={{ width: 56, height: 56 }} />
+                        </StyledBadge>
+                    ))}
+                    {photoUrls.length > 4 && (
+                        <Badge
+                            overlap="circular"
+                            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+                            badgeContent={`+${photoUrls.length - 4}`}
+                            color="primary"
+                        >
+                            <Avatar alt="More Users" sx={{ width: 56, height: 56 }} />
+                        </Badge>
+                    )}
+                </>
 			)}
 		</div>
 	);