diff --git a/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx b/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx
index ed704a6e..514336e6 100644
--- a/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx
+++ b/src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx
@@ -1,6 +1,6 @@
 import { ExpandMore } from '@mui/icons-material';
 import { MouseEvent, useState } from 'react';
-import { Avatar, AvatarGroup, Button, Popover, Typography, Divider } from '../../base';
+import { Avatar, AvatarGroup, Button, Divider, Popover, Typography } from '../../base';
 import { iconSmall } from '../../constants/iconsSizes';
 import { styled, useTheme } from '../../theme';
 import { DARK_TEAL_BLUE } from '../../theme/colors/colors';
@@ -144,9 +144,33 @@ const CollaboratorAvatarGroup = ({
           return (
             <CustomTooltip
               key={clientID}
+              componentsProps={{
+                tooltip: {
+                  sx: {
+                    background: theme.palette.background.paper,
+                    color: theme.palette.text.primary,
+                    boxShadow: theme.shadows[4]
+                  }
+                },
+                arrow: {
+                  sx: {
+                    color: theme.palette.background.paper
+                  }
+                }
+              }}
               title={
                 <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
-                  <Typography style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', margin: 'auto', fontSize: '1rem' }}>{user.name}</Typography>
+                  <Typography
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      flexDirection: 'column',
+                      margin: 'auto',
+                      fontSize: '1rem'
+                    }}
+                  >
+                    {user.name}
+                  </Typography>
                   <Divider />
                   <Button
                     size="small"
@@ -156,7 +180,7 @@ const CollaboratorAvatarGroup = ({
                       fontSize: '1rem',
                       padding: '2px 8px',
                       minWidth: 'auto',
-                      marginTop: '4px'
+                      marginTop: '8px'
                     }}
                   >
                     Open Recents
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 31014c99..6ac6328b 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -26,7 +26,7 @@ export const createCustomTheme = (mode: PaletteMode, brandPalette?: Interactiven
   } : {};
 
   const themePalette = _.merge({}, basePalette, customBrandedTheme);
-  
+
 
   return createTheme({
     palette: {