diff --git a/src/layouts/demo2/header/HeaderTopbar.tsx b/src/layouts/demo2/header/HeaderTopbar.tsx
index 5256605..30e26f1 100644
--- a/src/layouts/demo2/header/HeaderTopbar.tsx
+++ b/src/layouts/demo2/header/HeaderTopbar.tsx
@@ -25,21 +25,21 @@ const HeaderTopbar = () => {
   const handleDropdownChatShow = () => {
     window.dispatchEvent(new Event('resize'));
   };
-  
+
   return (
     <div className="flex items-center gap-4">
-      <div className="hidden md:flex flex-col items-end mr-2 text-right">
+      <div className="hidden md:flex flex-col items-end mr-2 text-right mt-1">
         <span
-          className={`font-semibold text-sm leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
+          className={`font-semibold text-lg leading-tight ${isSticky ? 'text-black' : 'text-white'}`}
         >
           {getAuth()?.user.username}
         </span>
-        <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-gray-400'}`}>
-          {getAuth()?.role_name}
+        <span className={`text-xs ${isSticky ? 'text-gray-700' : 'text-white'}`}>
+          as {getAuth()?.role_name}
         </span>
       </div>
 
-      <Menu>
+      <Menu className="w-12 h-12">
         <MenuItem
           ref={itemUserRef}
           toggle="dropdown"
@@ -56,9 +56,9 @@ const HeaderTopbar = () => {
             ]
           }}
         >
-          <MenuToggle className="btn btn-icon rounded-full">
+          <MenuToggle className="btn btn-icon rounded-full w-12 h-12">
             <img
-              className="w-9 h-9 rounded-full border border-gray-500 object-cover"
+              className="w-12 h-12 rounded-full border border-gray-500 object-cover"
               src={toAbsoluteUrl('/media/avatars/profile.png')}
               alt="User avatar"
             />
@@ -70,4 +70,4 @@ const HeaderTopbar = () => {
   );
 };
 
-export { HeaderTopbar };
\ No newline at end of file
+export { HeaderTopbar };