diff --git a/src/renderer/src/components/Avatar/ModelAvatar.tsx b/src/renderer/src/components/Avatar/ModelAvatar.tsx
index dccbeb0a68..0c85c61b66 100644
--- a/src/renderer/src/components/Avatar/ModelAvatar.tsx
+++ b/src/renderer/src/components/Avatar/ModelAvatar.tsx
@@ -13,9 +13,13 @@ interface Props {
 }
 
 const ModelAvatar: FC<Props> = ({ model, size, className, ...props }) => {
-  const classNames = cn('flex items-center justify-center', `h-[${size}px] w-[${size}px]`, `${className || ''}`)
   return (
-    <Avatar src={getModelLogo(model?.id || '')} {...props} className={classNames}>
+    <Avatar
+      src={getModelLogo(model?.id || '')}
+      radius="lg"
+      className={cn('flex items-center justify-center', `${className || ''}`)}
+      style={{ width: size, height: size }}
+      {...props}>
       {first(model?.name)}
     </Avatar>
   )
diff --git a/src/renderer/src/components/ProviderAvatar.tsx b/src/renderer/src/components/ProviderAvatar.tsx
index 5460ed66bb..536dadc874 100644
--- a/src/renderer/src/components/ProviderAvatar.tsx
+++ b/src/renderer/src/components/ProviderAvatar.tsx
@@ -72,9 +72,9 @@ export const ProviderAvatarPrimitive: React.FC<ProviderAvatarPrimitiveProps> = (
         backgroundColor,
         color,
         ...style
-      }}>
-      {getFirstCharacter(providerName)}
-    </Avatar>
+      }}
+      name={getFirstCharacter(providerName)}
+    />
   )
 }
 
diff --git a/src/renderer/src/hooks/useOcrProvider.tsx b/src/renderer/src/hooks/useOcrProvider.tsx
index d34a2915dd..01ecab885a 100644
--- a/src/renderer/src/hooks/useOcrProvider.tsx
+++ b/src/renderer/src/hooks/useOcrProvider.tsx
@@ -72,11 +72,11 @@ export const useOcrProviders = () => {
     if (isBuiltinOcrProvider(p)) {
       switch (p.id) {
         case 'tesseract':
-          return <Avatar className={`h-[${size}px] w-[${size}px]`} src={TesseractLogo} />
+          return <Avatar src={TesseractLogo} style={{ width: size, height: size }} />
         case 'system':
           return <MonitorIcon size={size} />
         case 'paddleocr':
-          return <Avatar className={`h-[${size}px] w-[${size}px]`} src={PaddleocrLogo} />
+          return <Avatar src={PaddleocrLogo} style={{ width: size, height: size }} />
       }
     }
     return <FileQuestionMarkIcon size={size} />