diff --git a/site/index.html b/site/index.html
index c9e7c18..b088aa4 100644
--- a/site/index.html
+++ b/site/index.html
@@ -5,9 +5,13 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>WGPU Game of Life</title>
+    <meta property="og:url" content="https://wgpu-game-of-life.fornwall.net" />
+    <meta property="og:title" content="Game of Life WebGPU" />
+    <meta property="og:description" content="A simulation of Game of Life using the WebGPU API." />
+    <meta property="og:image" content="https://wgpu-game-of-life.fornwall.net/static/screenshot.png" />
+    <title>Game of Life</title>
     <style>
-        * {
+        body {
             margin: 0;
             padding: 0;
         }
@@ -46,7 +50,7 @@
             color: white;
             flex-direction: column;
             align-items: center;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, 0.9);
             border: 1px solid white;
             padding: 1em;
             border-radius: 0.5em;
@@ -56,10 +60,15 @@
         }
 
         #about h1,
+        #about h2,
         #about p {
             margin-bottom: 0.5em;
         }
 
+        #about h2 {
+            margin-top: 1em;
+        }
+
         #about a {
             color: white;
         }
@@ -74,6 +83,14 @@
             opacity: 0.9;
         }
 
+        #overlay a {
+            color: white;
+        }
+
+        #overlay p {
+            margin-block-end: 0;
+        }
+
         .hidden {
             display: none;
         }
@@ -96,9 +113,13 @@
         <h1>wgpu-game-of-life</h1>
         <p id="webgpu-not-working" style="display: none"><strong>⚠️ NOTE:️</strong> WebGPU is not working in your
             browser - see <a href="https://caniuse.com/webgpu">caniuse.com/webgpu</a>.</p>
-        <p>This is a game of life simulation done using the <a
-                href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU</a>.</p>
+        <p>This is a <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Game of Life</a> simulation done
+            using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU API</a>.</p>
         <p>See <a href="https://github.com/fornwall/wgpu-game-of-life">source code</a>.</p>
+        <h2>About game of life</h2>
+        <p>Game of Life is a simulation of a grid.
+        <p>Each cell in the grid is either <strong>alive</strong> or <strong>dead</strong>.
+        </p>
         <form>
             <button id="close-dialog" formmethod="dialog">Ok</button>
         </form>
@@ -107,9 +128,9 @@ <h1>wgpu-game-of-life</h1>
     <div id="overlay" style="display: none" open="true">
         <span style="float:right">
             <button id="pauseButton" style="width: 4em">Pause</button>
-            <button id="hideControlsButton">Hide</button>
             <button id="resetButton">Reset</button>
             <button id="fullscreenButton">Fullscreen</button>
+            <button id="hideControlsButton">Hide</button>
         </span>
         <span id="hideableControls">
             <br />
@@ -118,19 +139,28 @@ <h1>wgpu-game-of-life</h1>
             <select id="rule" class="max-width"></select>
             <br />
             <br />
-            Size: <span id="size"></span>
+            <p><label for="size">Grid size:&nbsp;</label></p>
+            <select id="size" class="max-width">
+                <option value="64">64x64</option>
+                <option value="128">128x128</option>
+                <option value="256">256x256</option>
+                <option value="512">512x512</option>
+                <option value="1024">1024x1024</option>
+                <option value="2048">2048x2048</option>
+            </select>
             <br />
             <br />
-            <p><label for="density">Density:&nbsp;<span id="density-display"></span></label></p>
+            <p><label for="density">Initial density:&nbsp;<span id="density-display"></span></label></p>
             <input type="range" class="max-width" id="density" min="1" max="99"></input>
             <br />
             <br />
-            <p><label for="generations-per-second">GPS:&nbsp;<span id="generations-per-second-display"></span></label>
+            <p><label for="generations-per-second">Generations per second:&nbsp;<span
+                        id="generations-per-second-display"></span></label>
             </p>
-            <input type="range" id="generations-per-second" class="max-width" min="1" max="100"></input>
+            <input type="range" id="generations-per-second" class="max-width" min="1" max="30"></input>
             <br />
