diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index 6be35f90..92b60908 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -7,36 +7,20 @@ const avatar = cva({
     color: 'white',
     display: 'flex',
     borderRadius: '50%',
-    justifyContent: 'center',
-    alignItems: 'center',
     userSelect: 'none',
     cursor: 'default',
     flexGrow: 0,
     flexShrink: 0,
+    overflow: 'hidden',
   },
   variants: {
     context: {
-      subtitles: {
-        width: '40px',
-        height: '40px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      list: {
-        width: '32px',
-        height: '32px',
-        fontSize: '1.3rem',
-        lineHeight: '1rem',
-      },
-      placeholder: {
-        width: '100%',
-        height: '100%',
-      },
+      subtitles: { width: '40px', height: '40px' },
+      list: { width: '32px', height: '32px' },
+      placeholder: { width: '100%', height: '100%' },
     },
     notification: {
-      true: {
-        border: '2px solid white',
-      },
+      true: { border: '2px solid white' },
     },
   },
   defaultVariants: {
@@ -54,21 +38,27 @@ export const Avatar = React.memo(
     const initial = name?.trim()?.charAt(0) ?? ''
     return (
       <div
-        style={{
-          backgroundColor: bgColor,
-          ...style,
-        }}
+        style={{ backgroundColor: bgColor, ...style }}
         className={avatar({ context, notification })}
         {...props}
       >
-        <span
+        <svg
+          viewBox="0 0 100 100"
           aria-hidden="true"
-          className={css({
-            marginTop: '-0.3rem',
-          })}
+          className={css({ width: '100%', height: '100%', display: 'block' })}
         >
-          {initial}
-        </span>
+          <text
+            x="50"
+            y="50"
+            textAnchor="middle"
+            dominantBaseline="central"
+            fontSize="52"
+            fontWeight="500"
+            fill="currentColor"
+          >
+            {initial}
+          </text>
+        </svg>
       </div>
     )
   }