diff --git a/src/studio-header/StudioHeader.test.tsx b/src/studio-header/StudioHeader.test.tsx
index 3f6e22879..49844b905 100644
--- a/src/studio-header/StudioHeader.test.tsx
+++ b/src/studio-header/StudioHeader.test.tsx
@@ -18,7 +18,6 @@ const authenticatedUser = {
   username: 'abc123',
   administrator: true,
   roles: [],
-  avatar: '/imges/test.png',
 };
 let currentUser;
 let screenWidth = 1280;
@@ -115,17 +114,17 @@ describe('Header', () => {
     });
 
     it('user menu should use avatar icon', async () => {
-      currentUser = { ...authenticatedUser, avatar: null };
       const { getByTestId } = render(<RootWrapper {...props} />);
       const avatarIcon = getByTestId('avatar-icon');
 
       expect(avatarIcon).toBeVisible();
+      expect(avatarIcon).toHaveAttribute('alt', authenticatedUser.username);
+      expect(avatarIcon).toHaveClass('pgn__avatar-sm', 'mr-2');
     });
 
     it('user menu should use avatar icon when hydrated profile image has no image', async () => {
       currentUser = {
         ...authenticatedUser,
-        avatar: null,
         profileImage: {
           hasImage: false,
           imageUrlMedium: '/profile-images/abc123-medium.png',
@@ -138,10 +137,9 @@ describe('Header', () => {
       expect(queryByTestId('avatar-image')).not.toBeInTheDocument();
     });
 
-    it('user menu should use hydrated profile image when avatar is not present', async () => {
+    it('user menu should use hydrated profile image when available', async () => {
       currentUser = {
         ...authenticatedUser,
-        avatar: null,
         profileImage: {
           hasImage: true,
           imageUrlMedium: '/profile-images/abc123-medium.png',
@@ -152,21 +150,8 @@ describe('Header', () => {
 
       expect(avatarImage).toBeVisible();
       expect(avatarImage).toHaveAttribute('src', '/profile-images/abc123-medium.png');
-    });
-
-    it('user menu should prefer avatar over hydrated profile image', async () => {
-      currentUser = {
-        ...authenticatedUser,
-        profileImage: {
-          hasImage: true,
-          imageUrlMedium: '/profile-images/abc123-medium.png',
-        },
-      };
-      const { getByTestId } = render(<RootWrapper {...props} />);
-      const avatarImage = getByTestId('avatar-image');
-
-      expect(avatarImage).toBeVisible();
-      expect(avatarImage).toHaveAttribute('src', authenticatedUser.avatar);
+      expect(avatarImage).toHaveAttribute('alt', authenticatedUser.username);
+      expect(avatarImage).toHaveClass('pgn__avatar-sm', 'mr-2');
     });
 
     it('should hide nav items if prop isHiddenMainMenu true', async () => {
@@ -222,11 +207,19 @@ describe('Header', () => {
       expect(desktopMenu).toBeNull();
     });
 
-    it('user menu should use avatar image', async () => {
+    it('user menu should use hydrated profile image', async () => {
+      currentUser = {
+        ...authenticatedUser,
+        profileImage: {
+          hasImage: true,
+          imageUrlMedium: '/profile-images/abc123-medium.png',
+        },
+      };
       const { getByTestId } = render(<RootWrapper {...props} />);
       const avatarImage = getByTestId('avatar-image');
 
       expect(avatarImage).toBeVisible();
+      expect(avatarImage).toHaveAttribute('src', '/profile-images/abc123-medium.png');
     });
 
     it('should hide nav items if prop isHiddenMainMenu true', async () => {
diff --git a/src/studio-header/StudioHeader.tsx b/src/studio-header/StudioHeader.tsx
index 27335e992..81b392502 100644
--- a/src/studio-header/StudioHeader.tsx
+++ b/src/studio-header/StudioHeader.tsx
@@ -41,8 +41,7 @@ const StudioHeader: FunctionComponent<Props> = ({
   // @ts-expect-error - frontend-platform doesn't yet have type information :/
   const { authenticatedUser, config } = useContext(AppContext);
   const profileImage = authenticatedUser?.profileImage;
-  const authenticatedUserAvatar = authenticatedUser?.avatar
-    || (profileImage?.hasImage ? profileImage.imageUrlMedium : null);
+  const authenticatedUserAvatar = profileImage?.hasImage ? profileImage.imageUrlMedium : null;
   const props = {
     logo: config.LOGO_URL,
     logoAltText: `Studio ${config.SITE_NAME}`,
diff --git a/src/studio-header/UserMenu.tsx b/src/studio-header/UserMenu.tsx
index 66add10cb..b9c94bd5b 100644
--- a/src/studio-header/UserMenu.tsx
+++ b/src/studio-header/UserMenu.tsx
@@ -16,19 +16,13 @@ const UserMenu = ({
   isAdmin,
 }) => {
   const intl = useIntl();
-  const avatar = authenticatedUserAvatar ? (
-    <img
-      className="d-block w-100 h-100"
-      src={authenticatedUserAvatar}
-      alt={username}
-      data-testid="avatar-image"
-    />
-  ) : (
+  const avatar = (
     <Avatar
+      src={authenticatedUserAvatar}
       size="sm"
       className="mr-2"
       alt={username}
-      data-testid="avatar-icon"
+      data-testid={authenticatedUserAvatar ? 'avatar-image' : 'avatar-icon'}
     />
   );
   const title = isMobile ? avatar : <>{avatar}{username}</>;