diff --git a/src/pretalx/common/templates/common/base.html b/src/pretalx/common/templates/common/base.html
index 9bca7b7190..37cc862c3a 100644
--- a/src/pretalx/common/templates/common/base.html
+++ b/src/pretalx/common/templates/common/base.html
@@ -58,6 +58,7 @@
             <script defer src="{% static "common/js/base.js" %}"></script>
             <script src="{% static "jquery/js/jquery-3.7.1.min.js" %}"></script>
             <script src="{% static "agenda/js/join-online-event.js" %}"></script>
+            <script defer src="{% static "common/js/dropdown.js" %}"></script>
         {% endcompress %}
         {% block scripts %}{% endblock scripts %}
         {% block custom_header %}{% endblock custom_header %}
@@ -94,13 +95,31 @@ <h1>
                     </div>
                     <div class="header-row-right">
                         {% if request.event and request.event.locales|length > 1 and not is_html_export %}
-                            <div class="locales">
-                                {% for l, name in request.event.named_locales %}
-                                    <a href="{% url "cfp:locale.set" event=request.event.slug %}?locale={{ l }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}"
-                                       class="{% if l|lower == request.LANGUAGE_CODE|lower %}active{% endif %}">{{ name }}</a>
-                                {% endfor %}
-                                •&nbsp;
-                            </div>
+                            {% if request.event.locales|length > 3 %}
+                                <details id="locale-dropdown-label" class="dropdown locales" aria-haspopup="menu" role="menu">
+                                    <summary>
+                                        {% for l, name in request.event.named_locales %}
+                                            {% if l|lower == request.LANGUAGE_CODE|lower %}{{ name }}{% endif %}
+                                        {% endfor %}
+                                        <i class="fa fa-caret-down ml-1"></i>
+                                    </summary>
+                                    <div id="locale-dropdown" class="dropdown-content dropdown-content-s{% if rtl %}e{% else %}w{% endif %}">
+                                        {% for l, name in request.event.named_locales %}
+                                            <a href="{% url "cfp:locale.set" event=request.event.slug %}?locale={{ l }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}"
+                                               class="dropdown-item {% if l|lower == request.LANGUAGE_CODE|lower %}active{% endif %}" role="menuitem" tabindex="-1">{{ name }}</a>
+                                        {% endfor %}
+                                    </div>
+                                </details>
+                            {% else %}
+                                <div class="locales-inline">
+                                    {% for l, name in request.event.named_locales %}
+                                        <a href="{% url "cfp:locale.set" event=request.event.slug %}?locale={{ l }}&next={{ request.path }}%3F{{ request.META.QUERY_STRING|urlencode }}"
+                                           class="locale-link {% if l|lower == request.LANGUAGE_CODE|lower %}active{% endif %}">
+                                            {{ name }}
+                                        </a>
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
                         {% endif %}
                         {% block header_right %}{% endblock header_right %}
                         {% if request.event and request.user.is_authenticated and not is_html_export %}
diff --git a/src/pretalx/static/cfp/css/_layout.css b/src/pretalx/static/cfp/css/_layout.css
index a4d0a1c053..f600d456fd 100644
--- a/src/pretalx/static/cfp/css/_layout.css
+++ b/src/pretalx/static/cfp/css/_layout.css
@@ -45,16 +45,18 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    word-break: break-word;
+    word-break: keep-all;
+    flex-wrap: nowrap;
   }
   #header-tabs {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     z-index: 400;
     background: var(--color-bg);
     border-radius: var(--size-border-radius) var(--size-border-radius) 0 0;
     margin-bottom: -4px;
     padding-bottom: 4px;
+    flex-shrink: 0;
     a.header-tab {
       padding: 8px 10px 4px 10px;
       border-bottom: 2px solid transparent;
@@ -72,27 +74,65 @@ header {
     color: white;
     margin-left: auto;
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
 
-    .locales {
-      margin-right: 20px;
+    /* Inline locale links */
+    .locales-inline {
+      display: inline-block;
+      margin-right: 0.8rem;
     }
 
-    .locales a:hover {
-      border-bottom: 1px dashed white;
+    .locale-link {
+      color: white;
       text-decoration: none;
+      font-size: 0.9rem;
+      opacity: 0.9;
+      transition: opacity 0.2s;
+      margin-left: 0.65rem;
     }
-    a {
-      color: white;
+
+    .locale-link:hover {
+      opacity: 1;
+      text-decoration: underline;
     }
 
-    .locales a:hover {
-      border-bottom: 1px dashed white;
-      text-decoration: none;
+    .locale-link.active {
+      font-weight: bold;
+      opacity: 1;
     }
 
-    .locales a.active {
-      border-bottom: 1px solid white;
+    .locales {
+      margin-right: 20px;
+      
+      summary {
+        cursor: pointer;
+      }
+      
+      .dropdown-content {
+        border: 1px solid var(--color-grey-lighter);
+        border-radius: 4px;
+        right: 0;
+        left: auto;
+        min-width: 100px;
+        
+        .dropdown-item {
+          &:hover {
+            background-color: var(--color-primary-lighter);
+            color: var(--color-grey-dark);
+            text-decoration: none;
+          }
+          
+          &.active {
+            background-color: var(--color-primary);
+            color: white;
+            
+            &:hover {
+              background-color: var(--color-primary-dark, var(--color-primary));
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/pretalx/static/common/js/dropdown.js b/src/pretalx/static/common/js/dropdown.js
new file mode 100644
index 0000000000..06b9216d27
--- /dev/null
+++ b/src/pretalx/static/common/js/dropdown.js
@@ -0,0 +1,23 @@
+(function() {
+    'use strict';
+    
+    var initDropdowns = function() {
+        // Only handle actual dropdown elements
+        var dropdowns = document.querySelectorAll('details.dropdown');
+        
+        document.addEventListener('click', function(event) {
+            dropdowns.forEach(function(dropdown) {
+                if (dropdown.hasAttribute('open') && !dropdown.contains(event.target)) {
+                    dropdown.removeAttribute('open');
+                }
+            });
+        });
+    };
+    
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initDropdowns);
+    } else {
+        initDropdowns();
+    }
+})();