diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx
index 91cdb952d8..b32d3a40ff 100644
--- a/packages/ui/components/avatar/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -16,48 +16,45 @@ export type AvatarGroupProps = {
 };
 
 export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
-  const avatars = props.items.slice(0, 4);
   const LENGTH = props.items.length;
   const truncateAfter = props.truncateAfter || 4;
+  /**
+   * First, filter all the avatars object that have image
+   * Then, slice it until before `truncateAfter` index
+   */
+  const displayedAvatars = props.items.filter((avatar) => avatar.image).slice(0, truncateAfter);
+  const numTruncatedAvatars = LENGTH - displayedAvatars.length;
 
   return (
     <ul className={classNames("flex items-center", props.className)}>
-      {avatars.map((item, enumerator) => {
-        if (item.image != null) {
-          if (LENGTH > truncateAfter && enumerator === truncateAfter - 1) {
-            return (
-              <li key={enumerator} className="relative -mr-[4px] inline-block ">
-                <div className="relative">
-                  <div className="h-90 relative min-w-full scale-105 transform border-gray-200 ">
-                    <Avatar className="" imageSrc={item.image} alt={item.alt || ""} size={props.size} />
-                  </div>
-                </div>
-                <div
-                  className={classNames(
-                    "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white",
-                    props.size === "sm" ? "text-base" : "text-2xl"
-                  )}>
-                  <span>+{LENGTH - truncateAfter - 1}</span>
-                </div>
-              </li>
-            );
-          }
-          // Always display the first Four items items
-          return (
-            <li key={enumerator} className="-mr-[4px] inline-block">
-              <Avatar
-                className="border-gray-200"
-                imageSrc={item.image}
-                title={item.title}
-                alt={item.alt || ""}
-                accepted={props.accepted}
-                size={props.size}
-                href={item.href}
-              />
-            </li>
-          );
-        }
-      })}
+      {displayedAvatars.map((item, idx) => (
+        <li key={idx} className="-mr-[4px] inline-block">
+          <Avatar
+            className="border-gray-200"
+            imageSrc={item.image}
+            title={item.title}
+            alt={item.alt || ""}
+            accepted={props.accepted}
+            size={props.size}
+            href={item.href}
+          />
+        </li>
+      ))}
+      {numTruncatedAvatars > 0 && (
+        <li
+          className={classNames(
+            "bg-darkgray-300 relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
+            props.size === "sm" ? "min-w-6 h-6" : "min-w-16 h-16"
+          )}>
+          <span
+            className={classNames(
+              "m-auto px-1 text-center text-white",
+              props.size === "sm" ? "text-[12px]" : "text-2xl"
+            )}>
+            +{numTruncatedAvatars}
+          </span>
+        </li>
+      )}
     </ul>
   );
 };