-            <div style="text-align: center; margin: 1em">
-                <a href="https://github.com/fornwall/wgpu-game-of-life">Source</a>
+            <div style="text-align: center; margin: 1em;">
+                <a id="about-link" href="https://github.com/fornwall/wgpu-game-of-life">About</a>
             </div>
         </span>
     </div>
diff --git a/site/index.js b/site/index.js
index fb2513c..c785728 100644
--- a/site/index.js
+++ b/site/index.js
@@ -1,8 +1,8 @@
-import init, { run, getRules, setNewRule, setDensity, resetGame, togglePause, setGenerationsPerSecond } from "./generated/wgpu_game_of_life.js";
+import init, { run, getRules, setNewRule, setNewSize, setDensity, resetGame, togglePause, setGenerationsPerSecond } from "./generated/wgpu_game_of_life.js";
 
 const ruleSelect = document.getElementById('rule');
+const sizeSelect = document.getElementById("size");
 const canvas = document.getElementById("webgpu-canvas");
-const sizeElement = document.getElementById("size");
 const overlayElement = document.getElementById("overlay");
 const densityInput = document.getElementById("density");
 const densityDisplay = document.getElementById("density-display");
@@ -15,7 +15,7 @@ canvas.focus();
 
 globalThis.setNewState = function (ruleIdx, size, seed, density, paused, generationsPerSecond, frame) {
   document.title = ruleSelect.options[ruleIdx].textContent;
-  sizeElement.textContent = size + 'x' + size;
+  sizeSelect.value = size;
   ruleSelect.value = ruleIdx;
   const queryString = `?rule=${ruleIdx}&size=${size}&seed=${seed}&density=${density}&gps=${generationsPerSecond}&paused=${paused}` + (paused ? `&frame=${frame}` : '');
   window.history.replaceState({}, '', queryString);
@@ -51,9 +51,14 @@ try {
     ruleSelect.appendChild(new Option(rule.name(), ruleIdx));
   }
   ruleSelect.addEventListener('change', () => { setNewRule(ruleSelect.value); });
+  sizeSelect.addEventListener('change', () => { setNewSize(sizeSelect.value); });
   document.getElementById('resetButton').addEventListener('click', resetGame);
   document.getElementById('fullscreenButton').addEventListener('click', toggleFullscreen);
   document.getElementById('hideControlsButton').addEventListener('click', toggleControls);
+  document.getElementById('about-link').addEventListener('click', (event) => {
+    event.preventDefault();
+    aboutDialog.showModal();
+  });
   pauseButton.addEventListener('click', togglePause);
   densityInput.addEventListener('change', () => {
     setDensity(densityInput.value);
@@ -64,20 +69,18 @@ try {
 
   const urlParams = new URLSearchParams(window.location.search);
   const rule = parseInt(urlParams.get('rule'));
+  const size = parseInt(urlParams.get('size'));
   const seed = parseInt(urlParams.get('seed'));
   const density = parseInt(urlParams.get('density'));
   const paused = "true" === urlParams.get('paused');
   const generationsPerSecond = parseInt(urlParams.get("gps"));
 
-  await run(rule, seed, density, paused, generationsPerSecond);
-
-  aboutDialog.showModal();
-  aboutDialog.focus();
+  await run(rule, size, seed, density, paused, generationsPerSecond);
 } catch (e) {
   console.error('error', e);
   canvas.remove();
   overlayElement.remove();
   document.getElementById('webgpu-not-working').style.display = 'block';
   document.getElementById('close-dialog').remove();
-  document.getElementById('about').show();
+  aboutDialog.show();
 }
diff --git a/site/package-lock.json b/site/package-lock.json
index ffe6642..e6cb315 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "devDependencies": {
+        "copy-webpack-plugin": "*",
         "html-webpack-plugin": "*",
         "webpack": "*",
         "webpack-cli": "*",
@@ -90,6 +91,41 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -971,6 +1007,95 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "node_modules/copy-webpack-plugin": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
+      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.1",
+        "globby": "^13.1.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv": {
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -1074,6 +1199,18 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -1386,6 +1523,22 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1401,6 +1554,15 @@
         "node": ">= 4.9.1"
       }
     },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -1591,6 +1753,25 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
+    "node_modules/globby": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.0.tgz",
+      "integrity": "sha512-jWsQfayf13NvqKUIL3Ta+CIqMnvlaIDFveWE/dpOZ9+3AMEJozsxDvKA02zync9UuvOM8rOXzsD5GqKP4OnWPQ==",
+      "dev": true,
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.11",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -1865,6 +2046,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -2170,6 +2360,15 @@
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "dev": true
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -2538,6 +2737,15 @@
       "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
       "dev": true
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2630,6 +2838,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -2794,6 +3022,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -2809,6 +3047,29 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3056,6 +3317,18 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
diff --git a/site/package.json b/site/package.json
index ebcf9d0..5e1ff68 100644
--- a/site/package.json
+++ b/site/package.json
@@ -4,6 +4,7 @@
     "webpack": "webpack"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "*",
     "html-webpack-plugin": "*",
     "webpack": "*",
     "webpack-cli": "*",
diff --git a/site/static/screenshot.png b/site/static/screenshot.png
new file mode 100644
index 0000000..4e26d34
Binary files /dev/null and b/site/static/screenshot.png differ
diff --git a/site/webpack.config.js b/site/webpack.config.js
index bc2ad6a..5250218 100644
--- a/site/webpack.config.js
+++ b/site/webpack.config.js
@@ -1,4 +1,5 @@
 import HtmlWebpackPlugin from "html-webpack-plugin";
+import CopyWebpackPlugin from "copy-webpack-plugin";
 
 export default {
   entry: {
@@ -23,5 +24,8 @@ export default {
       template: "index.html",
       chunks: ["home"],
     }),
+    new CopyWebpackPlugin({
+      patterns: [{ from: "static", to: "static" }],
+    }),
   ],
 };
diff --git a/src/event_loop.rs b/src/event_loop.rs
index 8d5aaed..35d5df6 100644
--- a/src/event_loop.rs
+++ b/src/event_loop.rs
@@ -18,6 +18,9 @@ pub fn handle_event_loop(
             &CustomWinitEvent::RuleChange(new_rule_idx) => {
                 state.set_rule_idx(new_rule_idx);
             }
+            &CustomWinitEvent::SizeChange(size) => {
+                state.reset_with_cells_width(size, size);
+            }
             &CustomWinitEvent::SetDensity(new_density) => {
                 state.set_density(new_density);
             }
diff --git a/src/lib.rs b/src/lib.rs
index 467fed2..77f38e3 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -22,6 +22,7 @@ use winit::{
 #[derive(Debug, Clone, Copy)]
 pub enum CustomWinitEvent {
     RuleChange(u32),
+    SizeChange(u32),
     SetDensity(u8),
     SetGenerationsPerSecond(u8),
     Reset,
@@ -46,7 +47,7 @@ pub async fn run() {
 
     let window = WindowBuilder::new().build(&event_loop).unwrap();
 
-    let mut state = State::new(window, None, None, None, false, None)
+    let mut state = State::new(window, None, None, None, None, false, None)
         .await
         .unwrap();
 
@@ -61,7 +62,7 @@ extern "C" {
     #[wasm_bindgen(js_name = setNewState)]
     pub fn set_new_state(
         rule_idx: u32,
-        cells_width: usize,
+        cells_width: u32,
         seed: u32,
         density: u8,
         paused: bool,
@@ -90,6 +91,20 @@ pub fn set_new_rule(rule_idx: u32) {
     });
 }
 
+#[cfg(target_arch = "wasm32")]
+#[wasm_bindgen(js_name = "setNewSize")]
+pub fn set_new_size(size: u32) {
+    EVENT_LOOP_PROXY.with(|proxy| {
+        if let Ok(unlocked) = proxy.lock() {
+            if let Some(event_loop_proxy) = &*unlocked {
+                event_loop_proxy
+                    .send_event(CustomWinitEvent::SizeChange(size))
+                    .ok();
+            }
+        }
+    });
+}
+
 #[cfg(target_arch = "wasm32")]
 #[wasm_bindgen(js_name = "resetGame")]
 pub fn reset_game() {
@@ -150,6 +165,7 @@ pub fn set_generations_per_second(generations_per_second: u8) {
 #[wasm_bindgen]
 pub async fn run(
     rule_idx: Option<u32>,
+    size: Option<u32>,
     seed: Option<u32>,
     initial_density: Option<u8>,
     paused: bool,
@@ -188,6 +204,7 @@ pub async fn run(
     let mut state = State::new(
         window,
         rule_idx,
+        size,
         seed,
         initial_density,
         paused,
@@ -228,8 +245,8 @@ pub struct State {
     rule_buffer: wgpu::Buffer,
     rule_idx: u32,
     initial_density: u8,
-    cells_width: usize,
-    cells_height: usize,
+    cells_width: u32,
+    cells_height: u32,
     cursor_position: PhysicalPosition<f64>,
 }
 
@@ -308,8 +325,8 @@ impl<'a> RendererFactory<'a> {
         device: &wgpu::Device,
         computer: &Computer,
         size_buffer: &wgpu::Buffer,
-        cells_width: usize,
-        cells_height: usize,
+        cells_width: u32,
+        cells_height: u32,
         texture_format: wgpu::TextureFormat,
     ) -> Renderer {
         let render_pipeline = device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
@@ -375,7 +392,7 @@ impl<'a> RendererFactory<'a> {
             render_bundle_encoder.set_vertex_buffer(0, cells_buffer.slice(..));
             render_bundle_encoder.set_vertex_buffer(1, self.square_buffer.slice(..));
             render_bundle_encoder.set_bind_group(0, &size_bind_group, &[]);
-            render_bundle_encoder.draw(0..4, 0..((cells_width * cells_height) as u32));
+            render_bundle_encoder.draw(0..4, 0..(cells_width * cells_height));
             render_bundle_encoder.finish(&wgpu::RenderBundleDescriptor::default())
         };
 
@@ -493,15 +510,15 @@ impl ComputerFactory {
     fn create(
         &self,
         device: &wgpu::Device,
-        cells_width: usize,
-        cells_height: usize,
+        cells_width: u32,
+        cells_height: u32,
         size_buffer: &wgpu::Buffer,
         rule_buffer: &wgpu::Buffer,
         seed: u32,
         initial_density: u8,
     ) -> Computer {
         let mut rng = ChaCha20Rng::seed_from_u64(u64::from(seed));
-        let mut cells_vec = vec![0_u32; cells_width * cells_height];
+        let mut cells_vec = vec![0_u32; cells_width as usize * cells_height as usize];
         let initial_density = f32::from(initial_density) * 0.01;
         for cell in cells_vec.iter_mut() {
             if rng.gen::<f32>() < initial_density {
@@ -618,8 +635,8 @@ impl ComputerFactory {
         });
 
         Computer {
-            cells_width: cells_width as u32,
-            cells_height: cells_height as u32,
+            cells_width,
+            cells_height,
             compute_pipeline,
             compute_bind_group_0,
             compute_bind_group_1,
@@ -666,6 +683,7 @@ impl State {
     async fn new(
         window: Window,
         rule_idx: Option<u32>,
+        grid_size: Option<u32>,
         seed: Option<u32>,
         initial_density: Option<u8>,
         paused: bool,
@@ -729,10 +747,13 @@ impl State {
             view_formats: vec![],
         };
 
-        let cells_width = 256;
+        let cells_width = match grid_size {
+            Some(v) if [128, 256, 512, 1024, 2048].iter().any(|&e| e == v) => v,
+            _ => 256,
+        };
         let cells_height = cells_width;
 
-        let size_array = [cells_width as u32, cells_height as u32];
+        let size_array = [cells_width, cells_height];
         let size_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
             label: Some("size_buffer"),
             contents: bytemuck::cast_slice(&size_array),
@@ -886,7 +907,7 @@ impl State {
         );
     }
 
-    fn reset_with_cells_width(&mut self, new_cells_width: usize, new_cells_height: usize) {
+    fn reset_with_cells_width(&mut self, new_cells_width: u32, new_cells_height: u32) {
         self.cells_width = new_cells_width;
         self.cells_height = new_cells_height;
         self.on_state_change();
@@ -912,7 +933,7 @@ impl State {
     fn on_state_change(&mut self) {
         self.inform_ui_about_state();
 
-        let size_array = [self.cells_width as u32, self.cells_height as u32];
+        let size_array = [self.cells_width, self.cells_height];
         self.queue
             .write_buffer(&self.size_buffer, 0, bytemuck::cast_slice(&size_array));