src/components/AppBar/AppBar.tsx

@@ -170,7 +170,10 @@ export const AppBar = () => {
                   <MenuItem
                     sx={{
                       justifyContent: 'center',
-                      display: { md: 'none' }
+                      display: { md: 'none' },
+                      fontWeight: 500,
+                      fontSize: '14px',
+                      color: 'var(--text-color)'
                     }}
                   >
                     <Typography variant="h6">{username}</Typography>

src/components/username.tsx

@@ -15,6 +15,26 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
   const hexKey = useSelector((state: State) => state.auth.usersPubkey)
 
   return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'end',
+        alignItems: 'center',
+        gap: '12px'
+      }}
+    >
+      <Typography
+        variant="h6"
+        sx={{
+          fontWeight: 500,
+          fontSize: '14px',
+          color: 'var(--text-color)',
+          display: { xs: 'none', md: 'flex' }
+        }}
+      >
+        {username || 'test'}
+      </Typography>
       <IconButton
         aria-label="account of current user"
         aria-controls="menu-appbar"
@@ -32,17 +52,8 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
             borderColor: `#${hexKey?.substring(0, 6)}`
           }}
         />
-      <Typography
-        variant="h6"
-        sx={{
-          color: '#3e3e3e',
-          padding: '0 8px',
-          display: { xs: 'none', md: 'flex' }
-        }}
-      >
-        {username}
-      </Typography>
       </IconButton>
+    </div>
   )
 }
 

src/layouts/modal/index.tsx

@@ -59,7 +59,13 @@ export const Modal = () => {
             onClick={handleClose}
             sx={{
               fontSize: '18px',
-              color: 'rgba(0, 0, 0, 0.5)'
+              color: 'rgba(0, 0, 0, 0.5)',
+              padding: '8px 15px',
+              borderRadius: '4px',
+              ':hover': {
+                background: 'var(--primary-light)',
+                color: 'white'
+              }
             }}
           >
             <svg

src/theme/index.ts

@@ -74,18 +74,6 @@ export const theme = extendTheme({
       defaultProps: {
         fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
       }
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          padding: '8px 15px',
-          borderRadius: '4px',
-          ':hover': {
-            background: 'var(--primary-light)',
-            color: 'white'
-          }
-        }
-      }
     }
   },
   breakpoints: {