diff --git a/ghost/admin-x-settings/src/components/settings/general/Users.tsx b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
index 4c6fc1d677..2b88b2fb28 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Users.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Users.tsx
@@ -11,6 +11,7 @@ import TabView from '../../../admin-x-ds/global/TabView';
 import UserDetailModal from './modals/UserDetailModal';
 import useStaffUsers from '../../../hooks/useStaffUsers';
 import {User} from '../../../types/api';
+import {getInitials} from '../../../utils/helpers';
 
 const Owner: React.FC<{user: User}> = ({user}) => {
     const showDetailModal = () => {
@@ -20,9 +21,10 @@ const Owner: React.FC<{user: User}> = ({user}) => {
     if (!user) {
         return null;
     }
+
     return (
         <div className='group flex gap-3 hover:cursor-pointer' onClick={showDetailModal}>
-            <Avatar bgColor='yellow' label='DV' />
+            <Avatar bgColor='grey-200' label={getInitials(user.name)} size='lg' />
             <div className='flex flex-col'>
                 <span>{user.name} &mdash; <strong>Owner</strong> <span className='invisible ml-2 inline-block text-sm font-bold text-green group-hover:visible'>Edit</span></span>
                 <span className='text-xs text-grey-700'>{user.email}</span>
@@ -56,7 +58,7 @@ const UsersList: React.FC<UsersListProps> = ({users, updateUser}) => {
                     <ListItem
                         key={user.id}
                         action={<Button color='green' label='Edit' link={true} onClick={() => showDetailModal(user)}/>}
-                        avatar={(<Avatar bgColor='green' label='DV' labelColor='white' />)}
+                        avatar={(<Avatar bgColor='grey-200' label={getInitials(user.name)} />)}
                         detail={user.email}
                         hideActions={true}
                         id={`list-item-${user.id}`}
diff --git a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
index 0019fdf378..1317ed3439 100644
--- a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
@@ -11,6 +11,7 @@ import TextField from '../../../../admin-x-ds/global/TextField';
 import Toggle from '../../../../admin-x-ds/global/Toggle';
 import useRoles from '../../../../hooks/useRoles';
 import {User} from '../../../../types/api';
+import {getInitials} from '../../../../utils/helpers';
 
 interface CustomHeadingProps {
     children?: React.ReactNode;
@@ -252,11 +253,11 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
             }}
         >
             <div>
-                <div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12 text-white'>
+                <div className='-mx-12 -mt-12 bg-gradient-to-tr from-grey-900 to-black p-12'>
                     <div className='mt-60'>
-                        <Avatar bgColor='green' className='-ml-1 mb-2' label='DV' labelColor='white' size='xl' />
+                        <Avatar bgColor='grey-200' className='-ml-1 mb-2' label={getInitials(userData.name)} size='xl' />
                         <Heading styles='text-white'>{user.name}</Heading>
-                        <span className='text-md font-semibold'>Administrator</span>
+                        <span className='text-md font-semibold text-white'>Administrator</span>
                     </div>
                 </div>
                 <div className='mt-10 grid grid-cols-2 gap-x-12 gap-y-20 pb-10'>
diff --git a/ghost/admin-x-settings/src/utils/helpers.ts b/ghost/admin-x-settings/src/utils/helpers.ts
index f6d455fd9b..fd0c31aab5 100644
--- a/ghost/admin-x-settings/src/utils/helpers.ts
+++ b/ghost/admin-x-settings/src/utils/helpers.ts
@@ -35,3 +35,14 @@ export function getOptionLabel(
 ): string | undefined {
     return options?.find(option => option.value === value)?.label;
 }
+
+export function getInitials(name: string) {
+    let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
+    let rgxInitials = [...name.matchAll(rgx)] || [];
+
+    const initials = (
+        (rgxInitials.shift()?.[1] || '') + (rgxInitials.pop()?.[1] || '')
+    ).toUpperCase();
+
+    return initials;
+}
\ No newline at end of file