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,34 +15,45 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
   const hexKey = useSelector((state: State) => state.auth.usersPubkey)
 
   return (
-    <IconButton
+    <div
-      aria-label="account of current user"
+      style={{
-      aria-controls="menu-appbar"
+        display: 'flex',
-      aria-haspopup="true"
+        flexDirection: 'row',
-      onClick={handleClick}
+        justifyContent: 'end',
-      color="inherit"
+        alignItems: 'center',
+        gap: '12px'
+      }}
     >
-      <img
-        src={avatarContent}
-        alt="user-avatar"
-        className="profile-image"
-        style={{
-          borderWidth: '3px',
-          borderStyle: hexKey ? 'solid' : 'none',
-          borderColor: `#${hexKey?.substring(0, 6)}`
-        }}
-      />
       <Typography
         variant="h6"
         sx={{
-          color: '#3e3e3e',
+          fontWeight: 500,
-          padding: '0 8px',
+          fontSize: '14px',
+          color: 'var(--text-color)',
           display: { xs: 'none', md: 'flex' }
         }}
       >
-        {username}
+        {username || 'test'}
       </Typography>
-    </IconButton>
+      <IconButton
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleClick}
+        color="inherit"
+      >
+        <img
+          src={avatarContent}
+          alt="user-avatar"
+          className="profile-image"
+          style={{
+            borderWidth: '3px',
+            borderStyle: hexKey ? 'solid' : 'none',
+            borderColor: `#${hexKey?.substring(0, 6)}`
+          }}
+        />
+      </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: {