diff --git a/resources/js/Components/Collections/CollectionName/CollectionName.test.tsx b/resources/js/Components/Collections/CollectionName/CollectionName.test.tsx
index 64d78fd9c..a9665c8af 100644
--- a/resources/js/Components/Collections/CollectionName/CollectionName.test.tsx
+++ b/resources/js/Components/Collections/CollectionName/CollectionName.test.tsx
@@ -1,21 +1,28 @@
-import React from "react";
 import { CollectionName } from "./CollectionName";
-import CollectionFactory from "@/Tests/Factories/Collections/CollectionFactory";
 import { render, screen } from "@/Tests/testing-library";
 
 describe("CollectionName", () => {
-    it("should render", () => {
-        const collection = new CollectionFactory().create();
+    const collection = {
+        name: "Test Collection",
+        chainId: 137 as App.Enums.Chain,
+        image: "https://example.com",
+    };
 
-        render(
-            <CollectionName
-                collection={collection}
-                ownedCount={collection.nftsCount}
-            />,
-        );
+    it("can render", () => {
+        render(<CollectionName collection={collection} />);
 
         expect(screen.getByTestId("CollectionName")).toBeInTheDocument();
         expect(screen.getAllByTestId("Img")).toHaveLength(1);
         expect(screen.getByTestId("NetworkIcon")).toBeInTheDocument();
+        expect(screen.queryByTestId("CollectionName__detail")).not.toBeInTheDocument();
+    });
+
+    it("can render children", () => {
+        render(<CollectionName collection={collection}>10 owned</CollectionName>);
+
+        expect(screen.getByTestId("CollectionName")).toBeInTheDocument();
+        expect(screen.getAllByTestId("Img")).toHaveLength(1);
+        expect(screen.getByTestId("NetworkIcon")).toBeInTheDocument();
+        expect(screen.getByTestId("CollectionName__detail")).toHaveTextContent("10 owned");
     });
 });
diff --git a/resources/js/Components/Collections/CollectionName/CollectionName.tsx b/resources/js/Components/Collections/CollectionName/CollectionName.tsx
index c35e98293..fe2078367 100644
--- a/resources/js/Components/Collections/CollectionName/CollectionName.tsx
+++ b/resources/js/Components/Collections/CollectionName/CollectionName.tsx
@@ -1,38 +1,39 @@
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
+import cn from "classnames";
+import { type ReactNode, useRef } from "react";
 import { Img } from "@/Components/Image";
 import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
 import { Tooltip } from "@/Components/Tooltip";
 import { useIsTruncated } from "@/Hooks/useIsTruncated";
 
-export const CollectionName = ({
-    collection,
-    ownedCount,
-}: {
-    ownedCount: number;
-    collection: App.Data.Collections.CollectionData;
-}): JSX.Element => {
-    const { t } = useTranslation();
-    const collectionNameReference = useRef<HTMLParagraphElement>(null);
-    const isTruncated = useIsTruncated({ reference: collectionNameReference });
+interface Properties {
+    collection: Pick<App.Data.Collections.CollectionData, "name" | "chainId" | "image">;
+    className?: string;
+    children?: ReactNode;
+}
+
+export const CollectionName = ({ collection, className, children }: Properties): JSX.Element => {
+    const nameReference = useRef<HTMLParagraphElement>(null);
+    const isTruncated = useIsTruncated({ reference: nameReference });
 
     return (
         <div
             data-testid="CollectionName"
-            className="group relative h-11 w-full cursor-pointer md:h-20"
+            className={cn("group relative h-11 w-full cursor-pointer md:h-20", className)}
         >
-            <div className="absolute flex w-full  items-center space-x-4">
+            <div className="absolute flex w-full items-center space-x-4">
                 <div className="relative h-8 w-8 shrink-0 md:h-20 md:w-20">
                     <Img
                         wrapperClassName="aspect-square"
                         className="h-full w-full rounded-full object-cover"
                         src={collection.image}
+                        alt={collection.name}
                         isCircle
                     />
 
-                    <div className="absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:hidden">
-                        <NetworkIcon networkId={collection.chainId} />
-                    </div>
+                    <NetworkIcon
+                        className="absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:hidden"
+                        networkId={collection.chainId}
+                    />
                 </div>
 
                 <div className="break-word-legacy min-w-0 space-y-0.5">
@@ -41,7 +42,7 @@ export const CollectionName = ({
                         content={collection.name}
                     >
                         <p
-                            ref={collectionNameReference}
+                            ref={nameReference}
                             data-testid="CollectionName__name"
                             className="group-hover md:leading-auto truncate text-sm font-medium leading-6 text-theme-secondary-900 group-hover:text-theme-primary-700 dark:text-theme-dark-50 dark:group-hover:text-theme-primary-400 md:text-lg"
                         >
@@ -49,9 +50,14 @@ export const CollectionName = ({
                         </p>
                     </Tooltip>
 
-                    <p className="block truncate text-xs font-medium leading-4.5 text-theme-secondary-500 md:hidden">
-                        {ownedCount} {t("common.owned")}
-                    </p>
+                    {children !== undefined && (
+                        <span
+                            data-testid="CollectionName__detail"
+                            className="block truncate text-xs font-medium leading-4.5 text-theme-secondary-500 md:hidden"
+                        >
+                            {children}
+                        </span>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/resources/js/Components/Collections/CollectionsFullTable/CollectionName.test.tsx b/resources/js/Components/Collections/CollectionsFullTable/CollectionName.test.tsx
deleted file mode 100644
index a5145534b..000000000
--- a/resources/js/Components/Collections/CollectionsFullTable/CollectionName.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { CollectionName } from "@/Components/Collections/CollectionsFullTable/CollectionName";
-import CollectionFactory from "@/Tests/Factories/Collections/CollectionFactory";
-import { render, screen } from "@/Tests/testing-library";
-
-describe("CollectionName", () => {
-    it("should render", () => {
-        const collection = new CollectionFactory().create();
-
-        render(<CollectionName collection={collection} />);
-
-        expect(screen.getByTestId("CollectionName")).toBeInTheDocument();
-        expect(screen.getAllByTestId("Img")).toHaveLength(1);
-        expect(screen.getByTestId("NetworkIcon")).toBeInTheDocument();
-    });
-});
diff --git a/resources/js/Components/Collections/CollectionsFullTable/CollectionName.tsx b/resources/js/Components/Collections/CollectionsFullTable/CollectionName.tsx
deleted file mode 100644
index bcf1cd7f7..000000000
--- a/resources/js/Components/Collections/CollectionsFullTable/CollectionName.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Img } from "@/Components/Image";
-import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
-import { Tooltip } from "@/Components/Tooltip";
-import { useIsTruncated } from "@/Hooks/useIsTruncated";
-
-export const CollectionName = ({ collection }: { collection: App.Data.Collections.CollectionData }): JSX.Element => {
-    const { t } = useTranslation();
-    const collectionNameReference = useRef<HTMLParagraphElement>(null);
-    const isTruncated = useIsTruncated({ reference: collectionNameReference });
-
-    return (
-        <div
-            data-testid="CollectionName"
-            className="group relative h-11 w-full cursor-pointer md:h-20"
-        >
-            <div className="absolute flex w-full items-center space-x-4">
-                <div className="relative h-8 w-8 shrink-0 md:h-20 md:w-20">
-                    <Img
-                        wrapperClassName="aspect-square"
-                        className="h-full w-full rounded-full object-cover"
-                        src={collection.image}
-                        isCircle
-                    />
-
-                    <div className="absolute left-5 top-5 block h-4 w-4 rounded-full ring-4 ring-white dark:ring-theme-dark-900 md:hidden">
-                        <NetworkIcon networkId={collection.chainId} />
-                    </div>
-                </div>
-
-                <div className="break-word-legacy min-w-0 space-y-0.5">
-                    <Tooltip
-                        disabled={!isTruncated}
-                        content={collection.name}
-                    >
-                        <p
-                            ref={collectionNameReference}
-                            data-testid="CollectionName__name"
-                            className="group-hover md:leading-auto truncate text-sm font-medium leading-6 text-theme-secondary-900 group-hover:text-theme-primary-700 dark:text-theme-dark-50 dark:group-hover:text-theme-primary-400 md:text-lg"
-                        >
-                            {collection.name}
-                        </p>
-                    </Tooltip>
-
-                    <p className="block truncate text-xs font-medium leading-4.5 text-theme-secondary-500 md:hidden">
-                        {collection.nftsCount} {t("common.items").toLowerCase()}
-                    </p>
-                </div>
-            </div>
-        </div>
-    );
-};
diff --git a/resources/js/Components/Collections/CollectionsFullTable/CollectionsFullTableItem.tsx b/resources/js/Components/Collections/CollectionsFullTable/CollectionsFullTableItem.tsx
index be00f6427..57efc26fd 100644
--- a/resources/js/Components/Collections/CollectionsFullTable/CollectionsFullTableItem.tsx
+++ b/resources/js/Components/Collections/CollectionsFullTable/CollectionsFullTableItem.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { type CollectionTableItemProperties } from "./CollectionsFullTable.contracts";
 import { CollectionFloorPrice } from "@/Components/Collections/CollectionFloorPrice";
 import { CollectionImages } from "@/Components/Collections/CollectionImages";
-import { CollectionName } from "@/Components/Collections/CollectionsFullTable/CollectionName";
+import { CollectionName } from "@/Components/Collections/CollectionName";
 import { PopularCollectionVolume } from "@/Components/Collections/PopularCollectionsTable/PopularCollectionsTable.blocks";
 import { NetworkIcon } from "@/Components/Networks/NetworkIcon";
 import { TableCell, TableRow } from "@/Components/Table";
@@ -60,7 +60,9 @@ export const CollectionsFullTableItem = ({
                 paddingClassName="px-2 md:px-5"
                 hoverClassName=""
             >
-                <CollectionName collection={collection} />
+                <CollectionName collection={collection}>
+                    {collection.nftsCount} {t("common.items").toLowerCase()}
+                </CollectionName>
             </TableCell>
 
             {isLgAndAbove && (
diff --git a/resources/js/Components/Collections/CollectionsTable/CollectionsTableItem.tsx b/resources/js/Components/Collections/CollectionsTable/CollectionsTableItem.tsx
index 110b505a6..01b1b2e80 100644
--- a/resources/js/Components/Collections/CollectionsTable/CollectionsTableItem.tsx
+++ b/resources/js/Components/Collections/CollectionsTable/CollectionsTableItem.tsx
@@ -72,10 +72,9 @@ export const CollectionsTableItem = ({
                 paddingClassName="px-2 md:px-5"
                 hoverClassName=""
             >
-                <CollectionName
-                    collection={collection}
-                    ownedCount={collection.nftsCount}
-                />
+                <CollectionName collection={collection}>
+                    {collection.nftsCount} {t("common.owned")}
+                </CollectionName>
             </TableCell>
 
             {isLgAndAbove && (