diff --git a/.changeset/yellow-hounds-add.md b/.changeset/yellow-hounds-add.md
new file mode 100644
index 0000000000..1e4e9cef70
--- /dev/null
+++ b/.changeset/yellow-hounds-add.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/avatar': patch
+'@twilio-paste/core': patch
+---
+
+[Avatar]: set transparent background color for image based avatars so that transparent images are displayed as such. Also fix setting the size of icon and image avatars when placed in a group
diff --git a/.storybook/static/avatars/avatar5.png b/.storybook/static/avatars/avatar5.png
new file mode 100644
index 0000000000..35b3b4f634
Binary files /dev/null and b/.storybook/static/avatars/avatar5.png differ
diff --git a/.storybook/static/avatars/avatar6.png b/.storybook/static/avatars/avatar6.png
new file mode 100644
index 0000000000..21ef8f8a32
Binary files /dev/null and b/.storybook/static/avatars/avatar6.png differ
diff --git a/.storybook/static/avatars/avatar7.png b/.storybook/static/avatars/avatar7.png
new file mode 100644
index 0000000000..d7aa00147d
Binary files /dev/null and b/.storybook/static/avatars/avatar7.png differ
diff --git a/.storybook/static/avatars/avatar8.png b/.storybook/static/avatars/avatar8.png
new file mode 100644
index 0000000000..860f4eac5a
Binary files /dev/null and b/.storybook/static/avatars/avatar8.png differ
diff --git a/packages/paste-core/components/avatar/src/Avatar.tsx b/packages/paste-core/components/avatar/src/Avatar.tsx
index 02ab971f73..e0718c8c1d 100644
--- a/packages/paste-core/components/avatar/src/Avatar.tsx
+++ b/packages/paste-core/components/avatar/src/Avatar.tsx
@@ -55,30 +55,35 @@ const AvatarContents: React.FC<React.PropsWithChildren<AvatarContentProps>> = ({
 
 AvatarContents.displayName = 'AvatarContents';
 
-const colorVariants: Record<ColorVariants, BoxStyleProps> = {
+const colorPropStyles: Record<ColorVariants, BoxStyleProps> = {
   default: {
     backgroundColor: 'colorBackgroundUser',
+    boxShadow: 'shadowBorderUser',
     color: 'colorTextUser',
   },
   decorative10: {
     backgroundColor: 'colorBackgroundDecorative10Weakest',
+    boxShadow: 'shadowBorderDecorative10Weaker',
     color: 'colorTextDecorative10',
   },
   decorative20: {
     backgroundColor: 'colorBackgroundDecorative20Weakest',
+    boxShadow: 'shadowBorderDecorative20Weaker',
     color: 'colorTextDecorative20',
   },
   decorative30: {
     backgroundColor: 'colorBackgroundDecorative30Weakest',
+    boxShadow: 'shadowBorderDecorative30Weaker',
     color: 'colorTextDecorative30',
   },
   decorative40: {
     backgroundColor: 'colorBackgroundDecorative40Weakest',
+    boxShadow: 'shadowBorderDecorative40Weaker',
     color: 'colorTextDecorative40',
   },
 };
 
-const variants: Record<AvatarVariants, BoxStyleProps> = {
+const variantStyles: Record<AvatarVariants, BoxStyleProps> = {
   user: {
     borderRadius: 'borderRadiusCircle',
   },
@@ -87,24 +92,6 @@ const variants: Record<AvatarVariants, BoxStyleProps> = {
   },
 };
 
-const shadowVariants: Record<ColorVariants, BoxStyleProps> = {
-  default: {
-    boxShadow: 'shadowBorderUser',
-  },
-  decorative10: {
-    boxShadow: 'shadowBorderDecorative10Weaker',
-  },
-  decorative20: {
-    boxShadow: 'shadowBorderDecorative20Weaker',
-  },
-  decorative30: {
-    boxShadow: 'shadowBorderDecorative30Weaker',
-  },
-  decorative40: {
-    boxShadow: 'shadowBorderDecorative40Weaker',
-  },
-};
-
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   ({name, size = DEFAULT_SIZE, element = 'AVATAR', src, icon, color = 'default', variant = 'user', ...props}, ref) => {
     if (name === undefined) {
@@ -123,11 +110,12 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         flexShrink={0}
         ref={ref}
         size={groupSize || size}
-        {...(src ? undefined : shadowVariants[color])}
-        {...colorVariants[color]}
-        {...variants[groupVariant || variant]}
+        {...colorPropStyles[color]}
+        {...variantStyles[groupVariant || variant]}
+        // when its an image set specific styles that are unrelated to color or variants
+        {...(src && {backgroundColor: 'colorBackgroundBody', boxShadow: 'shadowBorderWeaker'})}
       >
-        <AvatarContents name={name} size={size} icon={icon} src={src} />
+        <AvatarContents name={name} size={groupSize || size} icon={icon} src={src} />
       </Box>
     );
   }
diff --git a/packages/paste-core/components/avatar/stories/index.stories.tsx b/packages/paste-core/components/avatar/stories/index.stories.tsx
index 9df3f6a211..15e2207c50 100644
--- a/packages/paste-core/components/avatar/stories/index.stories.tsx
+++ b/packages/paste-core/components/avatar/stories/index.stories.tsx
@@ -52,18 +52,33 @@ export const Initials = (): React.ReactNode => {
 
 export const Image = (): React.ReactNode => {
   return (
-    <Stack orientation="horizontal" spacing="space40">
-      <Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar-sizeIcon10.png" />
-      <Avatar size="sizeIcon20" name="avatar example" src="./avatars/avatar-sizeIcon20.png" />
-      <Avatar size="sizeIcon30" name="avatar example" src="./avatars/avatar-sizeIcon30.png" />
-      <Avatar size="sizeIcon40" name="avatar example" src="./avatars/avatar-sizeIcon40.png" />
-      <Avatar size="sizeIcon50" name="avatar example" src="./avatars/avatar-sizeIcon50.png" />
-      <Avatar size="sizeIcon60" name="avatar example" src="./avatars/avatar-sizeIcon60.png" />
-      <Avatar size="sizeIcon70" name="avatar example" src="./avatars/avatar-sizeIcon70.png" />
-      <Avatar size="sizeIcon80" name="avatar example" src="./avatars/avatar-sizeIcon80.png" />
-      <Avatar size="sizeIcon90" name="avatar example" src="./avatars/avatar-sizeIcon90.png" />
-      <Avatar size="sizeIcon100" name="avatar example" src="./avatars/avatar-sizeIcon100.png" />
-      <Avatar size="sizeIcon110" name="avatar example" src="./avatars/avatar-sizeIcon110.png" />
+    <Stack orientation="vertical" spacing="space20">
+      <Stack orientation="horizontal" spacing="space40">
+        <Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar-sizeIcon10.png" />
+        <Avatar size="sizeIcon20" name="avatar example" src="./avatars/avatar-sizeIcon20.png" />
+        <Avatar size="sizeIcon30" name="avatar example" src="./avatars/avatar-sizeIcon30.png" />
+        <Avatar size="sizeIcon40" name="avatar example" src="./avatars/avatar-sizeIcon40.png" />
+        <Avatar size="sizeIcon50" name="avatar example" src="./avatars/avatar-sizeIcon50.png" />
+        <Avatar size="sizeIcon60" name="avatar example" src="./avatars/avatar-sizeIcon60.png" />
+        <Avatar size="sizeIcon70" name="avatar example" src="./avatars/avatar-sizeIcon70.png" />
+        <Avatar size="sizeIcon80" name="avatar example" src="./avatars/avatar-sizeIcon80.png" />
+        <Avatar size="sizeIcon90" name="avatar example" src="./avatars/avatar-sizeIcon90.png" />
+        <Avatar size="sizeIcon100" name="avatar example" src="./avatars/avatar-sizeIcon100.png" />
+        <Avatar size="sizeIcon110" name="avatar example" src="./avatars/avatar-sizeIcon110.png" />
+      </Stack>
+      <Stack orientation="horizontal" spacing="space40">
+        <Avatar variant="entity" size="sizeIcon10" name="avatar example" src="./avatars/avatar5.png" />
+        <Avatar variant="entity" size="sizeIcon20" name="avatar example" src="./avatars/avatar6.png" />
+        <Avatar variant="entity" size="sizeIcon30" name="avatar example" src="./avatars/avatar7.png" />
+        <Avatar variant="entity" size="sizeIcon40" name="avatar example" src="./avatars/avatar8.png" />
+        <Avatar variant="entity" size="sizeIcon50" name="avatar example" src="./avatars/avatar5.png" />
+        <Avatar variant="entity" size="sizeIcon60" name="avatar example" src="./avatars/avatar6.png" />
+        <Avatar variant="entity" size="sizeIcon70" name="avatar example" src="./avatars/avatar7.png" />
+        <Avatar variant="entity" size="sizeIcon80" name="avatar example" src="./avatars/avatar8.png" />
+        <Avatar variant="entity" size="sizeIcon90" name="avatar example" src="./avatars/avatar5.png" />
+        <Avatar variant="entity" size="sizeIcon100" name="avatar example" src="./avatars/avatar6.png" />
+        <Avatar variant="entity" size="sizeIcon110" name="avatar example" src="./avatars/avatar7.png" />
+      </Stack>
     </Stack>
   );
 };
@@ -212,6 +227,138 @@ export const Grouped = (): React.ReactNode => {
   );
 };
 
+export const GroupedImage = (): React.ReactNode => {
+  return (
+    <Stack orientation="horizontal" spacing="space50">
+      <Stack orientation="vertical" spacing="space30">
+        <AvatarGroup size="sizeIcon30" variant="user">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon70" variant="user">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon90" variant="user">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon100" variant="user">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon110" variant="user">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+      </Stack>
+      <Stack orientation="vertical" spacing="space30">
+        <AvatarGroup size="sizeIcon30" variant="entity">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon70" variant="entity">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon90" variant="entity">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon100" variant="entity">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon110" variant="entity">
+          <Avatar name="avatar example" src="./avatars/avatar5.png" />
+          <Avatar name="avatar example" src="./avatars/avatar6.png" />
+          <Avatar name="avatar example" src="./avatars/avatar7.png" />
+          <Avatar name="avatar example" src="./avatars/avatar8.png" />
+        </AvatarGroup>
+      </Stack>
+    </Stack>
+  );
+};
+
+export const GroupedIcon = (): React.ReactNode => {
+  return (
+    <Stack orientation="horizontal" spacing="space50">
+      <Stack orientation="vertical" spacing="space30">
+        <AvatarGroup size="sizeIcon30" variant="user">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon70" variant="user">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon90" variant="user">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon100" variant="user">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon110" variant="user">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+      </Stack>
+      <Stack orientation="vertical" spacing="space30">
+        <AvatarGroup size="sizeIcon30" variant="entity">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon70" variant="entity">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon90" variant="entity">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon100" variant="entity">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+        <AvatarGroup size="sizeIcon110" variant="entity">
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+          <Avatar name="avatar example" icon={UserIcon} />
+        </AvatarGroup>
+      </Stack>
+    </Stack>
+  );
+};
+
 export const GroupedUsingContext = (): React.ReactNode => {
   return (
     <AvatarGroup size="sizeIcon70" variant="entity">