diff --git a/src/index.html b/src/index.html
line changes: +17/-10
index fdbf05c..16ca130
--- a/src/index.html
+++ b/src/index.html

@@ -18,16 +18,6 @@
         <button onclick="loadFile()">Load</button>
         <button onclick="undo()">Undo</button>
         <button onclick="toggleGrid()" id="button-grid" class="active">Grid</button>
-        <div id="size-flyout" class="size-flyout">
-          <button onclick="selectSize(8)">8x8</button>
-          <button onclick="selectSize(16)">16x16</button>
-          <button onclick="selectSize(24)">24x24</button>
-          <button onclick="selectSize(32)">32x32</button>
-          <button onclick="selectSize(48)">48x48</button>
-          <button onclick="selectSize(64)">64x64</button>
-          <button onclick="selectSize(96)">96x96</button>
-          <button onclick="selectSize(128)">128x128</button>
-        </div>
         <button onclick="showSizes()" id="button-size">Size</button>
       </div>
       <div class="preview" id="preview"></div>

@@ -69,6 +59,23 @@
   </div>
 </div>
 
+<div class="dialog" id="dialog-select-size" style="display: none">
+  <h2>Canvas Size</h2>
+  <div class="content">
+    <button onclick="selectSize(8)" style="width: 16px; height: 16px">8</button>
+    <button onclick="selectSize(16)" style="width: 32px; height: 32px; left: 20px">16</button>
+    <button onclick="selectSize(24)" style="width: 48px; height: 48px; left: 4px; top: 38px">24</button>
+    <button onclick="selectSize(32)" style="width: 64px; height: 64px; left: 56px;">32</button>
+    <button onclick="selectSize(48)" style="width: 96px; height: 96px; left: 124px">48</button>
+    <button onclick="selectSize(64)" style="width: 128px; height: 128px; top: 91px">64</button>
+    <button onclick="selectSize(96)" style="width: 192px; height: 192px; left: 224px">96</button>
+    <button onclick="selectSize(128)" style="width: 256px; height: 256px; left: 145px; top: 114px">128</button>
+  </div>
+  <div class="controls">
+    <button id="select-size-cancel">Cancel</button>
+  </div>
+</div>
+
 <div class="dialog" id="dialog-colorpicker" style="display: none">
   <h2>Edit Color</h2>
   <div class="content">

diff --git a/src/main.js b/src/main.js
line changes: +5/-2
index e0f0f53..d53ca03
--- a/src/main.js
+++ b/src/main.js

@@ -60,13 +60,16 @@ window.toggleGrid = function() {
 }
 
 window.showSizes = function() {
-    document.getElementById('size-flyout').className = 'size-flyout active';
+    document.getElementById('dialog-select-size').style.display = null;
+    document.getElementById('select-size-cancel').onclick = () => {
+        document.getElementById('dialog-select-size').style.display = 'none';
+    };
 }
 
 window.selectSize = function(n) {
     appState.pixelEditor.setSize(n, n);
     appState.pixelEditor.refresh();
-    document.getElementById('size-flyout').className = 'size-flyout';
+    document.getElementById('dialog-select-size').style.display = 'none';
 }
 
 window.selectTool = function(t) {

diff --git a/src/style.css b/src/style.css
line changes: +9/-10
index f44c7e7..423fd40
--- a/src/style.css
+++ b/src/style.css

@@ -43,16 +43,6 @@ button.active {
 	height: 48px;
 }
 
-.size-flyout {
-	position: absolute;
-	display: none;
-}
-
-.size-flyout.active {
-	display: flex;
-	flex-flow: row;
-}
-
 .editor {
 	display: flex;
 	flex-flow: row;

@@ -181,6 +171,7 @@ button.active {
 
 .dialog .content {
 	flex: auto;
+	overflow: auto;
 }
 
 .dialog .controls {

@@ -191,6 +182,14 @@ button.active {
 	margin: 0;
 }
 
+#dialog-select-size .content {
+	position: relative;
+}
+
+#dialog-select-size .content button {
+	position: absolute;
+}
+
 #dialog-colorpicker .content {
 	display: flex;
 	flex-flow: row;