diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css
index b49bfb7ee..88e7a1b11 100644
--- a/src/main/resources/static/css/general.css
+++ b/src/main/resources/static/css/general.css
@@ -1,7 +1,8 @@
 #page-container {
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow-x: clip;
 }
 
 #content-wrap {
diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index f9b3f3072..31099cdf2 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -162,6 +162,7 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   text-wrap: wrap;
   word-break: break-word;
   width: 80%;
+  font-size: large;
 }
 
 .close-icon {
@@ -476,6 +477,9 @@ html[dir="rtl"] .dropdown-menu[data-bs-popper] {
   display: flex;
   gap: 30px;
   justify-content: center;
+  width: 140%;
+  position: relative;
+  left: -20%;
 }
 
 .feature-group {
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 593d8c213..ca4ced807 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,4 +1,4 @@
-<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000">
+<div th:fragment="navbar" class="mx-auto" style="position: sticky; top:0; z-index:10000; width:100%">
   <script th:src="@{'/js/languageSelection.js'}"></script>
   <script th:src="@{'/js/navbar.js'}"></script>
   <script th:src="@{'/js/additionalLanguageCode.js'}"></script>
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 3842c1fe7..bba498db5 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -7,20 +7,18 @@
 </head>
 
 <body>
-  <div id="page-container">
-    <div id="content-wrap">
-      <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
-
-
-
+  <div id="page-container">  
+        <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
+    <div style="transform-origin: top;"
+    id="scale-wrap">
       <br class="d-md-none">
       <!-- Features -->
       <script th:src="@{'/js/homecard.js'}"></script>
       <div style="
       width: 100%;
       display: flex;
-      flex-direction: column;">
-
+      flex-direction: column;"
+      >
         <div>
           <br>
           <div style="justify-content: center; display: flex;">
@@ -123,9 +121,10 @@
           </div>
 
         </div>
+            <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
+
       </div>
     </div>
-    <th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
   </div>
 
 
@@ -222,7 +221,21 @@
     window.showSurvey = /*[[${showSurveyFromDocker}]]*/ true
   </script>
   <script th:src="@{'/js/pages/home.js'}" th:inline="javascript"></script>
-
+  <script>
+    function applyScale() {
+      const baseWidth = 1440;
+      const baseHeight = 1000;
+      const scaleX = window.innerWidth / baseWidth;
+      const scaleY = window.innerHeight / baseHeight;
+      const scale = Math.max(0.9, Math.min(scaleX, scaleY)); // keep aspect ratio, honor minScale
+      const ui = document.getElementById('scale-wrap');
+      ui.style.transform = `scale(${scale*0.75})`;
+    }
+  
+    window.addEventListener('resize', applyScale);
+    window.addEventListener('load', applyScale);
+  </script>
+  
 
 </body>
 
