diff --git a/src/component/avatar/avatar-default.tsx b/src/component/avatar/avatar-default.tsx
index e0d2826..0bdfafd 100644
--- a/src/component/avatar/avatar-default.tsx
+++ b/src/component/avatar/avatar-default.tsx
@@ -1,7 +1,7 @@
 import { FC, forwardRef } from 'react'
 import { useTheme } from '@mui/material/styles'
 import { Badge, Avatar, Typography } from '@mui/material'
-import { KEY, SizeType } from 'constant'
+import { KEY, TYPOGRAPHY, FONTWEIGHT } from 'constant'
 
 const getCharAtName = (name: string) => name && name.charAt(0).toUpperCase()
 const getCharAtSecondName = (name: string) => name && name.split(' ')[1]?.charAt(0).toUpperCase()
@@ -15,18 +15,10 @@ const getColorByName = (name: string) => {
   return KEY.DEFAULT
 }
 
-interface DefaultAvatarProps {
-  color?: COLOR
-  firstName?: string
-  lastName?: string
-  extension?: string
-  isLarge?: boolean
-  children?: React.ReactNode
-  BadgeProps?: object
-  sx?: object
-}
+const { H4, OVERLINE } = TYPOGRAPHY
+const { BOLD, NORMAL } = FONTWEIGHT
 
-const DefaultAvatar: FC<DefaultAvatarProps> = forwardRef<HTMLDivElement, DefaultAvatarProps>(
+const DefaultAvatar: FC<IDefaultAvatar> = forwardRef<HTMLDivElement, IDefaultAvatar>(
   ({ color, firstName = '', lastName = '', BadgeProps, children, extension, isLarge, sx, ...other }, ref) => {
     const theme = useTheme()
     const charAtName = lastName ? getCharAtName(firstName) + getCharAtName(lastName) : getCharAtName(firstName)
@@ -61,10 +53,10 @@ const DefaultAvatar: FC<DefaultAvatarProps> = forwardRef<HTMLDivElement, Default
           }}
           {...other}>
           <Typography
-            variant={isLarge ? 'h4' : 'overline'}
+            variant={isLarge ? H4 : OVERLINE}
             color={theme.palette[colr].contrastText}
             sx={{
-              fontWeight: isLarge ? 'bold' : 'normal'
+              fontWeight: isLarge ? BOLD : NORMAL
             }}>
             {firstName && charAtName}
           </Typography>
diff --git a/src/component/avatar/avatar.tsx b/src/component/avatar/avatar.tsx
index ff0e631..598c7e7 100644
--- a/src/component/avatar/avatar.tsx
+++ b/src/component/avatar/avatar.tsx
@@ -2,7 +2,6 @@ import { FC, forwardRef } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { Box, Link } from '@mui/material'
 import { GLOBAL } from 'config'
-import DefaultAvatar from './avatar-default'
 
 interface AvatarProps {
   disabledLink?: boolean
diff --git a/src/constant/index.ts b/src/constant/index.ts
index c3fd409..c739a4a 100644
--- a/src/constant/index.ts
+++ b/src/constant/index.ts
@@ -12,5 +12,6 @@ export { default as MENU_POPOVER_ARROW } from './menu-popover-arrow'
 export { default as TITLE } from './title'
 export { default as ARIA } from './aria'
 export { BUTTON } from './button'
+export * from './typography'
 export * from './size'
 export * from './color'
diff --git a/src/constant/typography.ts b/src/constant/typography.ts
new file mode 100644
index 0000000..5f9ab5d
--- /dev/null
+++ b/src/constant/typography.ts
@@ -0,0 +1,27 @@
+export enum TYPOGRAPHY {
+  H0 = 'h0',
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+  H6 = 'h6',
+  H7 = 'h7',
+  BODY1 = 'body1',
+  BODY2 = 'body2',
+  SUBTITLE1 = 'subtitle1',
+  SUBTITLE2 = 'subtitle2',
+  OVERLINE = 'overline',
+  CAPTION = 'caption',
+  BUTTON = 'button',
+  PARAGRAPH = 'paragraph'
+}
+
+export enum FONTWEIGHT {
+  NORMAL = 'normal',
+  LIGHT = 'light',
+  REGULAR = 'regular',
+  MEDIUM = 'medium',
+  BOLD = 'bold',
+  BLACK = 'black'
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 6f8bce5..25c0352 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -90,6 +90,18 @@ declare global {
     xl?: number
   }
 
+  interface IDefaultAvatar {
+    color?: COLOR
+    firstName?: string
+    lastName?: string
+    extension?: string
+    isLarge?: boolean
+    children?: React.ReactNode
+    BadgeProps?: object
+    sx?: object
+  }
+  
+
   interface EndpointBuilder {
     /**
      *