diff --git a/apps/web/src/app/(dashboard)/dashboard/page.tsx b/apps/web/src/app/(dashboard)/dashboard/page.tsx
index a59daef00..0d6a56266 100644
--- a/apps/web/src/app/(dashboard)/dashboard/page.tsx
+++ b/apps/web/src/app/(dashboard)/dashboard/page.tsx
@@ -14,6 +14,12 @@ import {
   TableHeader,
   TableRow,
 } from '@documenso/ui/primitives/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
 
 import { StackAvatar } from '~/components/(dashboard)/avatar';
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
@@ -60,6 +66,24 @@ const renderStackAvatars = (recipients: Recipient[]) => {
   });
 };
 
+const renderAvatar = (recipient: Recipient) => {
+  const initials =
+    recipient.name
+      ?.split(' ')
+      .map((name: string) => name.slice(0, 1).toUpperCase())
+      .slice(0, 2)
+      .join('') ?? 'UK';
+
+  const type =
+    recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED'
+      ? 'completed'
+      : recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED'
+      ? 'waiting'
+      : 'unsigned';
+
+  return <StackAvatar first={true} key={recipient.id} type={type} fallbackText={initials} />;
+};
+
 export default async function DashboardPage() {
   const session = await getRequiredServerComponentSession();
 
@@ -106,30 +130,107 @@ export default async function DashboardPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {results.data.map((document) => (
-                <TableRow key={document.id}>
-                  <TableCell className="font-medium">{document.id}</TableCell>
-                  <TableCell>
-                    <Link
-                      href={`/documents/${document.id}`}
-                      className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      {document.title}
-                    </Link>
-                  </TableCell>
+              {results.data.map((document) => {
+                const waitingRecipients = document.Recipient.filter(
+                  (recipient) =>
+                    recipient.sendStatus === 'SENT' && recipient.signingStatus === 'NOT_SIGNED',
+                );
 
-                  <TableCell className="flex cursor-pointer">
-                    {renderStackAvatars(document.Recipient)}
-                  </TableCell>
+                const completedRecipients = document.Recipient.filter(
+                  (recipient) =>
+                    recipient.sendStatus === 'SENT' && recipient.signingStatus === 'SIGNED',
+                );
 
-                  <TableCell>
-                    <DocumentStatus status={document.status} />
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <LocaleDate date={document.created} />
-                  </TableCell>
-                </TableRow>
-              ))}
+                const uncompletedRecipients = document.Recipient.filter(
+                  (recipient) =>
+                    recipient.sendStatus === 'NOT_SENT' && recipient.signingStatus === 'NOT_SIGNED',
+                );
+
+                return (
+                  <TableRow key={document.id}>
+                    <TableCell className="font-medium">{document.id}</TableCell>
+                    <TableCell>
+                      <Link
+                        href={`/documents/${document.id}`}
+                        className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                      >
+                        {document.title}
+                      </Link>
+                    </TableCell>
+
+                    <TableCell>
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger className="flex cursor-pointer">
+                            {renderStackAvatars(document.Recipient)}
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <div className="flex flex-col gap-y-5 p-1">
+                              {completedRecipients.length > 0 && (
+                                <div>
+                                  <h1 className="text-base font-medium">Completed</h1>
+                                  {completedRecipients.map((recipient: Recipient) => (
+                                    <div
+                                      key={recipient.id}
+                                      className="my-1 flex items-center gap-2"
+                                    >
+                                      {renderAvatar(recipient)}
+                                      <span className="text-sm text-gray-500">
+                                        {recipient.email}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+
+                              {waitingRecipients.length > 0 && (
+                                <div>
+                                  <h1 className="text-base font-medium">Waiting</h1>
+                                  {waitingRecipients.map((recipient: Recipient) => (
+                                    <div
+                                      key={recipient.id}
+                                      className="my-1 flex items-center gap-2"
+                                    >
+                                      {renderAvatar(recipient)}
+                                      <span className="text-sm text-gray-500">
+                                        {recipient.email}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+
+                              {uncompletedRecipients.length > 0 && (
+                                <div>
+                                  <h1 className="text-base font-medium">Uncompleted</h1>
+                                  {uncompletedRecipients.map((recipient: Recipient) => (
+                                    <div
+                                      key={recipient.id}
+                                      className="my-1 flex items-center gap-2"
+                                    >
+                                      {renderAvatar(recipient)}
+                                      <span className="text-sm text-gray-500">
+                                        {recipient.email}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </TableCell>
+
+                    <TableCell>
+                      <DocumentStatus status={document.status} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <LocaleDate date={document.created} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
               {results.data.length === 0 && (
                 <TableRow>
                   <TableCell colSpan={4} className="h-24 text-center">
diff --git a/apps/web/src/components/(dashboard)/avatar/index.tsx b/apps/web/src/components/(dashboard)/avatar/index.tsx
index a784cbbff..2a263893a 100644
--- a/apps/web/src/components/(dashboard)/avatar/index.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/index.tsx
@@ -11,7 +11,7 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
   let classes = '';
   switch (type) {
     case 'unsigned':
-      classes = 'bg-dawn-400 text-dawn-900';
+      classes = 'bg-dawn-200 text-dawn-900';
       break;
     case 'waiting':
       classes = 'bg-water text-water-700';