diff --git a/frontend/web/components/navigation/AccountDropdown.tsx b/frontend/web/components/navigation/AccountDropdown.tsx
index 851702555154..bbc335a7ad97 100644
--- a/frontend/web/components/navigation/AccountDropdown.tsx
+++ b/frontend/web/components/navigation/AccountDropdown.tsx
@@ -56,7 +56,7 @@ const AccountDropdown: React.FC = () => {
   return (
     <div className='feature-action' tabIndex={-1}>
       <button
-        className='btn btn-link p-0 d-flex ps-3 lh-1 align-items-center'
+        className='account-dropdown-trigger d-flex ps-3 lh-1 align-items-center text-default'
         onClick={(e) => {
           e.stopPropagation()
           setIsOpen(!isOpen)
@@ -65,8 +65,8 @@ const AccountDropdown: React.FC = () => {
         id='account-settings-link'
         data-test='account-settings-link'
       >
-        <span className='mr-1'>
-          <Icon name='person' width={20} fill='#9DA4AE' />
+        <span className='mr-1 icon-secondary'>
+          <Icon name='person' width={20} />
         </span>
         <span className='d-none d-md-block'>Account</span>
       </button>
diff --git a/frontend/web/styles/project/_project-nav.scss b/frontend/web/styles/project/_project-nav.scss
index 06e3b3c5751b..e9a3d5e53b16 100644
--- a/frontend/web/styles/project/_project-nav.scss
+++ b/frontend/web/styles/project/_project-nav.scss
@@ -13,6 +13,17 @@ nav a {
     font-weight: bold;
   }
 }
+.account-dropdown-trigger {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+
+  &:hover,
+  &:focus {
+    color: var(--color-text-action);
+  }
+}
 .nav-sub-link-disabled {
   cursor: not-allowed;
   span {