diff --git a/package-lock.json b/package-lock.json
index 4235c4a..8de10d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "@mui/material": "^5.11.14",
         "@rollup/plugin-url": "^6.1.0",
         "buffer": "^6.0.3",
-        "postcss": "^8.3.6",
+        "postcss": "^8.4.31",
         "react-oidc-context": "^2.2.2",
         "react-toastify": "^9.1.1",
         "react-transition-group": "^4.4.2",
@@ -13239,9 +13239,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -26593,9 +26593,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
diff --git a/package.json b/package.json
index b33cc58..b709de1 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "@mui/material": "^5.11.14",
     "@rollup/plugin-url": "^6.1.0",
     "buffer": "^6.0.3",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.31",
     "react-oidc-context": "^2.2.2",
     "react-toastify": "^9.1.1",
     "react-transition-group": "^4.4.2",
diff --git a/src/components/UserPopup/index.tsx b/src/components/UserPopup/index.tsx
index b2b1641..00dc71f 100644
--- a/src/components/UserPopup/index.tsx
+++ b/src/components/UserPopup/index.tsx
@@ -46,15 +46,15 @@ export const UserPopup = (props: UserPopupProps) => {
   return (
     <ScopedCssBaseline>
       <UserPopUp>
-        <UserPopUpContainer>
-          <StyledAvatar alt={user.name[0]}>
-            {user.name[0].charAt(0)}
-          </StyledAvatar>
-          <UserName>{user.name}</UserName>
-          <EmailContainer>
-            <IconGreen />
-            <p>{user.email}</p>
-          </EmailContainer>
+    <UserPopUpContainer>
+      <StyledAvatar alt={user.name[0] ?? user.username?.charAt(0)}>
+        {(user.name[0] ?? user.username?.charAt(0)) ?? ''}
+      </StyledAvatar>
+      <UserName>{user.name ?? user.username ?? 'User Display Name'}</UserName>
+      <EmailContainer>
+        <IconGreen />
+        <p>{user.email}</p>
+      </EmailContainer>
           <ManageAccount href={`${accountManagementUrl}`}>
             Gerenciar sua conta
           </ManageAccount>
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 03b7c84..850d7bc 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -15,6 +15,7 @@ export interface Position {
 export interface User {
   name: string;
   email: string;
+  username?: string;
   profilePictureUrl?: string;
   positions?: Position[];
 }
diff --git a/src/lib-components/Navbar/index.tsx b/src/lib-components/Navbar/index.tsx
index b69adc7..8e30c2f 100644
--- a/src/lib-components/Navbar/index.tsx
+++ b/src/lib-components/Navbar/index.tsx
@@ -84,7 +84,8 @@ export const Navbar = ({
       if (auth) {
         setProfile({
           name: auth.user?.profile?.given_name ?? '',
-          email: auth.user?.profile?.email ?? ''
+          email: auth.user?.profile?.email ?? '',
+          username: auth.user?.profile?.preferred_username ?? '',
         });
       }
     }
@@ -190,8 +191,8 @@ export const Navbar = ({
                     color='inherit'
                   >
                     <Avatar sx={{ bgcolor: '#db1e2f' }} alt={profile.name[0]}>
-                      {profile.name[0].charAt(0)}
-                    </Avatar>
+  {profile.name[0]?.charAt(0) ?? profile.username?.charAt(0) ?? ''}
+</Avatar>
                   </IconButton>
                 </>
               )}