diff --git a/docs/categories.html b/docs/categories.html
deleted file mode 100644
index e9bdb05..0000000
--- a/docs/categories.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title>PowerPoint Fractals</title>
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
-        <link rel="manifest" href="assets/webmanifest.json">
-        <link rel="stylesheet" type="text/css" href="assets/css/default.css">
-    </head>
-    <body>
-        <h1>PowerPoint Fractals</h1>
-        <div class="category">
-            <h2>Triangles</h2>
-            <p>Fractals with triangular symmetry, such as the Sierpiński Triangle and variations.</p>
-        </div>
-        <div class="category">
-            <h2>Squares</h2>
-            <p>Fractals with square symmetry, such as the Sierpiński Carpet and variations.</p>
-        </div>
-        <div class="category">
-            <h2>Pentagons</h2>
-            <p>Fractals with pentagonal symmetry.</p>
-        </div>
-        <div class="category">
-            <h2>Hexagons</h2>
-            <p>Fractals with hexagonal symmetry, such as the Koch Snowflake.</p>
-        </div>
-        <div class="category">
-            <h2>Linear</h2>
-            <p>Fractals where all repeats appear on a straight line, with no rotation (&quot;fractalness&quot; is one-dimensional).</p>
-        </div>
-        <div class="category">
-            <h2>Curves</h2>
-            <p>Fractal curves (such as the Koch Curve and the Dragon Curve).</p>
-        </div>
-        <div class="category">
-            <h2>Plants</h2>
-            <p>Fractal plants (such as leaves and trees).</p>
-        </div>
-        <div class="category">
-            <h2>Nature</h2>
-            <p>Other things from nature that are not plants.</p>
-        </div>
-        <div class="category">
-            <h2>Spirals</h2>
-            <p>Spiral fractals.</p>
-        </div>
-        <div class="category">
-            <h2>Abstract</h2>
-            <p>Abstract shapes that don&#39;t fit into any of the other categories.</p>
-        </div>
-        <div class="category">
-            <h2>3D</h2>
-            <p>Three dimensional fractals</p>
-        </div>
-    </body>
-</html>
diff --git a/docs/index.html b/docs/index.html
index 3c2d33c..ea155f8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,6 +34,7 @@
   height: 100%;
   /* padding: 10vh; */
   background: #888;
