diff --git a/web/index.css b/web/index.css
index 4e05e3f..973369d 100644
--- a/web/index.css
+++ b/web/index.css
@@ -9,6 +9,7 @@
     align-items: center;
     justify-content: space-around;
     flex-direction: column;
+    gap: 0.5rem;
     flex: 25%;
     overflow: scroll;
 }
@@ -17,23 +18,47 @@
     flex: 75%;
 }
 
+:root {
+    --collage-ap: 110 / 85;
+}
+
 .image-surface {
     overflow: hidden;
     margin: auto;
     border: 1px solid;
     height: 100%;
     width: auto;
-    --collage-ap: 110 / 85;
     aspect-ratio: var(--collage-ap);
 }
-.showbuton {
-    font-size: 2rem;
+
+.main-controls {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.main-controls button {
+    font-size: 1.2rem;
+}
+
+#notice_dialog {
+    z-index: 10;
+    width: 50%;
+    background-color: lightblue;
+}
+
+#notice_dialog form {
+    display: flex;
+}
+
+#notice_dialog button {
+    font-size: 1.2rem;
+    margin-left: auto;
 }
 
 .templates {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
+    gap: 0.5rem;
     width: 80%;
 }
 
@@ -44,11 +69,12 @@
 }
 
 #page_size_selector {
-    width: 100%;
+    font-size: 1.2rem;
+    width: 80%;
 }
 
 .template {
-height: 100%;
+    aspect-ratio: var(--collage-ap);
 }
 
 .template-selected {
diff --git a/web/index.html b/web/index.html
index 306bd21..9325b0a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -9,29 +9,29 @@
         <link rel="stylesheet" href="index.css" />
     </head>
     <body>
+      <dialog id="notice_dialog">
+        <form method="dialog"><span><a href="" target="_blank" id="collage-url"></a></span><button>X</button></form>
+      </dialog>
         <div class="container">
             <div class="controls">
 
-              <h2>Photo Collage</h2>
-              <p><a href="choose.html">Select Images</a></p>
+              <h1>Photo Collage</h1>
+              <select id="page_size_selector">
+                <option          value="letter-portrait"     > Letter (Portrait)  </option>
+                <option selected value="letter-landscape"    > Letter (Landscape) </option>
+                <option          value="fiveseven-portrait"  > 5 × 7 (Portrait)   </option>
+                <option          value="fiveseven-landscape" > 7 × 5 (Landscape)  </option>
+                <option          value="foursix-portrait"    > 4 × 6 (Portrait)   </option>
+                <option          value="foursix-landscape"   > 4 × 6 (Landscape)  </option>
+              </select>
+              <div class="main-controls">
+                <a href="choose.html"><button>Select</button></a>
+
+                <button id="snapper" class="showbuton">Snap</button>
+                <a href="/collages/?layout=grid" target="_blank" ><button>All</button></a>
+              </div>
 
-                <label>
-                    <span>Paper size</span>
-                    <select id="page_size_selector">
-                          <option          value="letter-portrait"     > Letter (Portrait)  </option>
-                          <option selected value="letter-landscape"    > Letter (Landscape) </option>
-                          <option          value="fiveseven-portrait"  > 5 × 7 (Portrait)   </option>
-                          <option          value="fiveseven-landscape" > 7 × 5 (Landscape)  </option>
-                          <option          value="foursix-portrait"    > 4 × 6 (Portrait)   </option>
-                          <option          value="foursix-landscape"   > 4 × 6 (Landscape)  </option>
-                    </select>
-                </label>
 
-                <button id="snapper" class="showbuton">Snap Collage</button>
-                <div>
-                  <p><a href="/collages/" target="_blank" >All collages</a></p>
-                  <p><a href="" target="_blank" id="collage-url"></a></p>
-                </div>
 
 
                 <ul class="templates">
diff --git a/web/index.js b/web/index.js
index 09b13f1..8ebc06c 100644
--- a/web/index.js
+++ b/web/index.js
@@ -44,6 +44,9 @@ let collageDiv
 /** @type {HTMLSelectElement} */
 let pageSizeSelect
 
+/** @type {HTMLDialogElement} */
+let noticeDialog
+
 /** @type {HTMLAnchorElement} */
 let collageUrlA
 
@@ -59,6 +62,7 @@ function main() {
     snapButton = document.getElementById("snapper")
     collageDiv = document.getElementById("collage")
     pageSizeSelect = document.getElementById("page_size_selector")
+    noticeDialog = document.getElementById("notice_dialog")
     collageUrlA = document.getElementById("collage-url")
 
     snapButton.onclick = () => snap()
@@ -74,6 +78,7 @@ function main() {
     // Skipping first entry in array to make the images start with index 1
     imageUrls = [,].concat(queryUrls)
 
+    pageSizeChange()
     applyTemplate(document.getElementById("default_template"))
 }
 
@@ -171,6 +176,7 @@ function snap() {
     }
 
     (async () => {
+        noticeDialog.show()
         collageUrlA.text = "Collage is being generated...";
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
@@ -179,7 +185,8 @@ function snap() {
 }
 
 function pageSizeChange() {
-    collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
+    // https://stackoverflow.com/a/37802204
+    document.documentElement.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
     pageSize = pageSizeSelect.value
     initCollage()
 }
