diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
index 3737e9ccf..e79a2e71b 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
@@ -1,5 +1,13 @@
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 
+const ZIndexes: { [key: string]: string } = {
+  '10': 'z-10',
+  '20': 'z-20',
+  '30': 'z-30',
+  '40': 'z-40',
+  '50': 'z-50',
+};
+
 export type StackAvatarProps = {
   first?: boolean;
   zIndex?: string;
@@ -12,6 +20,10 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
   let zIndexClass = '';
   const firstClass = first ? '' : '-ml-3';
 
+  if (zIndex) {
+    zIndexClass = ZIndexes[zIndex] ?? '';
+  }
+
   switch (type) {
     case 'unsigned':
       classes = 'bg-dawn-200 text-dawn-900';
@@ -26,26 +38,6 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
       break;
   }
 
-  switch (zIndex) {
-    case '10':
-      zIndexClass = 'z-10';
-      break;
-    case '20':
-      zIndexClass = 'z-20';
-      break;
-    case '30':
-      zIndexClass = 'z-30';
-      break;
-    case '40':
-      zIndexClass = 'z-40';
-      break;
-    case '50':
-      zIndexClass = 'z-50';
-      break;
-    default:
-      break;
-  }
-
   return (
     <Avatar
       className={`