diff --git a/apps/service-portal/src/components/Notifications/NotificationLine.tsx b/apps/service-portal/src/components/Notifications/NotificationLine.tsx
index 2e8a14b5aa80..add475d4efff 100644
--- a/apps/service-portal/src/components/Notifications/NotificationLine.tsx
+++ b/apps/service-portal/src/components/Notifications/NotificationLine.tsx
@@ -51,6 +51,8 @@ export const NotificationLine = ({ data, onClickCallback }: Props) => {
             <AvatarImage
               img={data.sender.logoUrl}
               background={!isRead ? 'white' : 'blue100'}
+              as="div"
+              imageClass={styles.img}
             />
           ) : undefined}
           <Box
diff --git a/apps/service-portal/src/components/Notifications/Notifications.css.ts b/apps/service-portal/src/components/Notifications/Notifications.css.ts
index fadcd25bb957..38de426488c8 100644
--- a/apps/service-portal/src/components/Notifications/Notifications.css.ts
+++ b/apps/service-portal/src/components/Notifications/Notifications.css.ts
@@ -9,6 +9,14 @@ export const link = style({
   overflow: 'hidden',
 })
 
+export const img = style({
+  height: 'auto',
+  width: 'auto',
+  display: 'flex',
+  maxHeight: 28,
+  maxWidth: 28,
+})
+
 globalStyle(`${link} > span`, {
   boxShadow: 'none',
 })
diff --git a/libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts b/libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts
index c370bbbb5ef4..dae430067f2a 100644
--- a/libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts
+++ b/libs/service-portal/core/src/components/ActionCard/ActionCard.css.ts
@@ -30,9 +30,11 @@ export const avatar = style({
 })
 
 export const circleImg = style({
-  width: '28px',
   height: 'auto',
+  width: 'auto',
   display: 'flex',
+  maxHeight: 38,
+  maxWidth: 38,
 })
 
 export const button = style({
diff --git a/libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx b/libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx
index ac96192dde52..51094f492fc0 100644
--- a/libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx
+++ b/libs/service-portal/documents/src/components/DocumentLine/AvatarImage.tsx
@@ -13,6 +13,8 @@ interface Props {
   avatar?: ReactNode
   onClick?: (event: MouseEvent<HTMLElement>) => void
   large?: boolean
+  as?: 'div' | 'button'
+  imageClass?: string
 }
 
 export const AvatarImage: FC<Props> = ({
@@ -20,6 +22,8 @@ export const AvatarImage: FC<Props> = ({
   background,
   avatar,
   large,
+  imageClass,
+  as = 'button',
   onClick,
 }) => {
   const { formatMessage } = useLocale()
@@ -38,14 +42,24 @@ export const AvatarImage: FC<Props> = ({
       className={cn(styles.imageContainer, {
         [styles.largeAvatar]: large,
       })}
-      component="button"
-      aria-label={formatMessage(messages.markAsBulkSelection)}
+      component={as}
+      aria-label={
+        as === 'button'
+          ? formatMessage(messages.markAsBulkSelection)
+          : undefined
+      }
       onClick={onClick}
     >
       {avatar ? (
         avatar
       ) : (
-        <img className={styles.image} src={img} alt="document" />
+        <img
+          className={cn(styles.image, {
+            [`${imageClass}`]: imageClass,
+          })}
+          src={img}
+          alt="document"
+        />
       )}
     </Box>
   )