diff --git a/pwnagotchi/ui/web/static/css/style.css b/pwnagotchi/ui/web/static/css/style.css
index 060a984e..b4ce8542 100644
--- a/pwnagotchi/ui/web/static/css/style.css
+++ b/pwnagotchi/ui/web/static/css/style.css
@@ -1,42 +1,67 @@
-.block {
-    -webkit-appearance: button;
-    -moz-appearance: button;
-    appearance: button;
-
-    display: block;
-    cursor: pointer;
-    text-align: center;
+form {
+    margin-block-end: 0;
 }
 
-img#ui {
-    width:100%;
-}
 
-.full {
+.content {
     position: absolute;
-    top:0;
-    left:0;
-    width:100%;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
+/**
+ * make sure image is displayed without any blur
+ */
 .pixelated {
-  image-rendering:optimizeSpeed;             /* Legal fallback */
-  image-rendering:-moz-crisp-edges;          /* Firefox        */
-  image-rendering:-o-crisp-edges;            /* Opera          */
-  image-rendering:-webkit-optimize-contrast; /* Safari         */
-  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
-  image-rendering:crisp-edges;               /* CSS4 Proposed  */
-  image-rendering:pixelated;                 /* CSS4 Proposed  */
-  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
+    image-rendering: optimizeSpeed; /* Legal fallback */
+    image-rendering: -moz-crisp-edges; /* Firefox        */
+    image-rendering: -o-crisp-edges; /* Opera          */
+    image-rendering: -webkit-optimize-contrast; /* Safari         */
+    image-rendering: optimize-contrast; /* CSS3 Proposed  */
+    image-rendering: crisp-edges; /* CSS4 Proposed  */
+    image-rendering: pixelated; /* CSS4 Proposed  */
+    -ms-interpolation-mode: nearest-neighbor; /* IE8+           */
 }
 
-form.action {
-    display:inline;
+.image-wrapper {
+    flex: 1;
+    position: relative;
+}
+
+.ui-image {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    max-width: 100vw;
+    height: 100%;
+    object-fit: contain;
+    object-position: 0 0;
+}
+
+.buttons-wrapper {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 16px;
+}
+
+.button {
+    border: 1px solid black;
+    border-radius: 4px;
+    font-size: 2em;
+    background: #f8b506;
+    margin: 16px;
 }
 
 div.status {
     position: absolute;
-    top:0;
-    left:0;
-    width:100%;
+    top: 0;
+    left: 0;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/pwnagotchi/ui/web/templates/index.html b/pwnagotchi/ui/web/templates/index.html
index 50ec1e25..c8e70320 100644
--- a/pwnagotchi/ui/web/templates/index.html
+++ b/pwnagotchi/ui/web/templates/index.html
@@ -1,26 +1,27 @@
 <html>
 <head>
-    <title>{{ title }}</title>
-    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
+  <title>{{ title }}</title>
+  <link rel="stylesheet" type="text/css" href="/css/style.css"/>
 </head>
 <body>
-<div class="full pixelated">
-    <img src="/ui" id="ui"/>
-    <br/>
-    <hr/>
-
+<div class="content">
+  <div class="image-wrapper">
+    <img class="ui-image pixelated" src="/ui" id="ui"/>
+  </div>
+  <div class="buttons-wrapper">
     <form class="action" method="POST" action="/shutdown"
           onsubmit="return confirm('This will halt the unit, continue?');">
-        <input style="display:inline;" type="submit" class="block" value="Shutdown"/>
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+      <input type="submit" class="button" value="Shutdown"/>
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
     </form>
 
     <form class="action" method="POST" action="/restart"
           onsubmit="return confirm('This will restart the service in {{ other_mode }} mode, continue?');">
-        <input style="display:inline;" type="submit" class="block" value="Restart in {{ other_mode }} mode"/>
-        <input type="hidden" name="mode" value="{{ other_mode }}"/>
-        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+      <input type="submit" class="button" value="Restart in {{ other_mode }} mode"/>
+      <input type="hidden" name="mode" value="{{ other_mode }}"/>
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
     </form>
+  </div>
 </div>
 
 <script type="text/javascript" src="/js/refresh.js"></script>