+  overflow-y: scroll;
 }
 
 .modal .content {
@@ -169,6 +170,156 @@ <h1>PowerPoint Fractal Art</h1>
             a wide range of fractal images can be created, from regular mathematical shapes,
             to natural objects, to weird abstract images and even representations of 3D shapes.
           </p>
+          <div class="category">
+              <h2>Triangles</h2>
+              <p>Fractals with triangular symmetry, such as the Sierpiński Triangle and variations.</p>
+                <img src="assets/fractals/triangles/sierpinski_600.png" height="80" onclick="gotoSlide(0)">
+                <img src="assets/fractals/triangles/rectangles_600.png" height="80" onclick="gotoSlide(1)">
+                <img src="assets/fractals/triangles/rotated-rectangles_600.png" height="80" onclick="gotoSlide(2)">
+                <img src="assets/fractals/triangles/coloured-rectangles_600.png" height="80" onclick="gotoSlide(3)">
+                <img src="assets/fractals/triangles/shaded_600.png" height="80" onclick="gotoSlide(4)">
+                <img src="assets/fractals/triangles/rgb_600.png" height="80" onclick="gotoSlide(5)">
+                <img src="assets/fractals/triangles/circles_600.png" height="80" onclick="gotoSlide(6)">
+                <img src="assets/fractals/triangles/cmy_600.png" height="80" onclick="gotoSlide(7)">
+                <img src="assets/fractals/triangles/triflake_600.png" height="80" onclick="gotoSlide(8)">
+                <img src="assets/fractals/triangles/triflake-shaded_600.png" height="80" onclick="gotoSlide(9)">
+                <img src="assets/fractals/triangles/triflake-rotated-shaded_600.png" height="80" onclick="gotoSlide(10)">
+                <img src="assets/fractals/triangles/dust_600.png" height="80" onclick="gotoSlide(11)">
+                <img src="assets/fractals/triangles/lightning_600.png" height="80" onclick="gotoSlide(12)">
+          </div>
+          <div class="category">
+              <h2>Squares</h2>
+              <p>Fractals with square symmetry, such as the Sierpiński Carpet and variations.</p>
+                <img src="assets/fractals/squares/sierpinski_600.png" height="80" onclick="gotoSlide(13)">
+                <img src="assets/fractals/squares/gradient_600.png" height="80" onclick="gotoSlide(14)">
+                <img src="assets/fractals/squares/outline_600.png" height="80" onclick="gotoSlide(15)">
+                <img src="assets/fractals/squares/coloured-outline_600.png" height="80" onclick="gotoSlide(16)">
+                <img src="assets/fractals/squares/diagonals_600.png" height="80" onclick="gotoSlide(17)">
+                <img src="assets/fractals/squares/coloured-diagonals_600.png" height="80" onclick="gotoSlide(18)">
+                <img src="assets/fractals/squares/inverted_600.png" height="80" onclick="gotoSlide(19)">
+                <img src="assets/fractals/squares/vicsek_600.png" height="80" onclick="gotoSlide(20)">
+                <img src="assets/fractals/squares/vicsek-coloured_600.png" height="80" onclick="gotoSlide(21)">
+                <img src="assets/fractals/squares/vicsek-circle_600.png" height="80" onclick="gotoSlide(22)">
+                <img src="assets/fractals/squares/vicsek-diagonal_600.png" height="80" onclick="gotoSlide(23)">
+                <img src="assets/fractals/squares/h_600.png" height="80" onclick="gotoSlide(24)">
+                <img src="assets/fractals/squares/castle_600.png" height="80" onclick="gotoSlide(25)">
+                <img src="assets/fractals/squares/cross_600.png" height="80" onclick="gotoSlide(26)">
+                <img src="assets/fractals/squares/swiss_600.png" height="80" onclick="gotoSlide(27)">
+                <img src="assets/fractals/squares/forest_600.png" height="80" onclick="gotoSlide(28)">
+                <img src="assets/fractals/squares/copper_600.png" height="80" onclick="gotoSlide(29)">
+                <img src="assets/fractals/squares/distorted_600.png" height="80" onclick="gotoSlide(30)">
+                <img src="assets/fractals/squares/dots_600.png" height="80" onclick="gotoSlide(31)">
+                <img src="assets/fractals/squares/window_600.png" height="80" onclick="gotoSlide(32)">
+                <img src="assets/fractals/squares/degraded_600.png" height="80" onclick="gotoSlide(33)">
+          </div>
+          <div class="category">
+              <h2>Pentagons</h2>
+              <p>Fractals with pentagonal symmetry.</p>
+                <img src="assets/fractals/pentagons/pentaflake_600.png" height="80" onclick="gotoSlide(34)">
+                <img src="assets/fractals/pentagons/sierpinski_600.png" height="80" onclick="gotoSlide(35)">
+                <img src="assets/fractals/pentagons/rotated-pentaflake_600.png" height="80" onclick="gotoSlide(36)">
+                <img src="assets/fractals/pentagons/rotated-sierpinski_600.png" height="80" onclick="gotoSlide(37)">
+                <img src="assets/fractals/pentagons/pentaflake-gap_600.png" height="80" onclick="gotoSlide(38)">
+                <img src="assets/fractals/pentagons/star_600.png" height="80" onclick="gotoSlide(39)">
+                <img src="assets/fractals/pentagons/twist_600.png" height="80" onclick="gotoSlide(40)">
+                <img src="assets/fractals/pentagons/microbe_600.png" height="80" onclick="gotoSlide(41)">
+          </div>
+          <div class="category">
+              <h2>Hexagons</h2>
+              <p>Fractals with hexagonal symmetry, such as the Koch Snowflake.</p>
+                <img src="assets/fractals/hexagons/sierpinski_600.png" height="80" onclick="gotoSlide(42)">
+                <img src="assets/fractals/hexagons/sierpinski-shaded_600.png" height="80" onclick="gotoSlide(43)">
+                <img src="assets/fractals/hexagons/sierpinski-coloured_600.png" height="80" onclick="gotoSlide(44)">
+                <img src="assets/fractals/hexagons/sierpinski-rotated_600.png" height="80" onclick="gotoSlide(45)">
+                <img src="assets/fractals/hexagons/sierpinski-rotated-shaded_600.png" height="80" onclick="gotoSlide(46)">
+                <img src="assets/fractals/hexagons/koch_600.png" height="80" onclick="gotoSlide(47)">
+                <img src="assets/fractals/hexagons/exploding_600.png" height="80" onclick="gotoSlide(48)">
+                <img src="assets/fractals/hexagons/exploded_600.png" height="80" onclick="gotoSlide(49)">
+                <img src="assets/fractals/hexagons/snowflake_600.png" height="80" onclick="gotoSlide(50)">
+                <img src="assets/fractals/hexagons/hexaflake_600.png" height="80" onclick="gotoSlide(51)">
+                <img src="assets/fractals/hexagons/hexaflake-rotated_600.png" height="80" onclick="gotoSlide(52)">
+                <img src="assets/fractals/hexagons/hexaflake-shaded_600.png" height="80" onclick="gotoSlide(53)">
+                <img src="assets/fractals/hexagons/hexaflake-shaded2_600.png" height="80" onclick="gotoSlide(54)">
+                <img src="assets/fractals/hexagons/hexaflake-shaded3_600.png" height="80" onclick="gotoSlide(55)">
+                <img src="assets/fractals/hexagons/hexaflake-coloured_600.png" height="80" onclick="gotoSlide(56)">
+                <img src="assets/fractals/hexagons/hexaflake-coloured2_600.png" height="80" onclick="gotoSlide(57)">
+                <img src="assets/fractals/hexagons/hexaflake-cell_600.png" height="80" onclick="gotoSlide(58)">
+          </div>
+          <div class="category">
+              <h2>Linear</h2>
+              <p>Fractals where all repeats appear on a straight line, with no rotation (&quot;fractalness&quot; is one-dimensional).</p>
+                <img src="assets/fractals/linear/barcode_600.png" height="80" onclick="gotoSlide(59)">
+                <img src="assets/fractals/linear/french-cantor_600.png" height="80" onclick="gotoSlide(60)">
+                <img src="assets/fractals/linear/palette_600.png" height="80" onclick="gotoSlide(61)">
+                <img src="assets/fractals/linear/powerlines_600.png" height="80" onclick="gotoSlide(62)">
+                <img src="assets/fractals/linear/dots_600.png" height="80" onclick="gotoSlide(63)">
+                <img src="assets/fractals/linear/circles_600.png" height="80" onclick="gotoSlide(64)">
+                <img src="assets/fractals/linear/bubbles_600.png" height="80" onclick="gotoSlide(65)">
+                <img src="assets/fractals/linear/shard_600.png" height="80" onclick="gotoSlide(66)">
+                <img src="assets/fractals/linear/jagged_600.png" height="80" onclick="gotoSlide(67)">
+                <img src="assets/fractals/linear/metal_600.png" height="80" onclick="gotoSlide(68)">
+                <img src="assets/fractals/linear/ukraine_600.png" height="80" onclick="gotoSlide(69)">
+          </div>
+          <div class="category">
+              <h2>Curves</h2>
+              <p>Fractal curves (such as the Koch Curve and the Dragon Curve).</p>
+                <img src="assets/fractals/curves/koch_600.png" height="80" onclick="gotoSlide(70)">
+                <img src="assets/fractals/curves/square_600.png" height="80" onclick="gotoSlide(71)">
+                <img src="assets/fractals/curves/dragon_600.png" height="80" onclick="gotoSlide(72)">
+                <img src="assets/fractals/curves/golden_600.png" height="80" onclick="gotoSlide(73)">
+                <img src="assets/fractals/curves/pythagoras_600.png" height="80" onclick="gotoSlide(74)">
+                <img src="assets/fractals/curves/levy-c_600.png" height="80" onclick="gotoSlide(75)">
+                <img src="assets/fractals/curves/levy-c-coloured_600.png" height="80" onclick="gotoSlide(76)">
+          </div>
+          <div class="category">
+              <h2>Plants</h2>
+              <p>Fractal plants (such as leaves and trees).</p>
+                <img src="assets/fractals/plants/pythagoras-tree_600.png" height="80" onclick="gotoSlide(77)">
+                <img src="assets/fractals/plants/tree_600.png" height="80" onclick="gotoSlide(78)">
+                <img src="assets/fractals/plants/pine_600.png" height="80" onclick="gotoSlide(79)">
+                <img src="assets/fractals/plants/fern_600.png" height="80" onclick="gotoSlide(80)">
+                <img src="assets/fractals/plants/cabbage_600.png" height="80" onclick="gotoSlide(81)">
+                <img src="assets/fractals/plants/flower_600.png" height="80" onclick="gotoSlide(82)">
+                <img src="assets/fractals/plants/bamboo_600.png" height="80" onclick="gotoSlide(83)">
+                <img src="assets/fractals/plants/mushrooms1_600.png" height="80" onclick="gotoSlide(84)">
+                <img src="assets/fractals/plants/mushrooms2_600.png" height="80" onclick="gotoSlide(85)">
+          </div>
+          <div class="category">
+              <h2>Nature</h2>
+              <p>Other things from nature that are not plants.</p>
+                <img src="assets/fractals/nature/cloud_600.png" height="80" onclick="gotoSlide(86)">
+                <img src="assets/fractals/nature/centipede_600.png" height="80" onclick="gotoSlide(87)">
+                <img src="assets/fractals/nature/mountainscape_600.png" height="80" onclick="gotoSlide(88)">
+          </div>
+          <div class="category">
+              <h2>Spirals</h2>
+              <p>Spiral fractals.</p>
+                <img src="assets/fractals/spirals/rainbow_600.png" height="80" onclick="gotoSlide(89)">
+                <img src="assets/fractals/spirals/vortex_600.png" height="80" onclick="gotoSlide(90)">
+                <img src="assets/fractals/spirals/fire_600.png" height="80" onclick="gotoSlide(91)">
+                <img src="assets/fractals/spirals/blossom_600.png" height="80" onclick="gotoSlide(92)">
+          </div>
+          <div class="category">
+              <h2>Abstract</h2>
+              <p>Abstract shapes that don&#39;t fit into any of the other categories.</p>
+                <img src="assets/fractals/abstract/abstract1_600.png" height="80" onclick="gotoSlide(93)">
+                <img src="assets/fractals/abstract/abstract2_600.png" height="80" onclick="gotoSlide(94)">
+                <img src="assets/fractals/abstract/abstract3_600.png" height="80" onclick="gotoSlide(95)">
+                <img src="assets/fractals/abstract/abstract4_600.png" height="80" onclick="gotoSlide(96)">
+                <img src="assets/fractals/abstract/abstract6_600.png" height="80" onclick="gotoSlide(97)">
+                <img src="assets/fractals/abstract/heart_600.png" height="80" onclick="gotoSlide(98)">
+          </div>
+          <div class="category">
+              <h2>3D</h2>
+              <p>Three dimensional fractals</p>
+                <img src="assets/fractals/3d/menger-fake_600.png" height="80" onclick="gotoSlide(99)">
+                <img src="assets/fractals/3d/menger-grey_600.png" height="80" onclick="gotoSlide(100)">
+                <img src="assets/fractals/3d/menger-rgb_600.png" height="80" onclick="gotoSlide(101)">
+                <img src="assets/fractals/3d/cross-menger_600.png" height="80" onclick="gotoSlide(102)">
+                <img src="assets/fractals/3d/tetrix_600.png" height="80" onclick="gotoSlide(103)">
+                <img src="assets/fractals/3d/mosely-snowflake_600.png" height="80" onclick="gotoSlide(104)">
+                <img src="assets/fractals/3d/sm-snowflake_600.png" height="80" onclick="gotoSlide(105)">
+          </div>
         </div>
       </div>
       <div class="slides">
@@ -1616,8 +1767,8 @@ <h2 class="name">Sierpiński-Menger Snowflake</h2>
                alt="Sierpiński-Menger Snowflake" title="Sierpiński-Menger Snowflake">
         </div>
       </div>
-      <a class="prev" onclick="nextSlide()" title="Previous fractal (←)">❮</a>
-      <a class="next" onclick="prevSlide()" title="Next fractal (→)">❯</a>
+      <a class="prev" onclick="prevSlide()" title="Previous fractal (←)">❮</a>
+      <a class="next" onclick="nextSlide()" title="Next fractal (→)">❯</a>
 </div>
 
 <script>
@@ -1628,7 +1779,7 @@ <h2 class="name">Sierpiński-Menger Snowflake</h2>
 
 const nextSlide = () => showSlide(++slideIndex);
 const prevSlide = () => showSlide(--slideIndex);
-const gotoSlide = n => showSlide(slideIndex = n);
+const gotoSlide = n => { closeModal(); showSlide(slideIndex = n) };
 
 function init() {
     slides = document.getElementsByClassName("slide");
@@ -1659,7 +1810,7 @@ <h2 class="name">Sierpiński-Menger Snowflake</h2>
 
 function handleKey(e) {
     e ||= window.event;
-    console.log(event);
+    console.log(e);
     switch (e.key) {
         case "ArrowLeft":
             if (state !== 'intro') {
diff --git a/resources/templates/categories.html b/resources/templates/categories.html
deleted file mode 100644
index 54ced1f..0000000
--- a/resources/templates/categories.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title>PowerPoint Fractals</title>
-        <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
-        <link rel="manifest" href="assets/webmanifest.json">
-        <link rel="stylesheet" type="text/css" href="assets/css/default.css">
-    </head>
-    <body>
-        <h1>PowerPoint Fractals</h1>{% for category in categories %}
-        <div class="category">
-            <h2>{{ category.name }}</h2>
-            <p>{{ category.description }}</p>{% for fractal in category.fractals %}
-            <figure>
-                <a href="{{raw-root}}/{{category.name|lower}}/{{fractal.images.large.file}}"><img src="{{raw-root}}/{{category.name|lower}}/{{fractal.images.small.file}}" height="110"></a>
-                <figcaption>{{ fractal.name }}</figcaption>
-            </figure>{% endfor %}
-        </div>{% endfor %}
-    </body>
-</html>
diff --git a/resources/templates/index.html b/resources/templates/index.html
index 8c4233e..ca61a6c 100644
--- a/resources/templates/index.html
+++ b/resources/templates/index.html
@@ -34,6 +34,7 @@
   height: 100%;
   /* padding: 10vh; */
   background: #888;
+  overflow-y: scroll;
 }
 
 .modal .content {
@@ -168,7 +169,12 @@ <h1>PowerPoint Fractal Art</h1>
             By controlling the position, size and rotation of the Slide Zoom elements,
             a wide range of fractal images can be created, from regular mathematical shapes,
             to natural objects, to weird abstract images and even representations of 3D shapes.
-          </p>
+          </p>{% for category in categories %}
+          <div class="category">
+              <h2>{{ category.name }}</h2>
+              <p>{{ category.description }}</p>{% for fractal in category.fractals %}
+                <img src="{{raw-root}}/{{category.name|lower}}/{{fractal.images.small.file}}" height="80" onclick="gotoSlide({{fractal.id}})">{% endfor %}
+          </div>{% endfor %}
         </div>
       </div>
       <div class="slides">{% for fractal in fractals %}
@@ -179,7 +185,7 @@ <h1>PowerPoint Fractal Art</h1>
           <div class="info">
             <h2 class="name">{{fractal.name}}</h2>
             <p class="description">{{fractal.description}}</p>{% if fractal.dimension %}
-            <p class="dimension">Fractal <a href="https://en.wikipedia.org/wiki/Fractal_dimension">dimension</a>: `{{fractal.dimension}}{% if fractal.dimension_val %} = {{fractal.dimension_val|format-num}}{% endif %}`</p>{% endif %}
+            <p class="dimension">Fractal <a href="https://en.wikipedia.org/wiki/Fractal_dimension">dimension</a>: `{{fractal.dimension}}{% if fractal.dimension_val %} = {{fractal.dimension_val|double-format:3}}{% endif %}`</p>{% endif %}
             <p class="download">Download <a href="{{raw-root}}/{{fractal.category|lower}}/{{fractal.source}}">PowerPoint</a>.</p>{% if fractal.links %}
             <p class="links">Links:{% for link in fractal.links %}<br/><a href="{{link.url}}" target="_blank">{{link.name}}</a>{% endfor %}
             </p>{% endif %}
@@ -193,8 +199,8 @@ <h2 class="name">{{fractal.name}}</h2>
                alt="{{fractal.name}}" title="{{fractal.name}}">{% endfor %}
         </div>
       </div>
-      <a class="prev" onclick="nextSlide()" title="Previous fractal (←)">❮</a>
-      <a class="next" onclick="prevSlide()" title="Next fractal (→)">❯</a>
+      <a class="prev" onclick="prevSlide()" title="Previous fractal (←)">❮</a>
+      <a class="next" onclick="nextSlide()" title="Next fractal (→)">❯</a>
 </div>
 
 <script>
@@ -205,7 +211,7 @@ <h2 class="name">{{fractal.name}}</h2>
 
 const nextSlide = () => showSlide(++slideIndex);
 const prevSlide = () => showSlide(--slideIndex);
-const gotoSlide = n => showSlide(slideIndex = n);
+const gotoSlide = n => { closeModal(); showSlide(slideIndex = n) };
 
 function init() {
     slides = document.getElementsByClassName("slide");
@@ -236,7 +242,7 @@ <h2 class="name">{{fractal.name}}</h2>
 
 function handleKey(e) {
     e ||= window.event;
-    console.log(event);
+    console.log(e);
     switch (e.key) {
         case "ArrowLeft":
             if (state !== 'intro') {
diff --git a/scripts/tasks.clj b/scripts/tasks.clj
index 79408d2..cdd1b66 100644
--- a/scripts/tasks.clj
+++ b/scripts/tasks.clj
@@ -175,14 +175,18 @@
   [& {:keys [dir] :as args}]
   (let [info (read-yaml (str dir "/info.yaml") categories-schema)
         info (update info :categories (partial mapv (partial read-category args)))
-        info (assoc info :fractals (mapcat :fractals (:categories info)))
-        info (update info :categories (partial mapv #(dissoc % :fractals)) )]
+        info (assoc info :fractals (mapv (fn [fract id]
+                                           (assoc fract :id id))
+                                         (mapcat :fractals (:categories info))
+                                         (range)))
+        info (update info :categories (partial mapv #(assoc % :fractals
+                                                            (filter (comp (partial = (:name %)) :category)
+                                                                    (:fractals info)))))]
     info))
 
 #_{:clj-kondo/ignore [:clojure-lsp/unused-public-var]}
 (defn build-site
   [& {:keys [templates output template-args show-args] :as args}]
-  (filters/add-filter! :format-num #(format "%,.3f" %))
   (filters/add-filter! :isnum #(or (number? %) (num-str? %)))
   (let [template-args
         (merge (read-info args)
