diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 4d674217..05e0fa3c 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -31,6 +31,7 @@ export {
   AlertDialogHeader,
   AlertDialogOverlay,
   Avatar,
+  AvatarProps,
   Badge,
   Box,
   Button,
diff --git a/packages/web/components/Player/PlayerAvatar.tsx b/packages/web/components/Player/PlayerAvatar.tsx
new file mode 100644
index 00000000..84dd6fb2
--- /dev/null
+++ b/packages/web/components/Player/PlayerAvatar.tsx
@@ -0,0 +1,24 @@
+import { Avatar, AvatarProps } from '@metafam/ds';
+import React from 'react';
+
+import { PlayerFragmentFragment } from '../../graphql/autogen/types';
+import {
+	getPlayerImage,
+	getPlayerName,
+	hasPlayerImage,
+} from '../../utils/playerHelpers';
+
+type PlayerAvatarProps = AvatarProps & { player: PlayerFragmentFragment };
+export const PlayerAvatar: React.FC<PlayerAvatarProps> = ({
+	player,
+	...props
+}) => {
+	const attrs = {
+		src: getPlayerImage(player),
+		name: getPlayerName(player),
+		...props,
+	};
+	if (hasPlayerImage(player)) attrs.bg = 'transparent';
+
+	return <Avatar {...attrs} />;
+};
diff --git a/packages/web/components/Player/PlayerTile.tsx b/packages/web/components/Player/PlayerTile.tsx
index 7e7ca4a3..3ab3e817 100644
--- a/packages/web/components/Player/PlayerTile.tsx
+++ b/packages/web/components/Player/PlayerTile.tsx
@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Box,
   Heading,
   HStack,
@@ -20,9 +19,9 @@ import { PlayerFragmentFragment, Skill } from 'graphql/autogen/types';
 import React from 'react';
 import {
   getPlayerCoverImage,
-  getPlayerImage,
   getPlayerName,
 } from 'utils/playerHelpers';
+import { PlayerAvatar } from 'components/Player/PlayerAvatar';
 
 type Props = {
   player: PlayerFragmentFragment;
@@ -47,11 +46,7 @@ export const PlayerTile: React.FC<Props> = ({ player }) => (
         key={player.id}
       >
         <VStack>
-          <Avatar
-            size="xl"
-            src={getPlayerImage(player)}
-            name={getPlayerName(player)}
-          />
+          <PlayerAvatar player={player} size="xl" />
           <Heading size="xs" color="white">
             {getPlayerName(player)}
           </Heading>
diff --git a/packages/web/utils/playerHelpers.ts b/packages/web/utils/playerHelpers.ts
index 7260c478..ebc2727d 100644
--- a/packages/web/utils/playerHelpers.ts
+++ b/packages/web/utils/playerHelpers.ts
@@ -21,3 +21,6 @@ export const formatAddress = (address = ''): string =>
 
 export const formatUsernameIfAddress = (username = ''): string =>
   ethers.utils.isAddress(username) ? formatAddress(username) : username;
+
+  export const hasPlayerImage = (player: PlayerFragmentFragment): boolean =>
+  !!player.box_profile?.imageUrl;
\ No newline at end of file
diff --git a/scratch.txt b/scratch.txt
new file mode 100644
index 00000000..e2a60686
--- /dev/null
+++ b/scratch.txt
@@ -0,0 +1,3 @@
+packages/web/components/Player/PlayerTile.tsx
+packages/web/components/Player/Section/PlayerHero.tsx
+