diff --git a/packages/webapp/src/components/AvaterCell.tsx b/packages/webapp/src/components/AvatarCell.tsx
similarity index 100%
rename from packages/webapp/src/components/AvaterCell.tsx
rename to packages/webapp/src/components/AvatarCell.tsx
diff --git a/packages/webapp/src/components/index.tsx b/packages/webapp/src/components/index.tsx
index 79efd3148..4a8478e3d 100644
--- a/packages/webapp/src/components/index.tsx
+++ b/packages/webapp/src/components/index.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import MODIFIER from './modifiers';
 import ContextMenu from './ContextMenu';
-import AvaterCell from './AvaterCell';
+import AvatarCell from './AvatarCell';
 
 export * from './Money/Money';
 export * from './Dialog';
@@ -65,4 +65,4 @@ export * from './Postbox';
 export * from './AppToaster';
 export * from './Layout';
 
-export { MODIFIER, ContextMenu, AvaterCell };
+export { MODIFIER, ContextMenu, AvatarCell };
diff --git a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
index c93bcb31f..0de0a69b5 100644
--- a/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
+++ b/packages/webapp/src/containers/Customers/CustomersLanding/components.tsx
@@ -11,7 +11,7 @@ import {
   Classes,
 } from '@blueprintjs/core';
 
-import { Can, Icon, Money, If, AvaterCell } from '@/components';
+import { Can, Icon, Money, If, AvatarCell } from '@/components';
 import { CustomerAction, AbilitySubject } from '@/constants/abilityOption';
 import { safeCallback } from '@/utils';
 
@@ -121,7 +121,7 @@ export function useCustomersTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        Cell: AvaterCell,
+        Cell: AvatarCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,
diff --git a/packages/webapp/src/containers/Projects/components/ProjectSuggestField.tsx b/packages/webapp/src/containers/Projects/components/ProjectSuggestField.tsx
index 216606a5f..071e0ac41 100644
--- a/packages/webapp/src/containers/Projects/components/ProjectSuggestField.tsx
+++ b/packages/webapp/src/containers/Projects/components/ProjectSuggestField.tsx
@@ -128,10 +128,10 @@ export function ProjectSuggestField({
 }
 
 const AvatarSelect = ({ text }) => {
-  return <AvaterContent>{firstLettersArgs(text?.name)}</AvaterContent>;
+  return <AvatarContent>{firstLettersArgs(text?.name)}</AvatarContent>;
 };
 
-const AvaterContent = styled.div`
+const AvatarContent = styled.div`
   display: inline-block;
   background: #adbcc9;
   text-align: center;
diff --git a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx
index 9cf89c65a..c6eb396e6 100644
--- a/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx
+++ b/packages/webapp/src/containers/Vendors/VendorsLanding/components.tsx
@@ -13,7 +13,7 @@ import {
   Classes,
 } from '@blueprintjs/core';
 
-import { Can, Icon, Money, If, AvaterCell } from '@/components';
+import { Can, Icon, Money, If, AvatarCell } from '@/components';
 import { VendorAction, AbilitySubject } from '@/constants/abilityOption';
 import { safeCallback, firstLettersArgs } from '@/utils';
 
@@ -144,7 +144,7 @@ export function useVendorsTableColumns() {
       {
         id: 'avatar',
         Header: '',
-        Cell: AvaterCell,
+        Cell: AvatarCell,
         className: 'avatar',
         width: 45,
         disableResizing: true,