diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
index ce18f27b8..708746af1 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx
@@ -11,7 +11,7 @@ import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/clie
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
-import { StackAvatarsWithUI } from '~/components/(dashboard)/avatar/stack-avatars-with-ui';
+import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 export type DocumentPageProps = {
@@ -71,9 +71,9 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithUI recipients={recipients} position="bottom">
+            <StackAvatarsUI recipients={recipients} position="bottom">
               <span>{recipients.length} Recipient(s)</span>
-            </StackAvatarsWithUI>
+            </StackAvatarsUI>
           </div>
         )}
       </div>
diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx
index a0cc4b8e8..ca2da02d3 100644
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@@ -12,7 +12,7 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
-import { StackAvatarsWithUI } from '~/components/(dashboard)/avatar/stack-avatars-with-ui';
+import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
@@ -64,7 +64,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => <StackAvatarsWithUI recipients={row.original.Recipient} />,
+            cell: ({ row }) => <StackAvatarsUI recipients={row.original.Recipient} />,
           },
           {
             header: 'Status',
diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx
similarity index 91%
rename from apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx
rename to apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx
index 5d5f24413..c1c44836a 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx
@@ -13,14 +13,15 @@ import {
 import { StackAvatars } from './stack-avatars';
 import { StackAvatarsComponent } from './stack-avatars-component';
 
-export type StackAvatarsWithUIProps = {
+export type StackAvatarsUIProps = {
   recipients: Recipient[];
   position?: 'top' | 'bottom';
   children?: React.ReactNode;
 };
 
-export const StackAvatarsWithUI = ({ recipients, position, children }: StackAvatarsWithUIProps) => {
+export const StackAvatarsUI = ({ recipients, position, children }: StackAvatarsUIProps) => {
   const size = useWindowSize();
+
   return (
     <>
       {size.width > 1050 ? (