diff --git a/FILE_MANIFEST.sha256 b/FILE_MANIFEST.sha256
index 5bd4cd6..2022009 100644
--- a/FILE_MANIFEST.sha256
+++ b/FILE_MANIFEST.sha256
@@ -125,10 +125,10 @@ f688db6f440ee7b0129ccc22838de0ee0e0cf2b6376173b05f853ca2555c2c1e  ./src/queries/
 f13f1be3d5789539eba3fc1b59c14835f8c681eca7634e118fa3763a53aeee2b  ./src/queries/zone_history.rs
 2d69811db832c90ce06035ee29665205a04e4c514a21ecae9623991a9b14d825  ./src/state.rs
 b92a6cb158b494fe145b43c7641e65f6fafff47201d7d76edbec2cfd8b94835c  ./systemd/gree-controller.service
-2e4e214a39f2ec4fab32d6cdcb480186c93a30ca7b8cac17fd11b196102324ae  ./web/app.js
+91a8075a424c6b11e8613f99970b4cd4abae57b99a3375a34f7288c50f06900e  ./web/app.js
 e98bdd7204349cce1ec6f57283509697af0bbc72280622a6c3efa6fed242db4f  ./web/favicon.svg
 fe994148bb0e28027c9ddf5962a4878e2bde6d8158cbac1fb76c8363bea6405e  ./web/index.html
 fd26156e9f1d6713d3def564ad000553d9a16a24376059701db2ee762c99ee6c  ./web/manifest.webmanifest
-cc5849d3f60fb5c72cde5995dad32a9675e826dbf6b2be5e08382e706cb66fd2  ./web/styles.css
+934080719827e57bf2bac96b2c5cb799d0b6916f619f394be1e5394bc12bb51e  ./web/styles.css
 47d57bebd83e4738f5b6c8dbbcb33d125a657b2b0c3ebcfcc2c4f35ab4484326  ./web/sw.js
 d505d793ce7cc9485b45b78bba1c0d51887adc7451ab59a42702946e5b991382  ./web/theme-init.js
diff --git a/web/app.js b/web/app.js
index 85dbe34..2920756 100644
--- a/web/app.js
+++ b/web/app.js
@@ -149,6 +149,24 @@ function updateTemporaryThermostatCountdowns() {
 }
 const haSensorLabel = entity => app.sensorAliases?.[entity] || app.settings?.home_assistant?.sensor_aliases?.[entity] || entity;
 
+function syncTopbarHeight() {
+  const topbar = $('.topbar');
+  if (!topbar) return;
+  document.documentElement.style.setProperty('--topbar-height', `${Math.ceil(topbar.getBoundingClientRect().height)}px`);
+}
+
+function observeTopbarHeight() {
+  const topbar = $('.topbar');
+  if (!topbar) return;
+  syncTopbarHeight();
+  if ('ResizeObserver' in window) {
+    const observer = new ResizeObserver(syncTopbarHeight);
+    observer.observe(topbar);
+  } else {
+    window.addEventListener('resize', syncTopbarHeight);
+  }
+}
+
 function updateConnectionIndicator(status) {
   app.connectionStatus = status || 'connecting';
   const node = $('#connectionLabel');
@@ -3140,6 +3158,7 @@ window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ()
 if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(()=>{}));
 
 async function startApplication() {
+  observeTopbarHeight();
   applyTheme();
   await loadLanguages();
   applyTranslations();
diff --git a/web/styles.css b/web/styles.css
index 0217584..cc8a1f7 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -257,7 +257,7 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
 .menu-list button:last-child { border-bottom: 0; }
 .auth-dialog { width: min(420px, calc(100% - 30px)); }
 @media (min-width: 900px) {
-  .bottom-nav { top: 92px; right: auto; bottom: auto; left: max(16px, calc((100vw - 1380px)/2)); grid-template-columns: 1fr; width: 90px; border: 1px solid var(--line); border-radius: 22px; padding: 9px; background: var(--surface); }
+  .bottom-nav { top: calc(var(--topbar-height, 72px) + 20px); right: auto; bottom: auto; left: max(16px, calc((100vw - 1380px)/2)); grid-template-columns: 1fr; width: 90px; border: 1px solid var(--line); border-radius: 22px; padding: 9px; background: var(--surface); }
   .bottom-nav button { padding: 10px 4px; }
   main { padding-left: 122px; padding-bottom: 50px; }
 }