diff --git a/stirling-pdf/src/main/resources/static/css/navbar.css b/stirling-pdf/src/main/resources/static/css/navbar.css
index bf3488d81..78c806267 100644
--- a/stirling-pdf/src/main/resources/static/css/navbar.css
+++ b/stirling-pdf/src/main/resources/static/css/navbar.css
@@ -479,8 +479,9 @@ html[dir="rtl"] .dropdown-menu[data-bs-popper] {
   display: flex;
   gap: 30px;
   justify-content: center;
-  width: 100%;
+  width: 140%;
   position: relative;
+  left: -20%;
 }
 
 .feature-group {
diff --git a/stirling-pdf/src/main/resources/templates/fragments/common.html b/stirling-pdf/src/main/resources/templates/fragments/common.html
index 558aab917..c6d8c17f8 100644
--- a/stirling-pdf/src/main/resources/templates/fragments/common.html
+++ b/stirling-pdf/src/main/resources/templates/fragments/common.html
@@ -32,9 +32,8 @@
       
       // Counter-scale to maintain same visual size
       const navScale = 1.1 / currentDPR;
-      // Dropdowns are children of navbar, so they inherit the navbar scaling
-      // We need to counter both the browser scaling AND the navbar scaling
-      const dropdownScale = 1.1;
+      // Scale dropdowns relative to navbar scaling to keep them proportional
+      const dropdownScale = Math.min(1.1, 1.1 / Math.sqrt(currentDPR));
       
       console.log('DPR:', currentDPR, 'navScale:', navScale, 'will apply scaling');
       
@@ -46,6 +45,12 @@
         navbar.style.width = `${100 / navScale}%`;
         navbar.style.left = '50%';
         
+        // Adjust bottom margin based on scale to prevent overlap/gaps
+        const baseHeight = 60; // Assume base navbar height
+        const scaledHeight = baseHeight * navScale;
+        const marginAdjustment = scaledHeight - baseHeight;
+        navbar.style.marginBottom = `${marginAdjustment}px`;
+        
         
         console.log('Applied navbar scale:', navScale);
       }