diff --git a/stirling-pdf/src/main/resources/static/css/navbar.css b/stirling-pdf/src/main/resources/static/css/navbar.css
index 78c806267..bf3488d81 100644
--- a/stirling-pdf/src/main/resources/static/css/navbar.css
+++ b/stirling-pdf/src/main/resources/static/css/navbar.css
@@ -479,9 +479,8 @@ html[dir="rtl"] .dropdown-menu[data-bs-popper] {
   display: flex;
   gap: 30px;
   justify-content: center;
-  width: 140%;
+  width: 100%;
   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 c6d8c17f8..4b06c819b 100644
--- a/stirling-pdf/src/main/resources/templates/fragments/common.html
+++ b/stirling-pdf/src/main/resources/templates/fragments/common.html
@@ -32,8 +32,8 @@
       
       // Counter-scale to maintain same visual size
       const navScale = 1.1 / currentDPR;
-      // Scale dropdowns relative to navbar scaling to keep them proportional
-      const dropdownScale = Math.min(1.1, 1.1 / Math.sqrt(currentDPR));
+      // Dropdowns at 100% (no additional scaling)
+      const dropdownScale = 1.0;
       
       console.log('DPR:', currentDPR, 'navScale:', navScale, 'will apply scaling');
       
@@ -51,16 +51,28 @@
         const marginAdjustment = scaledHeight - baseHeight;
         navbar.style.marginBottom = `${marginAdjustment}px`;
         
+        // Adjust responsive breakpoint based on effective width after scaling
+        const effectiveWidth = window.innerWidth / navScale;
+        if (effectiveWidth >= 1200) {
+          navbar.classList.add('navbar-expand-lg');
+          navbar.classList.remove('navbar-expand-xl');
+        } else {
+          navbar.classList.add('navbar-expand-xl');
+          navbar.classList.remove('navbar-expand-lg');
+        }
         
-        console.log('Applied navbar scale:', navScale);
+        console.log('Applied navbar scale:', navScale, 'effective width:', effectiveWidth);
       }
       
       setTimeout(() => {
         const dropdowns = document.querySelectorAll('.dropdown-menu');
         dropdowns.forEach(dropdown => {
-          dropdown.style.transform = `scale(${dropdownScale})`;
+          // Scale content, not container
+          dropdown.style.fontSize = `${dropdownScale}em`;
+          // Reset any container scaling
+          dropdown.style.transform = '';
         });
-        console.log('Applied dropdown scale:', dropdownScale);
+        console.log('Applied dropdown content scale:', dropdownScale);
       }, 100);
     }
     
@@ -68,14 +80,13 @@
     
     document.addEventListener('DOMContentLoaded', scaleNav);
     
-    // Poll for DPR changes every 200ms
     setInterval(() => {
       const currentDPR = window.devicePixelRatio;
       if (Math.abs(currentDPR - lastDPR) > 0.01) {
         lastDPR = currentDPR;
         scaleNav();
       }
-    }, 200);
+    }, 100);
   </script>
   <script th:src="@{'/js/thirdParty/pdf-lib.min.js'}"></script>
   <script th:src="@{'/js/fetch-utils.js'}"></script>
diff --git a/stirling-pdf/src/main/resources/templates/fragments/footer.html b/stirling-pdf/src/main/resources/templates/fragments/footer.html
index 01616ddca..2d8465bf5 100644
--- a/stirling-pdf/src/main/resources/templates/fragments/footer.html
+++ b/stirling-pdf/src/main/resources/templates/fragments/footer.html
@@ -1,7 +1,7 @@
 <footer th:fragment="footer" id="footer" class="text-center">
   
   <script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script>
-  <div class="footer-center pb-4">
+  <div class="footer-center">
     <!-- Links section -->
     <div class="d-flex justify-content-center">
       <ul class="list-unstyled footer-link-list">
diff --git a/stirling-pdf/src/main/resources/templates/fragments/navbar.html b/stirling-pdf/src/main/resources/templates/fragments/navbar.html
index ca4ced807..bf7d3707e 100644
--- a/stirling-pdf/src/main/resources/templates/fragments/navbar.html
+++ b/stirling-pdf/src/main/resources/templates/fragments/navbar.html
@@ -23,7 +23,7 @@
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-color: var(--md-nav-color-on-seperator)">
-    <div class="container ">
+    <div class="container " style="max-width: 100%;">
       <a class="navbar-brand" th:href="${@contextPath}" style="display: flex;">
         <img class="main-icon" th:src="@{'/favicon.svg'}" alt="icon">
         <span class="icon-text" th:text="${@navBarText}"></span>
diff --git a/stirling-pdf/src/main/resources/templates/home.html b/stirling-pdf/src/main/resources/templates/home.html
index 3d4908e9c..5e3edd837 100644
--- a/stirling-pdf/src/main/resources/templates/home.html
+++ b/stirling-pdf/src/main/resources/templates/home.html
@@ -7,9 +7,9 @@
 </head>
 
 <body>
-  <div class="page-container" style="height:98vh; max-height:98vh; overflow-x:hidden;">
+  <div class="page-container" style="max-height:100vh;">
     <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-    <div style="transform-origin: center top; flex:0 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;" id="scale-wrap">
+    <div style="transform-origin: center top; flex:0 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; " id="scale-wrap">
       <br class="d-md-none">
       <!-- Features -->
       <script th:src="@{'/js/homecard.js'}"></script>
@@ -99,6 +99,7 @@
         </div>
         <div>
         </div>
+        <div style="width:100%; overflow-x:visible;">
         <div class="features-container" style="  border-top: 1px;
         border-top-style: solid;
         border-color: var(--md-nav-color-on-seperator);
@@ -115,7 +116,7 @@
           </div>
 
         </div>
-
+</div>
       </div>   
           <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
     </div>
@@ -231,19 +232,26 @@
       const space = container.offsetHeight - navH;
       const origH = el.scrollHeight;
       
-      let finalS = Math.min(s * 0.75, (space * 0.98) / origH);
-      finalS = Math.max(0.5, finalS);
+      // Adjust for taller screens - use more vertical space on tall aspect ratios
+      const aspectRatio = window.innerWidth / window.innerHeight;
+      const tallScreenBonus = aspectRatio < 1.5 ? 0.1 : 0; // 10% bonus for tall screens
+      
+      let finalS = Math.min(s * 0.75, (space * (0.98 + tallScreenBonus)) / origH);
+      finalS = Math.max(0.7, finalS);
       
       el.style.transform = `scale(${finalS})`;
       el.style.transformOrigin = 'top center';
       el.style.height = `${origH * finalS}px`;
       
-      // Adjust features container width to use full available space
+      // Dynamically adjust features container width based on scale
       const featuresContainer = document.querySelector('.features-container');
       if (featuresContainer) {
-        const compensatedWidth = Math.min(140, 100 / finalS); // Max 140%, min what's needed
-        featuresContainer.style.width = `${compensatedWidth}%`;
+        const dynamicWidth = Math.min(140, 100 / finalS);
+        const leftOffset = (dynamicWidth - 100) / 2;
+        featuresContainer.style.width = `${dynamicWidth}%`;
+        featuresContainer.style.left = `-${leftOffset}%`;
       }
+      
     }
     let prevW = window.innerWidth;
     let prevH = window.innerHeight;