diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
index b4ce8542..f7237048 100644
--- a/pwnagotchi/ui/web/static/css/style.css
+++ b/pwnagotchi/ui/web/static/css/style.css
@@ -9,6 +9,7 @@ form {
     left: 0;
     width: 100vw;
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
     display: flex;
     flex-direction: column;
 }
diff --git a/pwnagotchi/ui/web/static/js/viewportHeight.js b/pwnagotchi/ui/web/static/js/viewportHeight.js
new file mode 100644
index 00000000..ebdc4238
--- /dev/null
+++ b/pwnagotchi/ui/web/static/js/viewportHeight.js
@@ -0,0 +1,17 @@
+/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/*/
+
+var lastViewportHeight;
+
+function updateViewportSize() {
+  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+  var vh = window.innerHeight * 0.01;
+  if (!lastViewportHeight || lastViewportHeight !== vh) {
+    // Then we set the value in the --vh custom property to the root of the document
+    document.documentElement.style.setProperty("--vh", vh + "px");
+    lastViewportHeight = vh;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  updateViewportSize();
+});
\ No newline at end of file
diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html
index c8e70320..c03f550f 100644
--- a/pwnagotchi/ui/web/templates/index.html
+++ b/pwnagotchi/ui/web/templates/index.html
@@ -24,6 +24,7 @@
   </div>
 </div>
 
+<script type="text/javascript" src="/js/refresh.js"></script>
 <script type="text/javascript" src="/js/refresh.js"></script>
 
 </body>