diff --git a/packages/console/src/components/UserAvatar/index.module.scss b/packages/console/src/components/UserAvatar/index.module.scss
index a4a86c13a..7e8dbd60a 100644
--- a/packages/console/src/components/UserAvatar/index.module.scss
+++ b/packages/console/src/components/UserAvatar/index.module.scss
@@ -7,32 +7,32 @@
   border-radius: 8px;
   overflow: hidden;
   flex-shrink: 0;
+}
 
-  &.micro {
-    width: 20px;
-    height: 20px;
-    border-radius: 6px;
-  }
+.micro {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+}
 
-  &.small {
-    width: 24px;
-    height: 24px;
-  }
+.small {
+  width: 24px;
+  height: 24px;
+}
 
-  &.medium {
-    width: 32px;
-    height: 32px;
-  }
+.medium {
+  width: 32px;
+  height: 32px;
+}
 
-  &.large {
-    width: 40px;
-    height: 40px;
-  }
+.large {
+  width: 40px;
+  height: 40px;
+}
 
-  &.xlarge {
-    width: 60px;
-    height: 60px;
-  }
+.xlarge {
+  width: 60px;
+  height: 60px;
 }
 
 .avatar {
diff --git a/packages/console/src/components/UserAvatar/index.tsx b/packages/console/src/components/UserAvatar/index.tsx
index e89429dc8..67670560a 100644
--- a/packages/console/src/components/UserAvatar/index.tsx
+++ b/packages/console/src/components/UserAvatar/index.tsx
@@ -92,16 +92,17 @@ function UserAvatar({ className, size = 'medium', user, hasTooltip = false }: Pr
   );
 
   return (
-    <Tooltip
-      className={styles.tooltip}
-      content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
-    >
-      <div className={wrapperClassName}>
+    <div className={wrapperClassName}>
+      <Tooltip
+        className={styles.tooltip}
+        anchorClassName={styles[size]}
+        content={conditional(hasTooltip && user && <UserInfoTipContent user={user} />)}
+      >
         <div className={avatarClassName} style={{ backgroundColor: color }}>
           {nameToDisplay ? nameToDisplay.charAt(0) : <DefaultAvatar />}
         </div>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   );
 }