diff --git a/examples/app-crm/src/components/company/card-view.tsx b/examples/app-crm/src/components/company/card-view.tsx
index 81c435761d18..f5a84b65d1b5 100644
--- a/examples/app-crm/src/components/company/card-view.tsx
+++ b/examples/app-crm/src/components/company/card-view.tsx
@@ -1,6 +1,5 @@
 import { FC } from "react";
 import {
-    Avatar,
     Button,
     Card,
     Col,
@@ -16,6 +15,7 @@ import { Text, CustomAvatar } from "..";
 import { currencyNumber } from "../../utilities";
 import { Company } from "../../interfaces/graphql";
 import { useDelete, useNavigation } from "@refinedev/core";
+import { CustomAvatarGroup } from "../custom-avatar-group";
 
 type Props = {
     loading?: boolean;
@@ -36,6 +36,15 @@ export const CompaniesCardView: FC<Props> = ({ companies, pagination }) => {
         <>
             <Row wrap gutter={[32, 32]}>
                 {companies.map((company) => {
+                    const relatedContactAvatars = company.contacts?.nodes?.map(
+                        (contact) => {
+                            return {
+                                name: contact.name,
+                                src: contact.avatarUrl as string | undefined,
+                            };
+                        },
+                    );
+
                     return (
                         <Col
                             key={company.id}
@@ -56,45 +65,36 @@ export const CompaniesCardView: FC<Props> = ({ companies, pagination }) => {
                                             height: "60px",
                                             display: "flex",
                                             justifyContent: "space-between",
-                                            alignItems: "center",
+                                            alignItems: "flex-start",
                                             padding: "0 16px",
                                         }}
                                     >
-                                        <Space
-                                            direction="vertical"
-                                            align="start"
+                                        <div
+                                            style={{
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: "flex-start",
+                                                gap: "6px",
+                                            }}
                                         >
                                             <Text size="xs">
                                                 Related contacts
                                             </Text>
-                                            <Avatar.Group
-                                                maxCount={3}
-                                                size="small"
-                                            >
-                                                {company.contacts?.nodes?.map(
-                                                    (contact) => {
-                                                        return (
-                                                            <Tooltip
-                                                                title={
-                                                                    contact.name
-                                                                }
-                                                                key={contact.id}
-                                                            >
-                                                                <CustomAvatar
-                                                                    name={
-                                                                        contact.name
-                                                                    }
-                                                                    src={
-                                                                        contact.avatarUrl
-                                                                    }
-                                                                />
-                                                            </Tooltip>
-                                                        );
-                                                    },
-                                                )}
-                                            </Avatar.Group>
-                                        </Space>
-                                        <Space direction="vertical" align="end">
+                                            <CustomAvatarGroup
+                                                size={"small"}
+                                                overlap
+                                                gap="4px"
+                                                avatars={relatedContactAvatars}
+                                            />
+                                        </div>
+                                        <div
+                                            style={{
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: "flex-end",
+                                                gap: "6px",
+                                            }}
+                                        >
                                             <Text size="xs">Sales owner</Text>
                                             <Tooltip
                                                 title={company.salesOwner?.name}
@@ -110,7 +110,7 @@ export const CompaniesCardView: FC<Props> = ({ companies, pagination }) => {
                                                     }
                                                 />
                                             </Tooltip>
-                                        </Space>
+                                        </div>
                                     </div>,
                                 ]}
                             >
diff --git a/examples/app-crm/src/components/company/table-view.tsx b/examples/app-crm/src/components/company/table-view.tsx
index 5f566cb510ae..1acde44bc1af 100644
--- a/examples/app-crm/src/components/company/table-view.tsx
+++ b/examples/app-crm/src/components/company/table-view.tsx
@@ -3,16 +3,16 @@ import {
     DeleteButton,
     EditButton,
     FilterDropdown,
-    getDefaultSortOrder,
     useSelect,
 } from "@refinedev/antd";
 import { CrudFilters, CrudSorting, getDefaultFilter } from "@refinedev/core";
-import { Avatar, Input, Select, Space, Table, TableProps, Tooltip } from "antd";
+import { Input, Select, Space, Table, TableProps } from "antd";
 
 import { Text, CustomAvatar } from "..";
 import { currencyNumber } from "../../utilities";
 import { Company } from "../../interfaces/graphql";
 import { EyeOutlined, SearchOutlined } from "@ant-design/icons";
+import { CustomAvatarGroup } from "../custom-avatar-group";
 
 type Props = {
     tableProps: TableProps<Company>;
@@ -20,11 +20,7 @@ type Props = {
     sorters: CrudSorting;
 };
 
-export const CompaniesTableView: FC<Props> = ({
-    tableProps,
-    filters,
-    sorters,
-}) => {
+export const CompaniesTableView: FC<Props> = ({ tableProps, filters }) => {
     const { selectProps: selectPropsUsers } = useSelect({
         resource: "users",
         optionLabel: "name",
@@ -165,23 +161,15 @@ export const CompaniesTableView: FC<Props> = ({
                 )}
                 render={(_, record: Company) => {
                     const value = record.contacts;
+                    const avatars = value?.nodes?.map((contact) => {
+                        return {
+                            name: contact.name,
+                            src: contact.avatarUrl as string | undefined,
+                        };
+                    });
 
                     return (
-                        <Avatar.Group maxCount={3} size="small">
-                            {value?.nodes?.map((contact) => {
-                                return (
-                                    <Tooltip
-                                        title={contact.name}
-                                        key={contact.id}
-                                    >
-                                        <CustomAvatar
-                                            name={contact.name}
-                                            src={contact.avatarUrl}
-                                        />
-                                    </Tooltip>
-                                );
-                            })}
-                        </Avatar.Group>
+                        <CustomAvatarGroup avatars={avatars} size={"small"} />
                     );
                 }}
             />
diff --git a/examples/app-crm/src/components/custom-avatar-group.tsx b/examples/app-crm/src/components/custom-avatar-group.tsx
new file mode 100644
index 000000000000..78bdd18e49a4
--- /dev/null
+++ b/examples/app-crm/src/components/custom-avatar-group.tsx
@@ -0,0 +1,141 @@
+import { FC } from "react";
+import { CustomAvatar } from "./custom-avatar";
+import { AvatarProps, Space, Tooltip } from "antd";
+import { Text } from "./text";
+
+type Props = {
+    avatars: {
+        name?: string;
+        src?: string;
+    }[];
+    size?: AvatarProps["size"];
+    maxCount?: number;
+    containerStyle?: React.CSSProperties;
+    avatarStyle?: AvatarProps["style"];
+    gap?: string;
+    overlap?: boolean;
+};
+
+export const CustomAvatarGroup: FC<Props> = ({
+    avatars,
+    size,
+    overlap,
+    maxCount = 3,
+    gap = "8px",
+    containerStyle,
+    avatarStyle,
+}) => {
+    const visibleAvatars = avatars.slice(0, maxCount);
+    const remainingAvatars = avatars.slice(maxCount);
+    const hasRemainingAvatars = remainingAvatars.length > 0;
+    const shouldOverlap = overlap && avatars.length > 3;
+
+    const getImageSize = (size: AvatarProps["size"] | number) => {
+        if (typeof size === "number") {
+            return shouldOverlap ? `${size + 4}px` : `${size}px`;
+        }
+
+        switch (size) {
+            case "large":
+                return shouldOverlap ? "44px" : "40px";
+            case "small":
+                return shouldOverlap ? "28px" : "24px";
+            default:
+                return shouldOverlap ? "36px" : "32px";
+        }
+    };
+
+    return (
+        <div
+            style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                gap: shouldOverlap ? "0" : gap,
+                ...containerStyle,
+            }}
+        >
+            {visibleAvatars.map((avatar, index) => {
+                const transform = shouldOverlap
+                    ? `translateX(-${index * 8}px)`
+                    : undefined;
+
+                return (
+                    <Tooltip title={avatar.name} key={index}>
+                        <CustomAvatar
+                            style={{
+                                cursor: "pointer",
+                                transform,
+                                zIndex: index,
+                                border: shouldOverlap
+                                    ? "2px solid #fff"
+                                    : "none",
+                                width: getImageSize(size),
+                                height: getImageSize(size),
+                                ...avatarStyle,
+                            }}
+                            name={avatar?.name}
+                            src={avatar?.src}
+                            size={size}
+                        />
+                    </Tooltip>
+                );
+            })}
+
+            {hasRemainingAvatars && (
+                <Tooltip
+                    destroyTooltipOnHide
+                    title={
+                        <Space direction="vertical">
+                            {remainingAvatars.map((avatar, index) => {
+                                return (
+                                    <Space key={index}>
+                                        <CustomAvatar
+                                            name={avatar.name}
+                                            src={avatar.src}
+                                            size="small"
+                                        />
+                                        <Text
+                                            style={{
+                                                color: "#fff",
+                                            }}
+                                            key={avatar.name}
+                                        >
+                                            {avatar.name}
+                                        </Text>
+                                    </Space>
+                                );
+                            })}
+                        </Space>
+                    }
+                >
+                    <Text
+                        className="tertiary"
+                        style={{
+                            userSelect: "none",
+                            cursor: "pointer",
+                            fontSize: "10px",
+                            lineHeight: "22px",
+                            letterSpacing: "0.5px",
+                            fontWeight: 600,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            borderRadius: "50%",
+                            width: getImageSize(size),
+                            height: getImageSize(size),
+                            transform: shouldOverlap
+                                ? `translateX(-${visibleAvatars.length * 8}px)`
+                                : undefined,
+                            zIndex: shouldOverlap ? visibleAvatars.length : 1,
+                            backgroundColor: "#D9D9D9",
+                            border: overlap ? "2px solid #fff" : "none",
+                        }}
+                    >
+                        +{remainingAvatars.length}
+                    </Text>
+                </Tooltip>
+            )}
+        </div>
+    );
+};