diff --git a/web/index.html b/web/index.html
index a66b49c..e00a776 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,11 +5,13 @@
     <link rel="stylesheet" href="pteropus-frame.css">
    </style>
   </head>
-  <body>
+<body>
+  <div id="whole-window">
     <script type="module" src="pteropus-frame.js"></script>
     <canvas id="pteropus-canvas"></canvas>
     <div id="bottom-panel">
       <input type="file" id="file-upload-file-input" name="filename" accept="image/tiff, .tif, .tiff">
     </div>
-  </body>
+  </div>
+</body>
 </html>
diff --git a/web/pteropus-frame.css b/web/pteropus-frame.css
index 01867e4..bfea514 100644
--- a/web/pteropus-frame.css
+++ b/web/pteropus-frame.css
@@ -1,5 +1,22 @@
-#pteropus-canvas {
-    height: 100%;
-    width: 100%;
-    display: block;
+body {
+    margin: 0;
+}
+
+#whole-window {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#pteropus-canvas {
+    display: flex;
+    flex-grow: 1;
+    margin: 0.4rem;
+}
+
+#bottom-panel {
+    display: flex;
+    flex-grow: 0;
+    margin: 0.4rem;
 }
