diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx
index 633c32147c2..1b9a8fa3258 100644
--- a/client/src/components/helpers/avatar-renderer.tsx
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -46,7 +46,7 @@ function AvatarRenderer({
       {isPlaceHolderImage ? (
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
-        <Image alt='' className='avatar' src={picture} />
+        <Image alt='' className='avatar' src={picture} responsive />
       )}
     </div>
   );
diff --git a/tools/ui-components/src/image/image.tsx b/tools/ui-components/src/image/image.tsx
index 92dabc9fae3..b561dfd90c5 100644
--- a/tools/ui-components/src/image/image.tsx
+++ b/tools/ui-components/src/image/image.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import { ImageProps } from './image.types';
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({ alt, src, responsive, ...props }, ref): JSX.Element => {
+  ({ alt, src, responsive, className, ...props }, ref): JSX.Element => {
     // If `responsive` is `true`:
     // - Set `display` to `block`
-    // - Set a maximum relative to the parent
+    // - Set a maximum width relative to the parent
     // - Scale the height according to the width, otherwise the image is stretched
-    const className = responsive ? 'block max-w-full h-auto' : '';
+    const classes = responsive
+      ? [className, 'block max-w-full h-auto'].join(' ')
+      : className;
 
-    return (
-      <img ref={ref} alt={alt} src={src} className={className} {...props} />
-    );
+    return <img ref={ref} alt={alt} src={src} className={classes} {...props} />;
   }
 );