diff --git a/app/assets/stylesheets/dropdown.css b/app/assets/stylesheets/dropdown.css
index 648ee5b03..8caddc15f 100644
--- a/app/assets/stylesheets/dropdown.css
+++ b/app/assets/stylesheets/dropdown.css
@@ -16,6 +16,19 @@
   text-decoration: none;
 }
 
+.dropdown-caret {
+  display: inline-block;
+  margin-inline-start: 6px;
+  border-inline: 4px solid transparent;
+  border-block-start: 5px solid var(--oc-gray-1);
+  border-block-end: 0;
+  transition: transform 0.15s ease;
+}
+
+.dropdown:has(> .dropdown-content:not(.hidden)) .dropdown-caret {
+  transform: rotate(180deg);
+}
+
 .dropdown-content {
   position: absolute;
   inset-block-start: 100%;
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index b294a2bff..1ae5ecf9c 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -68,6 +68,7 @@
     <div id="account" class="dropdown" data-controller="dropdown">
       <a href="#" class="dropdown-trigger" data-action="click->dropdown#toggle">
         <%= avatar(User.current, :size => "22") %>
+        <span class="dropdown-caret" aria-hidden="true"></span>
       </a>
       <div class="dropdown-content hidden" data-dropdown-target="content">
         <div class="user-info">