diff --git a/package-lock.json b/package-lock.json
index 579133256..22ee4ee2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4203,6 +4203,73 @@
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.0.tgz",
       "integrity": "sha512-VzuAGGkfxE5lt/fWqQAQWlbYf8Rl2AzVRN0aYnCLSfXaavz0DHPOOG8xq7KfJdWIQMI42+bWOoospybg54ADmA=="
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
+      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "requires": {
+        "postcss": "7.0.32",
+        "purgecss": "^2.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -6135,6 +6202,11 @@
         "cypress": "*"
       }
     },
+    "@types/deep-diff": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/deep-diff/-/deep-diff-1.0.0.tgz",
+      "integrity": "sha512-ENsJcujGbCU/oXhDfQ12mSo/mCBWodT2tpARZKmatoSrf8+cGRCPi0KVj3I0FORhYZfLXkewXu7AoIWqiBLkNw=="
+    },
     "@types/dom4": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/dom4/-/dom4-2.0.1.tgz",
@@ -6282,8 +6354,15 @@
     "@types/lodash": {
       "version": "4.14.91",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.91.tgz",
-      "integrity": "sha512-k+nc3moSlAaXacyvz4/c6D9lnUeI6AKsLvkXFuNzUEEqMw7sjDnLW2GqlJ4nyFgMX/p+QzvVG6zRoDo4lJIV5g==",
-      "dev": true
+      "integrity": "sha512-k+nc3moSlAaXacyvz4/c6D9lnUeI6AKsLvkXFuNzUEEqMw7sjDnLW2GqlJ4nyFgMX/p+QzvVG6zRoDo4lJIV5g=="
+    },
+    "@types/lodash.debounce": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz",
+      "integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==",
+      "requires": {
+        "@types/lodash": "*"
+      }
     },
     "@types/mime": {
       "version": "2.0.0",
@@ -6305,6 +6384,11 @@
         "@types/node": "*"
       }
     },
+    "@types/mustache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.0.1.tgz",
+      "integrity": "sha512-wH6Tu9mbiOt0n5EvdoWy0VGQaJMHfLIxY/6wS0xLC7CV1taM6gESEzcYy0ZlWvxxiiljYvfDIvz4hHbUUDRlhw=="
+    },
     "@types/node": {
       "version": "8.5.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-8.5.2.tgz",
@@ -7220,11 +7304,32 @@
         }
       }
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        },
+        "xtend": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+          "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+        }
+      }
+    },
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
     },
     "acorn5-object-spread": {
       "version": "4.0.0",
@@ -9627,6 +9732,11 @@
       "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
+    },
     "camelcase-keys": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
@@ -10249,6 +10359,11 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw=="
+    },
     "colormin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
@@ -11137,6 +11252,11 @@
         "regexpu-core": "^1.0.0"
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
@@ -11631,10 +11751,9 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "deep-diff": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
-      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=",
-      "dev": true
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
+      "integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg=="
     },
     "deep-eql": {
       "version": "3.0.1",
@@ -11710,8 +11829,7 @@
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
-      "dev": true
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
     },
     "del": {
       "version": "3.0.0",
@@ -11834,6 +11952,23 @@
         }
       }
     },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        }
+      }
+    },
     "diff": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.4.0.tgz",
@@ -14965,6 +15100,11 @@
         }
       }
     },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -18570,6 +18710,11 @@
         }
       }
     },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
+    },
     "html-webpack-plugin": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -19020,8 +19165,7 @@
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
-      "dev": true
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
     },
     "indexof": {
       "version": "0.0.1",
@@ -24157,6 +24301,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -24834,6 +24983,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "mustache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.0.1.tgz",
+      "integrity": "sha512-yL5VE97+OXn4+Er3THSmTdCFCtx5hHWzrolvH+JObZnUYwuaG7XV+Ch4fR2cIrcYI0tFHxS7iyFYl14bW8y2sA=="
+    },
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -25031,6 +25185,14 @@
         "minimatch": "^3.0.2"
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-fetch": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@@ -25168,8 +25330,7 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
     "normalize-url": {
       "version": "1.9.1",
@@ -25207,8 +25368,7 @@
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
     },
     "number-is-nan": {
       "version": "1.0.1",
@@ -25291,6 +25451,11 @@
         }
       }
     },
+    "object-hash": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz",
+      "integrity": "sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg=="
+    },
     "object-inspect": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
@@ -26244,6 +26409,132 @@
         "uniqid": "^4.0.0"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.18"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-merge-idents": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz",
@@ -26583,6 +26874,89 @@
         }
       }
     },
+    "postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "requires": {
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+          "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-normalize-charset": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
@@ -26681,8 +27055,7 @@
     "postcss-value-parser": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
     },
     "postcss-zindex": {
       "version": "2.2.0",
@@ -26845,6 +27218,11 @@
         }
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
+    },
     "pretty-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
@@ -27033,6 +27411,96 @@
         "fbjs": "^0.8.0"
       }
     },
+    "purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "requires": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg=="
+        },
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+          "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "q": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.0.tgz",
@@ -28549,6 +29017,14 @@
       "dev": true,
       "requires": {
         "deep-diff": "^0.3.5"
+      },
+      "dependencies": {
+        "deep-diff": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+          "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=",
+          "dev": true
+        }
       }
     },
     "redux-mock-store": {
@@ -31869,6 +32345,283 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.1.tgz",
+      "integrity": "sha512-3faxlyPlcWN8AoNEIVQFNsDcrdXS/D9nOGtdknrXvZp4D4E3AGPO2KRPiGG69B2ZUO0V6RvYiW91L2/n9QnBxg==",
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^2.1.2",
+        "autoprefixer": "^9.4.5",
+        "browserslist": "^4.12.0",
+        "bytes": "^3.0.0",
+        "chalk": "^3.0.0 || ^4.0.0",
+        "color": "^3.1.2",
+        "detective": "^5.2.0",
+        "fs-extra": "^8.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "node-emoji": "^1.8.1",
+        "normalize.css": "^8.0.1",
+        "object-hash": "^2.0.3",
+        "postcss": "^7.0.11",
+        "postcss-functions": "^3.0.0",
+        "postcss-js": "^2.0.0",
+        "postcss-nested": "^4.1.1",
+        "postcss-selector-parser": "^6.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.6",
+        "resolve": "^1.14.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "autoprefixer": {
+          "version": "9.8.6",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+          "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "colorette": "^1.2.1",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.14.5",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.5.tgz",
+          "integrity": "sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==",
+          "requires": {
+            "caniuse-lite": "^1.0.30001135",
+            "electron-to-chromium": "^1.3.571",
+            "escalade": "^3.1.0",
+            "node-releases": "^1.1.61"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001148",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz",
+          "integrity": "sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw=="
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            },
+            "color-convert": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+              "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+              "requires": {
+                "color-name": "~1.1.4"
+              }
+            },
+            "has-flag": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+            },
+            "supports-color": {
+              "version": "7.2.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
+        "color": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
+          "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
+          "requires": {
+            "color-convert": "^1.9.1",
+            "color-string": "^1.5.4"
+          },
+          "dependencies": {
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+            }
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "color-string": {
+          "version": "1.5.4",
+          "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
+          "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
+          "requires": {
+            "color-name": "^1.0.0",
+            "simple-swizzle": "^0.2.2"
+          }
+        },
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+        },
+        "electron-to-chromium": {
+          "version": "1.3.578",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz",
+          "integrity": "sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q=="
+        },
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.2.4",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+          "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "lodash": {
+          "version": "4.17.20",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+        },
+        "node-releases": {
+          "version": "1.1.61",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.61.tgz",
+          "integrity": "sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g=="
+        },
+        "path-parse": {
+          "version": "1.0.6",
+          "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+          "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+          "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
+        },
+        "reduce-css-calc": {
+          "version": "2.1.7",
+          "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
+          "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+          "requires": {
+            "css-unit-converter": "^1.1.1",
+            "postcss-value-parser": "^3.3.0"
+          },
+          "dependencies": {
+            "postcss-value-parser": {
+              "version": "3.3.1",
+              "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+              "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+            }
+          }
+        },
+        "resolve": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",
@@ -33726,8 +34479,7 @@
     "uniq": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
-      "dev": true
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
     },
     "uniqid": {
       "version": "4.1.1",
diff --git a/package.json b/package.json
index 0db4cb5c3..650349b9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuzlocke-generator",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A tool for generating nuzlocke team pics from data",
   "main": "dist/bundle.js",
   "scripts": {
@@ -36,13 +36,17 @@
     "@types/chalk": "^2.2.0",
     "@types/color": "^3.0.0",
     "@types/cypress": "^1.1.3",
+    "@types/deep-diff": "^1.0.0",
     "@types/draft-js": "^0.10.40",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/mustache": "^4.0.1",
     "@types/ramda": "^0.25.37",
     "@types/redux": "^3.6.0",
     "@types/uuid": "^3.4.4",
     "babel-plugin-module-resolver": "^3.1.1",
     "color": "^3.0.0",
     "cypress": "^5.3.0",
+    "deep-diff": "^1.0.2",
     "deep-equal": "^1.0.1",
     "docz": "^0.8.0",
     "dotenv": "^8.2.0",
@@ -51,6 +55,7 @@
     "html-webpack-plugin": "^3.2.0",
     "is-mobile": "^2.2.1",
     "jest-emotion": "^9.2.7",
+    "mustache": "^4.0.1",
     "normalize.css": "^8.0.1",
     "ramda": "^0.25.0",
     "react-color": "^2.17.3",
@@ -59,6 +64,7 @@
     "react-infinite-scroller": "^1.2.4",
     "react-loadable-ts-transformer": "0.0.5",
     "redux-mock-store": "^1.5.3",
+    "tailwindcss": "^1.9.1",
     "tslib": "^2.0.0",
     "tslint": "^6.1.2"
   },
diff --git a/src/actions/index.ts b/src/actions/index.ts
index 112233575..d771fb40c 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -30,3 +30,6 @@ export * from './deleteBox';
 export * from './toggleTemtemMode';
 export * from './toggleMobileResultView';
 export * from './stats';
+export * from './updateEditorHistory';
+export * from './triggerDownload';
+export * from './toggleDialog';
diff --git a/src/actions/nuzlockes.ts b/src/actions/nuzlockes.ts
index 5a3682b74..432604755 100644
--- a/src/actions/nuzlockes.ts
+++ b/src/actions/nuzlockes.ts
@@ -3,8 +3,8 @@ import { Action } from 'actions';
 export type NEW_NUZLOCKE = 'NEW_NUZLOCKE';
 export const NEW_NUZLOCKE: NEW_NUZLOCKE = 'NEW_NUZLOCKE';
 
-export type newNuzlocke = (data, {isCopy}) => Action<NEW_NUZLOCKE>;
-export function newNuzlocke(data, {isCopy}): Action<NEW_NUZLOCKE> {
+export type newNuzlocke = (data, { isCopy }) => Action<NEW_NUZLOCKE>;
+export function newNuzlocke(data, { isCopy }): Action<NEW_NUZLOCKE> {
     return {
         type: NEW_NUZLOCKE,
         data,
@@ -26,12 +26,8 @@ export function deleteNuzlocke(id: string): Action<DELETE_NUZLOCKE> {
 export type SWITCH_NUZLOCKE = 'SWITCH_NUZLOCKE';
 export const SWITCH_NUZLOCKE: SWITCH_NUZLOCKE = 'SWITCH_NUZLOCKE';
 
-export type switchNuzlocke = (
-    id: string,
-) => Action<SWITCH_NUZLOCKE>;
-export function switchNuzlocke(
-    id: string,
-): Action<SWITCH_NUZLOCKE> {
+export type switchNuzlocke = (id: string) => Action<SWITCH_NUZLOCKE>;
+export function switchNuzlocke(id: string): Action<SWITCH_NUZLOCKE> {
     return {
         type: SWITCH_NUZLOCKE,
         id,
@@ -53,8 +49,16 @@ export function updateNuzlocke(id: string, data): Action<UPDATE_NUZLOCKE> {
 export type UPDATE_SWITCH_NUZLOCKE = 'UPDATE_SWITCH_NUZLOCKE';
 export const UPDATE_SWITCH_NUZLOCKE: UPDATE_SWITCH_NUZLOCKE = 'UPDATE_SWITCH_NUZLOCKE';
 
-export type updateSwitchNuzlocke = (id: string, newId: string, data) => Action<UPDATE_SWITCH_NUZLOCKE>;
-export function updateSwitchNuzlocke(id: string, newId: string, data): Action<UPDATE_SWITCH_NUZLOCKE> {
+export type updateSwitchNuzlocke = (
+    id: string,
+    newId: string,
+    data,
+) => Action<UPDATE_SWITCH_NUZLOCKE>;
+export function updateSwitchNuzlocke(
+    id: string,
+    newId: string,
+    data,
+): Action<UPDATE_SWITCH_NUZLOCKE> {
     return {
         type: UPDATE_SWITCH_NUZLOCKE,
         id,
diff --git a/src/actions/toggleDialog.ts b/src/actions/toggleDialog.ts
new file mode 100644
index 000000000..c8109f733
--- /dev/null
+++ b/src/actions/toggleDialog.ts
@@ -0,0 +1,13 @@
+import { Action } from 'actions';
+import { DialogViewType } from 'models';
+
+export type TOGGLE_DIALOG = 'TOGGLE_DIALOG';
+export const TOGGLE_DIALOG: TOGGLE_DIALOG = 'TOGGLE_DIALOG';
+
+export type toggleDialog = (dialogTarget: DialogViewType) => Action<TOGGLE_DIALOG>;
+export const toggleDialog = (dialogTarget: DialogViewType): Action<TOGGLE_DIALOG> => {
+    return {
+        type: TOGGLE_DIALOG,
+        dialog: dialogTarget,
+    };
+};
diff --git a/src/actions/triggerDownload.ts b/src/actions/triggerDownload.ts
new file mode 100644
index 000000000..ee4da652b
--- /dev/null
+++ b/src/actions/triggerDownload.ts
@@ -0,0 +1,11 @@
+import { Action } from './action';
+
+export type TRIGGER_DOWNLOAD = 'TRIGGER_DOWNLOAD';
+export const TRIGGER_DOWNLOAD: TRIGGER_DOWNLOAD = 'TRIGGER_DOWNLOAD';
+
+export type triggerDownload = () => Action<TRIGGER_DOWNLOAD, boolean>;
+export const triggerDownload = (): Action<TRIGGER_DOWNLOAD, boolean> => {
+    return {
+        type: TRIGGER_DOWNLOAD,
+    };
+};
diff --git a/src/actions/updateEditorHistory.ts b/src/actions/updateEditorHistory.ts
new file mode 100644
index 000000000..73ad74a91
--- /dev/null
+++ b/src/actions/updateEditorHistory.ts
@@ -0,0 +1,35 @@
+import { Action } from './action';
+import { History } from 'reducers/editorHistory';
+
+export type UPDATE_EDITOR_HISTORY = 'UPDATE_EDITOR_HISTORY';
+export const UPDATE_EDITOR_HISTORY: UPDATE_EDITOR_HISTORY = 'UPDATE_EDITOR_HISTORY';
+
+export type updateEditorHistory = (present: any) => Action<UPDATE_EDITOR_HISTORY, any>;
+export const updateEditorHistory = (present: any): Action<UPDATE_EDITOR_HISTORY, any> => {
+    return {
+        type: UPDATE_EDITOR_HISTORY,
+        present,
+    };
+};
+
+export type UNDO_EDITOR_HISTORY = 'UNDO_EDITOR_HISTORY';
+export const UNDO_EDITOR_HISTORY: UNDO_EDITOR_HISTORY = 'UNDO_EDITOR_HISTORY';
+
+export type undoEditorHistory = (present: any) => Action<UNDO_EDITOR_HISTORY, any>;
+export const undoEditorHistory = (present: any): Action<UNDO_EDITOR_HISTORY, any> => {
+    return {
+        type: UNDO_EDITOR_HISTORY,
+        present,
+    };
+};
+
+export type REDO_EDITOR_HISTORY = 'REDO_EDITOR_HISTORY';
+export const REDO_EDITOR_HISTORY: REDO_EDITOR_HISTORY = 'REDO_EDITOR_HISTORY';
+
+export type redoEditorHistory = (present: any) => Action<REDO_EDITOR_HISTORY, any>;
+export const redoEditorHistory = (present: any): Action<REDO_EDITOR_HISTORY, any> => {
+    return {
+        type: REDO_EDITOR_HISTORY,
+        present,
+    };
+};
diff --git a/src/assets/checkpoints-for-pokemon.png b/src/assets/checkpoints-for-pokemon.png
new file mode 100644
index 000000000..ac7896c26
Binary files /dev/null and b/src/assets/checkpoints-for-pokemon.png differ
diff --git a/src/assets/icons/pokemon/regular/articuno-galar.png b/src/assets/icons/pokemon/regular/articuno-galar.png
new file mode 100644
index 000000000..0a02b2aea
Binary files /dev/null and b/src/assets/icons/pokemon/regular/articuno-galar.png differ
diff --git a/src/assets/icons/pokemon/regular/calyrex-ice-rider.png b/src/assets/icons/pokemon/regular/calyrex-ice-rider.png
new file mode 100644
index 000000000..b24cc8594
Binary files /dev/null and b/src/assets/icons/pokemon/regular/calyrex-ice-rider.png differ
diff --git a/src/assets/icons/pokemon/regular/calyrex-shadow-rider.png b/src/assets/icons/pokemon/regular/calyrex-shadow-rider.png
new file mode 100644
index 000000000..bc4e72657
Binary files /dev/null and b/src/assets/icons/pokemon/regular/calyrex-shadow-rider.png differ
diff --git a/src/assets/icons/pokemon/regular/calyrex.png b/src/assets/icons/pokemon/regular/calyrex.png
new file mode 100644
index 000000000..7c20e1bae
Binary files /dev/null and b/src/assets/icons/pokemon/regular/calyrex.png differ
diff --git a/src/assets/icons/pokemon/regular/glastrier.png b/src/assets/icons/pokemon/regular/glastrier.png
new file mode 100644
index 000000000..eef6a5ced
Binary files /dev/null and b/src/assets/icons/pokemon/regular/glastrier.png differ
diff --git a/src/assets/icons/pokemon/regular/moltres-galar.png b/src/assets/icons/pokemon/regular/moltres-galar.png
new file mode 100644
index 000000000..c23610860
Binary files /dev/null and b/src/assets/icons/pokemon/regular/moltres-galar.png differ
diff --git a/src/assets/icons/pokemon/regular/regidrago.png b/src/assets/icons/pokemon/regular/regidrago.png
new file mode 100644
index 000000000..d4160454a
Binary files /dev/null and b/src/assets/icons/pokemon/regular/regidrago.png differ
diff --git a/src/assets/icons/pokemon/regular/regieleki.png b/src/assets/icons/pokemon/regular/regieleki.png
new file mode 100644
index 000000000..96d8f84e7
Binary files /dev/null and b/src/assets/icons/pokemon/regular/regieleki.png differ
diff --git a/src/assets/icons/pokemon/regular/slowking-galar.png b/src/assets/icons/pokemon/regular/slowking-galar.png
new file mode 100644
index 000000000..f367b3de1
Binary files /dev/null and b/src/assets/icons/pokemon/regular/slowking-galar.png differ
diff --git a/src/assets/icons/pokemon/regular/spectrier.png b/src/assets/icons/pokemon/regular/spectrier.png
new file mode 100644
index 000000000..65913a75b
Binary files /dev/null and b/src/assets/icons/pokemon/regular/spectrier.png differ
diff --git a/src/assets/icons/pokemon/regular/zapdos-galar.png b/src/assets/icons/pokemon/regular/zapdos-galar.png
new file mode 100644
index 000000000..8fc095a3e
Binary files /dev/null and b/src/assets/icons/pokemon/regular/zapdos-galar.png differ
diff --git a/src/components/AddPokemonButton/AddPokemonButton.tsx b/src/components/AddPokemonButton/AddPokemonButton.tsx
index 441e55372..f870b1263 100644
--- a/src/components/AddPokemonButton/AddPokemonButton.tsx
+++ b/src/components/AddPokemonButton/AddPokemonButton.tsx
@@ -6,7 +6,7 @@ import { Button, Intent } from '@blueprintjs/core';
 
 export const AddPokemonButtonBase = ({ onClick }: { onClick: onClick }) => (
     <Button
-        icon='add'
+        icon="add"
         intent={Intent.SUCCESS}
         className="add-new-pokemon"
         onClick={(e) => {
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 3205f7cf5..643acced9 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -6,11 +6,19 @@ import Loadable from 'react-loadable';
 import './app.css';
 import { Hotkeys } from 'components/Hotkeys';
 import { State } from 'state';
-import { version1116 } from 'actions';
+import { updateEditorHistory } from 'actions';
 import { feature } from 'utils';
+import { isEqual } from 'lodash';
+import { omit } from 'ramda';
+import { History } from 'reducers/editorHistory';
+import { Drawer } from '@blueprintjs/core';
+import { ImagesDrawer } from 'components/Shared/ImagesDrawer';
+import { ErrorBoundary } from 'components';
+import { BugReporter } from 'components/BugReporter';
 
 export interface AppProps {
     style: State['style'];
+    view: State['view'];
 }
 
 function Loading() {
@@ -25,49 +33,109 @@ const Editor = Loadable({
     },
 });
 
-const Result = Loadable({
-    loader: () => feature.resultv2 ? import('components/Result/Result2') : import('components/Result/Result'),
-    loading: Loading,
-    render(loaded) {
-        return <loaded.Result />;
-    },
-});
-
-export class UpdaterBase extends React.PureComponent<{customMoveMap: State['customMoveMap'], version1116: typeof version1116 }> {
+export class UpdaterBase extends React.Component<{
+    present: Omit<State, 'editorHistory'>;
+    updateEditorHistory: updateEditorHistory;
+    lrt: History<any>['lastRevisionType'];
+}> {
     public componentDidMount() {
-        if (!Array.isArray(this.props.customMoveMap)) {
-            this.props.version1116();
+        console.log('Called component did mount');
+        // initial history record
+        this.props.updateEditorHistory(this.props.present);
+    }
+
+    // eslint-disable-next-line camelcase
+    public UNSAFE_componentWillReceiveProps(prev) {
+        if (
+            (prev.lrt === 'update') &&
+            this.props.present != null &&
+            this.props.present != null &&
+            !isEqual(this.props.present, prev.present)
+        ) {
+            console.log(this.props.lrt, prev.lrt);
+            this.props.updateEditorHistory(prev.present);
         }
     }
+
     public render() {
         return <div />;
-    };
+    }
 }
 
-export const Updater = connect((state: State) => ({ customMoveMap: state.customMoveMap }), { version1116 })(UpdaterBase);
+export const Updater = connect(
+    (state: State) => ({
+        present: omit(['editorHistory'], state),
+        lrt: state?.editorHistory?.lastRevisionType,
+    }),
+    { updateEditorHistory },
+    null,
+    { pure: false },
+)(UpdaterBase);
 
-export class AppBase extends React.PureComponent<AppProps> {
+export class AppBase extends React.PureComponent<AppProps, {result2?: boolean}> {
     public constructor(props: AppProps) {
         super(props);
+        this.state = {result2: false};
+    }
+
+    public componentDidMount() {
+        if (feature.resultv2) {
+            // TOP SECRET
+            if (this.props.style.customCSS.includes('resultv2')) {
+                this.setState({result2: true});
+            } else {
+                this.setState({result2: false});
+            }
+        }
     }
 
     public render() {
+        const {style, view} = this.props;
+        console.log('features', feature);
+
+        const Result = Loadable({
+            loader: () =>
+                this.state.result2
+                    ? import('components/Result/Result2')
+                    : import('components/Result/Result'),
+            loading: Loading,
+            render(loaded) {
+                return <loaded.Result />;
+            },
+        });
+
         return (
-            <div
-                className="app"
-                role="main"
-                style={{
-                    background: this.props.style.editorDarkMode ? '#111' : '#fff',
-                }}>
-                <Updater />
-                <Hotkeys />
-                <Editor />
-                <Result />
-            </div>
+            <ErrorBoundary errorMessage={<div className='p-6 center-text'>
+                <h2>There was a problem retrieving your nuzlocke data.</h2>
+                <p>Please consider submitting a bug report.</p>
+
+                <BugReporter defaultOpen />
+            </div>}>
+                <div
+                    className="app"
+                    role="main"
+                    style={{
+                        background: this.props.style.editorDarkMode ? '#111' : '#fff',
+                    }}>
+                    <Updater />
+                    <Hotkeys />
+                    <Editor />
+                    <Result />
+                    <Drawer
+                        isOpen={view?.dialogs?.imageUploader}
+                        size={Drawer.SIZE_STANDARD}
+                    >
+                        <ImagesDrawer />
+                    </Drawer>
+                </div>
+            </ErrorBoundary>
         );
     }
 }
 
 export const App = connect(
-    (state: Pick<State, keyof State>) => ({ style: state.style }),
+    (state: Pick<State, keyof State>) => ({
+        style: state.style,
+        view: state.view,
+    })
 )(AppBase);
diff --git a/src/components/App/__tests__/App.test.tsx b/src/components/App/__tests__/App.test.tsx
index 1a2e3b08f..6114d538e 100644
--- a/src/components/App/__tests__/App.test.tsx
+++ b/src/components/App/__tests__/App.test.tsx
@@ -11,7 +11,7 @@ describe('<App />', () => {
         const store = configureStore()({});
         const wrapper = mount(
             <Provider store={store}>
-                <App style={styleDefaults} />
+                <App view={{dialogs: {imageUploader: false}}} style={styleDefaults} />
             </Provider>,
         );
         expect(wrapper).toBeDefined();
diff --git a/src/components/App/app.css b/src/components/App/app.css
index abeacdc9f..8f37f59b0 100644
--- a/src/components/App/app.css
+++ b/src/components/App/app.css
@@ -7,10 +7,13 @@
 }
 .release-notes-wrapper h1 {
   font-size: 1.5rem !important;
+  font-weight: bold;
 }
 .release-notes-wrapper h2 {
   margin-top: 0.5rem;
   font-size: 1.2rem !important;
+  font-weight: bold;
+  margin-bottom: 0.25rem;
 }
 .release-notes-wrapper h4 {
   background: rgba(244,244,244,0.1);
@@ -22,6 +25,9 @@
   width: 4rem;
   text-align: center;
 }
+.release-notes-wrapper a {
+    color: #24acf0;
+}
 .release-notes-wrapper p {
   line-height: 1.4;
   margin-top: 0.5rem;
@@ -32,12 +38,17 @@
   margin: 0 auto;
   max-width: 100%;
 }
-.release-notes-wrapper a {
-  margin-left: 4px;
-}
 .release-notes-wrapper li ul {
   margin: 0;
 }
+.release-notes-wrapper ul {
+    list-style-type: disc;
+    margin-left: 40px;
+}
+.release-notes-wrapper li > ul {
+    margin-left: 80px;
+}
+
 .bp3-dark .release-dialog h1,
 .bp3-dark .release-dialog h2,
 .bp3-dark .release-dialog h3,
diff --git a/src/components/BaseEditor/BaseEditor.tsx b/src/components/BaseEditor/BaseEditor.tsx
index 98aac7105..55ef80311 100644
--- a/src/components/BaseEditor/BaseEditor.tsx
+++ b/src/components/BaseEditor/BaseEditor.tsx
@@ -9,16 +9,6 @@ export interface BaseEditorProps {
     defaultOpen?: boolean;
 }
 
-const baseEditorStyle = {
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    margin: '2px',
-    marginBottom: '6px',
-    fontSize: '1rem',
-};
-
 export class BaseEditor extends React.Component<BaseEditorProps, BaseEditorState> {
     public static defaultProps = {
         defaultOpen: true,
@@ -40,7 +30,7 @@ export class BaseEditor extends React.Component<BaseEditorProps, BaseEditorState
             <div className={`${this.props.name.toLowerCase()}-editor base-editor`}>
                 <h4
                     title={`${this.state.isOpen ? 'Collapse' : 'Open'} this editor.`}
-                    style={baseEditorStyle}
+                    className="font-bold flex content-center justify-between m-1 mb-2 cursor-pointer text-base"
                     onClick={this.toggleEditor}>
                     {this.props.name}
                     <span
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 3131ab188..9c617fc07 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -141,7 +141,8 @@ export class BoxBase extends React.PureComponent<BoxProps, BoxState> {
         return bg && bg.startsWith('http') ? `url(${bg})` : `url(./assets/img/box/${bg}.png)`;
     }
 
-    private toggleDialog = () => this.setState({ deleteConfirmationOpen: !this.state.deleteConfirmationOpen });
+    private toggleDialog = () =>
+        this.setState({ deleteConfirmationOpen: !this.state.deleteConfirmationOpen });
 
     public render() {
         const {
@@ -178,9 +179,11 @@ export class BoxBase extends React.PureComponent<BoxProps, BoxState> {
                     onConfirm={(e) => {
                         this.props.deleteBox(id);
 
-                        pokemon.filter(pokemon => pokemon.status === name).forEach(element => {
-                            this.props.deletePokemon(element.id);
-                        });
+                        pokemon
+                            .filter((pokemon) => pokemon.status === name)
+                            .forEach((element) => {
+                                this.props.deletePokemon(element.id);
+                            });
 
                         this.setState({ deleteConfirmationOpen: true });
                     }}
@@ -188,8 +191,8 @@ export class BoxBase extends React.PureComponent<BoxProps, BoxState> {
                     cancelButtonText="Cancel"
                     intent={Intent.DANGER}>
                     <p>
-                        This will delete the currently selected Box and all Pokémon stored inside the box. Are you sure you want to do
-                        that?
+                        This will delete the currently selected Box and all Pokémon stored inside
+                        the box. Are you sure you want to do that?
                     </p>
                 </Alert>
                 <Popover
@@ -272,12 +275,9 @@ export class BoxBase extends React.PureComponent<BoxProps, BoxState> {
     }
 }
 
-export const Box = connect(
-    null,
-    {
-        clearBox,
-        editBox,
-        deleteBox,
-        deletePokemon,
-    },
-)(BoxBase);
+export const Box = connect(null, {
+    clearBox,
+    editBox,
+    deleteBox,
+    deletePokemon,
+})(BoxBase);
diff --git a/src/components/Box/BoxForm.tsx b/src/components/Box/BoxForm.tsx
index 359044e26..d4cd0a977 100644
--- a/src/components/Box/BoxForm.tsx
+++ b/src/components/Box/BoxForm.tsx
@@ -156,7 +156,9 @@ export class BoxFormBase extends React.Component<BoxFormProps, BoxFormState> {
                                     value={this.state.newBox.inheritFrom}
                                     name="inheritFrom">
                                     {['Team', 'Boxed', 'Dead', 'Champs'].map((box, idx) => (
-                                        <option key={idx} value={box}>{box}</option>
+                                        <option key={idx} value={box}>
+                                            {box}
+                                        </option>
                                     ))}
                                 </select>
                             </div>
@@ -170,8 +172,7 @@ export class BoxFormBase extends React.Component<BoxFormProps, BoxFormState> {
                                 onClick={this.toggleBoxForm}
                                 intent={Intent.DANGER}
                                 style={{ margin: '0 .5rem' }}
-                                minimal
-                            >
+                                minimal>
                                 Cancel
                             </Button>
                             <Button
diff --git a/src/components/BoxedPokemon/BoxedPokemon.tsx b/src/components/BoxedPokemon/BoxedPokemon.tsx
index 061e0821c..e07cb27a5 100644
--- a/src/components/BoxedPokemon/BoxedPokemon.tsx
+++ b/src/components/BoxedPokemon/BoxedPokemon.tsx
@@ -42,16 +42,18 @@ export const BoxedPokemonBase = (poke: BoxedPokemonProps) => {
                 // Its dependent on the way react-dnd is wired
                 // which needs to be updated to v11 anyhow
             }
-            {process.env.NODE_ENV !== 'test' && <PokemonIcon
-                species={poke?.species}
-                id={poke?.id}
-                style={{ cursor: 'pointer' }}
-                forme={poke?.forme}
-                shiny={poke?.shiny}
-                gender={poke?.gender}
-                customIcon={poke?.customIcon}
-                className={'boxed-pokemon-icon'}
-            />}
+            {process.env.NODE_ENV !== 'test' && (
+                <PokemonIcon
+                    species={poke?.species}
+                    id={poke?.id}
+                    style={{ cursor: 'pointer' }}
+                    forme={poke?.forme}
+                    shiny={poke?.shiny}
+                    gender={poke?.gender}
+                    customIcon={poke?.customIcon}
+                    className={'boxed-pokemon-icon'}
+                />
+            )}
             {isMinimal ? null : (
                 <div
                     className="boxed-pokemon-info"
@@ -60,7 +62,7 @@ export const BoxedPokemonBase = (poke: BoxedPokemonProps) => {
                             ? getContrastColor(gameOfOriginToColor(poke?.gameOfOrigin!))
                             : getAccentColor(poke),
                     }}>
-                    <span data-testid='boxed-pokemon-name' className="boxed-pokemon-name">
+                    <span data-testid="boxed-pokemon-name" className="boxed-pokemon-name">
                         {poke?.nickname} {GenderElement(poke?.gender)}{' '}
                         {poke?.level ? <span>lv. {poke?.level}</span> : null}
                         {poke?.style?.displayGameOriginForBoxedAndDead &&
diff --git a/src/components/BoxedPokemon/BoxedPokemon2.tsx b/src/components/BoxedPokemon/BoxedPokemon2.tsx
index acd885d2d..bb12d03a9 100644
--- a/src/components/BoxedPokemon/BoxedPokemon2.tsx
+++ b/src/components/BoxedPokemon/BoxedPokemon2.tsx
@@ -2,14 +2,18 @@ import { PokemonIcon } from 'components';
 import { Pokemon } from 'models';
 import * as React from 'react';
 
-export function BoxedPokemon({pokemon}: {pokemon: Pokemon}) {
-    return <div data-testid='boxed-pokemon'><PokemonIcon
-        species={pokemon?.species}
-        id={pokemon?.id}
-        style={{cursor: 'pointer'}}
-        forme={pokemon?.forme}
-        shiny={pokemon?.shiny}
-        gender={pokemon?.gender}
-        customIcon={pokemon?.customIcon}
-    /></div>;
+export function BoxedPokemon({ pokemon }: { pokemon: Pokemon }) {
+    return (
+        <div data-testid="boxed-pokemon">
+            <PokemonIcon
+                species={pokemon?.species}
+                id={pokemon?.id}
+                style={{ cursor: 'pointer' }}
+                forme={pokemon?.forme}
+                shiny={pokemon?.shiny}
+                gender={pokemon?.gender}
+                customIcon={pokemon?.customIcon}
+            />
+        </div>
+    );
 }
diff --git a/src/components/BoxedPokemon/__tests__/BoxedPokemon.test.tsx b/src/components/BoxedPokemon/__tests__/BoxedPokemon.test.tsx
index 99c4d77ca..c0c731133 100644
--- a/src/components/BoxedPokemon/__tests__/BoxedPokemon.test.tsx
+++ b/src/components/BoxedPokemon/__tests__/BoxedPokemon.test.tsx
@@ -4,10 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { PokemonFixtures } from 'utils/fixtures';
 import { styleDefaults } from 'utils';
 describe(BoxedPokemonBase.name, () => {
-
-
     it('renders a Boxed Pokemon', async () => {
-
         // @ts-expect-error
         const props: BoxedPokemonProps = {
             ...PokemonFixtures.Pikachu,
@@ -17,6 +14,8 @@ describe(BoxedPokemonBase.name, () => {
         render(<BoxedPokemonBase {...props} />);
 
         await waitFor(() => screen.getByTestId('boxed-pokemon-name'));
-        expect(screen.getByTestId('boxed-pokemon-name').textContent).toContain(PokemonFixtures.Pikachu.nickname);
+        expect(screen.getByTestId('boxed-pokemon-name').textContent).toContain(
+            PokemonFixtures.Pikachu.nickname,
+        );
     });
 });
diff --git a/src/components/BoxedPokemon/__tests__/BoxedPokemon2.test.tsx b/src/components/BoxedPokemon/__tests__/BoxedPokemon2.test.tsx
index f30e47193..1029ad70e 100644
--- a/src/components/BoxedPokemon/__tests__/BoxedPokemon2.test.tsx
+++ b/src/components/BoxedPokemon/__tests__/BoxedPokemon2.test.tsx
@@ -16,9 +16,9 @@ const poke = {
 describe(`<${BoxedPokemon.name} />`, () => {
     it('renders its content', () => {
         render(
-            <TestProvider><BoxedPokemon
-                pokemon={poke}
-            /></TestProvider>,
+            <TestProvider>
+                <BoxedPokemon pokemon={poke} />
+            </TestProvider>,
         );
         expect(screen.getByTestId('boxed-pokemon')).toBeDefined();
     });
diff --git a/src/components/BugReporter/BugReporter.tsx b/src/components/BugReporter/BugReporter.tsx
index b554da57d..3b77c43c1 100644
--- a/src/components/BugReporter/BugReporter.tsx
+++ b/src/components/BugReporter/BugReporter.tsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 export interface BugReporterProps {
     reportingUrl?: string;
     state: any;
+    defaultOpen?: boolean;
 }
 
 export interface BugReporterState {
@@ -25,9 +26,10 @@ export class BugReporterBase extends React.Component<BugReporterProps, BugReport
 
     public render() {
         const { userReport, userReportTitle, includeNuzlocke, stage } = this.state;
+        const { defaultOpen } = this.props;
 
         return (
-            <BaseEditor name="Bug Reports and Feature Requests" defaultOpen={false}>
+            <BaseEditor name="Bug Reports and Feature Requests" defaultOpen={defaultOpen}>
                 <div style={{ margin: '.5rem' }}>
                     <input
                         style={{
@@ -66,11 +68,11 @@ export class BugReporterBase extends React.Component<BugReporterProps, BugReport
                         <Button
                             disabled={!userReportTitle}
                             onClick={this.sendBugReport}
-                            className="bp3-minimal"
+                            minimal
                             intent={Intent.DANGER}>
                             Submit{' '}
                             <img
-                                style={{ height: '20px', verticalAlign: 'bottom' }}
+                                style={{ height: '20px', verticalAlign: 'bottom', display: 'inline' }}
                                 alt=""
                                 role="presentation"
                                 src={`./icons/pokemon/regular/${this.getButtonPokemon(stage)}.png`}
diff --git a/src/components/ChampsPokemon/ChampsPokemon.tsx b/src/components/ChampsPokemon/ChampsPokemon.tsx
index 5eca07cef..7ea013eb5 100644
--- a/src/components/ChampsPokemon/ChampsPokemon.tsx
+++ b/src/components/ChampsPokemon/ChampsPokemon.tsx
@@ -66,14 +66,14 @@ export class ChampsPokemon extends React.Component<ChampsPokemonProps> {
                     backgroundSize: 'contain',
                     backgroundRepeat: 'no-repeat',
                     height: '48px',
-                    width: '48px'
+                    width: '48px',
                 }}
             />
         );
     }
 
     public render() {
-        const {margin, padding, customCSS} = this.props;
+        const { margin, padding, customCSS } = this.props;
         const className = champsPokemon({
             background: gameOfOriginToColor(this.props.gameOfOrigin),
             height: '48px',
@@ -84,8 +84,7 @@ export class ChampsPokemon extends React.Component<ChampsPokemonProps> {
 
         return (
             <>
-                <div
-                    className={cx(className)}>
+                <div className={cx(className)}>
                     {this.props.useSprites ? (
                         this.getPokemonImage()
                     ) : (
diff --git a/src/components/ChampsPokemon/ChampsPokemonCollection.tsx b/src/components/ChampsPokemon/ChampsPokemonCollection.tsx
index e849f4ada..39194cc9c 100644
--- a/src/components/ChampsPokemon/ChampsPokemonCollection.tsx
+++ b/src/components/ChampsPokemon/ChampsPokemonCollection.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Layout, LayoutDisplay, LayoutDirection, LayoutAlignment, LayoutSpacing } from 'components/Layout';
+import {
+    Layout,
+    LayoutDisplay,
+    LayoutDirection,
+    LayoutAlignment,
+    LayoutSpacing,
+} from 'components/Layout';
 import { ChampsPokemon } from './ChampsPokemon';
 import { Pokemon } from 'models';
 
@@ -15,8 +21,12 @@ export class ChampsPokemonView extends React.Component<ChampsPokemonViewProps> {
     public render() {
         const { pokemon, display, direction, alignment, spacing } = this.props;
 
-        return <Layout display={display} direction={direction} alignment={alignment} spacing={spacing}>
-            {pokemon?.map(poke => <ChampsPokemon key={poke.id} {...poke} />)}
-        </Layout>;
+        return (
+            <Layout display={display} direction={direction} alignment={alignment} spacing={spacing}>
+                {pokemon?.map((poke) => (
+                    <ChampsPokemon key={poke.id} {...poke} />
+                ))}
+            </Layout>
+        );
     }
 }
diff --git a/src/components/DataEditor/DataEditor.tsx b/src/components/DataEditor/DataEditor.tsx
index 0955b26b8..d49a58399 100644
--- a/src/components/DataEditor/DataEditor.tsx
+++ b/src/components/DataEditor/DataEditor.tsx
@@ -24,6 +24,8 @@ import { omit } from 'ramda';
 import { BaseEditor } from 'components/BaseEditor';
 import { State } from 'state';
 import { noop } from 'redux-saga/utils';
+import { feature } from 'utils';
+import { isEmpty } from 'lodash';
 
 const trash = require('assets/img/trash.png');
 
@@ -45,6 +47,18 @@ export interface DataEditorState {
     overrideImport: boolean;
 }
 
+const getGameNumberOfBoxes = (game: string) => {
+    switch (game) {
+        case 'RBY':
+            return 12;
+        case 'GS':
+        case 'Crystal':
+            return 14;
+        default:
+            return 12;
+    }
+};
+
 const hexEncode = function (str: string) {
     let hex, i;
 
@@ -66,30 +80,54 @@ const isValidJSON = (data: string): boolean => {
     }
 };
 
-export type WarningText = {warningText?: string};
+export type WarningText = { warningText?: string };
 export function DeleteAlert({
     warningText = 'This will permanently delete all your local storage data, with no way to retrieve it. Are you sure you want to do this?',
     ...props
 }: IAlertProps & WarningText) {
-    const style = useSelector<State, State['style']>(state => state.style);
-
-    return <Alert
-        cancelButtonText="Nevermind"
-        confirmButtonText="Delete Anyway"
-        className={style.editorDarkMode ? 'bp3-dark' : 'bp3-light'}
-        style={{ maxWidth: '600px' }}
-        intent={Intent.DANGER}
-        {...props}
-    >
-        <div style={{ display: 'flex' }}>
-            <img style={{ height: '10rem' }} src={trash} alt="Sad Trubbish" />
-            <p style={{ fontSize: '1.2rem', padding: '1rem' }}>
-                {warningText}
-            </p>
-        </div>
-    </Alert>;
+    const style = useSelector<State, State['style']>((state) => state.style);
+
+    return (
+        <Alert
+            cancelButtonText="Nevermind"
+            confirmButtonText="Delete Anyway"
+            className={style.editorDarkMode ? 'bp3-dark' : 'bp3-light'}
+            style={{ maxWidth: '600px' }}
+            intent={Intent.DANGER}
+            {...props}>
+            <div style={{ display: 'flex' }}>
+                <img style={{ height: '10rem' }} src={trash} alt="Sad Trubbish" />
+                <p style={{ fontSize: '1.2rem', padding: '1rem' }}>{warningText}</p>
+            </div>
+        </Alert>
+    );
 }
 
+// This is to handle very weird/rare edge cases where data
+// can be parsed, but then in turn has to be "double-parsed"
+const handleExceptions = (data) => {
+    let updated: any = {};
+
+    if (typeof data.pokemon === 'string') {
+        const toaster = Toaster.create();
+        toaster.show({
+            message: 'Issue with data detected. Attempting to fix...',
+            intent: Intent.DANGER,
+        });
+        for (const prop in data) {
+            try {
+                updated = { ...updated, [prop]: JSON.parse(data[prop])};
+            } catch (e) {
+                console.log(
+                    `Failed to parse on ${prop}`
+                );
+            }
+        }
+    }
+
+    return (isEmpty(updated)) ? data : updated;
+};
+
 export class DataEditorBase extends React.Component<DataEditorProps, DataEditorState> {
     public textarea: any;
     public fileInput: any;
@@ -138,7 +176,7 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
     private confirmImport = (e) => {
         let cmm = { customMoveMap: [] };
         const override = this.state.overrideImport;
-        const data = JSON.parse(this.state.data);
+        const data = handleExceptions(JSON.parse(this.state.data));
         const nuz = this.props.state;
         const safeguards = { customTypes: [], customMoveMap: [], stats: [] };
         if (!Array.isArray(data.customMoveMap)) {
@@ -147,7 +185,7 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
             cmm = { customMoveMap: data.customMoveMap };
         }
         this.props.replaceState({ ...safeguards, ...(override ? data : nuz), ...cmm });
-        this.props.newNuzlocke(this.state.data, {isCopy: false});
+        this.props.newNuzlocke(this.state.data, { isCopy: false });
         this.writeAllData();
         this.setState({ isOpen: false });
     };
@@ -164,15 +202,16 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
         this.setState({ isOpen: true });
         this.setState({
             href: `data:text/plain;charset=utf-8,${encodeURIComponent(
-                JSON.stringify(omit(['router', '._persist'], state)),
+                JSON.stringify(omit(['router', '._persist', 'editorHistory'], state)),
             )}`,
         });
     };
 
     private renderTeam(data) {
-        let d;
+        let d: any;
         try {
-            d = JSON.parse(data);
+            d = handleExceptions(JSON.parse(data));
+
         } catch {
             d = { pokemon: false };
         }
@@ -189,9 +228,9 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
                         display: 'flex',
                         justifyContent: 'center',
                     }}>
-                    {d.pokemon
-                        .filter((p) => p.status === 'Team')
-                        .map((p) => {
+                    {d?.pokemon
+                        ?.filter((p) => p.status === 'Team')
+                        ?.map((p) => {
                             return <PokemonIconBase key={p.id} {...p} />;
                         })}
                 </div>
@@ -222,10 +261,22 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
     };
 
     private uploadFile = (replaceState, state) => (e) => {
+        const t0 = performance.now();
+        // const worker = new Worker('./parseFile.js');
+
+        // worker.onmessage = (e) => {
+        //     console.log(
+        //         e.data,
+        //         'Message recieved.',
+        //     );
+        // };
+
         const file = this.fileInput.files[0];
         const reader = new FileReader();
         const componentState = this.state;
 
+        // worker.postMessage({file});
+
         reader.readAsArrayBuffer(file);
 
         reader.addEventListener('load', async function () {
@@ -235,28 +286,37 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
 
             const functionToUse =
                 componentState.selectedGame === 'RBY'
-                    ? parsers.parseGen1Save(u, 'nuzlocke')
+                    ? parsers.parseGen1Save(u as Buffer, {type: 'nuzlocke'})
                     : parsers.parseGen2Save(u, 'nuzlocke');
-
-            functionToUse
-                // @ts-ignore
-                .then((res) => {
-                    res.pokemon = res.pokemon.filter((poke) => poke.species);
-                    const mergedPokemon = componentState.mergeDataMode
-                        ? DataEditorBase.pokeMerge(state.pokemon, res.pokemon)
-                        : res.pokemon;
-                    const data = {
-                        game: DataEditorBase.determineGame(res.isYellow),
-                        pokemon: mergedPokemon,
-                        trainer: res.trainer,
-                    };
-                    const newState = { ...state, ...data };
-
-                    replaceState(newState);
-                })
-                .catch((err) => {
-                    console.error(err);
+            try {
+                const result = await functionToUse;
+
+                // strip out invalid species
+                result.pokemon = result.pokemon.filter((poke) => poke.species);
+                const mergedPokemon = componentState.mergeDataMode
+                    ? DataEditorBase.pokeMerge(state.pokemon, result.pokemon as Pokemon[])
+                    : result.pokemon;
+                const data = {
+                    // @ts-expect-error
+                    game: DataEditorBase.determineGame(result?.isYellow),
+                    pokemon: mergedPokemon,
+                    trainer: result.trainer,
+                };
+                const newState = { ...state, ...data };
+
+                //worker.postMessage(newState);
+
+                replaceState(newState);
+                const t1 = performance.now();
+                console.info(`Call: ${t1 - t0} ms on ${componentState.selectedGame} save file type`);
+            } catch (e) {
+                const toaster = Toaster.create();
+                toaster.show({
+                    message: `Failed to parse save file. ${e}`,
+                    intent: Intent.DANGER,
                 });
+                console.error(e);
+            }
         });
     };
 
@@ -273,71 +333,88 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
         this.setState({ isClearAllDataOpen: !this.state.isClearAllDataOpen });
 
     private renderSaveFileUI() {
-        return <>
-            <Button onClick={e => {
-                this.setState({ showSaveFileUI: !this.state.showSaveFileUI });
-            }} style={{
-                // @TODO: find a more sensible hack
-                transform: 'translateY(-5px)'
-            }}>Import From Save File</Button>
-            <div className='data-editor-save-file-form' style={{
-                alignItems: 'center',
-                flexWrap: 'wrap',
-                margin: '0.25rem',
-                display: this.state.showSaveFileUI ? 'flex' : 'none',
-                borderRadius: '0.25rem',
-                padding: '0.25rem',
-            }}>
-                <div
-                    className="bp3-label bp3-inline"
-                    style={{ padding: '.25rem 0', paddingBottom: '.5rem' }}>
-                    <div className={Classes.SELECT}>
-                        <select
-                            value={this.state.selectedGame}
-                            onChange={(e) => this.setState({ selectedGame: e.target.value })}>
-                            {['RBY'].map((game) => (
-                                <option key={game} value={game}>{game}</option>
-                            ))}
-                        </select>
-                    </div>
-                </div>
+        const allowedGames: string[] = ['RBY'];
 
-                <div
-                    className="bp3-label bp3-inline"
+        if (feature.gen2saves) {
+            allowedGames.push('GS');
+            allowedGames.push('Crystal');
+        }
+
+        return (
+            <>
+                <Button
+                    onClick={(e) => {
+                        this.setState({ showSaveFileUI: !this.state.showSaveFileUI });
+                    }}
                     style={{
-                        padding: '.25rem 0',
-                        paddingBottom: '.5rem',
-                        marginLeft: '.25rem',
+                        // @TODO: find a more sensible hack
+                        transform: 'translateY(-5px)',
                     }}>
-                    <input
-                        style={{ padding: '.25rem' }}
-                        className={Classes.FILE_INPUT}
-                        ref={(ref) => (this.fileInput = ref)}
-                        onChange={this.uploadFile(this.props.replaceState, this.props.state)}
-                        type="file"
-                        id="file"
-                        name="file"
-                        accept=".sav"
-                    />
-                </div>
-
+                    Import From Save File
+                </Button>
                 <div
-                    className="bp3-label bp3-inline"
+                    className="data-editor-save-file-form"
                     style={{
-                        padding: '.25rem 0',
-                        paddingBottom: '.5rem',
-                        marginLeft: '.25rem',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        margin: '0.25rem',
+                        display: this.state.showSaveFileUI ? 'flex' : 'none',
+                        borderRadius: '0.25rem',
+                        padding: '0.25rem',
                     }}>
-                    <Switch
-                        label='Merge Data?'
-                        checked={this.state.mergeDataMode}
-                        onChange={(e) =>
-                            this.setState({ mergeDataMode: !this.state.mergeDataMode })
-                        }
-                    />
+                    <div
+                        className="bp3-label bp3-inline"
+                        style={{ padding: '.25rem 0', paddingBottom: '.5rem' }}>
+                        <div className={Classes.SELECT}>
+                            <select
+                                value={this.state.selectedGame}
+                                onChange={(e) => this.setState({ selectedGame: e.target.value })}>
+                                {allowedGames.map((game) => (
+                                    <option key={game} value={game}>
+                                        {game}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+
+                    <div
+                        className="bp3-label bp3-inline"
+                        style={{
+                            padding: '.25rem 0',
+                            paddingBottom: '.5rem',
+                            marginLeft: '.25rem',
+                        }}>
+                        <Switch
+                            label="Merge Data?"
+                            checked={this.state.mergeDataMode}
+                            onChange={(e) =>
+                                this.setState({ mergeDataMode: !this.state.mergeDataMode })
+                            }
+                        />
+                    </div>
+
+                    <div
+                        className="bp3-label bp3-inline"
+                        style={{
+                            padding: '.25rem 0',
+                            paddingBottom: '.5rem',
+                            marginLeft: '.25rem',
+                        }}>
+                        <input
+                            style={{ padding: '.25rem' }}
+                            className={Classes.FILE_INPUT}
+                            ref={(ref) => (this.fileInput = ref)}
+                            onChange={this.uploadFile(this.props.replaceState, this.props.state)}
+                            type="file"
+                            id="file"
+                            name="file"
+                            accept=".sav"
+                        />
+                    </div>
                 </div>
-            </div>
-        </>;
+            </>
+        );
     }
 
     public render() {
@@ -369,10 +446,17 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
                                 </span>
                             </div>
                             <div className="bp3-dialog-footer">
-                                <a href={this.state.href} download={`nuzlocke_${
-                                    this.props?.state?.trainer?.title?.toLowerCase().replace(/\s/g, '-') ||
-                                    this.props?.state?.game?.name?.toLowerCase().replace(/\s/g, '-') ||
-                                ''}_${uuid().slice(0, 4)}.json`}>
+                                <a
+                                    href={this.state.href}
+                                    download={`nuzlocke_${
+                                        this.props?.state?.trainer?.title
+                                            ?.toLowerCase()
+                                            .replace(/\s/g, '-') ||
+                                        this.props?.state?.game?.name
+                                            ?.toLowerCase()
+                                            .replace(/\s/g, '-') ||
+                                        ''
+                                    }_${uuid().slice(0, 4)}.json`}>
                                     <Button icon={'download'} intent={Intent.PRIMARY}>
                                         Download
                                     </Button>
@@ -431,12 +515,11 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
                     )}
                 </Dialog>
 
-                <ButtonGroup style={{margin: '.25rem'}}>
+                <ButtonGroup style={{ margin: '.25rem' }}>
                     <Button
                         onClick={(e) => this.importState()}
                         icon="import"
-                        intent={Intent.PRIMARY}
-                    >
+                        intent={Intent.PRIMARY}>
                         Import Data
                     </Button>
                     <Button onClick={(e) => this.exportState(this.props.state)} icon="export">
@@ -447,7 +530,7 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
                     </Button> */}
                 </ButtonGroup>
                 {this.renderSaveFileUI()}
-                <ButtonGroup style={{margin: '.25rem'}}>
+                <ButtonGroup style={{ margin: '.25rem' }}>
                     <Button
                         minimal
                         intent={Intent.SUCCESS}
@@ -459,8 +542,7 @@ export class DataEditorBase extends React.Component<DataEditorProps, DataEditorS
                         icon="trash"
                         onClick={this.toggleClearingData}
                         intent={Intent.DANGER}
-                        minimal
-                    >
+                        minimal>
                         Clear All Data
                     </Button>
                 </ButtonGroup>
diff --git a/src/components/DataEditor/parseFile.js b/src/components/DataEditor/parseFile.js
new file mode 100644
index 000000000..766be94b2
--- /dev/null
+++ b/src/components/DataEditor/parseFile.js
@@ -0,0 +1,49 @@
+onmessage = function(e) {
+    console.log('Message received.');
+
+    const computation = e.data.file;
+
+    postMessage(computation);
+};
+
+
+
+
+
+
+
+// const reader = new FileReader();
+//         const componentState = this.state;
+
+//         reader.readAsArrayBuffer(file);
+
+//         reader.addEventListener('load', async function () {
+//             const u = new Uint8Array(this.result as ArrayBuffer);
+
+//             const parsers = await import('parsers');
+
+//             const functionToUse =
+//                 componentState.selectedGame === 'RBY'
+//                     ? parsers.parseGen1Save(u, 'nuzlocke')
+//                     : parsers.parseGen2Save(u, 'nuzlocke');
+
+//             functionToUse
+//                 // @ts-ignore
+//                 .then((res) => {
+//                     res.pokemon = res.pokemon.filter((poke) => poke.species);
+//                     const mergedPokemon = componentState.mergeDataMode
+//                         ? DataEditorBase.pokeMerge(state.pokemon, res.pokemon)
+//                         : res.pokemon;
+//                     const data = {
+//                         game: DataEditorBase.determineGame(res.isYellow),
+//                         pokemon: mergedPokemon,
+//                         trainer: res.trainer,
+//                     };
+//                     const newState = { ...state, ...data };
+
+//                     replaceState(newState);
+//                 })
+//                 .catch((err) => {
+//                     console.error(err);
+//                 });
+//         });
diff --git a/src/components/DeadPokemon/DeadPokemon.tsx b/src/components/DeadPokemon/DeadPokemon.tsx
index 7e8deea2a..da61aafe6 100644
--- a/src/components/DeadPokemon/DeadPokemon.tsx
+++ b/src/components/DeadPokemon/DeadPokemon.tsx
@@ -10,10 +10,13 @@ import {
     Forme,
     gameOfOriginToColor,
     TemplateName,
+    feature,
+    isLocal,
 } from 'utils';
 import { selectPokemon } from 'actions';
 import { PokemonIconBase } from 'components/PokemonIcon';
 import { State } from 'state';
+import { game } from 'reducers/game';
 
 const spriteStyle = (style: Styles) => {
     if (style.spritesMode) {
@@ -70,12 +73,14 @@ export const DeadPokemonBase = (poke: DeadPokemonProps) => {
         poke.gameOfOrigin &&
         poke.style.displayGameOriginForBoxedAndDead &&
         poke.style.displayBackgroundInsteadOfBadge;
+    const EMMA_MODE = isLocal();
 
     if (isMinimal && isCompactWithIcons) {
         return (
             <div
                 className={'dead-pokemon-container'}
                 data-league={poke.champion}
+                data-game={poke.gameOfOrigin}
                 style={{
                     background: useGameOfOriginColor
                         ? gameOfOriginToColor(poke.gameOfOrigin!)
@@ -85,16 +90,19 @@ export const DeadPokemonBase = (poke: DeadPokemonProps) => {
                         : getContrastColor(getAccentColor(poke)),
                     height: '50px',
                     fontSize: '90%',
-                    outline: '1px solid #222',
+                    //margin: '1px',
+                    outline: EMMA_MODE ? '' : '1px solid #222',
                 }}>
                 <div
                     className="goc-circle"
                     style={{
-                        background: `linear-gradient(to right, ${gameOfOriginToColor(
-                            poke.gameOfOrigin!,
-                        )}, transparent)`,
+                        background: EMMA_MODE
+                            ? gameOfOriginToColor(poke.gameOfOrigin!)
+                            : `linear-gradient(45deg, ${gameOfOriginToColor(
+                                poke.gameOfOrigin!,
+                            )}, transparent)`,
                         height: '100%',
-                        width: '6rem',
+                        width: poke.gameOfOrigin === 'Platinum' && EMMA_MODE ? '100%' : '50px',
                         position: 'absolute',
                         left: '0',
                         top: '0',
@@ -107,41 +115,47 @@ export const DeadPokemonBase = (poke: DeadPokemonProps) => {
                         {...(poke as any)}
                     />
                 </span>
-                <div
-                    style={{
-                        margin: 0,
-                        padding: 0,
-                        lineHeight: '14px',
-                        height: '100%',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        flexDirection: 'column',
-                    }}>
-                    <div>
-                        {poke.nickname} {GenderElement(poke.gender)} Levels {poke.metLevel}&mdash;
-                        {poke.level}
+                {poke.gameOfOrigin === 'Platinum' && (
+                    <div
+                        style={{
+                            margin: 0,
+                            padding: 0,
+                            lineHeight: '14px',
+                            height: '100%',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            flexDirection: 'column',
+                            zIndex: 1,
+                        }}>
+                        <div>
+                            {poke.nickname} {GenderElement(poke.gender)} Levels {poke.metLevel}
+                            &mdash;
+                            {poke.level}
+                        </div>
+                        <div>{poke.causeOfDeath}</div>
+                        {style.displayGameOriginForBoxedAndDead &&
+                            !poke.style.displayBackgroundInsteadOfBadge &&
+                            poke.gameOfOrigin && (
+                            <span
+                                className="pokemon-gameoforigin"
+                                style={{
+                                    fontSize: '80%',
+                                    borderRadius: '.25rem',
+                                    margin: '0',
+                                    marginTop: '.25rem',
+                                    marginLeft: '.25rem',
+                                    padding: '2px',
+                                    display: 'inline-block',
+                                    background: gameOfOriginToColor(poke.gameOfOrigin),
+                                    color: getContrastColor(
+                                        gameOfOriginToColor(poke.gameOfOrigin),
+                                    ),
+                                }}>
+                                {poke.gameOfOrigin}
+                            </span>
+                        )}
                     </div>
-                    <div>{poke.causeOfDeath}</div>
-                    {style.displayGameOriginForBoxedAndDead &&
-                        !poke.style.displayBackgroundInsteadOfBadge &&
-                        poke.gameOfOrigin && (
-                        <span
-                            className="pokemon-gameoforigin"
-                            style={{
-                                fontSize: '80%',
-                                borderRadius: '.25rem',
-                                margin: '0',
-                                marginTop: '.25rem',
-                                marginLeft: '.25rem',
-                                padding: '2px',
-                                display: 'inline-block',
-                                background: gameOfOriginToColor(poke.gameOfOrigin),
-                                color: getContrastColor(gameOfOriginToColor(poke.gameOfOrigin)),
-                            }}>
-                            {poke.gameOfOrigin}
-                        </span>
-                    )}
-                </div>
+                )}
             </div>
         );
     }
diff --git a/src/components/DeadPokemon/DeadPokemon2.tsx b/src/components/DeadPokemon/DeadPokemon2.tsx
index 733ece296..ebda52766 100644
--- a/src/components/DeadPokemon/DeadPokemon2.tsx
+++ b/src/components/DeadPokemon/DeadPokemon2.tsx
@@ -3,21 +3,20 @@ import { connect, useDispatch } from 'react-redux';
 
 import { Pokemon, Game } from 'models';
 import { GenderElement } from 'components/Shared';
-import {
-    gameOfOriginToColor,
-    Styles,
-} from 'utils';
+import { gameOfOriginToColor, Styles } from 'utils';
 import { selectPokemon } from 'actions';
 import { PokemonIconBase } from 'components/PokemonIcon';
 import { State } from 'state';
 
-export function DeadPokemon({pokemon}: {pokemon: Pokemon}) {
+export function DeadPokemon({ pokemon }: { pokemon: Pokemon }) {
     const dispatch = useDispatch();
 
-    return <span data-testid='dead-pokemon' style={{ filter: 'grayscale(100%)' }}>
-        <PokemonIconBase
-            onClick={(e) => dispatch(selectPokemon(pokemon.id))}
-            {...(pokemon as any)}
-        />
-    </span>;
+    return (
+        <span data-testid="dead-pokemon" style={{ filter: 'grayscale(100%)' }}>
+            <PokemonIconBase
+                onClick={(e) => dispatch(selectPokemon(pokemon.id))}
+                {...(pokemon as any)}
+            />
+        </span>
+    );
 }
diff --git a/src/components/DeadPokemon/__tests__/DeadPokemon2.test.tsx b/src/components/DeadPokemon/__tests__/DeadPokemon2.test.tsx
index 8c613e45c..181a11fa5 100644
--- a/src/components/DeadPokemon/__tests__/DeadPokemon2.test.tsx
+++ b/src/components/DeadPokemon/__tests__/DeadPokemon2.test.tsx
@@ -16,9 +16,9 @@ const poke = {
 describe('<DeadPokemon />', () => {
     it('renders its content', () => {
         render(
-            <TestProvider><DeadPokemon
-                pokemon={poke}
-            /></TestProvider>,
+            <TestProvider>
+                <DeadPokemon pokemon={poke} />
+            </TestProvider>,
         );
         expect(screen.getByTestId('dead-pokemon')).toBeDefined();
     });
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 50d48f72a..3f3a3bfa0 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -1,110 +1,114 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
-import './editor.css';
-import { css, cx } from 'emotion';
+import { useSelector } from 'react-redux';
+import { cx } from 'emotion';
 import { State } from 'state';
-import { Classes, Spinner } from '@blueprintjs/core';
+import { Classes } from '@blueprintjs/core';
 import { ErrorBoundary } from 'components/Shared';
+import { editorStyles } from './styles';
+import './editor.css';
+import { editorModeSelector, minimizedSelector } from 'selectors';
+
 
-const PokemonEditor = React.lazy(() => import('components/PokemonEditor').then(res => ({ default: res.PokemonEditor })));
-const NuzlockeSaveControls = React.lazy(() => import('components/GameEditor/NuzlockeSaveControls').then(res => ({ default: res.NuzlockeSaveControls })));
-const GameEditor = React.lazy(() => import('components/GameEditor').then(res => ({ default: res.GameEditor })));
-const TrainerEditor = React.lazy(() => import('components/TrainerEditor').then(res => ({ default: res.TrainerEditor })));
-const HotkeysEditor = React.lazy(() => import('components/HotkeysEditor').then(res => ({ default: res.HotkeysEditor })));
-const BugReporter = React.lazy(() => import('components/BugReporter').then(res => ({ default: res.BugReporter })));
-const StatsEditor = React.lazy(() => import('components/StatsEditor').then(res => ({ default: res.StatsEditor })));
-const StyleEditor = React.lazy(() => import('components/StyleEditor').then(res => ({ default: res.StyleEditor })));
-const DataEditor = React.lazy(() => import('components/DataEditor').then(res => ({ default: res.DataEditor })));
+const PokemonEditor = React.lazy(() =>
+    import('components/PokemonEditor').then((res) => ({ default: res.PokemonEditor })),
+);
+const NuzlockeSaveControls = React.lazy(() =>
+    import('components/GameEditor/NuzlockeSaveControls').then((res) => ({
+        default: res.NuzlockeSaveControls,
+    })),
+);
+const GameEditor = React.lazy(() =>
+    import('components/GameEditor').then((res) => ({ default: res.GameEditor })),
+);
+const TrainerEditor = React.lazy(() =>
+    import('components/TrainerEditor').then((res) => ({ default: res.TrainerEditor })),
+);
+const HotkeysEditor = React.lazy(() =>
+    import('components/HotkeysEditor').then((res) => ({ default: res.HotkeysEditor })),
+);
+const BugReporter = React.lazy(() =>
+    import('components/BugReporter').then((res) => ({ default: res.BugReporter })),
+);
+const StatsEditor = React.lazy(() =>
+    import('components/StatsEditor').then((res) => ({ default: res.StatsEditor })),
+);
+const StyleEditor = React.lazy(() =>
+    import('components/StyleEditor').then((res) => ({ default: res.StyleEditor })),
+);
+const DataEditor = React.lazy(() =>
+    import('components/DataEditor').then((res) => ({ default: res.DataEditor })),
+);
+const EditorControls = React.lazy(() =>
+    import('components/Editor/EditorControls').then((res => ({ default: res.EditorControls }))),
+);
 
-const Skeleteon = <div style={{width: '100%', height: '100px'}} className='bp3-skeleton'></div>;
+const Skeleteon = <div style={{ width: '100%', height: '100px' }} className="bp3-skeleton"></div>;
 
 /**
  * The main editor interface.
  */
-export class EditorBase extends React.Component<
-{ editor: State['editor']; style: State['style'] },
-{}
-> {
-    public constructor(props) {
-        super(props);
-    }
+export function Editor() {
+    const minimized = useSelector(minimizedSelector);
+    const editorDarkMode = useSelector(editorModeSelector);
 
-    public render() {
-        const styles = {
-            base: css`
-                min-width: 30rem;
-                max-width: 40rem;
-                min-height: 100vh;
-                padding: 0.25rem;
-            `,
-        };
-
-        const minimized = this.props.editor.minimized;
-        return (
-            <div
-                className={cx(
-                    'editor',
-                    styles.base,
-                    this.props.style.editorDarkMode ? Classes.DARK : '',
-                )}
-                style={{
-                    width: minimized ? '0%' : '33%',
-                    marginLeft: minimized ? '-30rem' : '0',
-                    background: this.props.style.editorDarkMode ? '#222' : '#fff',
-                }}>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <NuzlockeSaveControls />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <GameEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <DataEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <TrainerEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <PokemonEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <StyleEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <StatsEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <HotkeysEditor />
-                    </React.Suspense>
-                </ErrorBoundary>
-                <ErrorBoundary>
-                    <React.Suspense fallback={Skeleteon}>
-                        <BugReporter />
-                    </React.Suspense>
-                </ErrorBoundary>
-            </div>
-        );
-    }
+    return (
+        <div
+            className={cx('editor', editorStyles.base, editorDarkMode ? Classes.DARK : '')}
+            style={{
+                width: minimized ? '0%' : '33%',
+                marginLeft: minimized ? '-30rem' : '0',
+                background: editorDarkMode ? '#222' : '#fff',
+            }}>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <EditorControls editorDarkMode={editorDarkMode} minimized={minimized} />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <NuzlockeSaveControls />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <GameEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <DataEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <TrainerEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <PokemonEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <StyleEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <StatsEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <HotkeysEditor />
+                </React.Suspense>
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <React.Suspense fallback={Skeleteon}>
+                    <BugReporter />
+                </React.Suspense>
+            </ErrorBoundary>
+        </div>
+    );
 }
-
-export const Editor = connect(
-    (state: State) => ({
-        editor: state.editor,
-        style: state.style,
-    }),
-)(EditorBase);
diff --git a/src/components/Editor/EditorControls.tsx b/src/components/Editor/EditorControls.tsx
new file mode 100644
index 000000000..7c144a635
--- /dev/null
+++ b/src/components/Editor/EditorControls.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Button, ButtonGroup } from '@blueprintjs/core';
+import { last, omit } from 'ramda';
+import { useDispatch, useSelector } from 'react-redux';
+import { State } from 'state';
+import { editorStyles } from './styles';
+import { redoEditorHistory, replaceState, undoEditorHistory } from 'actions';
+import { useEvent } from 'utils/hooks';
+
+export function EditorControls({editorDarkMode, minimized}) {
+    const present = useSelector<State, Omit<State, 'editorHistory'>>(state => omit(['editorHistory'], state));
+    const editorHistory = useSelector<State, State['editorHistory']>(state => state.editorHistory);
+    const dispatch = useDispatch();
+
+    const undo = (event: React.KeyboardEvent) => {
+        if (event.ctrlKey && event.key === 'z') {
+            event.preventDefault();
+            dispatchPast();
+        }
+    };
+    const redo = (event: React.KeyboardEvent) => {
+        if (event.ctrlKey && event.key === 'y') {
+            event.preventDefault();
+            dispatchFuture();
+        }
+    };
+
+    useEvent('keydown', undo);
+    useEvent('keydown', redo);
+
+    const dispatchPast = () => {
+        dispatch(undoEditorHistory(present));
+        dispatch(replaceState(last(editorHistory?.past)));
+    };
+
+    const dispatchFuture = () => {
+        dispatch(redoEditorHistory(present));
+        dispatch(replaceState(
+            editorHistory?.future[0]
+        ));
+    };
+
+    return <div
+        className={editorStyles.historyControls}
+        style={{
+            width: minimized ? '0%' : '33%',
+            background: editorDarkMode ? '#222' : '#fff',
+            borderBottomColor: editorDarkMode ? '#000' : '#ccc',
+            display: minimized ? 'none' : 'block',
+        }}>
+        <ButtonGroup fill className={editorStyles.buttonGroup}>
+            <Button
+                disabled={editorHistory?.past?.length <= 0}
+                onClick={dispatchPast}
+                minimal
+                fill
+                icon='undo'
+            />
+            <Button
+                disabled={editorHistory?.future?.length === 0}
+                onClick={dispatchFuture}
+                minimal
+                fill
+                icon='redo'
+            />
+        </ButtonGroup>
+    </div>;
+}
diff --git a/src/components/Editor/editor.css b/src/components/Editor/editor.css
index e8dbbb324..f6f166400 100644
--- a/src/components/Editor/editor.css
+++ b/src/components/Editor/editor.css
@@ -188,7 +188,7 @@ html.bp3-dark {
   width: 5.5rem;
 }
 .current-pokemon-moves {
-  width: 25rem;
+  width: 80%;
 }
 .current-pokemon-nature {
   width: 6.5rem;
@@ -250,7 +250,6 @@ input[name='metLevel'] {
   align-items: center;
   justify-content: center;
   height: 40px;
-  width: 40px;
 }
 .box .pokemon-icon img,
 .box .pokemon-icon {
diff --git a/src/components/Editor/styles.ts b/src/components/Editor/styles.ts
new file mode 100644
index 000000000..058852511
--- /dev/null
+++ b/src/components/Editor/styles.ts
@@ -0,0 +1,38 @@
+import { css } from 'emotion';
+
+export const editorStyles = {
+    base: css`
+        min-width: 30rem;
+        max-width: 40rem;
+        min-height: 100vh;
+        padding: 0.25rem;
+        padding-top: 2.5rem;
+        position: relative;
+    `,
+    historyControls: css`
+        left: 0;
+        position: sticky;
+        top: -.25rem;
+        z-index: 12;
+        border-bottom: 1px solid;
+        min-width: 100%;
+        max-width: 100%;
+    `,
+    buttonGroup: css`
+        width: 100%;
+        padding: 0.25rem;
+    `,
+    edit: css`
+        display: flex;
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        border: 1px solid #eee;
+        margin: 2px;
+        align-items: center;
+    `,
+    path: css`
+        color: #666;
+        margin: 0 0.5rem;
+    `,
+    change: css``,
+};
diff --git a/src/components/GameEditor/GameEditor.tsx b/src/components/GameEditor/GameEditor.tsx
index 1b0473509..b22655427 100644
--- a/src/components/GameEditor/GameEditor.tsx
+++ b/src/components/GameEditor/GameEditor.tsx
@@ -56,7 +56,7 @@ export class GameEditorBase extends React.Component<GameEditorProps, { isOpen: b
         return (
             <>
                 <RED isOpen={this.state.isOpen} onClose={this.toggleDialog} />
-                <BaseEditor name='Game'>
+                <BaseEditor name="Game">
                     <div style={gameSubEditorStyle}>
                         <div>
                             <label
@@ -117,7 +117,11 @@ export class GameEditorBase extends React.Component<GameEditorProps, { isOpen: b
 }
 
 export const GameEditor = connect(
-    (state: Pick<State, keyof State>) => ({ game: state.game, editor: state.editor, style: state.style, }),
+    (state: Pick<State, keyof State>) => ({
+        game: state.game,
+        editor: state.editor,
+        style: state.style,
+    }),
     {
         editGame,
         editStyle,
diff --git a/src/components/GameEditor/NuzlockeGameTags.tsx b/src/components/GameEditor/NuzlockeGameTags.tsx
index ae2443d06..607a80a77 100644
--- a/src/components/GameEditor/NuzlockeGameTags.tsx
+++ b/src/components/GameEditor/NuzlockeGameTags.tsx
@@ -21,39 +21,61 @@ export function NuzlockeGameTags({
     color,
     isCopy,
 }: NuzlockeGameTagsProps) {
-    return <>
-        <div style={{
-            display: 'flex',
-            width: '20rem',
-            alignItems: 'center',
-            pointerEvents: 'none',
-            flexDirection: 'column',
-            margin: 'auto',
-        }}>
-            <div style={{
-                display: 'flex',
-            }}>{data?.pokemon?.filter(p => p.status === 'Team').map(poke => <PokemonIcon key={poke.id} {...poke} />)}</div>
-            <div style={{display: 'flex', minWidth: '50%'}}>
-                <Tag round style={{
-                    margin: '0 2px',
-                    background: gameOfOriginToColor(game),
-                    color: darkMode ? color : game === 'None' ? '#000' : color,
-                }}>{game}</Tag>
-                {isCurrent && <Tag round style={{
-                    margin: '0 2px',
-                    background: 'rgba(0,0,0,0.1)',
-                    color: darkMode ? '#fff' : '#000',
+    return (
+        <>
+            <div
+                style={{
+                    display: 'flex',
+                    width: '20rem',
+                    alignItems: 'center',
+                    pointerEvents: 'none',
+                    flexDirection: 'column',
+                    margin: 'auto',
                 }}>
-                    Current
-                </Tag>}
-                {isCopy && <Tag round style={{
-                    margin: '0 2px',
-                    background: 'rgba(0,0,0,0.1)',
-                    color: darkMode ? '#fff' : '#000',
-                }}>
-                    Copy
-                </Tag>}
+                <div
+                    style={{
+                        display: 'flex',
+                    }}>
+                    {data?.pokemon
+                        ?.filter((p) => p.status === 'Team')
+                        .map((poke) => (
+                            <PokemonIcon key={poke.id} {...poke} />
+                        ))}
+                </div>
+                <div style={{ display: 'flex', minWidth: '50%' }}>
+                    <Tag
+                        round
+                        style={{
+                            margin: '0 2px',
+                            background: gameOfOriginToColor(game),
+                            color: darkMode ? color : game === 'None' ? '#000' : color,
+                        }}>
+                        {game}
+                    </Tag>
+                    {isCurrent && (
+                        <Tag
+                            round
+                            style={{
+                                margin: '0 2px',
+                                background: 'rgba(0,0,0,0.1)',
+                                color: darkMode ? '#fff' : '#000',
+                            }}>
+                            Current
+                        </Tag>
+                    )}
+                    {isCopy && (
+                        <Tag
+                            round
+                            style={{
+                                margin: '0 2px',
+                                background: 'rgba(0,0,0,0.1)',
+                                color: darkMode ? '#fff' : '#000',
+                            }}>
+                            Copy
+                        </Tag>
+                    )}
+                </div>
             </div>
-        </div>
-    </>;
-};
+        </>
+    );
+}
diff --git a/src/components/GameEditor/NuzlockeSave.tsx b/src/components/GameEditor/NuzlockeSave.tsx
index 0f6c4a1e9..b47cb2555 100644
--- a/src/components/GameEditor/NuzlockeSave.tsx
+++ b/src/components/GameEditor/NuzlockeSave.tsx
@@ -12,7 +12,14 @@ import {
 } from '@blueprintjs/core';
 import { connect } from 'react-redux';
 import { State } from 'state';
-import { updateNuzlocke, deleteNuzlocke, newNuzlocke, switchNuzlocke, replaceState, updateSwitchNuzlocke } from 'actions';
+import {
+    updateNuzlocke,
+    deleteNuzlocke,
+    newNuzlocke,
+    switchNuzlocke,
+    replaceState,
+    updateSwitchNuzlocke,
+} from 'actions';
 import { feature, gameOfOriginToColor, getContrastColor } from 'utils';
 import { omit } from 'ramda';
 import { createStore } from 'redux';
@@ -39,7 +46,10 @@ export interface NuzlockeSaveControlsState {
 
 const sort = (a, b) => a.id - b.id;
 
-export class NuzlockeSaveBase extends React.Component<NuzlockeSaveControlsProps, NuzlockeSaveControlsState> {
+export class NuzlockeSaveBase extends React.Component<
+NuzlockeSaveControlsProps,
+NuzlockeSaveControlsState
+> {
     public state = {
         isDeletingNuzlocke: false,
         deletionFunction: undefined,
@@ -47,147 +57,190 @@ export class NuzlockeSaveBase extends React.Component<NuzlockeSaveControlsProps,
 
     // eslint-disable-next-line camelcase
     public UNSAFE_componentWillMount() {
-        const {nuzlockes, newNuzlocke, state} = this.props;
+        const { nuzlockes, newNuzlocke, state } = this.props;
         if (!nuzlockes.currentId || nuzlockes.currentId === '') {
-            newNuzlocke(state, {isCopy: false});
+            newNuzlocke(state, { isCopy: false });
         }
     }
 
     private toggleIsDeletingNuzlocke = () => {
-        this.setState(state => ({isDeletingNuzlocke: !state.isDeletingNuzlocke}));
+        this.setState((state) => ({ isDeletingNuzlocke: !state.isDeletingNuzlocke }));
     };
 
     public renderMenu() {
-
-        const {state, replaceState, updateSwitchNuzlocke, newNuzlocke, updateNuzlocke, deleteNuzlocke, switchNuzlocke, darkMode} = this.props;
-        const {nuzlockes} = this.props;
-        const {currentId} = this.props.nuzlockes;
+        const {
+            state,
+            replaceState,
+            updateSwitchNuzlocke,
+            newNuzlocke,
+            updateNuzlocke,
+            deleteNuzlocke,
+            switchNuzlocke,
+            darkMode,
+        } = this.props;
+        const { nuzlockes } = this.props;
+        const { currentId } = this.props.nuzlockes;
         const saves = nuzlockes.saves.sort(sort);
 
-        return <div style={{
-            padding: '0.5rem',
-        }}>
-            {saves.map(nuzlocke => {
-                const id = nuzlocke.id;
-                const {isCopy} = nuzlocke;
-                const isCurrent = currentId === id;
-                const data = nuzlocke.data;
-
-                if (!data || data === '{}' || data === '{ }') {
-                    return null;
-                }
+        return (
+            <div
+                style={{
+                    padding: '0.5rem',
+                }}>
+                {saves.map((nuzlocke) => {
+                    const id = nuzlocke.id;
+                    const { isCopy } = nuzlocke;
+                    const isCurrent = currentId === id;
+                    const data = nuzlocke.data;
 
-                let parsedData;
+                    if (!data || data === '{}' || data === '{ }') {
+                        return null;
+                    }
 
-                try {
-                    parsedData = isCurrent ? JSON.parse(state) : JSON.parse(data);
-                    //parsedData = JSON.parse(data);
-                } catch (e) {
+                    let parsedData;
 
-                }
+                    try {
+                        parsedData = isCurrent ? JSON.parse(state) : JSON.parse(data);
+                        //parsedData = JSON.parse(data);
+                    } catch (e) {}
 
-                if (!parsedData) {
-                    return null;
-                }
+                    if (!parsedData) {
+                        return null;
+                    }
 
-                const game = parsedData?.game?.name;
-                const color = getContrastColor(gameOfOriginToColor(game));
+                    const game = parsedData?.game?.name;
+                    const color = getContrastColor(gameOfOriginToColor(game));
 
-                return <div style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    border: darkMode ? '1px solid #444' : '1px solid #ccc',
-                    padding: '0.5rem',
-                    borderRadius: '0.25rem',
-                    boxShadow: '0 0 4px rgba(0,0,0,0.1)',
-                    marginBottom: '2px',
-                    justifyContent: 'space-between',
-                    // width: isMobile() ? '80%' : '100%',
-                }} key={id}>
-                    <NuzlockeGameTags
-                        darkMode={darkMode}
-                        game={game}
-                        color={color}
-                        data={parsedData}
-                        isCurrent={isCurrent}
-                        isCopy={isCopy}
-                    />
-                    <DeleteAlert
-                        onConfirm={this.state.deletionFunction}
-                        isOpen={this.state.isDeletingNuzlocke}
-                        onCancel={this.toggleIsDeletingNuzlocke}
-                        warningText='This will delete your Nuzlocke save without any to retrieve it. Are you sure you want to do this?'
-                    />
-                    <Popover position={Position.BOTTOM_RIGHT} content={<Menu><MenuItem shouldDismissPopover={false} disabled={isCurrent} icon='swap-horizontal' onClick={() => {
-                        try {
-                            updateSwitchNuzlocke(currentId, id, state);
-                            replaceState(parsedData);
-                        } catch (e) {
-                            const toaster = Toaster.create();
-                            toaster.show({
-                                message: `Failed to switch nuzlockes. ${e}`,
-                                intent: Intent.DANGER,
-                            });
-                        }
-                    }} text='Switch to this Nuzlocke' />
-                    <MenuItem shouldDismissPopover={false} icon='clipboard'
-                        onClick={_ => {
-                            try {
-                                if (typeof data !== 'string') {
-                                    throw new Error('Data is not in correct format.');
-                                }
-                                newNuzlocke(data, {isCopy: true});
-                            } catch (e) {
-                                const toaster = Toaster.create();
-                                toaster.show({
-                                    message: `Failed to copy nuzlocke. ${e}`,
-                                    intent: Intent.DANGER,
-                                });
-                            }
-                        }}
-                        text='Copy this Nuzlocke'
-                    >
-                    </MenuItem>
-                    {feature.hallOfFame && <MenuItem shouldDismissPopover={false}
-                        onClick={() => {
-
-                        }}
-                        icon={'crown'}
-                        text='Submit to Hall of Fame'
-                    />}
-                    <MenuItem disabled={saves.length === 1} shouldDismissPopover={false} icon='trash' intent={Intent.DANGER} onClick={() => {
-                        const deletionFunction = () => {
-                            try {
-                                deleteNuzlocke(id);
-                                if (isCurrent) {
-                                    switchNuzlocke(saves[0].id);
-                                    replaceState(JSON.parse(saves[0].data));
-                                }
-                                this.toggleIsDeletingNuzlocke();
-                            } catch (e) {
-                                const toaster = Toaster.create();
-                                toaster.show({
-                                    message: `Failed to delete nuzlocke. ${e}`,
-                                    intent: Intent.DANGER,
-                                });
-                            }
-                        };
-                        this.setState({deletionFunction, isDeletingNuzlocke: true});
-                    }} text='Delete Nuzlocke' /></Menu>}>
-                        <Icon style={{ transform: 'rotate(90deg)', marginLeft: 'auto' }} icon="more" />
-                    </Popover>
-                </div>;
-            })}
-            <Button intent={Intent.SUCCESS} icon='add' onClick={() => {
-                updateNuzlocke(currentId, state);
-                const data = createStore(appReducers)?.getState();
-                newNuzlocke(JSON.stringify(data), {isCopy: false});
-                replaceState(data);
-            }}>
-                New Nuzlocke
-            </Button>
-
-        </div>;
+                    return (
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                border: darkMode ? '1px solid #444' : '1px solid #ccc',
+                                padding: '0.5rem',
+                                borderRadius: '0.25rem',
+                                boxShadow: '0 0 4px rgba(0,0,0,0.1)',
+                                marginBottom: '2px',
+                                justifyContent: 'space-between',
+                                // width: isMobile() ? '80%' : '100%',
+                            }}
+                            key={id}>
+                            <NuzlockeGameTags
+                                darkMode={darkMode}
+                                game={game}
+                                color={color}
+                                data={parsedData}
+                                isCurrent={isCurrent}
+                                isCopy={isCopy}
+                            />
+                            <DeleteAlert
+                                onConfirm={this.state.deletionFunction}
+                                isOpen={this.state.isDeletingNuzlocke}
+                                onCancel={this.toggleIsDeletingNuzlocke}
+                                warningText="This will delete your Nuzlocke save without any to retrieve it. Are you sure you want to do this?"
+                            />
+                            <Popover
+                                position={Position.BOTTOM_RIGHT}
+                                content={
+                                    <Menu>
+                                        <MenuItem
+                                            shouldDismissPopover={false}
+                                            disabled={isCurrent}
+                                            icon="swap-horizontal"
+                                            onClick={() => {
+                                                try {
+                                                    updateSwitchNuzlocke(currentId, id, state);
+                                                    replaceState(parsedData);
+                                                } catch (e) {
+                                                    const toaster = Toaster.create();
+                                                    toaster.show({
+                                                        message: `Failed to switch nuzlockes. ${e}`,
+                                                        intent: Intent.DANGER,
+                                                    });
+                                                }
+                                            }}
+                                            text="Switch to this Nuzlocke"
+                                        />
+                                        <MenuItem
+                                            shouldDismissPopover={false}
+                                            icon="clipboard"
+                                            onClick={(_) => {
+                                                try {
+                                                    if (typeof data !== 'string') {
+                                                        throw new Error(
+                                                            'Data is not in correct format.',
+                                                        );
+                                                    }
+                                                    newNuzlocke(data, { isCopy: true });
+                                                } catch (e) {
+                                                    const toaster = Toaster.create();
+                                                    toaster.show({
+                                                        message: `Failed to copy nuzlocke. ${e}`,
+                                                        intent: Intent.DANGER,
+                                                    });
+                                                }
+                                            }}
+                                            text="Copy this Nuzlocke"></MenuItem>
+                                        {feature.hallOfFame && (
+                                            <MenuItem
+                                                shouldDismissPopover={false}
+                                                onClick={() => {}}
+                                                icon={'crown'}
+                                                text="Submit to Hall of Fame"
+                                            />
+                                        )}
+                                        <MenuItem
+                                            disabled={saves.length === 1}
+                                            shouldDismissPopover={false}
+                                            icon="trash"
+                                            intent={Intent.DANGER}
+                                            onClick={() => {
+                                                const deletionFunction = () => {
+                                                    try {
+                                                        deleteNuzlocke(id);
+                                                        if (isCurrent) {
+                                                            switchNuzlocke(saves[0].id);
+                                                            replaceState(JSON.parse(saves[0].data));
+                                                        }
+                                                        this.toggleIsDeletingNuzlocke();
+                                                    } catch (e) {
+                                                        const toaster = Toaster.create();
+                                                        toaster.show({
+                                                            message: `Failed to delete nuzlocke. ${e}`,
+                                                            intent: Intent.DANGER,
+                                                        });
+                                                    }
+                                                };
+                                                this.setState({
+                                                    deletionFunction,
+                                                    isDeletingNuzlocke: true,
+                                                });
+                                            }}
+                                            text="Delete Nuzlocke"
+                                        />
+                                    </Menu>
+                                }>
+                                <Icon
+                                    style={{ transform: 'rotate(90deg)', marginLeft: 'auto' }}
+                                    icon="more"
+                                />
+                            </Popover>
+                        </div>
+                    );
+                })}
+                <Button
+                    intent={Intent.SUCCESS}
+                    icon="add"
+                    onClick={() => {
+                        updateNuzlocke(currentId, state);
+                        const data = createStore(appReducers)?.getState();
+                        newNuzlocke(JSON.stringify(data), { isCopy: false });
+                        replaceState(data);
+                    }}>
+                    New Nuzlocke
+                </Button>
+            </div>
+        );
     }
 
     public render() {
@@ -208,5 +261,5 @@ export const NuzlockeSave = connect(
         switchNuzlocke,
         replaceState,
         updateSwitchNuzlocke,
-    }
+    },
 )(NuzlockeSaveBase as any);
diff --git a/src/components/GameEditor/NuzlockeSaveControls.tsx b/src/components/GameEditor/NuzlockeSaveControls.tsx
index e6c344f6f..0b656d379 100644
--- a/src/components/GameEditor/NuzlockeSaveControls.tsx
+++ b/src/components/GameEditor/NuzlockeSaveControls.tsx
@@ -16,23 +16,39 @@ import {
 } from '@blueprintjs/core';
 import { connect } from 'react-redux';
 import { State } from 'state';
-import { updateNuzlocke, deleteNuzlocke, newNuzlocke, switchNuzlocke, replaceState, updateSwitchNuzlocke } from 'actions';
+import {
+    updateNuzlocke,
+    deleteNuzlocke,
+    newNuzlocke,
+    switchNuzlocke,
+    replaceState,
+    updateSwitchNuzlocke,
+} from 'actions';
 import { NuzlockeSave, NuzlockeSaveControlsProps } from './NuzlockeSave';
 
-export class NuzlockeSaveControlsBase extends React.Component<NuzlockeSaveControlsProps, {isOpen: boolean}> {
-    public state = {isOpen: false};
+export class NuzlockeSaveControlsBase extends React.Component<
+NuzlockeSaveControlsProps,
+{ isOpen: boolean }
+> {
+    public state = { isOpen: false };
     public render() {
-
-        return <>
-            <Button minimal icon='control' onClick={e => this.setState({isOpen: !this.state.isOpen})}>
-                Manage Nuzlockes <Tag className={Classes.SMALL} intent={Intent.WARNING}>BETA</Tag>
-            </Button>
-            {this.state.isOpen && <NuzlockeSave />}
-        </>;
+        return (
+            <>
+                <Button
+                    minimal
+                    icon="control"
+                    onClick={(e) => this.setState({ isOpen: !this.state.isOpen })}>
+                    Manage Nuzlockes{' '}
+                    <Tag className={Classes.SMALL} intent={Intent.WARNING}>
+                        BETA
+                    </Tag>
+                </Button>
+                {this.state.isOpen && <NuzlockeSave />}
+            </>
+        );
     }
 }
 
-
 export const NuzlockeSaveControls = connect(
     (state: State) => ({
         darkMode: state.style.editorDarkMode,
@@ -44,5 +60,5 @@ export const NuzlockeSaveControls = connect(
         switchNuzlocke,
         replaceState,
         updateSwitchNuzlocke,
-    }
+    },
 )(NuzlockeSaveControlsBase as any);
diff --git a/src/components/Hotkeys/Hotkeys.tsx b/src/components/Hotkeys/Hotkeys.tsx
index 69025402f..2c566a722 100644
--- a/src/components/Hotkeys/Hotkeys.tsx
+++ b/src/components/Hotkeys/Hotkeys.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Toaster, Intent } from '@blueprintjs/core';
-import { selectPokemon, deletePokemon, addPokemon, newNuzlocke, changeEditorSize } from 'actions';
+import { selectPokemon, deletePokemon, addPokemon, newNuzlocke, changeEditorSize, toggleDialog } from 'actions';
 import { Pokemon } from 'models';
 import { sortPokes, sortPokesReverse, noop, generateEmptyPokemon } from 'utils';
-import { hotkeyList } from 'utils';
+import { listOfHotkeys } from 'utils';
 import { persistor } from 'store';
 import { State } from 'state';
 import { createStore } from 'redux';
@@ -17,6 +17,7 @@ export interface HotkeysProps {
     addPokemon: addPokemon;
     newNuzlocke: newNuzlocke;
     changeEditorSize: changeEditorSize;
+    toggleDialog: toggleDialog;
     pokemon: Pokemon[];
     selectedId: string;
     editor: Editor;
@@ -49,7 +50,7 @@ export class HotkeysBase extends React.PureComponent<HotkeysProps> {
     };
 
     private handleKeyUp = (e: KeyboardEvent) => {
-        hotkeyList.map((hotkey) => {
+        listOfHotkeys.map((hotkey) => {
             if (e.key === hotkey.key) {
                 if (this.isTextInput(e)) {
                     noop();
@@ -65,7 +66,7 @@ export class HotkeysBase extends React.PureComponent<HotkeysProps> {
         if (elem == null || elem.closest == null) {
             return false;
         }
-        const editable = elem.closest('input, textarea, [contenteditable=true]');
+        const editable = elem.closest('input, textarea, [contenteditable=true], select');
 
         if (editable == null) {
             return false;
@@ -141,13 +142,18 @@ export class HotkeysBase extends React.PureComponent<HotkeysProps> {
 
     private newNuzlocke() {
         const data = createStore(appReducers)?.getState();
-        this.props.newNuzlocke(JSON.stringify(data), {isCopy: false});
+        this.props.newNuzlocke(JSON.stringify(data), { isCopy: false });
     }
 
     private toggleEditor() {
+        console.log('pressed m');
         this.props.changeEditorSize(!this.props.editor.minimized);
     }
 
+    private toggleImageUploader() {
+        this.props.toggleDialog('imageUploader');
+    }
+
     public render() {
         return <div />;
     }
@@ -165,5 +171,6 @@ export const Hotkeys = connect(
         addPokemon,
         newNuzlocke,
         changeEditorSize,
+        toggleDialog,
     },
 )(HotkeysBase);
diff --git a/src/components/HotkeysEditor/HotkeysEditor.tsx b/src/components/HotkeysEditor/HotkeysEditor.tsx
index a5c42dc0f..8bdf3144d 100644
--- a/src/components/HotkeysEditor/HotkeysEditor.tsx
+++ b/src/components/HotkeysEditor/HotkeysEditor.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseEditor } from 'components/BaseEditor';
-import { hotkeyList } from 'utils';
+import { listOfHotkeys } from 'utils';
 
 // tslint:disable-next-line:no-empty-interfaces
 export interface HotkeysEditorState {}
@@ -14,7 +14,7 @@ export class HotkeysEditor extends React.Component<{}> {
         return (
             <BaseEditor name="Hotkeys">
                 <ul style={{ listStyleType: 'none', paddingLeft: '1rem' }} className="hotkey-list">
-                    {hotkeyList.map((item) => (
+                    {listOfHotkeys.map((item) => (
                         <li key={item.key} style={{ display: 'flex' }}>
                             <kbd style={{ margin: '4px' }} className="bp3-code">
                                 {item?.label ?? item.key}
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index e52ce0d2f..fabbe124a 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -59,7 +59,7 @@ export class Layout extends React.PureComponent<Partial<LayoutProps>> {
         const { display, direction, alignment, spacing, wrap } = this.props;
         return (
             <div
-                data-testid='layout'
+                data-testid="layout"
                 style={
                     {
                         display: display,
diff --git a/src/components/MoveEditor/MoveEditor.tsx b/src/components/MoveEditor/MoveEditor.tsx
index 137d0c52a..d9b56f877 100644
--- a/src/components/MoveEditor/MoveEditor.tsx
+++ b/src/components/MoveEditor/MoveEditor.tsx
@@ -188,9 +188,7 @@ export class MoveEditorBase extends React.Component<MoveEditorProps, MoveEditorS
                                 margin: '.5rem',
                             }}
                             className="add-move-wrapper">
-                            <label
-                                style={{ padding: '0.5rem' }}
-                                className={cx(Classes.INLINE)}>
+                            <label style={{ padding: '0.5rem' }} className={cx(Classes.INLINE)}>
                                 Add A Move
                             </label>
                             <input
@@ -201,7 +199,9 @@ export class MoveEditorBase extends React.Component<MoveEditorProps, MoveEditorS
                                 className={Classes.INPUT}
                                 type="text"
                             />
-                            <div className={Classes.SELECT} style={{ width: '8rem', margin: '0 .25rem' }}>
+                            <div
+                                className={Classes.SELECT}
+                                style={{ width: '8rem', margin: '0 .25rem' }}>
                                 <select
                                     onChange={(e) => this.setState({ moveType: e.target.value })}
                                     value={moveType}>
@@ -213,7 +213,7 @@ export class MoveEditorBase extends React.Component<MoveEditorProps, MoveEditorS
                                 </select>
                             </div>
                             <Button
-                                style={{margin: '0 .25rem'}}
+                                style={{ margin: '0 .25rem' }}
                                 onClick={(e) => {
                                     this.props.editCustomMoveMap(moveType, moveName);
                                 }}
diff --git a/src/components/PokemonEditor/CurrentPokemonEdit.tsx b/src/components/PokemonEditor/CurrentPokemonEdit.tsx
index 220e1ca04..5ee909ec9 100644
--- a/src/components/PokemonEditor/CurrentPokemonEdit.tsx
+++ b/src/components/PokemonEditor/CurrentPokemonEdit.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import {
-    speciesToNumber,
-    getSpriteIcon,
     getAdditionalFormes,
-    StoreContext,
     listOfPokemon,
     matchSpeciesToTypes,
     listOfItems,
@@ -12,9 +9,7 @@ import {
     getGameGeneration,
     listOfNatures,
     Game,
-    Forme,
     EvolutionTree,
-    getDeepObject,
     listOfPokeballs,
     getListOfTypes,
 } from 'utils';
@@ -24,7 +19,7 @@ import { CurrentPokemonInput } from 'components/PokemonEditor';
 import { DeletePokemonButton } from 'components/DeletePokemonButton';
 import { Autocomplete, ErrorBoundary } from 'components/Shared';
 import { selectPokemon, editPokemon } from 'actions';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { listOfGames, accentedE } from 'utils';
 import { PokemonIconBase } from 'components/PokemonIcon';
 import { cx } from 'emotion';
@@ -43,6 +38,8 @@ import { addPokemon } from 'actions';
 import { State } from 'state';
 import { CurrentPokemonLayoutItem } from './CurrentPokemonLayoutItem';
 import { MoveEditor } from 'components/MoveEditor';
+import { CheckpointsInputList } from 'components/TrainerEditor';
+import { gameNameSelector } from 'selectors';
 
 const pokeball = require('assets/pokeball.png');
 
@@ -50,7 +47,7 @@ export interface CopyPokemonButtonProps {
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-export const CopyPokemonButton: React.SFC<CopyPokemonButtonProps> = ({
+export const CopyPokemonButton: React.FunctionComponent<CopyPokemonButtonProps> = ({
     onClick,
 }: CopyPokemonButtonProps) => {
     return (
@@ -87,6 +84,55 @@ export interface CurrentPokemonEditState {
     box: Boxes;
 }
 
+const getEvos = (species): string[] | undefined => {
+    return EvolutionTree?.[species];
+};
+
+
+export function EvolutionSelection({ currentPokemon, onEvolve }) {
+    const evos = getEvos(currentPokemon?.species);
+    const gameName = useSelector(gameNameSelector);
+
+    const supportedGames: Game[] = ['Red', 'Blue', 'Green', 'Yellow', 'Gold', 'Silver', 'Crystal'];
+    if (!supportedGames.includes(gameName)) {
+        return null;
+    }
+
+    if (!evos?.length) {
+        return null;
+    }
+
+    if (evos?.length === 1) {
+        const species = evos?.[0];
+        return (
+            <Button onClick={onEvolve(species)} className={Classes.MINIMAL} intent={Intent.PRIMARY}>
+                Evolve
+            </Button>
+        );
+    } else {
+        return (
+            <Popover
+                popoverClassName={'no-list-item-types'}
+                minimal
+                position={Position.BOTTOM_LEFT}
+                interactionKind={PopoverInteractionKind.CLICK_TARGET_ONLY}
+                content={
+                    <>
+                        {evos.map((evo) => (
+                            <div className={Styles.evoMenuItem} key={evo} onClick={onEvolve(evo)}>
+                                {evo}
+                            </div>
+                        ))}
+                    </>
+                }>
+                <Button className={Classes.MINIMAL} intent={Intent.PRIMARY}>
+                    Evolve
+                </Button>
+            </Popover>
+        );
+    }
+}
+
 export class CurrentPokemonEditBase extends React.Component<
 CurrentPokemonEditProps,
 CurrentPokemonEditState
@@ -143,35 +189,12 @@ CurrentPokemonEditState
 
     private parseTree(tree) {}
 
-    private evolvePokemon = (currentPokemon) => (e) => {
-        if (this.doesPokemonHaveEvolution(currentPokemon)) {
-            const evoTree = getDeepObject(EvolutionTree, currentPokemon.species);
-            const evolutionSpecies = evoTree && Object.keys(evoTree);
-
-            if (!evolutionSpecies) {
-                return false;
-            }
-
-            if (evolutionSpecies && evolutionSpecies.length > 1) {
-            } else {
-                const edit = {
-                    species: evolutionSpecies[0],
-                };
-
-                this.props.editPokemon(edit, this.state.selectedId);
-            }
-            return true;
-        } else {
-            return false;
-        }
-    };
+    private evolvePokemon = (species) => (e) => {
+        const edit = {
+            species,
+        };
 
-    private doesPokemonHaveEvolution = (currentPokemon) => {
-        if (getDeepObject(EvolutionTree, currentPokemon.species)) {
-            return true;
-        } else {
-            return false;
-        }
+        this.props.editPokemon(edit, this.state.selectedId);
     };
 
     private toggleDialog = () => this.setState({ isMoveEditorOpen: !this.state.isMoveEditorOpen });
@@ -182,6 +205,7 @@ CurrentPokemonEditState
     }
 
     public moreInputs(currentPokemon: Pokemon) {
+        const {editPokemon, selectPokemon} = this.props;
         const pokemonForLink = this.props.pokemon.map((p) => ({
             key: `${p.nickname} (${p.species})`,
             value: p.id,
@@ -205,6 +229,15 @@ CurrentPokemonEditState
                     type="double-select"
                     options={this.getTypes()}
                 />
+                <span
+                    className={'current-pokemon-input-wrapper current-pokemon-checklist current-pokemon-checkpoints'}>
+                    <label>Checkpoints</label>
+                    <CheckpointsInputList
+                        checkpointsObtained={currentPokemon.checkpoints ?? []}
+                        onChange={checkpoints => editPokemon({checkpoints}, currentPokemon.id)}
+                        buttonText='Award Checkpoints'
+                    />
+                </span>
                 <CurrentPokemonLayoutItem checkboxes>
                     <CurrentPokemonInput
                         labelName="Shiny"
@@ -261,8 +294,8 @@ CurrentPokemonEditState
                         const edit = {
                             item: e.target.value,
                         };
-                        this.props.editPokemon(edit, this.state.selectedId);
-                        this.props.selectPokemon(this.state.selectedId);
+                        editPokemon(edit, this.state.selectedId);
+                        selectPokemon(this.state.selectedId);
                     }}
                 />
                 <CurrentPokemonInput
@@ -379,13 +412,11 @@ CurrentPokemonEditState
                         type="select"
                         options={this.state.box.map((n) => n.name)}
                     />
-                    {/*this.doesPokemonHaveEvolution(currentPokemon) ? <Button
-                        style={{marginTop: '12px'}}
-                        onClick={this.evolvePokemon(currentPokemon)}
-                        className={Classes.MINIMAL}
-                        intent={Intent.PRIMARY}
-                    >Evolve</Button> : null*/}
                     <div className={cx(Styles.iconBar)}>
+                        <EvolutionSelection
+                            currentPokemon={currentPokemon}
+                            onEvolve={this.evolvePokemon}
+                        />
                         <CopyPokemonButton onClick={this.copyPokemon} />
                         <DeletePokemonButton id={this.state.selectedId} />
                     </div>
@@ -393,7 +424,7 @@ CurrentPokemonEditState
                 <CurrentPokemonLayoutItem>
                     <ErrorBoundary>
                         <Autocomplete
-                            items={listOfPokemon}
+                            items={(listOfPokemon as unknown) as string[]}
                             name="species"
                             label="Species"
                             disabled={currentPokemon.egg}
@@ -442,6 +473,9 @@ CurrentPokemonEditState
                         placeholder="Pallet Town"
                         value={currentPokemon.met || ''}
                         onChange={(e) => {
+                            if (!e?.target?.value) {
+                                return;
+                            }
                             const edit = {
                                 met: e.target.value,
                             };
@@ -490,7 +524,7 @@ CurrentPokemonEditState
                         }}
                     />
                 </CurrentPokemonLayoutItem>
-                <CurrentPokemonLayoutItem>
+                <CurrentPokemonLayoutItem className={Styles.moveInputWrapper}>
                     <CurrentPokemonInput
                         labelName="Moves"
                         inputName="moves"
@@ -498,11 +532,7 @@ CurrentPokemonEditState
                         value={currentPokemon.moves}
                         type="moves"
                     />
-                    <Button
-                        intent={Intent.PRIMARY}
-                        onClick={this.toggleDialog}
-                        minimal
-                    >
+                    <Button className={Styles.moveEditButton} intent={Intent.PRIMARY} onClick={this.toggleDialog} minimal>
                         Edit Moves
                     </Button>
                 </CurrentPokemonLayoutItem>
diff --git a/src/components/PokemonEditor/CurrentPokemonInput.tsx b/src/components/PokemonEditor/CurrentPokemonInput.tsx
index 35fdba943..5a4cfb53b 100644
--- a/src/components/PokemonEditor/CurrentPokemonInput.tsx
+++ b/src/components/PokemonEditor/CurrentPokemonInput.tsx
@@ -16,6 +16,7 @@ import { ErrorBoundary } from 'components/Shared';
 import { TagInput, Classes, TextArea } from '@blueprintjs/core';
 import { State } from 'state';
 import { Pokemon } from 'models';
+import { cx } from 'emotion';
 
 interface CurrentPokemonInputProps {
     labelName: string;
@@ -43,45 +44,8 @@ interface CurrentPokemonInputProps {
     customTypes: State['customTypes'];
 }
 
-export class CurrentPokemonTextInputBase extends React.PureComponent<Omit<CurrentPokemonInputProps, 'customMoveMap' | 'customTypes'>> {
-    public onChange = (inputName) => (e) => {
-        this.props.editPokemon({
-            [inputName]: e.target.value,
-        }, this.props.selectedId);
-    };
-
-    public render() {
-        const {
-            inputName,
-            type,
-            value,
-            placeholder,
-            disabled,
-        } = this.props;
-
-        return <input
-            onChange={this.onChange(inputName)}
-            type={type}
-            name={inputName}
-            value={value}
-            placeholder={placeholder}
-            disabled={disabled}
-            className={disabled ? `${Classes.DISABLED} ${Classes.TEXT_MUTED}` : ''}
-        />;
-    }
-
-}
-
-export const CurrentPokemonTextInput = connect(
-    (state: Pick<State, keyof State>) => ({
-        selectedId: state.selectedId,
-    }),
-    { editPokemon },
-)(CurrentPokemonTextInputBase);
-
-
-
-export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonInputProps> {
+export class CurrentPokemonInputBase extends React.Component<
+CurrentPokemonInputProps> {
     public constructor(props: CurrentPokemonInputProps) {
         super(props);
     }
@@ -90,9 +54,11 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
         disabled: false,
     };
 
-    public onChange = (inputName, {position, value, pokemon}: {position?: number, value?: any, pokemon?: Pokemon} = {}) => (
-        e: React.ChangeEvent & {target: {value: any, checked?: boolean}},
-    ) => {
+    public onChange = (
+        inputName,
+        { position, value, pokemon }: { position?: number; value?: any; pokemon?: Pokemon } = {},
+    ) => (e: React.ChangeEvent & { target: { value: any; checked?: boolean } }) => {
+        e.persist();
         let edit;
 
         if (inputName === 'types' && position != null) {
@@ -138,7 +104,6 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
             };
         }
 
-        //this.setState({value: e.target.value});
         this.props.editPokemon(edit, this.props.selectedId);
     };
 
@@ -153,31 +118,33 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
         options,
         pokemon,
     }: {
-        labelName?: CurrentPokemonInputProps['labelName'],
-        usesKeyValue?: boolean,
-        disabled?: boolean,
-        inputName?: CurrentPokemonInputProps['inputName'],
-        type: string,
-        value: any,
-        placeholder?: string,
-        options?: any[],
-        pokemon?: Pokemon,
+        labelName?: CurrentPokemonInputProps['labelName'];
+        usesKeyValue?: boolean;
+        disabled?: boolean;
+        inputName?: CurrentPokemonInputProps['inputName'];
+        type: string;
+        value: any;
+        placeholder?: string;
+        options?: any[];
+        pokemon?: Pokemon;
     }) {
         const { customMoveMap, customTypes } = this.props;
 
-        value = value == null ? '' : value;
+        value = value ?? '';
         if (type === 'moves') {
             return (
                 <ErrorBoundary>
                     <TagInput
-                        leftIcon='ninja'
+                        fill
+                        leftIcon="ninja"
                         tagProps={(v, i) => {
                             // @TODO: Fix inconsitencies with bad parameter types
                             const background =
                                 typeToColor(
                                     // @ts-ignore
                                     customMoveMap.find((m) => m?.move === v)?.type ||
-                                        getMoveType(v?.toString()?.trim() || ''), customTypes,
+                                        getMoveType(v?.toString()?.trim() || ''),
+                                    customTypes,
                                 ) || 'transparent';
                             const color = getContrastColor(background);
                             return {
@@ -238,7 +205,9 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
         }
         if (type === 'select') {
             return (
-                <div className={Classes.SELECT} style={inputName === 'status' ? { width: '120px' } : {}}>
+                <div
+                    className={Classes.SELECT}
+                    style={inputName === 'status' ? { width: '120px' } : {}}>
                     {inputName === 'pokeball' && value && value !== 'None' ? (
                         <img
                             style={{ position: 'absolute' }}
@@ -247,7 +216,7 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
                         />
                     ) : null}
                     <select
-                        onChange={this.onChange(inputName, {pokemon})}
+                        onChange={this.onChange(inputName, { pokemon })}
                         value={value}
                         style={inputName === 'pokeball' ? { paddingLeft: '2rem' } : {}}
                         name={inputName}>
@@ -266,7 +235,7 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
         }
         if (type === 'checkbox') {
             return (
-                <label className="bp3-control bp3-checkbox">
+                <label className={cx(Classes.CONTROL, Classes.CHECKBOX)}>
                     <input
                         onChange={this.onChange(inputName)}
                         checked={value}
@@ -282,8 +251,8 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
                 <span className="double-select-wrapper">
                     <div className={Classes.SELECT}>
                         <select
-                            onChange={this.onChange(inputName, {position: 0, value})}
-                            value={value[0] == null ? 'None' : value[0]}
+                            onChange={this.onChange(inputName, { position: 0, value })}
+                            value={value?.[0] == null ? 'None' : value?.[0]}
                             name={inputName}>
                             {options
                                 ? options.map((item: string, index: number) => (
@@ -297,8 +266,8 @@ export class CurrentPokemonInputBase extends React.PureComponent<CurrentPokemonI
                     <span>&nbsp;</span>
                     <div className={Classes.SELECT}>
                         <select
-                            onChange={this.onChange(inputName, {position: 1, value})}
-                            value={value[1] == null ? 'None' : value[1]}
+                            onChange={this.onChange(inputName, { position: 1, value })}
+                            value={value?.[1] == null ? 'None' : value?.[1]}
                             name={inputName}>
                             {options
                                 ? options.map((item, index) => (
@@ -356,4 +325,6 @@ export const CurrentPokemonInput = connect(
         customTypes: state.customTypes,
     }),
     { editPokemon, selectPokemon },
+    null,
+    { pure: false },
 )(CurrentPokemonInputBase);
diff --git a/src/components/PokemonEditor/CurrentPokemonLayoutItem.tsx b/src/components/PokemonEditor/CurrentPokemonLayoutItem.tsx
index 4d99a6d5b..d5f9ceb83 100644
--- a/src/components/PokemonEditor/CurrentPokemonLayoutItem.tsx
+++ b/src/components/PokemonEditor/CurrentPokemonLayoutItem.tsx
@@ -18,20 +18,22 @@ const style = {
     `,
 };
 
-export class CurrentPokemonLayoutItem extends React.PureComponent<{
-    disabled?: boolean;
+export function CurrentPokemonLayoutItem({
+    disabled, checkboxes, className, children
+}: {disabled?: boolean;
     checkboxes?: boolean;
-}> {
-    public render() {
-        return (
-            <div
-                className={cx(
-                    style.Layout,
-                    this.props.disabled && style.disabled,
-                    this.props.checkboxes && style.checkboxes,
-                )}>
-                {this.props.children}
-            </div>
-        );
-    }
+    className?: string;
+    children: React.ReactNode;
+}) {
+    return (
+        <div
+            className={cx(
+                className ?? '',
+                style.Layout,
+                disabled && style.disabled,
+                checkboxes && style.checkboxes,
+            )}>
+            {children}
+        </div>
+    );
 }
diff --git a/src/components/PokemonEditor/MassEditor.tsx b/src/components/PokemonEditor/MassEditor.tsx
index 80f2afef1..9ae47251c 100644
--- a/src/components/PokemonEditor/MassEditor.tsx
+++ b/src/components/PokemonEditor/MassEditor.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Dialog,  Classes } from '@blueprintjs/core';
+import { Dialog, Classes } from '@blueprintjs/core';
 import { State } from 'state';
 import { ErrorBoundary } from 'components';
 import { MassEditorTable } from './MassEditorTable';
@@ -18,9 +18,7 @@ export class MassEditorBase extends React.Component<MassEditorProps> {
                 icon="edit"
                 isOpen={this.props.isOpen}
                 onClose={this.props.toggleDialog}
-                className={`wide-dialog ${
-                    this.props.style.editorDarkMode ? Classes.DARK : ''
-                }`}
+                className={`wide-dialog ${this.props.style.editorDarkMode ? Classes.DARK : ''}`}
                 title="Mass Editor">
                 <div className={Classes.DIALOG_BODY}>
                     <ErrorBoundary>
@@ -32,10 +30,8 @@ export class MassEditorBase extends React.Component<MassEditorProps> {
     }
 }
 
-export const MassEditor = connect(
-    (state: State) => ({
-        style: state.style,
-    }),
-)(MassEditorBase);
+export const MassEditor = connect((state: State) => ({
+    style: state.style,
+}))(MassEditorBase);
 
 export { MassEditor as default };
diff --git a/src/components/PokemonEditor/MassEditorTable.tsx b/src/components/PokemonEditor/MassEditorTable.tsx
index 638a45287..dd9612aa2 100644
--- a/src/components/PokemonEditor/MassEditorTable.tsx
+++ b/src/components/PokemonEditor/MassEditorTable.tsx
@@ -14,51 +14,59 @@ export interface MassEditorTableProps {
 
 const determineCell = (key: string, value: any, id, editPokemon) => {
     if (key === 'extraData') {
-        return <Cell><JSONFormat>{value}</JSONFormat></Cell>;
+        return (
+            <Cell>
+                <JSONFormat>{value}</JSONFormat>
+            </Cell>
+        );
     }
     if (key === 'id') {
         return <Cell>{id}</Cell>;
     }
-    return <EditableCell
-        onConfirm={(value) => {
-            let transformedValue: string | string[] = value;
-            if (key === 'moves' || key === 'types') {
-                transformedValue = value?.split(',').map(s => s.trim());
-            }
-            editPokemon({ [key]: transformedValue }, id);
-        }}
-        value={value}
-    />;
+    return (
+        <EditableCell
+            onConfirm={(value) => {
+                let transformedValue: string | string[] = value;
+                if (key === 'moves' || key === 'types') {
+                    transformedValue = value?.split(',').map((s) => s.trim());
+                }
+                editPokemon({ [key]: transformedValue }, id);
+            }}
+            value={value}
+        />
+    );
 };
 
-const cellRenderer: (pokemon: Pokemon[], key: string, editPokemon) => ICellRenderer = (pokemon: Pokemon[], key: string, editPokemon) => (rowIndex: number) => {
+const cellRenderer: (pokemon: Pokemon[], key: string, editPokemon) => ICellRenderer = (
+    pokemon: Pokemon[],
+    key: string,
+    editPokemon,
+) => (rowIndex: number) => {
     return determineCell(key, pokemon[rowIndex][key], pokemon[rowIndex].id, editPokemon);
 };
 
-
 export function renderColumns(pokemon, editPokemon) {
-    return Object.keys(PokemonKeys)
-        .map(key => {
-            return <Column
-                key={key}
-                name={key}
-                cellRenderer={cellRenderer(pokemon, key, editPokemon)}
-            />;
-        });
+    return Object.keys(PokemonKeys).map((key) => {
+        return (
+            <Column key={key} name={key} cellRenderer={cellRenderer(pokemon, key, editPokemon)} />
+        );
+    });
 }
 
-export function MassEditorTableBase({pokemon, editPokemon}: MassEditorTableProps) {
-    return <>
-        <Table numRows={pokemon.length} numFrozenColumns={2}>
-            {renderColumns(pokemon, editPokemon)}
-        </Table>
-        <br />
-        <AddPokemonButton defaultPokemon={generateEmptyPokemon(pokemon)} />
-    </>;
+export function MassEditorTableBase({ pokemon, editPokemon }: MassEditorTableProps) {
+    return (
+        <>
+            <Table numRows={pokemon.length} numFrozenColumns={2}>
+                {renderColumns(pokemon, editPokemon)}
+            </Table>
+            <br />
+            <AddPokemonButton defaultPokemon={generateEmptyPokemon(pokemon)} />
+        </>
+    );
 }
 
 export const MassEditorTable = connect(
-    (state: State) => ({pokemon: state.pokemon.sort(sortPokes)}),
+    (state: State) => ({ pokemon: state.pokemon.sort(sortPokes) }),
     {
         editPokemon: editPokemonType,
     },
diff --git a/src/components/PokemonEditor/PokemonEditor.tsx b/src/components/PokemonEditor/PokemonEditor.tsx
index 2045e7240..c4d8712a0 100644
--- a/src/components/PokemonEditor/PokemonEditor.tsx
+++ b/src/components/PokemonEditor/PokemonEditor.tsx
@@ -95,7 +95,7 @@ const PokemonLocationChecklist = ({
                     </div>
                 );
             })}
-            <Callout intent={Intent.WARNING} style={{fontSize: '80%', marginTop: '0.5rem'}}>
+            <Callout intent={Intent.WARNING} style={{ fontSize: '80%', marginTop: '0.5rem' }}>
                 Tip: Pokémon with the "hidden" attribute are a great option for including Pokemon
                 that got away on a certain route!
             </Callout>
@@ -149,14 +149,18 @@ export class PokemonEditorBase extends React.Component<PokemonEditorProps, Pokem
                     </BaseEditor>
                 </BaseEditor>
                 <React.Suspense fallback={<Spinner />}>
-                    {this.state.isMassEditorOpen &&
-                        <ErrorBoundary><MassEditor
-                            isOpen={this.state.isMassEditorOpen}
-                            toggleDialog={(e) =>
-                                this.setState({ isMassEditorOpen: !this.state.isMassEditorOpen })
-                            }
-                        /></ErrorBoundary>
-                    }
+                    {this.state.isMassEditorOpen && (
+                        <ErrorBoundary>
+                            <MassEditor
+                                isOpen={this.state.isMassEditorOpen}
+                                toggleDialog={(e) =>
+                                    this.setState({
+                                        isMassEditorOpen: !this.state.isMassEditorOpen,
+                                    })
+                                }
+                            />
+                        </ErrorBoundary>
+                    )}
                 </React.Suspense>
             </>
         );
diff --git a/src/components/PokemonEditor/styles.ts b/src/components/PokemonEditor/styles.ts
index 0f9c90b49..77f87f090 100644
--- a/src/components/PokemonEditor/styles.ts
+++ b/src/components/PokemonEditor/styles.ts
@@ -14,3 +14,27 @@ export const copyButton = css`
     margin-left: auto;
     cursor: pointer;
 `;
+
+export const evoMenuItem = css`
+    cursor: pointer;
+    padding: 0.5rem;
+    width: 7rem;
+    text-overflow: ellipsis;
+    &:hover {
+        background: #eee;
+        transition: 300ms background;
+    }
+`;
+
+export const moveInputWrapper = css`
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+`;
+
+export const moveEditButton = css`
+    margin-top: 1rem;
+    width: 20%;
+`;
diff --git a/src/components/PokemonIcon/PokemonIcon.tsx b/src/components/PokemonIcon/PokemonIcon.tsx
index f976aba22..315b5e9b6 100644
--- a/src/components/PokemonIcon/PokemonIcon.tsx
+++ b/src/components/PokemonIcon/PokemonIcon.tsx
@@ -7,6 +7,7 @@ import {
     significantGenderDifferenceList,
     Forme,
     speciesToNumber,
+    Species,
 } from 'utils';
 import { Gender, GenderElementProps } from 'components/Shared';
 import { selectPokemon, SELECT_POKEMON } from 'actions';
@@ -43,7 +44,7 @@ interface PokemonIconProps {
     isDragging?: boolean;
 }
 
-export const formatSpeciesName = (species: string | null) => {
+export const formatSpeciesName = (species: Species) => {
     if (species == null) return 'unknown';
     if (species === 'Nidoran♀') return 'nidoran-f';
     if (species === 'Nidoran♂') return 'nidoran-m';
@@ -93,10 +94,54 @@ export const getIconURL = ({ id, species, forme, shiny, gender, customIcon, egg
     if (customIcon) return customIcon;
 
     return `${baseURL}${isShiny}/${isFemaleSpecific}${formatSpeciesName(
-        species,
+        species as Species,
     )}${getIconFormeSuffix(forme as keyof typeof Forme)}.png`;
 };
 
+export function PokemonIconPlain({
+    isDragging,
+    id,
+    gender,
+    species,
+    forme,
+    onClick,
+    selectedId,
+    className,
+    shiny,
+    style,
+    customIcon,
+    includeTitle,
+    imageStyle,
+}: PokemonIconProps & { imageStyle: any }) {
+    return (
+        <div
+            role="icon"
+            onClick={(e) => {
+                e.preventDefault();
+                onClick && onClick();
+            }}
+            id={id}
+            title={includeTitle ? species : undefined}
+            style={style}
+            className={`${id === selectedId ? 'pokemon-icon selected' : 'pokemon-icon'} ${
+                className || ''
+            } ${isDragging ? 'opacity-medium' : ''}`}>
+            <img
+                style={imageStyle}
+                alt={species}
+                src={getIconURL({
+                    id,
+                    species,
+                    forme,
+                    shiny,
+                    gender,
+                    customIcon,
+                } as IconURLArgs)}
+            />
+        </div>
+    );
+}
+
 @DragSource('ICON', iconSource as any, (connect, monitor) => ({
     connectDragSource: connect.dragSource(),
     isDragging: monitor.isDragging(),
@@ -107,54 +152,17 @@ export class PokemonIconBase extends React.Component<PokemonIconProps> {
     }
 
     public render() {
-        const {
-            connectDragSource,
-            isDragging,
-            id,
-            gender,
-            species,
-            forme,
-            onClick,
-            selectedId,
-            className,
-            shiny,
-            style,
-            styles,
-            hidden,
-            customIcon,
-            includeTitle,
-        } = this.props;
+        const { connectDragSource, styles, hidden } = this.props;
         const imageStyle = {
             maxHeight: '100%',
             opacity: hidden ? 0.5 : 1,
             height: '32px',
+            maxWidth: 'auto',
             imageRendering: styles?.iconRendering,
         };
         return connectDragSource!(
-            <div
-                role="icon"
-                onClick={(e) => {
-                    e.preventDefault();
-                    onClick && onClick();
-                }}
-                id={id}
-                title={includeTitle ? species : undefined}
-                style={style}
-                className={`${id === selectedId ? 'pokemon-icon selected' : 'pokemon-icon'} ${
-                    className || ''
-                } ${isDragging ? 'opacity-medium' : ''}`}>
-                <img
-                    style={imageStyle}
-                    alt={species}
-                    src={getIconURL({
-                        id,
-                        species,
-                        forme,
-                        shiny,
-                        gender,
-                        customIcon,
-                    } as IconURLArgs)}
-                />
+            <div>
+                <PokemonIconPlain imageStyle={imageStyle} {...this.props} />
             </div>,
         );
     }
diff --git a/src/components/Result/Result.css b/src/components/Result/Result.css
index 0b1768071..12dc516c4 100644
--- a/src/components/Result/Result.css
+++ b/src/components/Result/Result.css
@@ -12,14 +12,14 @@
 .boxed-pokemon-icon {
   max-height: 3rem;
 }
-.container {
+.ng-container {
   padding-bottom: 0.5rem;
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
 }
-.container h3 {
+.ng-container h3 {
   text-transform: uppercase;
   margin: 0.5rem;
   letter-spacing: 4px;
@@ -35,7 +35,7 @@
   font-size: 1.25rem;
   font-weight: bold;
 }
-.container {
+.ng-container {
   padding-bottom: 1rem;
   background-color: #383840;
   color: #eee;
@@ -55,10 +55,6 @@
 .logo {
   height: 2.5rem;
 }
-.trainer-container div span {
-  font-size: 0.8rem;
-  letter-spacing: 2px;
-}
 .trainer-image {
   border-radius: 50%;
   height: 3rem;
@@ -77,7 +73,6 @@
   font-weight: light;
 }
 .badge-wrapper {
-  display: inline-flex;
   width: 216px;
   flex-wrap: wrap;
   justify-content: center;
@@ -257,7 +252,6 @@
   background-position: top left, bottom left;
 }
 .trainer-container div {
-  display: inline-block;
   text-align: center;
 }
 .logo {
@@ -436,3 +430,90 @@
   align-items: center;
   border-radius: .25rem;
 }
+
+.pokemon-checkpoint {
+    height: 24px;
+    margin: 0 2px 0 0;
+}
+
+.pokemon-checkpoint.not-obtained {
+    display: none;
+}
+
+.pokemon-checkpoint.obtained {
+    display: flex;
+}
+/*
+.pokemon-checkpoint[data-badge='Mars'],
+.pokemon-checkpoint[data-badge='Jupiter'],
+.pokemon-checkpoint[data-badge='Saturn'],
+.pokemon-checkpoint[data-badge~='Barry'] {
+    padding: 1px;
+    border-radius: 2px;
+    justify-content: center;
+    align-items: center;
+}
+
+.pokemon-checkpoint[data-badge='Mars'] {
+    background: #a83232;
+    border: 1px solid #5e1b1b;
+}
+
+.pokemon-checkpoint[data-badge='Jupiter'] {
+    background: #d398d9;
+    border: 1px solid #b36fbb;
+}
+
+.pokemon-checkpoint[data-badge='Barry'] {
+    background: rgb(218, 196, 75);
+    border: 1px solid rgb(192, 173, 66);
+}
+
+.trainer-checkpoint[data-badge='Mars'],
+.trainer-checkpoint[data-badge='Jupiter'],
+.trainer-checkpoint[data-badge='Saturn'],
+.trainer-checkpoint[data-badge='Cyrus'],
+.trainer-checkpoint[data-badge~='Barry'] {
+    display: none;
+}
+
+.pokemon-checkpoint[data-badge='Coal Badge'] {
+    order: 1;
+}
+
+.pokemon-checkpoint[data-badge='Mars'] {
+    order: 2;
+}
+
+.pokemon-checkpoint[data-badge='Forest Badge'] {
+    order: 3;
+}
+
+.pokemon-checkpoint[data-badge='Jupiter'] {
+    order: 4;
+}
+.pokemon-checkpoint[data-badge='Barry'] {
+    order: 6;
+}
+.pokemon-checkpoint[data-badge='Relic Badge'] {
+    order: 5;
+}
+.pokemon-checkpoint[data-badge='Cobble Badge'] {
+    order: 6;
+}
+.pokemon-checkpoint[data-badge='Fen Badge'] {
+    order: 7;
+}
+
+.pokemon-checkpoint[data-badge='Mine Badge'] {
+    order: 8;
+}
+.pokemon-checkpoint[data-badge='Icicle Badge'] {
+    order: 9;
+}
+.pokemon-checkpoint[data-badge='Beacon Badge'] {
+    order: 10;
+}
+.pokemon-checkpoint[data-badge='Cynthia'] {
+    order: 11;
+} */
diff --git a/src/components/Result/Result.tsx b/src/components/Result/Result.tsx
index 96ac5fdad..df1179577 100644
--- a/src/components/Result/Result.tsx
+++ b/src/components/Result/Result.tsx
@@ -56,19 +56,37 @@ const getNumberOf = (status?: string, pokemon?: Pokemon[]) =>
               .filter((poke) => poke.status === status && !poke.hidden).length
         : 0;
 
-export function BackspriteMontage({pokemon}: {pokemon: Pokemon[]}) {
-    return <div className='backsprite-montage' style={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'bottom',
-        margin: '0 auto',
-        height: '92px',
-    }}>
-        {pokemon.map((poke, idx) => {
-            return <img style={{height: '128px', marginLeft: '-32px', zIndex: 6 - idx, imageRendering: 'pixelated' }} alt='' role='presentation' src={`https://img.pokemondb.net/sprites/firered-leafgreen/back-normal/${(poke.species || '').toLowerCase()}.png`} />;
-        })}
-    </div>;
+export function BackspriteMontage({ pokemon }: { pokemon: Pokemon[] }) {
+    return (
+        <div
+            className="backsprite-montage"
+            style={{
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'bottom',
+                margin: '0 auto',
+                height: '92px',
+            }}>
+            {pokemon.map((poke, idx) => {
+                return (
+                    <img
+                        style={{
+                            height: '128px',
+                            marginLeft: '-32px',
+                            zIndex: 6 - idx,
+                            imageRendering: 'pixelated',
+                        }}
+                        alt=""
+                        role="presentation"
+                        src={`https://img.pokemondb.net/sprites/platinum/back-normal/${(
+                            poke.species || ''
+                        ).toLowerCase()}.png`}
+                    />
+                );
+            })}
+        </div>
+    );
 }
 
 export class ResultBase extends React.PureComponent<ResultProps, ResultState> {
@@ -173,6 +191,7 @@ export class ResultBase extends React.PureComponent<ResultProps, ResultState> {
             link.click();
             this.setState({ downloadError: null, isDownloading: false });
         } catch (e) {
+            console.log(e);
             this.setState({
                 downloadError:
                     'Failed to download. This is likely due to your image containing an image resource that does not allow Cross-Origin',
@@ -305,6 +324,7 @@ export class ResultBase extends React.PureComponent<ResultProps, ResultState> {
         const enableStats = style.displayStats;
         const enableChampImage = false && isLocal();
         const enableBackSpriteMontage = false && isLocal();
+        const renderStatsInResult = false && isLocal();
 
         return (
             <div className="hide-scrollbars" style={{ width: '100%', overflowY: 'scroll' }}>
@@ -331,7 +351,7 @@ export class ResultBase extends React.PureComponent<ResultProps, ResultState> {
                     )}
                     <div
                         ref={this.resultRef}
-                        className={`result container ${
+                        className={`result ng-container ${
                             (style.template && style.template.toLowerCase().replace(/\s/g, '-')) ||
                             ''
                         } region-${getGameRegion(
@@ -443,11 +463,13 @@ export class ResultBase extends React.PureComponent<ResultProps, ResultState> {
                             {style.displayRules && style.displayRulesLocation === 'bottom'
                                 ? rulesContainer
                                 : null}
-
-                            {enableStats && <Stats />}
                         </div>
 
-                        {enableBackSpriteMontage && <BackspriteMontage pokemon={this.getPokemonByStatus('Team')} />}
+                        {enableStats && renderStatsInResult && <Stats />}
+
+                        {enableBackSpriteMontage && (
+                            <BackspriteMontage pokemon={this.getPokemonByStatus('Team')} />
+                        )}
                     </div>
                 </ErrorBoundary>
             </div>
diff --git a/src/components/Result/Result2.tsx b/src/components/Result/Result2.tsx
index 7fabd08ec..0dca44aa5 100644
--- a/src/components/Result/Result2.tsx
+++ b/src/components/Result/Result2.tsx
@@ -1,24 +1,45 @@
 import * as React from 'react';
 import { TeamPokemon } from 'components/TeamPokemon/TeamPokemon2';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 import { Box, Pokemon } from 'models';
 import { useSelector } from 'react-redux';
 import { State } from 'state';
 import { pokemon } from 'reducers/pokemon';
 import { Menu, MenuItem } from '@blueprintjs/core';
-import { Layout, LayoutDisplay, LayoutDirection, LayoutAlignment, LayoutSpacing, LayoutWrap } from 'components/Layout';
+import {
+    Layout,
+    LayoutDisplay,
+    LayoutDirection,
+    LayoutAlignment,
+    LayoutSpacing,
+    LayoutWrap,
+} from 'components/Layout';
 import { BoxedPokemon } from 'components/BoxedPokemon/BoxedPokemon2';
 import { ChampsPokemonView } from 'components/ChampsPokemon';
 import { DeadPokemon } from 'components/DeadPokemon/DeadPokemon2';
+import { ErrorBoundary } from 'components';
+import { TopBar } from 'components/TopBar';
+import * as Styles from './styles';
 
+const uuid = require('uuid');
+
+async function load() {
+    const resource = await import('@emmaramirez/dom-to-image');
+    return resource.domToImage;
+}
 
 const getAllByStatus = (boxes?: Box[], pokemon?: Pokemon[], status?: string) => {
-    const boxesByStatus = boxes?.filter(box => {
-        return box.name.toLowerCase() === status?.toLowerCase() ||
-            box?.inheritFrom?.toLowerCase() === status?.toLowerCase();
-    }).map(box => box.name);
-    const pokemonByStatus = pokemon
-        ?.filter(poke => !poke.hidden && boxesByStatus?.includes(poke.status ?? ''));
+    const boxesByStatus = boxes
+        ?.filter((box) => {
+            return (
+                box.name.toLowerCase() === status?.toLowerCase() ||
+                box?.inheritFrom?.toLowerCase() === status?.toLowerCase()
+            );
+        })
+        .map((box) => box.name);
+    const pokemonByStatus = pokemon?.filter(
+        (poke) => !poke.hidden && boxesByStatus?.includes(poke.status ?? ''),
+    );
 
     return pokemonByStatus;
 };
@@ -28,6 +49,7 @@ export interface DisplayProps {
     direction?: LayoutDirection;
     alignment?: LayoutAlignment;
     spacing?: LayoutSpacing;
+    wrap?: LayoutWrap;
 }
 
 export enum DownloadStatus {
@@ -37,12 +59,36 @@ export enum DownloadStatus {
     done = 'done',
 }
 
-export function DownloadableWrapper() {
+const toImage = (ref, setDS) => async () => {
+    const resultNode = ref?.current;
+    try {
+        setDS(DownloadStatus.active);
+        const domToImage = await load();
+        const dataUrl = await (domToImage as any).toPng(resultNode, { corsImage: true });
+        const link = document.createElement('a');
+        link.download = `nuzlocke-${uuid()}.png`;
+        link.href = dataUrl;
+        link.click();
+        setDS(DownloadStatus.done);
+    } catch (e) {
+        setDS(DownloadStatus.error);
+        console.log(e);
+    }
+};
 
-}
+export function TopBarWithDownload({ forwardedRef }) {
+    const [downloadStatus, setDownloadStatus] = React.useState(DownloadStatus.dormant);
 
-export function TeamPokemonMemberView({pokemon}:{pokemon: Pokemon}) {
+    return (
+        <ErrorBoundary>
+            <TopBar
+                isDownloading={downloadStatus === DownloadStatus.active}
+                onClickDownload={toImage(forwardedRef, setDownloadStatus)}></TopBar>
+        </ErrorBoundary>
+    );
+}
 
+export function TeamPokemonMemberView({ pokemon }: { pokemon: Pokemon }) {
     const [showContext, setShowContext] = React.useState(false);
 
     const onContextMenu = (event) => {
@@ -64,29 +110,36 @@ export function TeamPokemonMemberView({pokemon}:{pokemon: Pokemon}) {
         };
     });
 
-    const renderMenu = (<Menu style={{
-        position: 'absolute',
-        top: '70%',
-        right: '-1rem',
-        zIndex: 200,
-        boxShadow: '0 0 .25rem rgba(0,0,0,0.1)'
-    }}>
-        <MenuItem text='Edit...' />
-        <MenuItem onClick={() => setShowContext(false)} text='Delete' />
-        <MenuItem onClick={() => setShowContext(false)} text='Cancel' />
-    </Menu>);
-
-    return <div className='pokemon-member-wrapper' style={{
-        position: 'relative',
-        ...(showContext && {
-            outline: '3px solid #58e3f5',
-            filter: 'drop-shadow(0 0 0 2px rgba(0,0,0,0.2)'
-        })
-    }} onContextMenu={onContextMenu}>
-        {showContext && renderMenu}
-        <TeamPokemon options={{
-        }} pokemon={pokemon} />
-    </div>;
+    const renderMenu = (
+        <Menu
+            style={{
+                position: 'absolute',
+                top: '70%',
+                right: '-1rem',
+                zIndex: 200,
+                boxShadow: '0 0 .25rem rgba(0,0,0,0.1)',
+            }}>
+            <MenuItem text="Edit..." />
+            <MenuItem onClick={() => setShowContext(false)} text="Delete" />
+            <MenuItem onClick={() => setShowContext(false)} text="Cancel" />
+        </Menu>
+    );
+
+    return (
+        <div
+            className="pokemon-member-wrapper"
+            style={{
+                position: 'relative',
+                ...(showContext && {
+                    outline: '3px solid #58e3f5',
+                    filter: 'drop-shadow(0 0 0 2px rgba(0,0,0,0.2)',
+                }),
+            }}
+            onContextMenu={onContextMenu}>
+            {showContext && renderMenu}
+            <TeamPokemon options={{}} pokemon={pokemon} />
+        </div>
+    );
 }
 
 export type ViewProps = Partial<Pick<State, 'pokemon'>> & DisplayProps;
@@ -97,68 +150,102 @@ export function TeamPokemonView({
     direction,
     alignment,
     spacing,
+    wrap,
 }: ViewProps) {
-    return <Layout display={display} direction={direction} alignment={alignment} spacing={spacing} wrap={LayoutWrap.NoWrap}>
-        {pokemon?.map(poke => <TeamPokemonMemberView key={poke.id} pokemon={poke} />)}
-    </Layout>;
+    return (
+        <Layout
+            wrap={wrap}
+            display={display}
+            direction={direction}
+            alignment={alignment}
+            spacing={spacing}>
+            {pokemon?.map((poke) => (
+                <TeamPokemonMemberView key={poke.id} pokemon={poke} />
+            ))}
+        </Layout>
+    );
 }
 
-export function BoxedPokemonView({
-    pokemon,
-    display,
-    direction,
-    alignment,
-    spacing,
-}: ViewProps) {
-    return <Layout display={display} direction={direction} alignment={alignment} spacing={spacing}>
-        {pokemon?.map(poke => <BoxedPokemon key={poke.id} pokemon={poke} />)}
-    </Layout>;
+export function BoxedPokemonView({ pokemon, display, direction, alignment, spacing }: ViewProps) {
+    return (
+        <Layout display={display} direction={direction} alignment={alignment} spacing={spacing}>
+            {pokemon?.map((poke) => (
+                <BoxedPokemon key={poke.id} pokemon={poke} />
+            ))}
+        </Layout>
+    );
 }
 
-export function DeadPokemonView({
-    pokemon,
-    display,
-    direction,
-    alignment,
-    spacing,
-}: ViewProps) {
-    return <Layout display={display} direction={direction} alignment={alignment} spacing={spacing}>
-        {pokemon?.map(poke => <DeadPokemon key={poke.id} pokemon={poke} />)}
-    </Layout>;
+export function DeadPokemonView({ pokemon, display, direction, alignment, spacing }: ViewProps) {
+    return (
+        <Layout display={display} direction={direction} alignment={alignment} spacing={spacing}>
+            {pokemon?.map((poke) => (
+                <DeadPokemon key={poke.id} pokemon={poke} />
+            ))}
+        </Layout>
+    );
 }
 
-
 export function Result() {
+    const resultRef = React.useRef(null);
+
     const [downloadStatus, setDownloadStatus] = React.useState(DownloadStatus.dormant);
     const [scale, setScale] = React.useState(1);
     const [srollY, setScrollY] = React.useState(0);
-    const pokemon = useSelector<State, State['pokemon']>(state => state.pokemon);
-    const style = useSelector<State, State['style']>(state => state.style);
-    const boxes = useSelector<State, State['box']>(state => state.box);
-    const {bgColor} = style;
+    const pokemon = useSelector<State, State['pokemon']>((state) => state.pokemon);
+    const style = useSelector<State, State['style']>((state) => state.style);
+    const boxes = useSelector<State, State['box']>((state) => state.box);
+    const { bgColor } = style;
 
     const scrollToScale = (event) => {
-        console.log(
-            scrollY - window.scrollY
-        );
+        console.log(scrollY - window.scrollY);
         setScrollY(window.scrollY);
     };
 
     React.useEffect(() => {
+        console.log(resultRef);
         window.addEventListener('scroll', scrollToScale);
         return () => window.removeEventListener('scroll', scrollToScale);
     });
 
-    return <div data-testid='result' style={{
-        margin: '2rem',
-        background: bgColor,
-        color: '#222',
-        width: '48rem',
-        overflowY: 'auto',
-    }}>
-        <TeamPokemonView pokemon={getAllByStatus(boxes, pokemon, 'team')} />
-        <BoxedPokemonView spacing={LayoutSpacing.Center} pokemon={getAllByStatus(boxes, pokemon, 'boxed')} />
-        <DeadPokemonView spacing={LayoutSpacing.Center} pokemon={getAllByStatus(boxes, pokemon, 'dead')} />
-        <ChampsPokemonView spacing={LayoutSpacing.Center} pokemon={getAllByStatus(boxes, pokemon, 'champs')} />
-    </div>;
+    const TopBarWithRef = React.forwardRef((props, ref) => (
+        <TopBarWithDownload forwardedRef={ref} />
+    ));
+
+    return (
+        <div className={cx(Styles.result_wrapper, 'hide-scrollbars')}>
+            <TopBarWithRef />
+            <div
+                data-testid="result"
+                ref={resultRef}
+                style={{
+                    margin: '2rem',
+                    background: bgColor,
+                    color: '#222',
+                    height: `${style.resultHeight}px`,
+                    width: `${style.resultWidth}px`,
+                    overflowY: 'auto',
+                }}>
+                <style>{style.customCSS}</style>
+                <ErrorBoundary>
+                    <TeamPokemonView
+                        wrap={LayoutWrap.Wrap}
+                        pokemon={getAllByStatus(boxes, pokemon, 'team')}
+                    />
+                </ErrorBoundary>
+                <BoxedPokemonView
+                    spacing={LayoutSpacing.Center}
+                    pokemon={getAllByStatus(boxes, pokemon, 'boxed')}
+                />
+                <DeadPokemonView
+                    spacing={LayoutSpacing.Center}
+                    pokemon={getAllByStatus(boxes, pokemon, 'dead')}
+                />
+                <ChampsPokemonView
+                    spacing={LayoutSpacing.Center}
+                    pokemon={getAllByStatus(boxes, pokemon, 'champs')}
+                />
+            </div>
+        </div>
+    );
 }
diff --git a/src/components/Result/Stats.tsx b/src/components/Result/Stats.tsx
index b72e6ac1f..73b9a02aa 100644
--- a/src/components/Result/Stats.tsx
+++ b/src/components/Result/Stats.tsx
@@ -4,6 +4,7 @@ import { State } from 'state';
 import { PokemonIcon } from 'components/PokemonIcon';
 import { Layout, LayoutDisplay } from 'components/Layout';
 import { isLocal } from 'utils';
+import { range } from 'ramda';
 
 export interface StatsProps {
     pokemon: State['pokemon'];
@@ -101,7 +102,7 @@ export class StatsBase extends React.Component<StatsProps, { pokemon: State['pok
             .map((p) => p.causeOfDeath || '')
             .join('\n');
         const res = this.wordMap(words.split(/\n/));
-        return [0, 1, 2, 3].map((i) => ({ name: res[i]?.name, total: res[i]?.total }));
+        return range(0, 5).map((i) => ({ name: res[i]?.name, total: res[i]?.total }));
     }
 
     private displayMostCommonDeath(data: { name?: string; total?: string }[]) {
@@ -112,7 +113,7 @@ export class StatsBase extends React.Component<StatsProps, { pokemon: State['pok
     }
 
     private getAverageLevel() {
-        const pokes = this.props.pokemon.filter(p => !p.hidden);
+        const pokes = this.props.pokemon.filter((p) => !p.hidden);
         const levels = pokes.map((p) =>
             Number.isNaN(parseInt(p?.level as any)) ? 0 : parseInt(p?.level as any),
         );
@@ -120,7 +121,8 @@ export class StatsBase extends React.Component<StatsProps, { pokemon: State['pok
     }
 
     private getAverageLevelByStatus(status: string) {
-        const pokes = this.props.pokemon.filter(p => !p.hidden && p.status === status);
+        const pokes = this.props.pokemon.filter((p) => !p.hidden && p.status === status);
+        if (!pokes.length) return 0;
         const levels = pokes.map((p) =>
             Number.isNaN(parseInt(p?.level as any)) ? 0 : parseInt(p?.level as any),
         );
@@ -148,9 +150,16 @@ export class StatsBase extends React.Component<StatsProps, { pokemon: State['pok
                 <div style={{ marginTop: '10px', margin: '0 10px' }}>
                     {style.statsOptions.averageLevel ? (
                         this.state.pokemon.length ? (
-                            isLocal() ? <p>Average Level: Team ({this.getAverageLevelByStatus('Team')}), Boxed ({this.getAverageLevelByStatus('Boxed')}), Dead ({this.getAverageLevelByStatus('Dead')}), Champs ({this.getAverageLevelByStatus('Champs')})</p>
-                                :
+                            isLocal() ? (
+                                <div>
+                                    Average Level: Team ({this.getAverageLevelByStatus('Team')}),
+                                    Boxed ({this.getAverageLevelByStatus('Boxed')}), Dead (
+                                    {this.getAverageLevelByStatus('Dead')}), Champs (
+                                    {this.getAverageLevelByStatus('Champs')})
+                                </div>
+                            ) : (
                                 <div>Average Level: {this.getAverageLevel()}</div>
+                            )
                         ) : null
                     ) : null}
                     {style.statsOptions.mostCommonKillers ? (
diff --git a/src/components/Result/TrainerResult.tsx b/src/components/Result/TrainerResult.tsx
index b439aca97..94762e73e 100644
--- a/src/components/Result/TrainerResult.tsx
+++ b/src/components/Result/TrainerResult.tsx
@@ -7,11 +7,14 @@ import {
     getContrastColor,
     getBadges,
     isEmpty,
+    feature,
 } from 'utils';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { Trainer, Badge } from 'models';
 import { State } from 'state';
 import { Checkpoints } from 'reducers/checkpoints';
+import { Stats } from './Stats';
+import { cx } from 'emotion';
 
 export interface TrainerResultProps {
     orientation: OrientationType;
@@ -39,87 +42,100 @@ export const TrainerColumnItem = ({ trainer, prop, orientation }: TrainerColumnI
     const baseDivStyle = isVertical ? { padding: '2px' } : { padding: '.25rem' };
 
     return !isEmpty(trainer[prop]) ? (
-        <div style={baseDivStyle} className={`${prop} column`}>
+        <div style={baseDivStyle} className={`trainer-${prop} column`}>
             <div style={baseDivStyle}>{prop}</div>
             <div style={bottomTextStyle}>{trainer[prop]}</div>
         </div>
     ) : null;
 };
 
-export class TrainerResultBase extends React.Component<TrainerResultProps> {
-    private isSWSH() {
-        const { name } = this.props.game;
-        return name === 'Sword' || name === 'Shield';
+export interface CheckpointsDisplayProps {
+    style: State['style'];
+    trainer?: State['trainer'];
+    game: State['game'];
+    clearedCheckpoints?: Checkpoints;
+    className?: string;
+}
+
+export function CheckpointsDisplay({
+    style,
+    trainer,
+    game,
+    clearedCheckpoints,
+    className,
+}: CheckpointsDisplayProps) {
+    const {name} = game;
+    const checkpoints = useSelector<State, State['checkpoints']>(state => state.checkpoints);
+    const cleared = trainer?.badges ?? clearedCheckpoints ?? [];
+
+    if (!style.displayBadges) {
+        return null;
     }
 
-    private renderBadgesOrTrials() {
-        const { checkpoints, style, trainer } = this.props;
-        const { name } = this.props.game;
-        const trainerBadges = trainer.badges ? trainer.badges : [];
+    const swshPositions = [
+        { bottom: 0, right: 0 },
+        { right: '-9px', top: '2px', height: '24px' },
+        { bottom: '11px', left: '20px' },
+        { bottom: '2px', left: '9px' },
+        { bottom: '3px', left: '28.5px', height: '33px' },
+        { top: '-3px', left: '23px' },
+        { left: '14px', top: '5px', height: '25px' },
+        { left: '3px', top: '2px', height: '32px' },
+    ];
 
-        if (!style.displayBadges) {
-            return null;
-        }
+    return <>{checkpoints.map((badge, index) => {
+        const obtained = cleared.some((b) => b.name === badge.name);
+        return (
+            <React.Fragment key={badge.name}>
+                <img
+                    className={cx(className ?? '', obtained ? 'obtained' : 'not-obtained')}
+                    style={
+                        isSWSH(name) && !trainer?.hasEditedCheckpoints
+                            ? { position: 'absolute', ...swshPositions[index] }
+                            : { }
+                    }
+                    key={badge.name}
+                    alt={badge.name}
+                    data-badge={badge.name}
+                    src={
+                        (badge.image.startsWith('http') || badge.image.startsWith('data'))
+                            ? badge.image
+                            : `./img/checkpoints/${badge.image}.png`
+                    }
+                />
+                {badge.name === 'Rising Badge' ? <br /> : null}
+            </React.Fragment>
+        );
+    })}</>;
+}
 
-        const swshPositions = [
-            { bottom: 0, right: 0 },
-            { right: '-9px', top: '2px', height: '24px' },
-            { bottom: '11px', left: '20px' },
-            { bottom: '2px', left: '9px' },
-            { bottom: '3px', left: '28.5px', height: '33px' },
-            { top: '-3px', left: '23px' },
-            { left: '14px', top: '5px', height: '25px' },
-            { left: '3px', top: '2px', height: '32px' },
-        ];
-
-        return checkpoints.map((badge, index) => {
-            return (
-                <React.Fragment key={badge.name}>
-                    <img
-                        className={
-                            trainerBadges.some((b) => b.name === badge.name)
-                                ? 'obtained'
-                                : 'not-obtained'
-                        }
-                        style={
-                            this.isSWSH() && !trainer.hasEditedCheckpoints
-                                ? { position: 'absolute', ...swshPositions[index] }
-                                : { height: '1rem' }
-                        }
-                        key={badge.name}
-                        alt={badge.name}
-                        src={
-                            badge.image.startsWith('http')
-                                ? badge.image
-                                : `./img/checkpoints/${badge.image}.png`
-                        }
-                    />
-                    {badge.name === 'Rising Badge' ? <br /> : null}
-                </React.Fragment>
-            );
-        });
-    }
+export const isSWSH = (name) => name === 'Sword' || name === 'Shield';
+
+export class TrainerResultBase extends React.Component<TrainerResultProps> {
 
     private getBadgeWrapperStyles(orientation) {
-        const { trainer } = this.props;
+        const { trainer, game: {name} } = this.props;
+
         let style = {};
-        if (this.isSWSH() && !trainer.hasEditedCheckpoints) {
+        if (isSWSH(name) && !trainer.hasEditedCheckpoints) {
             style = { height: '3rem', width: '3rem', position: 'relative', padding: '.25rem' };
         }
         if (orientation === 'vertical') {
             style = { ...style, margin: '0', padding: '.25rem' };
         }
-        if (!this.isSWSH() && orientation === 'vertical') {
+        if (!isSWSH(name) && orientation === 'vertical') {
             style = { ...style, width: '100%' };
         }
         return style;
     }
 
     public render() {
-        const { trainer, game, style, orientation } = this.props;
+        const { trainer, game, style, orientation, checkpoints } = this.props;
         const isVertical = orientation === 'vertical';
         const baseDivStyle = isVertical ? { padding: '2px' } : { padding: '.25rem' };
         const tciProps = { trainer, orientation };
+        const enableStats = style.displayStats;
+        const renderStatsInTrainer = feature.resultv2;
 
         return (
             <div
@@ -166,9 +182,26 @@ export class TrainerResultBase extends React.Component<TrainerResultProps> {
                         {this.props.game.name} Nuzlocke
                     </div>
                 )}
-                {['name', 'money', 'time', 'id', 'totalTime'].map(item => (<TrainerColumnItem key={item} prop={item} {...tciProps} />))}
-                <div className="badge-wrapper" style={this.getBadgeWrapperStyles(orientation)}>
-                    {this.renderBadgesOrTrials()}
+                {feature.resultv2 ? (
+                    <div className="flex">
+                        {['name', 'money', 'time', 'id', 'totalTime'].map((item) => (
+                            <TrainerColumnItem key={item} prop={item} {...tciProps} />
+                        ))}
+                    </div>
+                ) : (
+                    <>
+                        {['name', 'money', 'time', 'id', 'totalTime'].map((item) => (
+                            <TrainerColumnItem key={item} prop={item} {...tciProps} />
+                        ))}
+                    </>
+                )}
+                <div className="badge-wrapper flex" style={this.getBadgeWrapperStyles(orientation)}>
+                    <CheckpointsDisplay
+                        className='trainer-checkpoint'
+                        trainer={trainer}
+                        style={style}
+                        game={game}
+                    />
                 </div>
                 {style.displayRules && style.displayRulesLocation === 'inside trainer section' ? (
                     <div style={{ marginTop: '1rem' }} className="rules-container">
@@ -180,6 +213,7 @@ export class TrainerResultBase extends React.Component<TrainerResultProps> {
                         </ol>
                     </div>
                 ) : null}
+                {enableStats && renderStatsInTrainer && <Stats />}
             </div>
         );
     }
diff --git a/src/components/Result/__tests__/Result2.test.tsx b/src/components/Result/__tests__/Result2.test.tsx
index 393b2bffd..86672e6b1 100644
--- a/src/components/Result/__tests__/Result2.test.tsx
+++ b/src/components/Result/__tests__/Result2.test.tsx
@@ -5,7 +5,11 @@ import { TestProvider } from 'utils/TestProvider';
 
 describe(Result.name, () => {
     it('returns a result element', () => {
-        render(<TestProvider><Result /></TestProvider>);
+        render(
+            <TestProvider>
+                <Result />
+            </TestProvider>,
+        );
         expect(screen.getByTestId('result')).toBeDefined();
     });
 });
diff --git a/src/components/Result/styles.ts b/src/components/Result/styles.ts
index 62e02281f..3f7656602 100644
--- a/src/components/Result/styles.ts
+++ b/src/components/Result/styles.ts
@@ -49,6 +49,8 @@ export const heading = css`
     justify-content: center;
     letter-spacing: 4px;
     margin: 0.5rem;
+    font-weight: bold;
+    font-size: 2rem;
     text-align: center;
     text-transform: uppercase;
     width: 100%;
@@ -288,3 +290,8 @@ export const result_download = css`
 `;
 
 /// v2 styles
+
+export const result_wrapper = css`
+    overflowy: scroll;
+    width: 100%;
+`;
diff --git a/src/components/Result/themes.css b/src/components/Result/themes.css
index 069adc651..5b99ea2e1 100644
--- a/src/components/Result/themes.css
+++ b/src/components/Result/themes.css
@@ -34,7 +34,7 @@
 .default-light .result-notes {
   color: #111;
 }
-.default-light .container {
+.default-light .ng-container {
   background-color: #eee;
 }
 .default-light .pokemon-container {
@@ -218,7 +218,7 @@
   vertical-align: top;
   flex-direction: column;
 }
-.generations .container {
+.generations .ng-container {
   position: relative;
 }
 .generations li {
@@ -459,7 +459,7 @@
   left: 0;
   top: -23px;
 }
-.compact .container {
+.compact .ng-container {
   border-width: 0 !important;
 }
 .compact .team-container {
@@ -523,7 +523,7 @@
   margin: unset;
   margin-left: -0.25rem;
 }
-.compact-with-icons .container {
+.compact-with-icons .ng-container {
   border-width: 0 !important;
 }
 .compact-with-icons .team-container {
@@ -597,7 +597,7 @@
 }
 .compact-with-icons .rules-container ol {
   display: inline-block;
-  padding-right: 8rem;
+  /* padding-right: 8rem; */
 }
 .compact-with-icons .stats {
   font-size: 120%;
@@ -614,6 +614,7 @@
   background: #383840;
   image-rendering: pixelated;
   border-radius: 0 0 0.25rem 0.25rem;
+  width: auto;
 }
 .compact-with-icons .pokemon-container {
   margin: 0.25rem;
@@ -660,7 +661,8 @@
 .compact-with-icons .boxed-pokemon-info {
   border: none;
 }
-.compact-with-icons .dead-pokemon-container {
+/* scope this to the result */
+.result .compact-with-icons .dead-pokemon-container {
   width: calc(100% / 6);
 }
 .compact-with-icons .pokemon-container {
@@ -679,7 +681,7 @@
   padding: 0.25rem;
 }
 .compact-with-icons .pokemon-item {
-  left: 7px;
+  left: 8px;
 }
 .compact-with-icons .badge-wrapper {
   width: 400px;
@@ -714,7 +716,7 @@
   display: none;
 }
 
-.generations-classic .container {
+.generations-classic .ng-container {
     position: relative;
   }
   .generations-classic li {
diff --git a/src/components/RulesEditor/RulesEditor.tsx b/src/components/RulesEditor/RulesEditor.tsx
index b4a92401f..1685e82ac 100644
--- a/src/components/RulesEditor/RulesEditor.tsx
+++ b/src/components/RulesEditor/RulesEditor.tsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { editRule, addRule, deleteRule, resetRules } from 'actions';
 
 import './RulesEditor.css';
+import { State } from 'state';
 
 export interface RulesEditorProps {
     rules: string[];
@@ -29,11 +30,7 @@ export class RulesEditor extends React.Component<RulesEditorProps> {
                     onClick={(e) => this.props.deleteRule(index)}
                     className="rule-delete"
                     title="Delete Rule">
-                    <Icon
-                        intent={Intent.DANGER}
-                        style={{ cursor: 'pointer' }}
-                        icon={'trash'}
-                    />
+                    <Icon intent={Intent.DANGER} style={{ cursor: 'pointer' }} icon={'trash'} />
                 </div>
             </li>
         ));
@@ -82,7 +79,9 @@ export const RulesEditorDialogBase = (
         <Dialog
             isOpen={props.isOpen}
             onClose={props.onClose}
-            className={`rules-editor-dialog ${props.style.editorDarkMode ? 'bp3-dark' : 'bp3-light'}`}
+            className={`rules-editor-dialog ${
+                props.style.editorDarkMode ? 'bp3-dark' : 'bp3-light'
+            }`}
             title="Rules Editor"
             icon="edit">
             <div className="bp3-dialog-body">
@@ -99,7 +98,7 @@ export const RulesEditorDialogBase = (
 };
 
 export const RulesEditorDialog = connect(
-    (state: any) => ({
+    (state: State) => ({
         rules: state.rules,
         style: state.style,
     }),
diff --git a/src/components/Shared/Autocomplete.css b/src/components/Shared/Autocomplete.css
index dcbe0f61b..4876aa53d 100644
--- a/src/components/Shared/Autocomplete.css
+++ b/src/components/Shared/Autocomplete.css
@@ -9,10 +9,10 @@
     border-bottom-right-radius: 0.25rem;
     max-height: 200px;
     position: absolute;
-    top: 1.9rem;
+    top: 2.5rem;
     padding: 0;
     overflow: auto;
-    width: 10.5rem;
+    width: 11.5rem;
     z-index: 11;
 }
 .autocomplete-items li {
@@ -27,4 +27,4 @@
     .autocomplete-items {
         top: 2.25rem;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/Shared/Autocomplete.tsx b/src/components/Shared/Autocomplete.tsx
index 6814b05a0..cfe520ffa 100644
--- a/src/components/Shared/Autocomplete.tsx
+++ b/src/components/Shared/Autocomplete.tsx
@@ -1,4 +1,7 @@
 import * as React from 'react';
+import { cx } from 'emotion';
+import { debounce } from 'lodash';
+import './Autocomplete.css';
 
 export interface AutocompleteProps {
     items: string[];
@@ -17,15 +20,12 @@ export interface AutocompleteState {
     isOpen: boolean;
 }
 
-import './Autocomplete.css';
-import { cx } from 'emotion';
-
 export class Autocomplete extends React.Component<AutocompleteProps, AutocompleteState> {
     public constructor(props) {
         super(props);
         this.state = {
-            visibleItems: [],
-            currentValue: '',
+            visibleItems: this.props.items,
+            currentValue: this.props.value,
             isOpen: false,
         };
     }
@@ -42,11 +42,6 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
         });
     }
 
-    // eslint-disable-next-line camelcase
-    public UNSAFE_componentWillMount() {
-        this.setState({ currentValue: this.props.value });
-    }
-
     public componentWillUnmount() {
         this.setState({
             isOpen: false,
@@ -54,9 +49,21 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
         });
     }
 
-    // eslint-disable-next-line camelcase
-    public UNSAFE_componentWillReceiveProps(nextProps) {
-        this.setState({ currentValue: nextProps.value });
+    public componentDidUpdate(prevProps) {
+        // if (this.isDebouncing) {
+        //   return;
+        // }
+        const {value} = this.props;
+
+        const {value: oldValue} = prevProps;
+        const {currentValue} = this.state;
+
+        if (typeof value !== 'undefined' && oldValue !== value && currentValue !== value) {
+            // Update state.value if new value passed via props, yep re-render should happen
+            this.setState({
+                currentValue: value
+            });
+        }
     }
 
     private renderItems() {
@@ -74,6 +81,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
     }
 
     private updateItems = (e: any) => {
+        e.persist();
         if (e.target.value === '') {
             this.setState({
                 currentValue: e.target.value,
@@ -87,7 +95,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
                 ),
             });
         }
-        this.props.onChange(e);
+        debounce(this.props.onChange, 300)(e);
     };
 
     private openList = (e) => this.setState({ isOpen: true });
@@ -151,3 +159,36 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
         );
     }
 }
+
+// const closeList = () => {
+//     setTimeout(() => {
+//         setIsOpen(false);
+//         setVisibleItems(false);
+//     }, 250);
+// };
+
+// export function Autocomplete({}: AutocompleteProps) {
+//     const [visibleItems, setVisibleItems] = React.useState([]);
+//     const [currentValue, setCurrentValue] = React.useState('');
+//     const [isOpen, setIsOpen] = React.useState(false);
+
+//     return <div className={cx('current-pokemon-input-wrapper', 'autocomplete')}>
+//         <label>{this.props.label}</label>
+//         <input
+//             autoComplete="off"
+//             className={cx(className)}
+//             onKeyDown={this.handleKeyDown}
+//             onFocus={this.openList}
+//             onBlur={this.closeList}
+//             placeholder={this.props.placeholder}
+//             name={this.props.name}
+//             type="text"
+//             onChange={this.updateItems}
+//             value={this.state.currentValue}
+//             disabled={this.props.disabled}
+//         />
+//         {this.state.isOpen ? (
+//             <ul className="autocomplete-items has-nice-scrollbars">{this.renderItems()}</ul>
+//         ) : null}
+//     </div>;
+// }
diff --git a/src/components/Shared/ImageUpload.tsx b/src/components/Shared/ImageUpload.tsx
new file mode 100644
index 000000000..af86eeb6e
--- /dev/null
+++ b/src/components/Shared/ImageUpload.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Button, Intent, Toaster } from '@blueprintjs/core';
+
+
+const toBase64 = file => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+});
+
+
+export interface ImageUploadProps {
+    onSuccess: (data: string, fileName?: string) => void;
+    onError?: (error: any) => void;
+}
+
+const onUpload = ({onSuccess, onError}: ImageUploadProps) => async (e: any) => {
+    const file = e?.target?.files?.[0];
+    const size = e.target.files[0].size / 1024 / 1024;
+    const toaster = Toaster.create();
+    if (size > 0.5) {
+        toaster.show({
+            message: `File size of 500KB exceeded. File was ${size.toFixed(2)}MB`,
+            intent: Intent.DANGER,
+        });
+    } else {
+        try {
+            const image = await toBase64(file);
+            onSuccess && onSuccess(image as string, file?.name);
+
+            console.log(image);
+            toaster.show({
+                message: 'Upload successful!',
+                intent: Intent.SUCCESS,
+            });
+        } catch (e) {
+            onError && onError(e);
+            toaster.show({
+                message: `Error in parsing file. ${e}`,
+                intent: Intent.DANGER,
+            });
+        }
+    }
+};
+
+export function ImageUpload({onSuccess, onError}: ImageUploadProps) {
+    return <>
+        <Button icon='upload'>Upload Image</Button>
+        <input accept='image/*' style={{ cursor: 'pointer', opacity: 0, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} onChange={onUpload({onSuccess, onError})} type='file' />
+    </>;
+}
diff --git a/src/components/Shared/ImagesDrawer.tsx b/src/components/Shared/ImagesDrawer.tsx
new file mode 100644
index 000000000..f817d1e2b
--- /dev/null
+++ b/src/components/Shared/ImagesDrawer.tsx
@@ -0,0 +1,112 @@
+
+import { Icon, Intent } from '@blueprintjs/core';
+import * as React from 'react';
+import { ImageUpload } from './ImageUpload';
+
+const uuid = require('uuid');
+
+const userImages = new Set<Image>();
+
+const getImages = () => {
+    const request = window.indexedDB.open('NuzlockeGenerator', 3);
+
+    request.onerror = event => Promise.reject(event);
+
+    request.onsuccess = event => {
+        // @ts-expect-error
+        const db = event?.target?.result;
+        const imageStore = db.transaction('images', 'readwrite').objectStore('images');
+        imageStore.openCursor().onsuccess = function (event) {
+            const cursor = event.target.result;
+            if (cursor) {
+                const image = cursor?.value;
+                cursor.continue();
+            } else {
+                return;
+            }
+        };
+    };
+};
+
+export interface Image {
+    id: string;
+    name?: string;
+    image: string;
+}
+
+
+export function ImagesDrawer() {
+    const [refresh, setRefresh] = React.useState('');
+    const [images, setImages] = React.useState<Image[]>([]);
+
+
+    const deleteImage = (id: string) => () => {
+        const request = window.indexedDB.open('NuzlockeGenerator', 3);
+
+        request.onsuccess = event => {
+            // @ts-expect-error
+            const db = event?.target?.result;
+            const request = db
+                .transaction('images', 'readwrite')
+                .objectStore('images')
+                .delete(id);
+
+            request.onsuccess = event => {
+                console.log('image deleted');
+                setRefresh(id);
+            };
+        };
+    };
+
+    return <div className='images-drawer p-2'>
+        <div className='p-2 relative'>
+            <ImageUpload
+                onSuccess={(image, fileName) => {
+                    const request = window.indexedDB.open('NuzlockeGenerator', 3);
+                    request.onerror = event => console.log(event);
+                    // request.onsuccess = event => console.log(event);
+                    request.onupgradeneeded = event => {
+                        // @ts-expect-error
+                        const db = event?.target?.result;
+
+                        const images = db.createObjectStore('images', {keyPath: 'id'});
+                        images.createIndex('image', 'image', {unique: false});
+                        images.createIndex('name', 'name', {unique: true});
+                        // const id = uuid();
+                        // console.log(id);
+
+                        // images.transaction.oncomplete = event => {
+                        //     const imageStore = db.transaction('images', 'readwrite').objectStore('images');
+                        //     imageStore.add({id, image: image});
+                        // };
+                    };
+                    request.onsuccess = event => {
+                        // @ts-expect-error
+                        const db = event?.target?.result;
+
+                        const id = uuid();
+                        console.log(id);
+
+                        const imageStore = db.transaction('images', 'readwrite').objectStore('images');
+                        imageStore.add({id, image: image, name: fileName});
+                        // addImage({id, name: fileName, image: image});
+                        setRefresh(id);
+                    };
+                }}
+            />
+        </div>
+        <div className='flex flex-wrap'>
+            {images.map(image => <div key={image.id} className='bg-white p-1 m-1 border border-gray w-40 h-40 relative flex justify-center align-center overflow-y-auto '>
+                <img className='object-contain' src={image.image} alt={image.name} title={image.name} />
+                <div className='absolute bottom-0 left-0 w-full flex p-1 bg-white'>
+                    <input
+                        readOnly
+                        className='w-24'
+                        value={image.name}
+                    />
+                    <Icon className='ml-auto cursor-pointer' onClick={deleteImage(image.id)} icon='trash' intent={Intent.DANGER} />
+                </div>
+            </div>)}
+        </div>
+    </div>;
+}
diff --git a/src/components/Shared/PokemonByFilter.tsx b/src/components/Shared/PokemonByFilter.tsx
index 92386e521..d8b60831d 100644
--- a/src/components/Shared/PokemonByFilter.tsx
+++ b/src/components/Shared/PokemonByFilter.tsx
@@ -7,7 +7,6 @@ import { connect } from 'react-redux';
 import { editPokemon } from 'actions';
 import { compose, filter, sort, map, curry } from 'ramda';
 
-
 export interface PokemonByFilterProps {
     team: Pokemon[];
     status: string;
@@ -18,20 +17,25 @@ export class PokemonByFilterBase extends React.PureComponent<PokemonByFilterProp
     public render() {
         const { team, status } = this.props;
 
-        return team.sort(sortPokes).filter(poke => poke.status === status).map(poke => <Tooltip
-            key={poke.id}
-            content={poke.nickname || poke.species}
-            position={Position.TOP}>
-            <PokemonIcon
-                id={poke.id}
-                species={poke.species}
-                forme={poke.forme}
-                shiny={poke.shiny}
-                gender={poke.gender}
-                customIcon={poke.customIcon}
-                hidden={poke.hidden}
-            />
-        </Tooltip>);
+        return team
+            .sort(sortPokes)
+            .filter((poke) => poke.status === status)
+            .map((poke) => (
+                <Tooltip
+                    key={poke.id}
+                    content={poke.nickname || poke.species}
+                    position={Position.TOP}>
+                    <PokemonIcon
+                        id={poke.id}
+                        species={poke.species}
+                        forme={poke.forme}
+                        shiny={poke.shiny}
+                        gender={poke.gender}
+                        customIcon={poke.customIcon}
+                        hidden={poke.hidden}
+                    />
+                </Tooltip>
+            ));
     }
 }
 
diff --git a/src/components/Shared/SuspenseBoundary.tsx b/src/components/Shared/SuspenseBoundary.tsx
new file mode 100644
index 000000000..cd31a10f0
--- /dev/null
+++ b/src/components/Shared/SuspenseBoundary.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ErrorBoundary } from 'components';
+
+const Skeleteon = <div style={{ width: '100%', height: '100px' }} className="bp3-skeleton"></div>;
+
+export function SuspenseBoundary(child: React.LazyExoticComponent<any>) {
+    return <ErrorBoundary>
+        <React.Suspense fallback={Skeleteon}>
+            {child}
+        </React.Suspense>
+    </ErrorBoundary>;
+}
diff --git a/src/components/StyleEditor/StyleEditor.tsx b/src/components/StyleEditor/StyleEditor.tsx
index 8c552d9eb..d79617732 100644
--- a/src/components/StyleEditor/StyleEditor.tsx
+++ b/src/components/StyleEditor/StyleEditor.tsx
@@ -21,6 +21,7 @@ import {
     Intent,
     Dialog,
     Classes,
+    Drawer,
 } from '@blueprintjs/core';
 import { State } from 'state';
 import { BaseEditor } from 'components/BaseEditor';
@@ -28,6 +29,7 @@ import { ColorEdit, rgbaOrHex } from 'components/Shared';
 import { cx } from 'emotion';
 import * as Styles from './styles';
 import { ThemeEditor } from 'components/ThemeEditor';
+const debounce = require('lodash.debounce');
 
 const editEvent = (e: any, props: StyleEditorProps, name?: keyof State['style'], game?: Game) => {
     const propName = name || e.target.name;
@@ -52,7 +54,10 @@ const editEvent = (e: any, props: StyleEditorProps, name?: keyof State['style'],
         props.editStyle({ accentColor: 'rgba(0, 0, 0, 0)' });
         props.editStyle({ movesPosition: 'horizontal' as OrientationType });
     }
-    if (propName === 'template' && e.target.value === 'Generations' || e.target.value === 'Generations Classic') {
+    if (
+        (propName === 'template' && e.target.value === 'Generations') ||
+        e.target.value === 'Generations Classic'
+    ) {
         props.editStyle({
             bgColor: game ? gameOfOriginToColor(game) : '',
         });
@@ -110,17 +115,55 @@ export const IconsNextToTeamPokemon = (props) => (
 
 export const smallItemOptions = ['outer glow', 'round', 'square', 'text'];
 
+export const TextAreaDebounced = ({
+    edit,
+    props,
+    name,
+}: {
+    edit: typeof editEvent;
+    props: StyleEditorProps;
+    name: keyof State['style'];
+}) => {
+    const [value, setValue] = React.useState('');
+
+    const delayedValue = React.useCallback(
+        debounce((e) => edit(e, props, name), 300),
+        [props.style[name]],
+    );
+
+    const onChange = (e) => {
+        e.persist();
+        setValue(e.target.value);
+        delayedValue(e);
+    };
+
+    React.useEffect(() => {
+        setValue(props.style[name] as string);
+    }, [props.style[name]]);
+
+    return (
+        <TextArea
+            large={true}
+            onChange={onChange}
+            className="custom-css-input bp3-fill"
+            value={value}
+            name={name}
+        />
+    );
+};
+
 export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEditorState> {
     public state = { isThemeEditorOpen: false, showChromePicker: false };
     private toggleThemeEditor = (e) =>
         this.setState({ isThemeEditorOpen: !this.state.isThemeEditorOpen });
 
     public render() {
-        const props = this.props;
-        const createStyleEdit = (isWidthHeight?: boolean) => cx(Styles.styleEdit, {
-            [Styles.styleEdit_dark]: props.style.editorDarkMode,
-            [Styles.widthHeightInputs]: isWidthHeight,
-        });
+        const props: StyleEditorProps = this.props;
+        const createStyleEdit = (isWidthHeight?: boolean) =>
+            cx(Styles.styleEdit, {
+                [Styles.styleEdit_dark]: props.style.editorDarkMode,
+                [Styles.widthHeightInputs]: isWidthHeight,
+            });
         const styleEdit = createStyleEdit(false);
         const teamImages = ['standard', 'sugimori', 'dream world', 'shuffle'];
         if (isLocal()) {
@@ -134,16 +177,17 @@ export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEdit
         return (
             <BaseEditor name="Style">
                 {feature.themeEditing ? (
-                    <Dialog
+                    <Drawer
                         isOpen={this.state.isThemeEditorOpen}
                         onClose={this.toggleThemeEditor}
+                        size={Drawer.SIZE_LARGE}
                         title="Theme Editor"
                         icon="style"
                         className={cx(Styles.dialog, {
                             [Classes.DARK]: props.style.editorDarkMode,
                         })}>
                         <ThemeEditor />
-                    </Dialog>
+                    </Drawer>
                 ) : null}
                 <div className={styleEdit}>
                     <label className={cx(Classes.LABEL, Classes.INLINE)}>Template</label>
@@ -162,8 +206,7 @@ export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEdit
                             onClick={this.toggleThemeEditor}
                             style={{ marginLeft: '.25rem' }}
                             intent={Intent.PRIMARY}
-                            minimal
-                        >
+                            minimal>
                             Edit Theme
                         </Button>
                     ) : null}
@@ -218,7 +261,9 @@ export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEdit
 
                 <div className={createStyleEdit(true)}>
                     <div>
-                        <label className={cx(Classes.LABEL, Classes.INLINE)}>Result Dimensions</label>
+                        <label className={cx(Classes.LABEL, Classes.INLINE)}>
+                            Result Dimensions
+                        </label>
                         <span style={{ fontSize: '80%', marginRight: '2px' }}>w</span>
                         <input
                             name="resultWidth"
@@ -267,7 +312,9 @@ export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEdit
 
                 <div className={createStyleEdit(true)}>
                     <div>
-                        <label className={cx(Classes.LABEL, Classes.INLINE)}>Trainer Dimensions</label>
+                        <label className={cx(Classes.LABEL, Classes.INLINE)}>
+                            Trainer Dimensions
+                        </label>
                         <span style={{ fontSize: '80%', marginRight: '2px' }}>w</span>
                         <input
                             name="trainerWidth"
@@ -470,7 +517,9 @@ export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEdit
                 </div>
 
                 <div className={styleEdit}>
-                    <label className={cx(Classes.LABEL, Classes.INLINE)}>Pokemon Per Line (Boxed)</label>
+                    <label className={cx(Classes.LABEL, Classes.INLINE)}>
+                        Pokemon Per Line (Boxed)
+                    </label>
                     <input
                         name="boxedPokemonPerLine"
                         className={cx(Classes.INPUT, 'small-input')}
@@ -759,16 +808,18 @@ export class StyleEditorBase extends React.Component<StyleEditorProps, StyleEdit
                 </div>
 
                 <div className="custom-css-input-wrapper">
-                    <label style={{ padding: '.5rem' }} className="bp3-label">
+                    <label style={{ padding: '.25rem' }} className="bp3-label">
                         Custom CSS {/*<a href=''>Check out Layout Guide</a>*/}
                     </label>
-                    <TextArea
-                        large={true}
-                        onChange={(e) => editEvent(e, props, 'customCSS')}
-                        className="custom-css-input bp3-fill"
-                        value={props.style.customCSS}
-                    />
+                    <TextAreaDebounced name="customCSS" props={props} edit={editEvent} />
                 </div>
+
+                {feature.resultv2 && <div className="custom-css-input-wrapper">
+                    <label style={{ padding: '.5rem', marginBottom: 0 }} className="bp3-label">
+                        Custom Team HTML {/*<a href=''>Check out Layout Guide</a>*/}
+                    </label>
+                    <TextAreaDebounced name="customTeamHTML" props={props} edit={editEvent} />
+                </div>}
             </BaseEditor>
         );
     }
diff --git a/src/components/StyleEditor/styles.ts b/src/components/StyleEditor/styles.ts
index cdbedd4b6..1ceb6f10f 100644
--- a/src/components/StyleEditor/styles.ts
+++ b/src/components/StyleEditor/styles.ts
@@ -53,7 +53,6 @@ export const styleEdit = css`
         margin-right: 0.25rem;
     }
     @media (max-width: 760px) {
-
         .bp3-label {
             margin: 2px;
             font-size: 80%;
diff --git a/src/components/TeamPokemon/Moves.tsx b/src/components/TeamPokemon/Moves.tsx
index 6fd2d6956..1f67e0f9b 100644
--- a/src/components/TeamPokemon/Moves.tsx
+++ b/src/components/TeamPokemon/Moves.tsx
@@ -12,6 +12,7 @@ import { Pokemon } from 'models';
 import { connect } from 'react-redux';
 import { State } from 'state';
 import { noop } from 'redux-saga/utils';
+import * as ReactDOMServer from 'react-dom/server';
 
 export interface MovesProps {
     generation: Generation;
@@ -20,9 +21,10 @@ export interface MovesProps {
     style: Styles;
     customMoveMap: State['customMoveMap'];
     customTypes: State['customTypes'];
+    stripClasses?: boolean;
 }
 
-export const Move = ({ index, style, type, move, customTypes }) =>
+export const Move = ({ index, style, type, move, customTypes, stripClasses = false }) =>
     move && (
         <div
             key={index}
@@ -38,9 +40,13 @@ export const Move = ({ index, style, type, move, customTypes }) =>
                         color: getContrastColor(typeToColor(type, customTypes)),
                     }
             }
-            className={`move move-${move.replace(/\s/g, '-')?.toLowerCase()} ${
-                move.length >= 10 ? 'long-text-move' : ''
-            }`}>
+            className={
+                stripClasses
+                    ? ''
+                    : `move move-${move.replace(/\s/g, '-')?.toLowerCase()} ${
+                        move.length >= 10 ? 'long-text-move' : ''
+                    }`
+            }>
             {move}
         </div>
     );
@@ -49,7 +55,7 @@ export const getMapMove = (moveMap, move) => moveMap?.find((m) => m.move === mov
 
 export class MovesBase extends React.Component<MovesProps> {
     private generateMoves(moves: MovesProps['moves']) {
-        const { style, customMoveMap, customTypes } = this.props;
+        const { style, customMoveMap, customTypes, stripClasses = false } = this.props;
 
         return (
             moves &&
@@ -73,6 +79,7 @@ export class MovesBase extends React.Component<MovesProps> {
                         style={style}
                         type={type}
                         move={move}
+                        stripClasses={stripClasses}
                         customTypes={customTypes}
                     />
                 );
@@ -80,12 +87,18 @@ export class MovesBase extends React.Component<MovesProps> {
         );
     }
 
+    public renderToString() {
+        const { moves } = this.props;
+        return this.generateMoves(moves)?.map((m) => ReactDOMServer.renderToString(m));
+    }
+
     public render() {
-        if (this.props.moves == null) return null;
-        return (
-            <div className={`pokemon-moves ${this.props.movesPosition}`}>
-                {this.generateMoves(this.props.moves)}
-            </div>
+        const { moves, movesPosition, stripClasses = false } = this.props;
+        if (moves == null) return null;
+        return stripClasses ? (
+            this.generateMoves(moves)
+        ) : (
+            <div className={`pokemon-moves ${movesPosition}`}>{this.generateMoves(moves)}</div>
         );
     }
 }
diff --git a/src/components/TeamPokemon/TeamPokemon.tsx b/src/components/TeamPokemon/TeamPokemon.tsx
index 3e2389f74..25b3ce21e 100644
--- a/src/components/TeamPokemon/TeamPokemon.tsx
+++ b/src/components/TeamPokemon/TeamPokemon.tsx
@@ -12,6 +12,8 @@ import {
     getContrastColor,
     formatBallText,
     TemplateName,
+    feature,
+    isLocal,
 } from 'utils';
 import { GenderElement, ErrorBoundary } from 'components/Shared';
 import { selectPokemon } from 'actions';
@@ -20,6 +22,7 @@ import { State } from 'state';
 import { css, cx } from 'emotion';
 import { PokemonIcon } from 'components/PokemonIcon';
 import { getMetLocationString } from './getMetLocationString';
+import { CheckpointsDisplay } from 'components/Result';
 
 export interface TeamPokemonInfoProps {
     generation: Generation;
@@ -27,11 +30,12 @@ export interface TeamPokemonInfoProps {
     pokemon: Pokemon;
     customTypes: State['customTypes'];
     linkedPokemon?: Pokemon;
+    game: State['game'];
 }
 
 export class TeamPokemonInfo extends React.PureComponent<TeamPokemonInfoProps> {
     public render() {
-        const { pokemon, style, customTypes, linkedPokemon } = this.props;
+        const { pokemon, style, customTypes, linkedPokemon, game } = this.props;
 
         if (!pokemon) {
             return null;
@@ -129,7 +133,22 @@ export class TeamPokemonInfo extends React.PureComponent<TeamPokemonInfoProps> {
                         {pokemon.ability ? (
                             <div className="pokemon-ability">{pokemon.ability}</div>
                         ) : null}
-                        {pokemon.notes && <div className="pokemon-notes">{pokemon.notes}</div>}
+                        {pokemon.notes && (
+                            <div
+                                className="pokemon-notes"
+                                dangerouslySetInnerHTML={{ __html: pokemon.notes }}
+                            />
+                        )}
+                        {pokemon.checkpoints && (
+                            <div className='flex flex-wrap' style={{maxWidth: '14rem'}}>
+                                <CheckpointsDisplay
+                                    className='pokemon-checkpoint'
+                                    game={game}
+                                    clearedCheckpoints={pokemon.checkpoints}
+                                    style={style}
+                                />
+                            </div>
+                        )}
                         {style.displayExtraData && pokemon.extraData ? (
                             <div
                                 style={{
@@ -384,44 +403,88 @@ export class TeamPokemonBase extends React.Component<TeamPokemonBaseProps> {
             `,
         };
 
+        const EMMA_MODE = isLocal();
+
         return (
             <div className="pokemon-container" {...data}>
                 {style.template === 'Compact with Icons' && (
                     <PokemonIcon className="pokemon-icon-main" {...poke} />
                 )}
-                <div
-                    role="presentation"
-                    onClick={(e) => this.props.selectPokemon(poke.id)}
-                    className={`${this.props.style.imageStyle} pokemon-image-wrapper`}
-                    style={{
-                        cursor: 'pointer',
-                        background: this.props.style.teamPokemonBorder
-                            ? getBackgroundGradient(
-                                poke.types != null ? poke.types[0] : 'Normal',
-                                poke.types != null ? poke.types[1] : 'Normal',
-                                customTypes,
-                            )
-                            : 'transparent',
-                    }}>
+                {EMMA_MODE ? (
+                    <>
+                        <div
+                            role="presentation"
+                            onClick={(e) => this.props.selectPokemon(poke.id)}
+                            className={`${this.props.style.imageStyle} pokemon-image-wrapper`}
+                            style={{
+                                cursor: 'pointer',
+                                background: this.props.style.teamPokemonBorder
+                                    ? getBackgroundGradient(
+                                        poke.types != null ? poke.types[0] : 'Normal',
+                                        poke.types != null ? poke.types[1] : 'Normal',
+                                        customTypes,
+                                    )
+                                    : 'transparent',
+                            }}
+                        />
+                        <div
+                            style={{
+                                backgroundImage: getPokemonImage({
+                                    customImage: poke.customImage,
+                                    forme: poke.forme as any,
+                                    species: poke.species,
+                                    shiny: poke.shiny,
+                                    style: this.props.style,
+                                    name: this.props.game.name,
+                                    editor: this.props.editor,
+                                    gender: poke.gender,
+                                }),
+                                ...(spriteStyle as React.CSSProperties),
+                            }}
+                            className={`pokemon-image ${(
+                                poke.species || 'missingno'
+                            ).toLowerCase()} ${
+                                this.props.style.imageStyle === 'round' ? 'round' : 'square'
+                            }`}
+                        />
+                    </>
+                ) : (
                     <div
+                        role="presentation"
+                        onClick={(e) => this.props.selectPokemon(poke.id)}
+                        className={`${this.props.style.imageStyle} pokemon-image-wrapper`}
                         style={{
-                            backgroundImage: getPokemonImage({
-                                customImage: poke.customImage,
-                                forme: poke.forme as any,
-                                species: poke.species,
-                                shiny: poke.shiny,
-                                style: this.props.style,
-                                name: this.props.game.name,
-                                editor: this.props.editor,
-                                gender: poke.gender,
-                            }),
-                            ...(spriteStyle as React.CSSProperties),
-                        }}
-                        className={`pokemon-image ${(poke.species || 'missingno').toLowerCase()} ${
-                            this.props.style.imageStyle === 'round' ? 'round' : 'square'
-                        }`}
-                    />
-                </div>
+                            cursor: 'pointer',
+                            background: this.props.style.teamPokemonBorder
+                                ? getBackgroundGradient(
+                                    poke.types != null ? poke.types[0] : 'Normal',
+                                    poke.types != null ? poke.types[1] : 'Normal',
+                                    customTypes,
+                                )
+                                : 'transparent',
+                        }}>
+                        <div
+                            style={{
+                                backgroundImage: getPokemonImage({
+                                    customImage: poke.customImage,
+                                    forme: poke.forme as any,
+                                    species: poke.species,
+                                    shiny: poke.shiny,
+                                    style: this.props.style,
+                                    name: this.props.game.name,
+                                    editor: this.props.editor,
+                                    gender: poke.gender,
+                                }),
+                                ...(spriteStyle as React.CSSProperties),
+                            }}
+                            className={`pokemon-image ${(
+                                poke.species || 'missingno'
+                            ).toLowerCase()} ${
+                                this.props.style.imageStyle === 'round' ? 'round' : 'square'
+                            }`}
+                        />
+                    </div>
+                )}
                 {poke.mvp && (
                     <div
                         className={cx(
@@ -504,6 +567,7 @@ export class TeamPokemonBase extends React.Component<TeamPokemonBaseProps> {
                         pokemon={pokemon}
                         customTypes={customTypes}
                         linkedPokemon={linkedPokemon}
+                        game={game}
                     />
                 )}
             </div>
diff --git a/src/components/TeamPokemon/TeamPokemon2.tsx b/src/components/TeamPokemon/TeamPokemon2.tsx
index 328550c37..94fff87f4 100644
--- a/src/components/TeamPokemon/TeamPokemon2.tsx
+++ b/src/components/TeamPokemon/TeamPokemon2.tsx
@@ -1,59 +1,147 @@
 import { Pokemon } from 'models';
 import * as React from 'react';
+import * as ReactDOMServer from 'react-dom/server';
 import { useSelector } from 'react-redux';
 import { State } from 'state';
-import { getPokemonImage } from 'utils';
+import { getGameGeneration, getPokemonImage, stripURLCSS, typeToColor } from 'utils';
 import { css, cx } from 'emotion';
-
+import * as Mustache from 'mustache';
+import { ErrorBoundary, PokemonIcon, PokemonIconPlain } from 'components';
+import { uniq } from 'ramda';
+import { Moves, MovesBase } from './Moves';
+import { customMoveMap } from 'reducers/customMoveMap';
+import { customTypes } from 'reducers/customTypes';
 
 export interface TeamPokemonProps {
     pokemon: Pokemon;
     options: Partial<TeamPokemonOptions>;
     customCSS?: string;
+    customHTML?: string;
 }
 
 export interface TeamPokemonOptions {
     height: string;
     width: string;
-
 }
 
-export const teamPokemon = (options: TeamPokemonProps['options']) => css`
-
-
-`;
+export const teamPokemon = (options: TeamPokemonProps['options']) => css``;
 
 export const teamPokemonImage = (options: TeamPokemonProps['options']) => css`
     height: ${options.height ?? '8rem'};
     width: ${options.width ?? '8rem'};
 `;
 
-export function TeamPokemon ({pokemon, options}: TeamPokemonProps) {
-    const style = useSelector<State, State['style']>(state => state.style);
-    const name = useSelector<State, State['game']['name']>(state => state.game.name);
-    const editor = useSelector<State, State['editor']>(state => state.editor);
+export function TeamPokemon({ pokemon, options, customCSS, customHTML }: TeamPokemonProps) {
+    const style = useSelector<State, State['style']>((state) => state.style);
+    const name = useSelector<State, State['game']['name']>((state) => state.game.name);
+    const editor = useSelector<State, State['editor']>((state) => state.editor);
+    const customMoveMap = useSelector<State, State['customMoveMap']>(
+        (state) => state.customMoveMap,
+    );
+    const customTypes = useSelector<State, State['customTypes']>((state) => state.customTypes);
+
+    const teamHTML = style.customTeamHTML;
 
     const classes = {
         teamPokemon: teamPokemon(options),
         teamPokemonImage: teamPokemonImage(options),
     };
 
+    const pokemonImage = stripURLCSS(
+        getPokemonImage({
+            customImage: pokemon.customImage,
+            forme: pokemon.forme as any,
+            species: pokemon.species,
+            shiny: pokemon.shiny,
+            style: style,
+            name: name,
+            editor: editor,
+            gender: pokemon.gender,
+        }),
+    );
+
+    const pokemonIcon = (
+        <PokemonIconPlain
+            selectedId={''}
+            onClick={() => {}}
+            imageStyle={{}}
+            species={pokemon?.species}
+            id={pokemon?.id}
+            style={{ cursor: 'pointer' }}
+            forme={pokemon?.forme}
+            shiny={pokemon?.shiny}
+            gender={pokemon?.gender}
+            customIcon={pokemon?.customIcon}
+        />
+    );
+
+    const view = {
+        ...pokemon,
+        typesFiltered: uniq(pokemon.types ?? []),
+        image: pokemonImage,
+        type1: pokemon?.types?.[0],
+        type2: pokemon?.types?.[1],
+        type1Color: typeToColor(pokemon?.types?.[0] ?? 'Normal'),
+        type2Color: typeToColor(pokemon?.types?.[0] ?? 'Normal'),
+        icon: ReactDOMServer.renderToString(pokemonIcon),
+        notes: pokemon.notes ?? '',
+        movesColored: ReactDOMServer.renderToString(
+            <MovesBase
+                style={style}
+                customMoveMap={customMoveMap}
+                customTypes={customTypes}
+                generation={getGameGeneration(name)}
+                moves={pokemon.moves}
+                movesPosition={style.movesPosition}
+                stripClasses
+            />,
+        ),
+    };
+
+    console.log(view.icon);
+
+    const CSS = (
+        <style>{`
+        ${customCSS}
+    `}</style>
+    );
+
+    const teamViewHTML = customHTML ?? teamHTML;
+    // mustache will sanitize the html from renderToString so instead we do it ourselves
+    const html = teamViewHTML
+        .replace(/\{{icon}}/g, view.icon)
+        .replace(/\{{notes}}/g, view.notes)
+        .replace(/\{{movesColored}}/g, view.movesColored);
+    if (teamViewHTML) {
+        return (
+            <ErrorBoundary>
+                {CSS}
+                <div dangerouslySetInnerHTML={{ __html: Mustache.render(html, view) }} />
+            </ErrorBoundary>
+        );
+    }
 
-    return <div>
-        <div className={classes.teamPokemonImage} style={{
-            backgroundSize: 'cover',
-            backgroundRepeat: 'no-repeat',
-            backgroundImage: getPokemonImage({
-                customImage: pokemon.customImage,
-                forme: pokemon.forme as any,
-                species: pokemon.species,
-                shiny: pokemon.shiny,
-                style: style,
-                name: name,
-                editor: editor,
-                gender: pokemon.gender,
-            }),
-        }}>
-        </div>
-    </div>;
+    return (
+        <>
+            {CSS}
+            <div data-testid="team-pokemon" className={classes.teamPokemon}>
+                <div
+                    className={classes.teamPokemonImage}
+                    style={{
+                        backgroundSize: 'cover',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundImage: getPokemonImage({
+                            customImage: pokemon.customImage,
+                            forme: pokemon.forme as any,
+                            species: pokemon.species,
+                            shiny: pokemon.shiny,
+                            style: style,
+                            name: name,
+                            editor: editor,
+                            gender: pokemon.gender,
+                        }),
+                    }}></div>
+            </div>
+        </>
+    );
 }
diff --git a/src/components/TeamPokemon/__tests__/Move.tsx b/src/components/TeamPokemon/__tests__/Move.tsx
index 7b1166b89..6c7b2672b 100644
--- a/src/components/TeamPokemon/__tests__/Move.tsx
+++ b/src/components/TeamPokemon/__tests__/Move.tsx
@@ -7,15 +7,18 @@ import { Types, styleDefaults, typeToColor } from 'utils';
 describe(Move.name, () => {
     it('renders its contents', () => {
         const move = 'Bug Bite';
-        const {container} = render(<Move
-            index={0}
-            type={Types.Bug}
-            move={move}
-            customTypes={[]}
-            style={styleDefaults}
-        />);
+        const { container } = render(
+            <Move
+                index={0}
+                type={Types.Bug}
+                move={move}
+                customTypes={[]}
+                style={styleDefaults}
+                stripClasses={false}
+            />,
+        );
 
-        const {outerHTML} = container;
+        const { outerHTML } = container;
         expect(outerHTML).toContain(move);
         expect(outerHTML).toContain('move-bug-bite');
     });
diff --git a/src/components/TeamPokemon/__tests__/TeamPokemon2.test.tsx b/src/components/TeamPokemon/__tests__/TeamPokemon2.test.tsx
new file mode 100644
index 000000000..18b761a87
--- /dev/null
+++ b/src/components/TeamPokemon/__tests__/TeamPokemon2.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from 'utils/testUtils';
+import { Pokemon } from 'models';
+import * as React from 'react';
+import { Types } from 'utils';
+import { TeamPokemon, TeamPokemonProps } from '../TeamPokemon2';
+
+describe(TeamPokemon.name, () => {
+    const Pikachu: Pokemon = {
+        id: 'test',
+        species: 'Pikachu',
+        nickname: 'Sparky',
+        types: [Types.Electric, Types.Electric],
+    };
+    const baseProps: TeamPokemonProps = {
+        pokemon: Pikachu,
+        options: {
+            height: '8rem',
+        },
+    };
+
+    it('renders [no customs]', () => {
+        render(<TeamPokemon {...baseProps} />);
+        expect(screen.getByTestId('team-pokemon')).toBeTruthy();
+    });
+
+    it('renders [custom HTML]', () => {
+        const props: TeamPokemonProps = {
+            ...baseProps,
+            customHTML: '<div data-testid="species-name">{{species}}</div>',
+        };
+
+        render(<TeamPokemon {...props} />);
+        expect(screen.getByTestId('species-name').textContent).toContain('Pikachu');
+    });
+});
diff --git a/src/components/ThemeEditor/CSSUnitInput.tsx b/src/components/ThemeEditor/CSSUnitInput.tsx
index 635716a36..56816cce4 100644
--- a/src/components/ThemeEditor/CSSUnitInput.tsx
+++ b/src/components/ThemeEditor/CSSUnitInput.tsx
@@ -22,25 +22,13 @@ export const splitValue = (value: string) => {
     const value2 = value.split(/\d/g);
     return {
         num: first(value1),
-        unit: last(value2)
+        unit: last(value2),
     };
 };
 
 export class CSSUnitInput extends React.Component<CSSUnitInputProps, CSSUnitInputState> {
     public defaultProps = {
-        allowedUnits: [
-            'px',
-            'cm',
-            'mm',
-            'in',
-            'pt',
-            'pc',
-            'em',
-            'rem',
-            'vw',
-            'vh',
-            '%',
-        ]
+        allowedUnits: ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'em', 'rem', 'vw', 'vh', '%'],
     };
 
     public static getDerivedStateFromProps(props) {
@@ -63,9 +51,11 @@ export class CSSUnitInput extends React.Component<CSSUnitInputProps, CSSUnitInpu
 
     private onChange = () => {
         const { chosenUnit, chosenNumber } = this.state;
-        this.props.onChange({target: {
-            value: `${chosenNumber}${chosenUnit}`
-        }});
+        this.props.onChange({
+            target: {
+                value: `${chosenNumber}${chosenUnit}`,
+            },
+        });
     };
 
     public render() {
@@ -73,38 +63,30 @@ export class CSSUnitInput extends React.Component<CSSUnitInputProps, CSSUnitInpu
         const { chosenUnit, chosenNumber } = this.state;
         const { unit, num } = splitValue(value);
 
-        const units = [
-            'px',
-            'cm',
-            'mm',
-            'in',
-            'pt',
-            'pc',
-            'em',
-            'rem',
-            'vw',
-            'vh',
-            '%',
-        ];
+        const units = ['px', 'cm', 'mm', 'in', 'pt', 'pc', 'em', 'rem', 'vw', 'vh', '%'];
 
         console.log(unit, num);
 
-        return <div className={cx(css.componentOption, css.cssUnit)}>
-            <label className={Classes.LABEL}>{name}</label>
-            <input
-                className={cx(Classes.INPUT, css.unitInput)}
-                name={name}
-                onChange={this.setNumber}
-                type='number'
-                value={chosenNumber}
-            />
-            <div className={cx(Classes.SELECT, css.unitSelect)}>
-                <select onChange={this.setUnit} value={chosenUnit}>
-                    {
-                        units?.map(u => <option key={u} value={u}>{u}</option>)
-                    }
-                </select>
+        return (
+            <div className={cx(css.componentOption, css.cssUnit)}>
+                <label className={Classes.LABEL}>{name}</label>
+                <input
+                    className={cx(Classes.INPUT, css.unitInput)}
+                    name={name}
+                    onChange={this.setNumber}
+                    type="number"
+                    value={chosenNumber}
+                />
+                <div className={cx(Classes.SELECT, css.unitSelect)}>
+                    <select onChange={this.setUnit} value={chosenUnit}>
+                        {units?.map((u) => (
+                            <option key={u} value={u}>
+                                {u}
+                            </option>
+                        ))}
+                    </select>
+                </div>
             </div>
-        </div>;
+        );
     }
 }
diff --git a/src/components/ThemeEditor/ThemeEditor.tsx b/src/components/ThemeEditor/ThemeEditor.tsx
index 349cccbe5..d0c12230b 100644
--- a/src/components/ThemeEditor/ThemeEditor.tsx
+++ b/src/components/ThemeEditor/ThemeEditor.tsx
@@ -6,7 +6,18 @@ import { reducers } from 'reducers';
 import * as css from './styles';
 import { Pokemon } from 'models';
 import { Styles, generateEmptyPokemon, listOfThemes, classWithDarkTheme, Forme } from 'utils';
-import { Button, ITreeNode, Tree, Classes, Menu, MenuItem, Icon, Switch, TextArea, Intent } from '@blueprintjs/core';
+import {
+    Button,
+    ITreeNode,
+    Tree,
+    Classes,
+    Menu,
+    MenuItem,
+    Icon,
+    Switch,
+    TextArea,
+    Intent,
+} from '@blueprintjs/core';
 import { BoxedPokemon } from '../BoxedPokemon';
 import { ColorEdit, ThemeSelect } from 'components/Shared';
 import { ChampsPokemon, PokemonIcon, ErrorBoundary } from 'components';
@@ -18,7 +29,7 @@ import { ChampsPokemonView } from 'components/ChampsPokemon/ChampsPokemonCollect
 import * as Loadable from 'react-loadable';
 import { LayoutDisplay, LayoutDirection, LayoutAlignment, LayoutSpacing } from 'components/Layout';
 import { TeamPokemon } from 'components/TeamPokemon/TeamPokemon2';
-
+import { render } from 'react-dom';
 
 const modelPokemon: Pokemon = {
     ...generateEmptyPokemon(),
@@ -53,7 +64,7 @@ const modelPokemonC: Pokemon = {
     met: 'Hatched on Route 8',
     metLevel: 1,
     gameOfOrigin: 'Sword',
-    moves: ['Icicle Crash', 'Flare Blitz', 'U-turn', 'Earthquake']
+    moves: ['Icicle Crash', 'Flare Blitz', 'U-turn', 'Earthquake'],
 };
 
 const modelPokemonD: Pokemon = {
@@ -80,7 +91,7 @@ const modelPokemonF: Pokemon = {
     shiny: true,
     level: 90,
     gameOfOrigin: 'Emerald',
-    moves: ['Dragon Ascent', 'Fire Blast', 'Dragon Dance', 'Outrage']
+    moves: ['Dragon Ascent', 'Fire Blast', 'Dragon Dance', 'Outrage'],
 };
 
 const team: Pokemon[] = [
@@ -92,16 +103,14 @@ const team: Pokemon[] = [
     modelPokemonF,
 ];
 
-
 type ComponentNode = ITreeNode & {
-    component: any,
-    import?: string,
-    options?: { props: any, baseProps?: any },
-    childNodes?: ComponentNode[]
+    component: any;
+    import?: string;
+    options?: { props: any; baseProps?: any };
+    childNodes?: ComponentNode[];
 };
 
 const componentTree: ComponentNode[] = [
-
     {
         id: 8,
         icon: 'style',
@@ -115,13 +124,13 @@ const componentTree: ComponentNode[] = [
                     width: '4rem',
                 },
                 customCSS: '',
+                customHTML: undefined,
             },
             baseProps: {
                 pokemon: modelPokemon,
-            }
+            },
         },
-        childNodes: [
-        ]
+        childNodes: [],
     },
     {
         id: 91,
@@ -130,13 +139,11 @@ const componentTree: ComponentNode[] = [
         label: 'Boxed Pokemon',
         component: BoxedPokemon,
         options: {
-            props: {
-
-            },
+            props: {},
             baseProps: {
                 pokemon: modelPokemon,
-            }
-        }
+            },
+        },
     },
     {
         id: 10,
@@ -150,10 +157,9 @@ const componentTree: ComponentNode[] = [
             },
             baseProps: {
                 ...modelPokemon,
-            }
+            },
         },
-        childNodes: [
-        ],
+        childNodes: [],
     },
     {
         id: 9,
@@ -170,7 +176,7 @@ const componentTree: ComponentNode[] = [
             },
             baseProps: {
                 pokemon: team,
-            }
+            },
         },
         childNodes: [
             {
@@ -190,10 +196,10 @@ const componentTree: ComponentNode[] = [
                     },
                     baseProps: {
                         ...modelPokemon,
-                    }
+                    },
                 },
             },
-        ]
+        ],
     },
 ];
 
@@ -207,17 +213,27 @@ export interface ThemEditorState {
 
 export const NumericValue = ({ name, value, onChange }) => (
     <div className={cx(css.componentOption)}>
-        <label className={Classes.LABEL}>{name}</label>
-        <input className={Classes.INPUT} name={name} onChange={onChange} type='number' value={value} />
+        <label style={{ marginBottom: 0 }} className={Classes.LABEL}>
+            {name}
+        </label>
+        <input
+            className={Classes.INPUT}
+            name={name}
+            onChange={onChange}
+            type="number"
+            value={value}
+        />
     </div>
 );
 
 export const TextInput = ({ name, value, onChange }) => (
     <div className={cx(css.componentOption)}>
-        <label className={Classes.LABEL}>{name}</label>
+        <label style={{ marginBottom: 0 }} className={Classes.LABEL}>
+            {name}
+        </label>
         <input
             className={Classes.INPUT}
-            type='text'
+            type="text"
             value={value}
             name={name}
             onChange={onChange}
@@ -225,14 +241,15 @@ export const TextInput = ({ name, value, onChange }) => (
     </div>
 );
 
-export const WrapWithLabel = ({name, children}) => (
+export const WrapWithLabel = ({ name, children }) => (
     <div className={cx(css.componentOption)}>
-        <label className={Classes.LABEL}>{name}</label>
+        <label style={{ marginBottom: 0 }} className={Classes.LABEL}>
+            {name}
+        </label>
         {children}
     </div>
 );
 
-
 export class ThemeEditorBase extends React.Component<ThemeEditorProps, ThemEditorState> {
     public state = { componentTree: [] };
 
@@ -275,7 +292,12 @@ export class ThemeEditorBase extends React.Component<ThemeEditorProps, ThemEdito
 
     private getComponent = (id, currentNode) => {
         console.log(currentNode);
-        return <currentNode.component {...currentNode.options.baseProps} {...currentNode.options.props} />;
+        return (
+            <currentNode.component
+                {...currentNode.options.baseProps}
+                {...currentNode.options.props}
+            />
+        );
         // }
 
         // if (id === 9) {
@@ -308,6 +330,94 @@ export class ThemeEditorBase extends React.Component<ThemeEditorProps, ThemEdito
         }
     }
 
+    private renderOptions(props) {
+        const currentNode: ComponentNode =
+            this.getCurrentNode() == null ? null : this.getCurrentNode();
+
+        const modify = (key, value) => (props[key] = value);
+
+        return Object.keys(props).map((propKey, idx) => {
+            if (!currentNode.options) {
+                return null;
+            }
+
+            if (typeof props[propKey] === 'object') {
+                return this.renderOptions(props[propKey]);
+            }
+
+            const type = typeof props[propKey];
+            const value = props[propKey];
+
+            if (propKey === 'customCSS' || propKey === 'customHTML') {
+                return (
+                    <WrapWithLabel name={propKey}>
+                        <TextArea
+                            value={value}
+                            name={propKey}
+                            onChange={(e) => {
+                                modify(propKey, e.target.value);
+                                this.setState(this.state);
+                            }}
+                        />
+                    </WrapWithLabel>
+                );
+            }
+
+            if (propKey === 'padding' || propKey === 'margin') {
+                return (
+                    <CSSUnitInput
+                        name={propKey}
+                        value={value}
+                        onChange={(e) => {
+                            modify(propKey, e.target.value);
+                            this.setState(this.state);
+                        }}
+                    />
+                );
+            }
+
+            if (type === 'boolean') {
+                return (
+                    <WrapWithLabel name={propKey}>
+                        <Switch
+                            onChange={(e: any) => {
+                                modify(propKey, e.target.checked);
+                                this.setState(this.state);
+                            }}
+                            key={idx}
+                            checked={value}
+                        />
+                    </WrapWithLabel>
+                );
+            }
+            if (type === 'number') {
+                return (
+                    <NumericValue
+                        name={propKey}
+                        value={value}
+                        onChange={(e) => {
+                            modify(propKey, e.target.value);
+                            this.setState(this.state);
+                        }}
+                    />
+                );
+            }
+            if (type === 'string') {
+                return (
+                    <TextInput
+                        value={value}
+                        name={propKey}
+                        onChange={(e) => {
+                            modify(propKey, e.target.value);
+                            this.setState(this.state);
+                        }}
+                    />
+                );
+            }
+            return JSON.stringify({ type, value });
+        });
+    }
+
     public render() {
         const currentNode: ComponentNode =
             this.getCurrentNode() == null ? null : this.getCurrentNode();
@@ -315,147 +425,82 @@ export class ThemeEditorBase extends React.Component<ThemeEditorProps, ThemEdito
             const { label } = currentNode;
         }
 
-        const modify = (key, value) => currentNode!.options!.props[key] = value;
-
-        return <>
-            <div
-                className={cx(
-                    classWithDarkTheme(css, 'header', this.props.style.editorDarkMode),
-                )}>
-                <div>
-                    <strong>Current Theme:</strong>{' '}
-                    <ThemeSelect theme={this.props.style.template} />
-                </div>
-                <div>
-                    <Button
-                        style={{margin: '4px'}}
-                        icon='download'
-                        intent={Intent.SUCCESS}
-                    >Export To theme.json</Button>
-                    <Button
-                        style={{margin: '4px'}}
-                        icon='upload'
-                    >Import from theme.json</Button>
+        const modify = (key, value) => (currentNode!.options!.props[key] = value);
+
+        return (
+            <>
+                <div
+                    className={cx(
+                        classWithDarkTheme(css, 'header', this.props.style.editorDarkMode),
+                    )}>
+                    <div>
+                        <strong>Current Theme:</strong>{' '}
+                        <ThemeSelect theme={this.props.style.template} />
+                    </div>
+                    <div>
+                        <Button style={{ margin: '4px' }} icon="download" intent={Intent.SUCCESS}>
+                            Export To theme.json
+                        </Button>
+                        <Button style={{ margin: '4px' }} icon="upload">
+                            Import from theme.json
+                        </Button>
+                    </div>
                 </div>
-            </div>
-            <div className={cx(css.main)}>
-                <div className={cx(css.sidebar)}>
-                    <label style={{ display: 'flex' }} className={Classes.LABEL}>
-                        <input
-                            style={{ margin: '4px', width: 'calc(80% - 8px)' }}
-                            className={Classes.INPUT}
-                            type="text"
-                            placeholder="Filter..."
-                        />
-                        <Button
-                            style={{ width: '20%' }}
-                            icon="search"
-                            className={Classes.MINIMAL}
+                <div className={cx(css.main)}>
+                    <div className={cx(css.sidebar)}>
+                        <label style={{ display: 'flex' }} className={Classes.LABEL}>
+                            <input
+                                style={{ margin: '4px', width: 'calc(80% - 8px)' }}
+                                className={Classes.INPUT}
+                                type="text"
+                                placeholder="Filter..."
+                            />
+                            <Button
+                                style={{ width: '20%' }}
+                                icon="search"
+                                className={Classes.MINIMAL}
+                            />
+                        </label>
+                        <Tree
+                            contents={componentTree}
+                            onNodeClick={this.onNodeClick}
+                            onNodeCollapse={this.onNodeCollapse}
+                            onNodeExpand={this.onNodeExpand}
                         />
-                    </label>
-                    <Tree
-                        contents={componentTree}
-                        onNodeClick={this.onNodeClick}
-                        onNodeCollapse={this.onNodeCollapse}
-                        onNodeExpand={this.onNodeExpand}
-                    />
-                </div>
-                <div className={cx(css.componentView)}>
-                    <ErrorBoundary errorMessage={
-                        JSON.stringify(currentNode)
-                    }>
-                        <div
-                            className={cx(
-                                this.props.style.template.toLowerCase().replace(/\s/g, '-'),
-                                classWithDarkTheme(
-                                    css,
-                                    'componentResult',
-                                    this.props.style.editorDarkMode,
-                                ),
-                            )}>
-                            {currentNode &&
-                                currentNode.options &&
-                                this.getComponent(currentNode.id, currentNode)}
-                            {!currentNode && <Icon icon="grid" />}
+                    </div>
+                    <div className={cx(css.componentView)}>
+                        <ErrorBoundary errorMessage={JSON.stringify(currentNode)}>
+                            <div
+                                className={cx(
+                                    this.props.style.template.toLowerCase().replace(/\s/g, '-'),
+                                    classWithDarkTheme(
+                                        css,
+                                        'componentResult',
+                                        this.props.style.editorDarkMode,
+                                    ),
+                                )}>
+                                {currentNode &&
+                                    currentNode.options &&
+                                    this.getComponent(currentNode.id, currentNode)}
+                                {!currentNode && <Icon icon="grid" />}
+                            </div>
+                        </ErrorBoundary>
+                        <div className={cx(css.componentOptions)}>
+                            <strong className={css.componentOptionsLabel}>
+                                {this.getCurrentNode() == null ? '' : this.getCurrentNode().label}{' '}
+                                Options
+                            </strong>
+
+                            <Menu>
+                                {currentNode &&
+                                    currentNode.options &&
+                                    this.renderOptions(currentNode?.options?.props)}
+                            </Menu>
                         </div>
-                    </ErrorBoundary>
-                    <div className={cx(css.componentOptions)}>
-                        <strong className={css.componentOptionsLabel}>
-                            {this.getCurrentNode() == null ? '' : this.getCurrentNode().label}{' '}
-                            Options
-                        </strong>
-
-                        <Menu>
-                            {currentNode &&
-                                currentNode.options &&
-                                Object.keys(currentNode.options.props).map((propKey, idx) => {
-                                    if (!currentNode.options) {
-                                        return null;
-                                    }
-                                    const type = typeof currentNode.options.props[propKey];
-                                    const value = currentNode.options.props[propKey];
-
-                                    if (propKey === 'customCSS') {
-                                        return <WrapWithLabel name={propKey}>
-                                            <TextArea
-                                                value={value}
-                                                name={propKey}
-                                                onChange={e => {
-                                                    modify(propKey, e.target.value);
-                                                    this.setState(this.state);
-                                                }}
-                                            />
-                                        </WrapWithLabel>;
-                                    }
-
-                                    if (propKey === 'padding' || propKey === 'margin') {
-                                        return <CSSUnitInput
-                                            name={propKey}
-                                            value={value}
-                                            onChange={e => {
-                                                modify(propKey, e.target.value);
-                                                this.setState(this.state);
-                                            }}
-                                        />;
-                                    }
-
-                                    if (type === 'boolean') {
-                                        return (
-                                            <WrapWithLabel name={propKey}>
-                                                <Switch onChange={(e: any) => {
-                                                    modify(propKey, e.target.checked);
-                                                    this.setState(this.state);
-                                                }} key={idx} checked={value} />
-                                            </WrapWithLabel>
-                                        );
-                                    }
-                                    if (type === 'number') {
-                                        return <NumericValue
-                                            name={propKey}
-                                            value={value}
-                                            onChange={e => {
-                                                modify(propKey, e.target.value);
-                                                this.setState(this.state);
-                                            }}
-                                        />;
-                                    }
-                                    if (type === 'string') {
-                                        return <TextInput
-                                            value={value}
-                                            name={propKey}
-                                            onChange={e => {
-                                                modify(propKey, e.target.value);
-                                                this.setState(this.state);
-                                            }}
-                                        />;
-                                    }
-                                    return JSON.stringify({type, value});
-                                })}
-                        </Menu>
                     </div>
                 </div>
-            </div>
-        </>;
+            </>
+        );
     }
 }
 
diff --git a/src/components/ThemeEditor/styles.ts b/src/components/ThemeEditor/styles.ts
index c01f9c825..ddab57094 100644
--- a/src/components/ThemeEditor/styles.ts
+++ b/src/components/ThemeEditor/styles.ts
@@ -80,21 +80,19 @@ export const componentOption = css`
 `;
 
 export const componentOptionsLabel = css`
-    margin: .5rem 0.25rem;
+    margin: 0.5rem 0.25rem;
     font-weight: light;
     font-size: 120%;
     display: block;
 `;
 
-export const cssUnit = css`
-
-`;
+export const cssUnit = css``;
 
 export const unitInput = css`
     width: 6rem;
 `;
 
 export const unitSelect = css`
-    margin-right: .25rem;
+    margin-right: 0.25rem;
     width: 4rem;
 `;
diff --git a/src/components/TrainerEditor/BadgeInput.tsx b/src/components/TrainerEditor/BadgeInput.tsx
index 9a093cd76..76e9a0cbf 100644
--- a/src/components/TrainerEditor/BadgeInput.tsx
+++ b/src/components/TrainerEditor/BadgeInput.tsx
@@ -1,131 +1,127 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { Styles } from 'utils';
 import { TrainerInfoEditField } from 'components/TrainerEditor/TrainerInfoEditField';
 import { editTrainer } from 'actions';
-import { Trainer } from 'models';
 
 import { Popover, Menu, Button, Position, Checkbox, Dialog, Classes } from '@blueprintjs/core';
 import { CheckpointsEditor } from './CheckpointsEditor';
 import { cx } from 'emotion';
 import { State } from 'state';
 import { Checkpoints } from 'reducers/checkpoints';
+import * as Styles from './style';
 
 export interface BadgeInputProps {
-    trainer: Trainer;
-    checkpoints: Checkpoints;
-    game: any;
-    editTrainer: any;
-    style: Styles;
-    enableCheckpointsEditor: boolean;
+    checkpointsCleared?: Checkpoints;
+    onChange?: (checkpoint: Checkpoints) => void;
 }
 
-export interface BadgeInputState {
-    isOpen: boolean;
+export interface CheckpointsInputListProps {
+    onChange: (checkpoints: Checkpoints) => void;
+    checkpointsObtained: Checkpoints;
+    toggle?: () => void;
+    buttonText?: string;
 }
 
-export class BadgeInputBase extends React.Component<BadgeInputProps, BadgeInputState> {
-    public constructor(props: BadgeInputProps) {
-        super(props);
-        this.state = {
-            isOpen: false,
-        };
-    }
+export function CheckpointsInputList({
+    onChange,
+    checkpointsObtained,
+    toggle,
+    buttonText,
+}: CheckpointsInputListProps) {
+    const checkpoints = useSelector<State, State['checkpoints']>(state => state?.checkpoints);
 
-    private toggleCheckpointsEditor = (e?: React.SyntheticEvent<HTMLElement>) =>
-        this.setState({ isOpen: !this.state.isOpen });
-
-    public render() {
-        const trainerBadges = this.props.trainer.badges ? this.props.trainer.badges : [];
-        return (
-            <>
-                {this.props.enableCheckpointsEditor ? (
-                    <Dialog
-                        isOpen={this.state.isOpen}
-                        onClose={this.toggleCheckpointsEditor}
-                        className={cx(Classes.DIALOG, {
-                            [Classes.DARK]: this.props.style.editorDarkMode,
-                        })}
-                        canOutsideClickClose={false}
-                        title="Checkpoints Editor"
-                        icon="badge"
-                        style={{ width: '46rem' }}>
-                        <div className={Classes.DIALOG_BODY}>
-                            <CheckpointsEditor checkpoints={this.props.checkpoints} />
-                        </div>
-                    </Dialog>
-                ) : null}
-                <TrainerInfoEditField
-                    label="Checkpoints"
-                    name="badges"
-                    placeholder="..."
-                    value={''}
-                    onChange={null}
-                    element={(inputProps) => (
-                        <Popover
-                            minimal={true}
-                            content={
-                                <Menu>
-                                    {this.props.checkpoints.map((badge) => (
-                                        <Checkbox
-                                            onChange={(e: any) => {
-                                                if (
-                                                    !e.target.checked ||
-                                                    trainerBadges.some((b) => b.name === badge.name)
-                                                ) {
-                                                    this.props.editTrainer({
-                                                        badges: trainerBadges.filter(
-                                                            (b) => b.name !== badge.name,
-                                                        ),
-                                                    });
-                                                } else {
-                                                    this.props.editTrainer({
-                                                        badges: [...trainerBadges, badge],
-                                                    });
-                                                }
-                                            }}
-                                            checked={trainerBadges.some(
-                                                (b) => b.name === badge.name,
-                                            )}
-                                            key={badge.name}
-                                            label={badge.name}
-                                        />
-                                    ))}
-                                    {this.props.enableCheckpointsEditor ? (
-                                        <Button
-                                            onClick={this.toggleCheckpointsEditor}
-                                            minimal
-                                        >
-                                            Customize Checkpoints
-                                        </Button>
-                                    ) : null}
-                                </Menu>
+    return <Popover
+        minimal={true}
+        content={
+            <Menu>
+                {Array.isArray(checkpoints) && checkpoints?.map((badge) => (
+                    <Checkbox
+                        onChange={(e: any) => {
+                            if (
+                                !e.target.checked ||
+                                checkpointsObtained.some((b) => b.name === badge.name)
+                            ) {
+                                const badges = checkpointsObtained.filter(
+                                    (b) => b.name !== badge.name,
+                                );
+                                onChange(badges);
+                            } else {
+                                const badges = [...checkpointsObtained, badge];
+                                onChange(badges);
                             }
-                            position={Position.BOTTOM}>
-                            <Button
-                                style={{
-                                    borderRadius: 0,
-                                    width: '164px',
-                                }}>
-                                Select Checkpoints
-                            </Button>
-                        </Popover>
-                    )}
-                />
-            </>
-        );
-    }
+                        }}
+                        checked={checkpointsObtained.some(
+                            (b) => b.name === badge.name,
+                        )}
+                        key={badge.name}
+                        label={badge.name}
+                    />
+                ))}
+                {toggle && <Button onClick={toggle} minimal>
+                    Customize Checkpoints
+                </Button>}
+            </Menu>
+        }
+        position={Position.BOTTOM}>
+        <Button
+            fill
+            style={{
+                borderRadius: 0,
+            }}>
+            {buttonText ?? 'Select Checkpoints'}
+        </Button>
+    </Popover>;
 }
 
-export const BadgeInput = connect(
-    (state: Pick<State, keyof State>) => ({
-        checkpoints: state.checkpoints,
-        trainer: state.trainer,
-        game: state.game,
-        style: state.style,
-    }),
-    {
-        editTrainer,
-    },
-)(BadgeInputBase);
+export function BadgeInput ({
+    onChange,
+    checkpointsCleared,
+}: BadgeInputProps) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const checkpoints = useSelector<State, State['checkpoints']>(state => state.checkpoints);
+    const trainer = useSelector<State, State['trainer']>(state => state.trainer);
+    const style = useSelector<State, State['style']>(state => state.style);
+    const onChangeInternal = (badges: Checkpoints) => dispatch(editTrainer({ badges }));
+    const onChangeUseable = onChange ?? onChangeInternal;
+    const dispatch = useDispatch();
+
+    const toggle = () => setIsOpen(!isOpen);
+
+    const checkpointsObtained = checkpointsCleared ?? trainer.badges ?? [];
+    return (
+        <>
+            <Dialog
+                isOpen={isOpen}
+                onClose={toggle}
+                className={cx(Classes.DIALOG, {
+                    [Classes.DARK]: style.editorDarkMode,
+                })}
+                canOutsideClickClose={false}
+                title="Checkpoints Editor"
+                icon="badge"
+                style={{ width: '60rem' }}>
+                <div className={cx(Classes.DIALOG_BODY, Styles.checkpointsEditor, 'has-nice-scrollbars')}>
+                    <CheckpointsEditor checkpoints={checkpoints} />
+                </div>
+            </Dialog>
+            <TrainerInfoEditField
+                data-testid='badge-input'
+                label="Checkpoints"
+                name="badges"
+                placeholder="..."
+                value={''}
+                onChange={null}
+                element={(inputProps) => (
+                    <div>
+                        <CheckpointsInputList
+                            onChange={onChangeUseable}
+                            toggle={toggle}
+                            checkpointsObtained={checkpointsObtained}
+                        />
+                    </div>
+                )}
+            />
+        </>
+    );
+}
diff --git a/src/components/TrainerEditor/CheckpointsEditor.tsx b/src/components/TrainerEditor/CheckpointsEditor.tsx
index 99d1656f1..74dc8f4e9 100644
--- a/src/components/TrainerEditor/CheckpointsEditor.tsx
+++ b/src/components/TrainerEditor/CheckpointsEditor.tsx
@@ -5,11 +5,10 @@ import {
     Button,
     Icon,
     Intent,
-    Toaster,
     Popover,
     PopoverInteractionKind,
 } from '@blueprintjs/core';
-import { classWithDarkTheme, Styles } from 'utils';
+import { classWithDarkTheme, feature, Styles } from 'utils';
 import * as styles from './style';
 import { connect } from 'react-redux';
 import { Badge } from 'models';
@@ -17,6 +16,7 @@ import { getAllBadges } from 'utils';
 import { State } from 'state';
 import { Checkpoints } from 'reducers/checkpoints';
 import { addCustomCheckpoint, editCheckpoint, deleteCheckpoint, reorderCheckpoints } from 'actions';
+import { ImageUpload } from 'components/Shared/ImageUpload';
 
 export interface CheckpointsSelectProps {
     checkpoint: Badge;
@@ -27,6 +27,10 @@ export interface CheckpointsSelectState {
     showOptions: boolean;
 }
 
+const checkpointImageURL = (name) => ((name.startsWith('http') || name.startsWith('data'))
+    ? name
+    : `./img/checkpoints/${name}.png`);
+
 export class CheckpointsSelect extends React.Component<
 CheckpointsSelectProps,
 CheckpointsSelectState
@@ -39,7 +43,7 @@ CheckpointsSelectState
             .includes(image);
 
         return (
-            <div style={{ padding: '1rem', height: '400px', overflowY: 'auto' }}>
+            <div className='has-nice-scrollbars' style={{ padding: '1rem', height: '400px', overflowY: 'auto' }}>
                 {getAllBadges().map((badge, key) => {
                     return (
                         <Button
@@ -51,7 +55,7 @@ CheckpointsSelectState
                             <img
                                 className={cx(styles.checkpointImage(1))}
                                 alt={badge.name}
-                                src={`./img/checkpoints/${badge.image}.png`}
+                                src={checkpointImageURL(badge?.image)}
                             />{' '}
                             {badge.name}
                         </Button>
@@ -64,27 +68,25 @@ CheckpointsSelectState
     public render() {
         const { checkpoint } = this.props;
         return (
-            <Popover
-                minimal
-                interactionKind={PopoverInteractionKind.CLICK}
-                content={this.renderOptions(checkpoint)}>
-                <div
-                    role="select"
-                    className={cx(styles.checkpointSelect, Classes.SELECT, Classes.BUTTON)}>
-                    <div>
-                        <img
-                            className={cx(styles.checkpointImage(1))}
-                            alt={checkpoint.name}
-                            src={
-                                checkpoint.image.startsWith('http')
-                                    ? checkpoint.image
-                                    : `./img/checkpoints/${checkpoint.image}.png`
-                            }
-                        />{' '}
-                        {checkpoint.name}
+            <>
+                <Popover
+                    minimal
+                    interactionKind={PopoverInteractionKind.CLICK}
+                    content={this.renderOptions(checkpoint)}>
+                    <div
+                        role="select"
+                        className={cx(styles.checkpointSelect, Classes.SELECT, Classes.BUTTON, 'has-nice-scrollbars')}>
+                        <div>
+                            <img
+                                className={cx(styles.checkpointImage(1))}
+                                alt={checkpoint.name}
+                                src={checkpointImageURL(checkpoint?.image)}
+                            />{' '}
+                            {checkpoint.name}
+                        </div>
                     </div>
-                </div>
-            </Popover>
+                </Popover>
+            </>
         );
     }
 }
@@ -122,22 +124,6 @@ CheckpointsEditorState
         );
     };
 
-    private onUpload = (e: any) => {
-        const size = e.target.files[0].size / 1024 / 1024;
-        const toaster = Toaster.create();
-        if (size > 0.5) {
-            toaster.show({
-                message: `File size of 500KB exceeded. File was ${size.toFixed(2)}MB`,
-                intent: Intent.DANGER,
-            });
-        } else {
-            toaster.show({
-                message: 'Upload successful!',
-                intent: Intent.SUCCESS,
-            });
-        }
-    };
-
     private renderCheckpoints(checkpoints: Checkpoints) {
         return (
             checkpoints &&
@@ -157,11 +143,7 @@ CheckpointsEditorState
                             <img
                                 className={cx(styles.checkpointImage())}
                                 alt={checkpoint.name}
-                                src={
-                                    checkpoint.image.startsWith('http')
-                                        ? checkpoint.image
-                                        : `./img/checkpoints/${checkpoint.image}.png`
-                                }
+                                src={checkpointImageURL(checkpoint?.image)}
                             />
                             <input
                                 onChange={(e) =>
@@ -179,10 +161,6 @@ CheckpointsEditorState
                             onEdit={(i, n) => this.props.editCheckpoint(i, n)}
                             checkpoint={checkpoint}
                         />
-                        {/* <div className={cx(styles.checkpointImageUploadWrapper)}>
-                            <Button icon='upload'>Upload Image</Button>
-                            <input style={{ cursor: 'pointer', opacity: 0, position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} onChange={this.onUpload} type='file' />
-                        </div> */}
                         <div className={Classes.INPUT_GROUP}>
                             <Icon icon={'link'} />
                             <input
@@ -198,6 +176,14 @@ CheckpointsEditorState
                                 }
                             />
                         </div>
+                        <div className={cx(styles.checkpointImageUploadWrapper)}>
+                            {feature.imageUploads && <ImageUpload
+                                onSuccess={image => {
+                                    const request = window.indexedDB.open('NuzlockeGenerator', 3);
+                                    this.props.editCheckpoint({image}, checkpoint.name);
+                                }}
+                            />}
+                        </div>
                         <Icon
                             style={{ cursor: 'pointer' }}
                             onClick={(e) => this.props.deleteCheckpoint(checkpoint.name)}
@@ -212,8 +198,8 @@ CheckpointsEditorState
 
     public render() {
         return (
-            <div className={cx(styles.checkpointsEditor)}>
-                <ul className={cx(styles.checkpointsList)}>
+            <div className={cx(styles.checkpointsEditor, 'has-nice-scrollbars')}>
+                <ul className={cx(styles.checkpointsList, 'has-nice-scrollbars')}>
                     {this.renderCheckpoints(this.props.checkpoints)}
                 </ul>
                 <div className={cx(styles.checkpointButtons)}>
diff --git a/src/components/TrainerEditor/TrainerInfoEditor.tsx b/src/components/TrainerEditor/TrainerInfoEditor.tsx
index d2a3c7904..eaa6d1415 100644
--- a/src/components/TrainerEditor/TrainerInfoEditor.tsx
+++ b/src/components/TrainerEditor/TrainerInfoEditor.tsx
@@ -58,7 +58,7 @@ export class TrainerInfoEditor extends React.Component<{}, {}> {
                     name="title"
                     placeholder=""
                 />
-                <BadgeInput enableCheckpointsEditor />
+                <BadgeInput />
                 <LinkedTrainerInfoEditField
                     onInput={this.onInput}
                     label={
@@ -75,7 +75,7 @@ export class TrainerInfoEditor extends React.Component<{}, {}> {
                                 </Menu>
                             }>
                             <span>
-                                Trainer Image <Icon icon='info-sign' />
+                                Trainer Image <Icon icon="info-sign" />
                             </span>
                         </Popover>
                     }
diff --git a/src/components/TrainerEditor/__tests__/BadgeInput.test.tsx b/src/components/TrainerEditor/__tests__/BadgeInput.test.tsx
index 5b494f83d..90bdea0e6 100644
--- a/src/components/TrainerEditor/__tests__/BadgeInput.test.tsx
+++ b/src/components/TrainerEditor/__tests__/BadgeInput.test.tsx
@@ -1,23 +1,12 @@
 import * as React from 'react';
-import { shallow, mount } from 'enzyme';
-import { BadgeInputBase as BadgeInput, TrainerInfoEditField } from '..';
-import { TrainerKeys } from 'models';
-import { editTrainer } from 'actions';
-import { styleDefaults } from 'utils';
+import { BadgeInput } from '..';
+import { render, screen } from 'utils/testUtils';
 
 describe('<BadgeInput />', () => {
     it('renders its contents', () => {
-        const wrapper = mount(
-            <BadgeInput
-                checkpoints={[]}
-                style={styleDefaults}
-                trainer={TrainerKeys}
-                game={{ name: 'Emerald' }}
-                editTrainer={editTrainer}
-                enableCheckpointsEditor={false}
-            />,
+        render(
+            <BadgeInput />,
         );
-        // TODO: Write proper test -- this component needs to be refactored
-        expect(wrapper).toBeDefined();
+        expect(screen).toBeDefined();
     });
 });
diff --git a/src/components/TrainerEditor/style.ts b/src/components/TrainerEditor/style.ts
index 500257861..669391c2e 100644
--- a/src/components/TrainerEditor/style.ts
+++ b/src/components/TrainerEditor/style.ts
@@ -1,12 +1,15 @@
 /* eslint-disable camelcase */
 import { css } from 'react-emotion';
 
-export const checkpointsEditor = css``;
+export const checkpointsEditor = css`
+    overflow-x: hidden;
+`;
 
 export const checkpointsList = css`
     height: 60vh;
     margin: 0;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
     padding: 0;
 `;
 
@@ -36,6 +39,7 @@ export const checkpointName = css`
 `;
 
 export const checkpointImage = (size = 2) => css`
+    display: inline-block;
     width: ${size}rem;
     margin: 0 0.25rem;
 `;
diff --git a/src/img/articuno-galar.jpg b/src/img/articuno-galar.jpg
new file mode 100644
index 000000000..25c30f18f
Binary files /dev/null and b/src/img/articuno-galar.jpg differ
diff --git a/src/img/calyrex.jpg b/src/img/calyrex.jpg
new file mode 100644
index 000000000..e72217be4
Binary files /dev/null and b/src/img/calyrex.jpg differ
diff --git a/src/img/galarian-articuno.jpg b/src/img/galarian-articuno.jpg
new file mode 100644
index 000000000..25c30f18f
Binary files /dev/null and b/src/img/galarian-articuno.jpg differ
diff --git a/src/img/galarian-moltres.jpg b/src/img/galarian-moltres.jpg
new file mode 100644
index 000000000..11aa893f9
Binary files /dev/null and b/src/img/galarian-moltres.jpg differ
diff --git a/src/img/galarian-slowking.jpg b/src/img/galarian-slowking.jpg
new file mode 100644
index 000000000..9f1bca36b
Binary files /dev/null and b/src/img/galarian-slowking.jpg differ
diff --git a/src/img/galarian-zapdos.jpg b/src/img/galarian-zapdos.jpg
new file mode 100644
index 000000000..c02c720b0
Binary files /dev/null and b/src/img/galarian-zapdos.jpg differ
diff --git a/src/img/moltres-galar.jpg b/src/img/moltres-galar.jpg
new file mode 100644
index 000000000..11aa893f9
Binary files /dev/null and b/src/img/moltres-galar.jpg differ
diff --git a/src/img/regidrago.png b/src/img/regidrago.png
new file mode 100644
index 000000000..6ddc474af
Binary files /dev/null and b/src/img/regidrago.png differ
diff --git a/src/img/regieleki.jpg b/src/img/regieleki.jpg
new file mode 100644
index 000000000..5ffe8730c
Binary files /dev/null and b/src/img/regieleki.jpg differ
diff --git a/src/img/tcg/bastiodon.jpg b/src/img/tcg/bastiodon.jpg
new file mode 100644
index 000000000..6e5221714
Binary files /dev/null and b/src/img/tcg/bastiodon.jpg differ
diff --git a/src/img/tcg/bronzong.jpg b/src/img/tcg/bronzong.jpg
new file mode 100644
index 000000000..8de169f55
Binary files /dev/null and b/src/img/tcg/bronzong.jpg differ
diff --git a/src/img/tcg/bronzor.jpg b/src/img/tcg/bronzor.jpg
new file mode 100644
index 000000000..62dfe9ecd
Binary files /dev/null and b/src/img/tcg/bronzor.jpg differ
diff --git a/src/img/tcg/burmy.jpg b/src/img/tcg/burmy.jpg
new file mode 100644
index 000000000..a68d1e24a
Binary files /dev/null and b/src/img/tcg/burmy.jpg differ
diff --git a/src/img/tcg/dusclops.jpg b/src/img/tcg/dusclops.jpg
new file mode 100644
index 000000000..96cf80fcc
Binary files /dev/null and b/src/img/tcg/dusclops.jpg differ
diff --git a/src/img/tcg/dusknoir.jpg b/src/img/tcg/dusknoir.jpg
new file mode 100644
index 000000000..1a59a416c
Binary files /dev/null and b/src/img/tcg/dusknoir.jpg differ
diff --git a/src/img/tcg/duskull.jpg b/src/img/tcg/duskull.jpg
new file mode 100644
index 000000000..6af994b55
Binary files /dev/null and b/src/img/tcg/duskull.jpg differ
diff --git a/src/img/tcg/eevee.jpg b/src/img/tcg/eevee.jpg
new file mode 100644
index 000000000..783bf0c3f
Binary files /dev/null and b/src/img/tcg/eevee.jpg differ
diff --git a/src/img/tcg/finneon.jpg b/src/img/tcg/finneon.jpg
new file mode 100644
index 000000000..149518e40
Binary files /dev/null and b/src/img/tcg/finneon.jpg differ
diff --git a/src/img/tcg/gallade.jpg b/src/img/tcg/gallade.jpg
new file mode 100644
index 000000000..e2973df72
Binary files /dev/null and b/src/img/tcg/gallade.jpg differ
diff --git a/src/img/tcg/gligar.jpg b/src/img/tcg/gligar.jpg
new file mode 100644
index 000000000..0ebf2fd81
Binary files /dev/null and b/src/img/tcg/gligar.jpg differ
diff --git a/src/img/tcg/gliscor.jpg b/src/img/tcg/gliscor.jpg
new file mode 100644
index 000000000..fa87c7388
Binary files /dev/null and b/src/img/tcg/gliscor.jpg differ
diff --git a/src/img/tcg/grotle.jpg b/src/img/tcg/grotle.jpg
new file mode 100644
index 000000000..36d6c40ff
Binary files /dev/null and b/src/img/tcg/grotle.jpg differ
diff --git a/src/img/tcg/heracross.jpg b/src/img/tcg/heracross.jpg
new file mode 100644
index 000000000..48e9ca102
Binary files /dev/null and b/src/img/tcg/heracross.jpg differ
diff --git a/src/img/tcg/lumineon.jpg b/src/img/tcg/lumineon.jpg
new file mode 100644
index 000000000..a00c33f71
Binary files /dev/null and b/src/img/tcg/lumineon.jpg differ
diff --git a/src/img/tcg/mothim.jpg b/src/img/tcg/mothim.jpg
new file mode 100644
index 000000000..43cb58b3a
Binary files /dev/null and b/src/img/tcg/mothim.jpg differ
diff --git a/src/img/tcg/pikachu.jpg b/src/img/tcg/pikachu.jpg
new file mode 100644
index 000000000..10b31eb5c
Binary files /dev/null and b/src/img/tcg/pikachu.jpg differ
diff --git a/src/img/tcg/roselia.jpg b/src/img/tcg/roselia.jpg
new file mode 100644
index 000000000..bd4269bbe
Binary files /dev/null and b/src/img/tcg/roselia.jpg differ
diff --git a/src/img/tcg/roserade.jpg b/src/img/tcg/roserade.jpg
new file mode 100644
index 000000000..e9c50446c
Binary files /dev/null and b/src/img/tcg/roserade.jpg differ
diff --git a/src/img/tcg/rotom.jpg b/src/img/tcg/rotom.jpg
new file mode 100644
index 000000000..188b82fcd
Binary files /dev/null and b/src/img/tcg/rotom.jpg differ
diff --git a/src/img/tcg/shieldon.jpg b/src/img/tcg/shieldon.jpg
new file mode 100644
index 000000000..e704f2262
Binary files /dev/null and b/src/img/tcg/shieldon.jpg differ
diff --git a/src/img/tcg/torterra.jpg b/src/img/tcg/torterra.jpg
new file mode 100644
index 000000000..67cac26c0
Binary files /dev/null and b/src/img/tcg/torterra.jpg differ
diff --git a/src/img/tcg/unown-f.jpg b/src/img/tcg/unown-f.jpg
new file mode 100644
index 000000000..3099d2158
Binary files /dev/null and b/src/img/tcg/unown-f.jpg differ
diff --git a/src/index.html b/src/index.html
index 64bde4d57..a5d93d8b7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,7 @@ <h2>Nuzlocke Generator</h2>
         <img height='200' src='data:image/gif;base64,R0lGODlh9AH0AZEDAPiYwPBQMAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjlFNTYyMTNDNTI5RDExRTVCNzU1RkY5NDczMzM1N0NCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjlFNTYyMTNENTI5RDExRTVCNzU1RkY5NDczMzM1N0NCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUU1NjIxM0E1MjlEMTFFNUI3NTVGRjk0NzMzMzU3Q0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUU1NjIxM0I1MjlEMTFFNUI3NTVGRjk0NzMzMzU3Q0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQJBgADACwAAAAA9AH0AQAC/5yPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2Oz+v3/L7/DxgoOEhYaHiImKi4yNjo+AgZKTlJWWl5iZmpucnZ6fkJGio6SlpqeoqaqrrK2ur6ChsrO0tba3uLm6u7y9vr+wscLDxMXGx8jJysvMzc7PwMHS09TV1tfY2drb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f7/8PMKDAgQQLGjyIMKHChQwbOnwIMaLEiRQrWryIMaPGjf8cO3r8CDKkyJEkS5o8iTKlypUsW7p8CTOmzJk0a9q8iTOnzp08e/r8CTSo0KFEixo9ijSp0qVMmzp9CjWq1KlUq1q9ijWr1q1cu3r9Cjas2LFky5o9izat2rVs27p9Czeu3Ll069q9izev3r18+/r9Cziw4MGECxs+jDix4sWMGzt+DDmy5MmUK1u+jDmz5s2cO3v+DDq06NGkS5s+jTq16tWsW7t+DTu27Nm0aw8UgDu37t28e/v+DTy4gNrCixs/Xpw48uXMjytvDj367ufSqzenbj27cezau//m7j28bvDixZMv7/08eu3q11tv7146/PjQ59Nnbv8+8vz6t9P/7p/efwCyJ+CA7xVooHwIJljfggzi55h+AUxIYYUWXohhhhpuyGEA67klYYcijkhihx+2FWKJKq444olspchijDJW6OJaMM6I44o1qnVjjj6KuGNaPf5IZIZBojVkkUpSeORZSS6pZJNmPQklkVKWRWWVPl5JVpZa4sjlWF5+KWOYYo1JJotmhoVmmiquCVabbpII51dyzgkkel0th2eJAPwJaKCCDkqooH1uqGBRfB4qYqGOPjooo0ZGd9Sikm4IaaaPXnphokRZyimGmo4aaahMUmoUqKZWSGqrf646oadDqQprAK62WqusQtEK662k5oqqosjVaqGvowLboLDH/xHLqrGZIntdqsMyO6Gzz8Kqa1C8rmotpNBCqKxx1FbbraPfLlfptNSWay62wX6qLrPsFnruftIuO+68hNbr3L3i5quvoe4mCy++6wYcKL/+hVvcuLYiDKjCyfnbMMAQAyCxcOkaLO/FGA8cLcPCOezxx6tmC9S2ppaccXAb/3vwxS0D93LFMUM883cUj2wxziCDWzDMHcv8M7o7B0eyxzn7VjPPNyO8dG9NI90z1EXbKzLVTwccNW9TA5c00Se/O2u8xLJ8db80qexw224bPRLbbs/NLNwiyU133qbaHRLeev/NKN8g+Q144W4K/hHhhi9eJeIeKc545FZifbfZkv9frqXjHUGOeec6Ut635Z6PnqPmHHFOeuoamr4R6qq/TiPog4sOe+0csq6R67arjntGuu9Oeu8Y/Q6858JfRHzxmB9vUfLKS858Rc4/z3j0FE1PveHWT4R99oBvL1H33usNfkTij093+RCdj/7bsidOe/u8v/94/PIHT//m9t9vfP6n78+/5fmvdQAMIPQGmLsCGrB6CPSdAheovQYO74EQ/J4EkUfBCpLvgs1DTslKZcAPCkp9D1mOCBO2wBMCioQOMaEKTRbAFwKAhQ1xoQohKEMaMsSGJ8ThC3W4EB6K0IcqBKJChPhBIp7QiAlBItpC+EMOSs+DL1SiCJmIECf/Ki2FUVRb5Y4jQyt+EIsH0aLYYtjFhX3ROGHkYhGleD0q3tCNS4Qj9+TYQzpe0Y7hw+MQ9ThGPprPj0kEZMnIaBAzynCRjGzkoBBZEEU6cpKU3KMXQwfGSmpyk5ZUIybZyMlQinJekCSIJEeJylQSqpS3IaQqXwnLFQpyfa6MpS1RyUqBnPKWvJxkLgOyy14KM4ezLGEth4nMRf4SIMFMpjMhtsx/NPOZ1GRXNP0xzWpq01jX7Ec2twlOUnWTH98MpzkfNc59lPOc7BxhMeGXyXbGEmU/Wac8iUmwssXznqqkp0/syc865nNXxwyoJv3ZE4Aa9JBkI+g+FxpKhPJE/6EQhWZDtVXQijZSojuhqEb1xVGdePSj1rxoyjJK0jQCTZ+gTGklQ5qTkbrUWTDFiUxn6qua3uSmOHWVTm3C056K06T1RKlQL/bTmgT1qJlK6tqMytSAOXUmS42qo6Yqk6padZVE/SdUt1ourMZEq2ANlFhhQtay/umsL0mrWtnqEreWFa4tkStY6coSu24VryvRq1X5qhK/RhWwKREsUwmLEsMeFbEnUaxQGWsSx/YUsiWRLE4pSxLLzhSzcfuqWrnZ1YR69rO34ixV7+PMOnlFP6nVE4pQm0zV7gm2yJQtV1gbW9e+iLbDtO1WcFtb3dqIt8L0rVaA21vh8oi4vfs0blaQW1zlCom5vHQuVqDbXOkiibq3tO5VsFtd7TqJu7b0rlXA213xMuZBpn0Me0OrmvcO9DXyDZls6rtS2OA3nYrZ7zs7499L6jfAE5sNgQt83wO7zEEKng6DG5wb/uxXwvilcH0tLF/baHjDHO6whz8M4hCLeMQkLrGJT4ziFKt4xSxusYtfDOMYy3jGNK6xjW+M4xzreMc87rGPfwzkIAt5yEQuspGPjOQkK3nJTG6yk58M5ShLecpUrrKVr4zlLGt5y1zuspe/DOYwi3nMZC6zmc+M5jSrec1sbrOb3wznOMt5znSus53vjOc863nPfO6zn/8M6HIUAAAh+QQFBgADACwAAAAA9AH0AQAC/5yPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2Oz+v3/L7/DxgoOEhYaHiImKi4yNjo+AgZKTlJWWl5iZmpucnZ6fkJGio6SlpqeoqaqrrK2ur6ChsrO0tba3uLm6u7y9vr+wscLDxMXGx8jJysvMzc7PwMHS09TV1tfY2drb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f7/8PMKDAgQQLGjyIMKHChQwbOnwIMaLEiRQrWryIMaPGjf8cO3r8CDKkyJEkS5o8iTKlypUsW7p8CTOmzJk0a9q8iTOnzp08e/r8CTSo0KFEixo9ijSp0qVMmzp9CjWq1KlUq1q9ijWr1q1cu3r9Cjas2LFky5o9izat2rVs27p9Czeu3Ll069q9izev3r18+/r9Cziw4MGECxs+jDix4sWMGzt+DDmy5MmUK1u+jDmz5s2cO3v+DDq06NGkS5s+jTq16tWsW7t+DTu27Nm0a88TgDu37t28e/v+DTy47eDEixs/LmA48uXMjStvDj267ufSqzOnbj17cezau/vm7j18bvDiw5Mv3/08+uzq11dv7z46/PjN59Nfbv/+8fz6t9f/7p/efwCyJ+CA7xVooHwIJljfggzi51h/AUxIYYUWXohhhhpuyOF6bknIYYgijkiih22BSGKKKqZoIlsorghjjBe2uNaLMt4II41q2YhjjyPqmBaPPg6pIZBoCUlkkhUaeRaSSirJpFlOPklklGVNSaWPVpKFZZY4bjlWl17KCKZYYo6ZI3of6ocmlWWGdWabLKp5IptyJvkmVMjdqSIAfv4JaKCCDioonxtCuNSeho5IaKOODrpohogqpWikHD6K6aOWzohcU5VummGmokIKKoWTJvVpqRaOyuqfqk54KlKpvjphq63SGutRs9JqK6u4dsrUrq/2Ouqv+wV7HK0X/xIrqrHOIWucsqsyi6mz/iWarLQUUlvtq7kaJayq3GrqLbDYRqttreM2ai1xnmab7rrslnvsucWlq668hdL7rL3E4RuAvqSq+m1R4ZYq8L4Em0spvNomHGi7wkF7L74QAyoxcO+iG+/Ffmb828YVd+wxyN9R/K/FHgNgcm8ip0zyxS3z9nJwAK/MMr/XNszxwyvPvFvNwN38s87uomyzyiUbPbG/SccMMdDTIT200jIzrTHVvxG99ML18jyyz12XWjBRB4OKs9Tj7bQcwG6/baqCJLUNd93pSmcS3XbvjXW/I+nNd+CW4l0S4IIffifhc5+NeONVyv03445PfqPikf87THnmQ1oukuGaf04m5J1LDnrpRYoekuemrx4i56mTznrsroOkeuy2Wzj7R7XfznvuHu3Ou+2+dwR88KwPz1HxxpuO/EbKL/92q81r9Dz0XIs6fUbVWw81ptljtD330kqPOu2wi68s+dDlfT76w7L6/UXhuy8u/OXr3j79aNu/fuH5628p9TVocZgD4PUyFT+LzM+AkRLgdfxXQAaKDXv3+93/JHgnB5YteRfEYJs0yLDRRdCD7xtVAiuyQBJ+kH8DvFzPVOillZ2QIimEYZ88NsOJ1NCGJJJhBYnXQR6KyIf9I+ALhZgkIrZQhEdE4pCU+EAjhs2JRILiBp0XRCr/hgqHP+TgCLUoIyuG8HVfBCOMxPg1Jk7RjDdCo9/UCDM24siNO4Pj0+TYRi4W0YVrxOOK6Hg0KcbRj2fU4xLJ2ERC9tCQUeTjIBWZIkA2zZF3NB7OLknBPdqxatDDpCcdlUOJ7LBxnyyloEIZkVEizpSs9BMqIaLKw7WSla98SCwFN0tT1tIhtwxcLku5y4b0km+//GQwGTLMvRXTk8dcSDLttkxMNlMhz6xbNC85zYRUE27XxFk2EbLN6HWTkVekXhZlOc6LffMg4XRbOtXZRSyWkXXvhNg65XeceuozYeUECnL2CdB19fMn/wyoQYk1UJ8U9KAMNeEYdZXPhkrU/3sPBVdEJ4rRQSW0JwvNqEddWVGDXfSjHt0oTzpKUoyalG0jTelEV6oTlLq0oTDNiUxnetCa4uSmOA2oTm/C057u86c2CapQ60nUmhj1qOlMKk2WytRuOnUmUI1qNKcqk6patZhYjYlWt5rLrsLkq2BtpVhfQtay6jKkZmupWqXK1qGk9a3MjKtQ5kpXbNo1KHjNqySDpjXf+HWcZ3VJXwdrz736062InWVhW3LYxurrsSyJrGQFqliCMvaywMysQjfL2bqmUVagDa1eRwtR45jWsZ7laGlXS85Jouq1sE0sai2q2tp29rYiza1uRftGrPQno3n6ynBVSicX6Ye4yf+t0XKRW5413Ye50a3TdKErHunSh7rZte52sWse78aHu+FV7nVf2twdPRe91TXvd9nbXfeOF7ze0e584Vte555XosX1ynHxW1/xuoe8AZ7Mg+KpmgNrMjYKPiRsGtxI2UCYspSZcGtLY2HetibDwX0whwM5mw+DWMIizhptSmziEKP4ZCdescsc5OLkwNjF/JmwbW6M4xzreMc87rGPfwzkIAt5yEQuspGPjOQkK3nJTG6yk58M5ShLecpUrrKVr4zlLGt5y1zuspe/DOYwi3nMZC6zmc+M5jSrec1sbrOb3wznOMt5znSus53vjOc863nPfO6zn/8M6EALetCELrQkoQ+N6EQretGMbrSjHw3pSEt60pSutKUvjelMa3rTnO60PQoAACH5BAkGAAMALIAAvABYANMAAAKnnI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPEzMUgAAIfkEBQYAAwAsAAAAAPQB9AEAAv+cj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4PDAqHxKLxiEwql8ym8wmNSqfUqvWKzWq33K73Cw6Lx+Sy+YxOq9fstvsNj8vn9Lr9js/r9/y+/w8YKDhIWGh4iJiouMjY6PgIGSk5SVlpeYmZqbnJ2en5CRoqOkpaanqKmqq6ytrq+gobKztLW2t7i5uru8vb6/sLHCw8TFxsfIycrLzM3Oz8DB0tPU1dbX2Nna29zd3t/Q0eLj5OXm5+jp6uvs7e7v4OHy8/T19vf4+fr7/P3+//DzCgwIEECxo8iDChwoUMGzp8CDGixIkUK1q8iDGjxo3/HDt6/AgypMiRJEuaPIkypcqVLFu6fAkzpsyZNGvavIkzp86dPHv6/Ak0qNChRIsaPYo0qdKlTJs6fQo1qtSpVKtavYo1q9atXLt6/Qo2rNixZMuaPYs2rdq1bNu6fQs3rty5dOvavYs3r969fPv6/Qs4sODBhAsbPow4seLFjBs7fgw5suTJlCtbvow5s+bNnDt7/gw6tOjRpEubPo06terVrFu7fg07tuzZtGsPFIA7t+7dvHv7/g08uIDawosbP16cOPLlzI8rbw49+u7n0qs3p249u3Hs2rv/5u49vG7w4sWTL+/9PHrt6tdbb+9eOvz40OfTZ27/PvL8+rfT/+6f3n8AsifggO8VaKB8CCZY34IM4ueYfgFMSGGFFl6IYYYabshhAOu5JWGHIo5IYocfthViiSquOOKJbKXIYowyVujiWjDOiOOKNap1Y44+irhjWj3+SGSGQaI1ZJFKUnjkWUkuqWSTZj0JJZFSlkVllT5eSVaWWuLI5VhefiljmGKNSSaLZoaFZpoqrglWm26SCOdXcs4JJHpdLYdniQD8CWiggg5KqKB9bqhgUXweKmKhjj46KKNGRnfUopJuCGmmj156YaJEWcophpqOGmmoTFJqFKimVkhqq3+uOqGnQ6kKawCutlqrrELRCuutpOaKqqLI1Wqhr6MC26Cwx/8Ry6qxmSJ7XarDMjuhs8/CqmtQvK5qLaTQQqiscdRW262j3y5X6bTUlmsutsF+qi6z7BZ67n7SLjvuvITW69y94uarr6HuJgsvvusGHCi//oVb3Li2Igyowsn52zDAEAMgsXDpGizvxRgPHC3Dwjns8cerZgvUtqaWnHFwG/978MUtA/dyxTFDPPN3FI9sMc4gg1swzB3L/DO6OwdHssc5+1YzzzcjvHRvTSPdM9RF2ysy1U8HHDVvUwOXNNEnvztrvMSyfHW/NKnscNtuGz0S227PzSzcIslNd96m2h0S3nr/zSjfIPkNeOFuCv4R4YYvXiXiHinOeORWYn232ZL/X66l4x1BjnnnOlLet+Wej56j5hxxTnrqGpq+Eeqqv04j6IOLDnvtHLKukeu2q457RrrvTnrvGP0OvOfCX0R88Zgfb1HyykvOfEXOP8949BRNT73h1k+EffaAby9R997rDX5E4o9Pd/kQnY/+27InTnv7vL//ePzyB0//5vbfb3z+p+/Pv+X5r3UADCD0Bpi7Ahqwegj0nQIXqL0GDu+BEPyeBJFHwQqS74LNQ07JSmXADwpKfQ9ZjggTtsATAoqEDjGhCk0WwBcCgIUNcaEKIShDGjLEhifE4Qt1uBAeitCHKgSiQoT4QSKe0IgJQSLaQvhDDkrPgy9UogiZiBAn/yothVFUW+WOI0MrfhCLB9Gi2GLYxYV90Thh5GIRpXg9Kt7QjUuEI/fk2EM6XtGO4cPjEPU4Rj6az49JBGTJyGgQM8pwkYxs5KAQWRBFOnKSlNyjF0MHxkpqcpOWVCMm2cjJUIpyXpAkiCRHicpUEqqUtyGkKl8JyxUKcn2ujKUtUclKgZzylrycZC4DssteCjOHsyxhLYeJzEX+EiDBTKYzIbbMfzTzmdRkVzT9Mc1qatNY1+xHNrcJTlJ1kx/fDKc5HzXOfZTznOwcYTHhl8l2xhJlP1mnPIlJsLLF856qpKdP7MnPOuZzV8cMqCb92ROAGvSQZCPoPhcaSoTyRP+hEIVmQ7VV0Io2UqI7oahG9cVRnXj0o9a8aMoyStI0Ak2foExpJUOak5G61FkwxYlMZ+qrmt7kpjh1lU5twtOeitOk9USpUC/205oE9aiZSurajMrUgDl1JkuNqqOmKpOqWnWVRP0nVLdaLqzGRKtgDZRYYULWsv7prC9Jq1rZ6hK3lhWuLZErWOnKErtuFa8r0atV+aoSv0YVsCkRLFMJixLDHhWxJ1GsUBlrEsf2FLIlkSxOKUsSy84Us3H7qlq52dWEevazt+IsVe/jzDp5RT+p1ROKUJtM1e4JtsiULVdYG1vXvoi2w7TtVnBbW93aiLfC9K1WgNtb4fKIuL37NG5WkFtc5QqJubx0Llag21zpIom6t7TuVbBbXe06ibu29K5VwNtd8TLmQaZ9DHtDq5r3DvQ18g2ZbOq7UtjgN52K2e87O+PfS+o3wBObDYELfN8Du8xBCp4OgxucG/7sV8L4pXB9LSxf22h4wxzusIc/DOIQi3jEJC6xiU+M4hSreMUsbrGLXwzjGMt4xjSusY1vjOMc63jHPO6xj38M5CALechELrKRj4zkJCt5yUxuspOfDOUoS3nKVK6yla+M5Sxrectc7rKXvwzmMIt5zGQus5nPjOY0q3nNbG6zm98M5zjLec50rrOd74znPOt5z3zus5//DOhyFAAAIfkEBQYAAwAsAAAAAAEAAQAAAgJcAQAh+QQJBgADACyQALwAWQDTAAACqJyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2Oz+v3/L7/DxgoOEhYaHiImKi4yNjo+AgZKTlJWWl5iZmpucnZ6fkJGio6SlpqeoqaqrrK2ur6ChsrO0tba3uLm6u7y9vr+wscLDxMXOxTAAAh+QQFBgADACwAAAAA9AH0AQAC/5yPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5LL5jE6r1+y2+w2Py+f0uv2Oz+v3/L7/DxgoOEhYaHiImKi4yNjo+AgZKTlJWWl5iZmpucnZ6fkJGio6SlpqeoqaqrrK2ur6ChsrO0tba3uLm6u7y9vr+wscLDxMXGx8jJysvMzc7PwMHS09TV1tfY2drb3N3e39DR4uPk5ebn6Onq6+zt7u/g4fLz9PX29/j5+vv8/f7/8PMKDAgQQLGjyIMKHChQwbOnwIMaLEiRQrWryIMaPGjf8cO3r8CDKkyJEkS5o8iTKlypUsW7p8CTOmzJk0a9q8iTOnzp08e/r8CTSo0KFEixo9ijSp0qVMmzp9CjWq1KlUq1q9ijWr1q1cu3r9Cjas2LFky5o9izat2rVs27p9Czeu3Ll069q9izev3r18+/r9Cziw4MGECxs+jDix4sWMGzt+DDmy5MmUK1u+jDmz5s2cO3v+DDq06NGkS5s+jTq16tWsW7t+DTu27Nm0a1MUgDu37t28e/v+DTy47eDEixs/LmA48uXMjStvDj267ufSqzOnbj17cezau/vm7j18bvDiw5Mv3/08+uzq11dv7z46/PjN59Nfbv/+8fz6t9f/7p/efwCyJ+CA7xVooHwIJljfggziR9l6AUxIYYUWXohhhhpuyGF/bknIYYgijkiih22BSGKKKqZoIlsorghjjBe2uNaLMt4II41q2YhjjyPqmBaPPg6pIZBoCUlkkhUaeRaSSirJpFlOPklklGVNSaWPVpKFZZY4bjlWl17KCKZYYo6Zo34foocmlWWGdWabLKp5IptyJvmmUtLdGSIAfv4JaKCCDhoon3M6d9SehmpIaKOOCrroj/slGl2kGT6KqaOWhogcUopuWmGmokIKapGTGvVpqQGMyqqfqmbYKaXQvTphq6zSOuOpRaVaqq2j4mphrKhWSquvogK7pK5E//EKqrGZIkuhsLsS+6qzmEI7obTLUquqtY9iG4C2QzG7qbeaYiuuUORaam6j4KYb1LqRtkvou8qOy22v9JIKLbxAybvovvwi6+9PABsqcKHo3qtuvs0m/Ke9iA47a7EQu7rwxNNWXO3FAEjsH8XN4erxxxmHvPHIFl8MMnGeOlyuxy0LJ6vKHbN8sss1M0eyzDnTLDLPK0M8M3Avc9ytz/0yHC/M7CpNMNP/Oj0v1MAW7NPBfJZc9G9H25w0zktrvC3S+oodNdkyLQdu227DivVGbL9N99sQkjR33XqPrTZIee8N+Kt3j/R34IZbOrhIhR/O+J2Jh7R445J7+bjfyP9NjjmalX8Ueeae97i5R51/TnqaUnc0eumqS3o6R6mvDruprct9eey2s94357XfzrvsuYu+e+/CJzu7Rq8PD3voqAePvPDKu46ctc0f/jztx0k/feDVGx+9s9lrHzf313v//d7bZ7Qc9uXXfT5G6ZO/Pt3tX/S+sfGzHz763dt/v935u78/X/XPf8XT3/j4N8Cuea0k9RNgAhX4HQYG0FYPhGBvTNJAClaQbyhT3ARbtUEO6gxvH7xVCK/2P/qV8FcnxNX8LJJBrrWQcimE4QqJNsMsvbAiMbRaDqtUQx7eMGE/dFMQbzNEgRXxSTtE4gFLhrElArGAAHwiFKWIpyP/TqSHaMPil7QoES7i0IugA2NExEhEMpaRiiq0ogzVeKMmbjGJ+4LjF9loQzf60I6H+t3y9NhFPvaxg5CjI70EGSM5htGQ7UKk6fwIPUCO0ZElMiNE0AjFTLoLeYo8IyM1CUqTDa+Tl/xkKDPZPFI+BJOnDGUqLblKU7Zyj7ZTpUNYOUtUchKWt5RlLtM4Sl42BJe/pGXsbDlMXxbzkLvEoxAlucwrNhOS1jNONHP5Smc60ZrXbGU2qSk+bnbTldMkpOWgOU5gOk+YDCFmOs31TXPqDp3vZGYwtUlC6NRznyVjZ0ukw8+AJsyfLAGoQA9qLoKuxKAIbaivFKoShjp0/6KigmhKJErRjDbKoijBqEY/CiiOnsSjIAWpSDEYnZKq9E8nlaA+V6rSluazOTCNKT5pQtKaOlSmhEupTj/KUw++9KcZDWohh0rUiRr1nDRNKkWXOs+mOnWnN51JTqe6T6gCD6lYFahW/yjVrnq1qmvzqVjHCs6dXPWs3fxqJMPK1nq6tZrMiWtA5xrOuto1q2SNyVr3+ku8GhCugL2mYKtI2MIu87BtTKxiA9tXmPz1saFkbB4dS9lWWvaZmM1sZSP7ksl6Foqb3aZeRwvZtOpEtKi9WGnnyNXWfla1OWGtbAX22kXG9raZzK0nd8vbfoK2bOIxKZ1chB7j3mdN5f9RLn2YW1ygHrdGyZXucuvUXOs+F7vR1WievrIe58YHuuERr3vI6x3zrge93VEvetirHfeWB77Zka946Gsd+5qHu+XV7nj5m17/nhfA7RXweh3zIAXRJsHQ4Q+Dx+OgB49wNhJGJmcq7Fu/YHi4m9kwbU3jYXm6JsQTlg2JgUbhEy9wwSqOIItbzBsHS1jGD6Yxg22D4xzreMc87rGPfwzkIAt5yEQuspGPjOQkK3nJTG6yk58M5ShLecpUrrKVr4zlLGt5y1zuspe/DOYwi3nMZC6zmc+M5jSrec1sbrOb3wznOMt5znSus53vjOc863nPfO6zn/8M6EALetCELrQloQ+N6EQretGMbrSjHw3pSEt60pSutKUvjelMa3rTnO60p6tRAAAh+QQFBgADACwAAAAAAQABAAACAlwBACH5BAkGAAMALBsBvABYANMAAAKnnI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPEzMUgAAIfkEBQYAAwAsAAAAAPQB9AEAAv+cj6nL7Q+jnLTai7PevPsPhuJIluaJpurKtu4Lx/JM1/aN5/rO9/4PDAqHxKLxiEwql8ym8wmNSqfUqvWKzWq33K73Cw6Lx+Sy+YxOq9fstvsNj8vn9Lr9js/r9/y+/w8YKDhIWGh4iJiouMjY6PgIGSk5SVlpeYmZqbnJ2en5CRoqOkpaanqKmqq6ytrq+gobKztLW2t7i5uru8vb6/sLHCw8TFxsfIycrLzM3Oz8DB0tPU1dbX2Nna29zd3t/Q0eLj5OXm5+jp6uvs7e7v4OHy8/T19vf4+fr7/P3+//DzCgwIEECxo8iDChwoUMGzp8CDGixIkUK1q8iDGjxo3/HDt6/AgypMiRJEuaPIkypcqVLFu6fAkzpsyZNGvavIkzp86dPHv6/Ak0qNChRIsaPYo0qdKlTJs6fQo1qtSpVKtavYo1q9atXLt6/Qo2rNixZMuaPYs2rdq1bNu6fQs3rty5dOvavYs3r969fPv6/Qs4sODBhAsbPow4seLFjBs7fgw5suTJlCtbvow5s+bNnDt7/gw6tOjRpEubPo06terVrFu7fg07tuzZtGsPFIA7t+7dvHv7/g08uIDawosbP16cOPLlzI8rbw49+u7n0qs3p249u3Hs2rv/5u49vG7w4sWTL+/9PHrt6tdbb+9eOvz40OfTZ27/PvL8+rfT/+6f3n8AsifggO8VaKB8CCZY34IM4ueYfgFMSGGFFl6IYYYabshhAOu5JWGHIo5IYocfthViiSquOOKJbKXIYowyVujiWjDOiOOKNap1Y44+irhjWj3+SGSGQaI1ZJFKUnjkWUkuqWSTZj0JJZFSlkVllT5eSVaWWuLI5VhefiljmGKNSSaLZoaFZpoqrglWm26SCOdXcs4JJHpdLYdniQD8CWiggg5KqKB9bqhgUXweKmKhjj46KKNGRnfUopJuCGmmj156YaJEWcophpqOGmmoTFJqFKimVkhqq3+uOqGnQ6kKawCutlqrrELRCuutpOaKqqLI1Wqhr6MC26Cwx/8Ry6qxmSJ7XarDMjuhs8/CqmtQvK5qLaTQQqiscdRW262j3y5X6bTUlmsutsF+qi6z7BZ67n7SLjvuvITW69y94uarr6HuJgsvvusGHCi//oVb3Li2Igyowsn52zDAEAMgsXDpGizvxRgPHC3Dwjns8cerZgvUtqaWnHFwG/978MUtA/dyxTFDPPN3FI9sMc4gg1swzB3L/DO6OwdHssc5+1YzzzcjvHRvTSPdM9RF2ysy1U8HHDVvUwOXNNEnvztrvMSyfHW/NKnscNtuGz0S227PzSzcIslNd96m2h0S3nr/zSjfIPkNeOFuCv4R4YYvXiXiHinOeORWYn232ZL/X66l4x1BjnnnOlLet+Wej56j5hxxTnrqGpq+Eeqqv04j6IOLDnvtHLKukeu2q457RrrvTnrvGP0OvOfCX0R88Zgfb1HyykvOfEXOP8949BRNT73h1k+EffaAby9R997rDX5E4o9Pd/kQnY/+27InTnv7vL//ePzyB0//5vbfb3z+p+/Pv+X5r3UADCD0Bpi7Ahqwegj0nQIXqL0GDu+BEPyeBJFHwQqS74LNQ07JSmXADwpKfQ9ZjggTtsATAoqEDjGhCk0WwBcCgIUNcaEKIShDGjLEhifE4Qt1uBAeitCHKgSiQoT4QSKe0IgJQSLaQvhDDkrPgy9UogiZiBAn/yothVFUW+WOI0MrfhCLB9Gi2GLYxYV90Thh5GIRpXg9Kt7QjUuEI/fk2EM6XtGO4cPjEPU4Rj6az49JBGTJyGgQM8pwkYxs5KAQWRBFOnKSlNyjF0MHxkpqcpOWVCMm2cjJUIpyXpAkiCRHicpUEqqUtyGkKl8JyxUKcn2ujKUtUclKgZzylrycZC4DssteCjOHsyxhLYeJzEX+EiDBTKYzIbbMfzTzmdRkVzT9Mc1qatNY1+xHNrcJTlJ1kx/fDKc5HzXOfZTznOwcYTHhl8l2xhJlP1mnPIlJsLLF856qpKdP7MnPOuZzV8cMqCb92ROAGvSQZCPoPhcaSoTyRP+hEIVmQ7VV0Io2UqI7oahG9cVRnXj0o9a8aMoyStI0Ak2foExpJUOak5G61FkwxYlMZ+qrmt7kpjh1lU5twtOeitOk9USpUC/205oE9aiZSurajMrUgDl1JkuNqqOmKpOqWnWVRP0nVLdaLqzGRKtgDZRYYULWsv7prC9Jq1rZ6hK3lhWuLZErWOnKErtuFa8r0atV+aoSv0YVsCkRLFMJixLDHhWxJ1GsUBlrEsf2FLIlkSxOKUsSy84Us3H7qlq52dWEevazt+IsVe/jzDp5RT+p1ROKUJtM1e4JtsiULVdYG1vXvoi2w7TtVnBbW93aiLfC9K1WgNtb4fKIuL37NG5WkFtc5QqJubx0Llag21zpIom6t7TuVbBbXe06ibu29K5VwNtd8TLmQaZ9DHtDq5r3DvQ18g2ZbOq7UtjgN52K2e87O+PfS+o3wBObDYELfN8Du8xBCp4OgxucG/7sV8L4pXB9LSxf22h4wxzusIc/DOIQi3jEJC6xiU+M4hSreMUsbrGLXwzjGMt4xjSusY1vjOMc63jHPO6xj38M5CALechELrKRj4zkJCt5yUxuspOfDOUoS3nKVK6yla+M5Sxrectc7rKXvwzmMIt5zGQus5nPjOY0q3nNbG6zm98M5zjLec50rrOd74znPOt5z3zus5//DOhyFAAAOw==' />
         <h3>Loading...</h3>
         <p style='color: #333'>
-            If you are still on this page, you can try <a href='javascript:localStorage.clear()'>deleting localstorage.</a>
+            If you are still on this page, you can try <a href='javascript:localStorage.clear()'>deleting localstorage</a> <span style='color: red'>after saving your nuzlocke.json data in a safe place</span>.
         </p>
         <p>Below is your nuzlocke.json data.</p>
         <div style='width: 50%; margin: 0 auto; padding: 1rem;' contenteditable="true" id='ls'></div>
diff --git a/src/index.tsx b/src/index.tsx
index a33c2d3d6..b077bd9f5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,6 +11,9 @@ import { store, persistor } from './store';
 import '@blueprintjs/icons/lib/css/blueprint-icons.css';
 import '@blueprintjs/core/lib/css/blueprint.css';
 import '@blueprintjs/table/lib/css/table.css';
+import 'tailwindcss/dist/base.css';
+import 'tailwindcss/dist/components.css';
+import 'tailwindcss/dist/utilities.css';
 import 'normalize.css/normalize.css';
 import { DragDropContextProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
@@ -67,7 +70,6 @@ Rollbar.init(rollbarConfig as any);
 
 const mountNode = document.getElementById('app');
 
-
 render(
     <Provider store={store}>
         {process.env.NODE_ENV !== 'test' ? (
diff --git a/src/models/Pokemon.ts b/src/models/Pokemon.ts
index 328cc4b7e..78b0036c0 100644
--- a/src/models/Pokemon.ts
+++ b/src/models/Pokemon.ts
@@ -1,4 +1,5 @@
 import { GenderElementProps } from 'components/Shared';
+import { Checkpoints } from 'reducers/checkpoints';
 import { Types, Game, Forme } from 'utils';
 
 export interface Pokemon {
@@ -34,6 +35,7 @@ export interface Pokemon {
     pokeball?: string;
     notes?: string;
     linkedTo?: Pokemon['id'] | null;
+    checkpoints?: Checkpoints;
     /* @deprecated */
     champion?: boolean;
 }
@@ -72,5 +74,6 @@ export const PokemonKeys: Pokemon = {
     extraData: {},
     pokeball: 'None',
     notes: '',
+    checkpoints: [],
     linkedTo: null,
 };
diff --git a/src/models/View.ts b/src/models/View.ts
new file mode 100644
index 000000000..de98709d7
--- /dev/null
+++ b/src/models/View.ts
@@ -0,0 +1,15 @@
+export interface View {
+    dialogs?: DialogView;
+}
+
+export interface DialogView {
+    imageUploader?: false;
+    massEditor?: false;
+    themeEditor?: false;
+    checkpointsEditor?: false;
+    rulesEditor?: false;
+    importView?: false;
+    exportView?: false;
+}
+
+export type DialogViewType = keyof DialogView;
diff --git a/src/models/index.ts b/src/models/index.ts
index e4a20e567..269c94523 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -5,3 +5,4 @@ export * from './Badge';
 export * from './Game';
 export * from './Editor';
 export * from './Box';
+export * from './View';
diff --git a/src/parsers/gen1.ts b/src/parsers/gen1.ts
index d380e7512..c38093793 100644
--- a/src/parsers/gen1.ts
+++ b/src/parsers/gen1.ts
@@ -281,7 +281,7 @@ const parseTime = (buf: Buffer) => {
     return `${hours}:${minutesFormatted}`;
 };
 
-export const parseGen1Save = async (file, format) => {
+export const parseGen1Save = async (file: Buffer, options: SaveFileOptions) => {
     const yellow = file[OFFSETS.PIKACHU_FRIENDSHIP] > 0;
     const trainerName = convertWithCharMap(
         file.slice(OFFSETS.PLAYER_NAME, OFFSETS.PLAYER_NAME + 11),
@@ -289,6 +289,7 @@ export const parseGen1Save = async (file, format) => {
     );
     const trainerID = file
         .slice(OFFSETS.PLAYER_ID, OFFSETS.PLAYER_ID + 2)
+        // @ts-expect-error Buffer matches this
         .map((char) => char.toString())
         .join('');
     const rivalName = convertWithCharMap(file.slice(OFFSETS.RIVAL_NAME, OFFSETS.RIVAL_NAME + 11));
@@ -299,6 +300,7 @@ export const parseGen1Save = async (file, format) => {
     const money = parseInt(
         file
             .slice(OFFSETS.MONEY, OFFSETS.MONEY + 3)
+            // @ts-expect-error Buffer matches this
             .map((d) => d.toString(16))
             .join(''),
     );
@@ -308,6 +310,7 @@ export const parseGen1Save = async (file, format) => {
     const casinoCoins = parseInt(
         file
             .slice(OFFSETS.CASINO_COINS, OFFSETS.CASINO_COINS + 2)
+            // @ts-expect-error Buffer matches this
             .map((d) => d.toString(16))
             .join(''),
     );
@@ -317,24 +320,6 @@ export const parseGen1Save = async (file, format) => {
     );
     const deadPokemon = parseBoxedPokemon(file.slice(BOX_OFFSETS.TWO, BOX_OFFSETS.TWO + 0x462));
 
-    // const ellow = file[0];
-
-    const save = {
-        //yellow,
-        trainerName,
-        trainerID,
-        timePlayed,
-        money,
-        pokemonParty,
-        casinoCoins,
-        // pokedexOwned,
-        // pokedexSeen,
-        // badges,
-        rivalName,
-        boxedPokemon,
-        deadPokemon,
-    };
-
     const badgesPossible = [
         { name: 'Boulder Badge', image: 'boulder-badge' },
         { name: 'Cascade Badge', image: 'cascade-badge' },
@@ -353,7 +338,7 @@ export const parseGen1Save = async (file, format) => {
         })
         .filter((badge) => badge);
 
-    const save2 = {
+    const save = {
         isYellow: yellow,
         trainer: {
             name: trainerName,
@@ -370,18 +355,25 @@ export const parseGen1Save = async (file, format) => {
         ],
     };
 
-    return save2;
+    return save;
 };
 
+export interface SaveFileOptions {
+    type: 'nuzlocke' | 'plain';
+    boxes?: {
+        [prop: string]: number[],
+    };
+}
+
 export const loadGen1SaveFile = async (
     filename: string,
-    format: 'plain' | 'nuzlocke' = 'nuzlocke',
+    options: SaveFileOptions,
 ) => {
     const save = await fs.readFileSync(filename);
 
     try {
         const file = Buffer.from(save);
-        const result = await parseGen1Save(file, format);
+        const result = await parseGen1Save(file, options);
         return await result;
     } catch {
         throw new Error('Oops');
diff --git a/src/reducers/__tests__/customTypes.test.ts b/src/reducers/__tests__/customTypes.test.ts
index cc0790ab7..8dccc0961 100644
--- a/src/reducers/__tests__/customTypes.test.ts
+++ b/src/reducers/__tests__/customTypes.test.ts
@@ -1,34 +1,31 @@
 import { customTypes } from '../customTypes';
-import { addCustomCheckpoint, deleteCheckpoint, editCheckpoint, createCustomType, editCustomType, deleteCustomType } from 'actions';
+import {
+    addCustomCheckpoint,
+    deleteCheckpoint,
+    editCheckpoint,
+    createCustomType,
+    editCustomType,
+    deleteCustomType,
+} from 'actions';
 
 describe('customTypes', () => {
     const genState = () => [{ id: '1', type: 'Cosmic', color: 'purple' }];
 
     it('works with add', () => {
         const state1 = genState();
-        const subject = customTypes(
-            state1,
-            createCustomType({ type: 'Light', color: 'white' }),
-        );
+        const subject = customTypes(state1, createCustomType({ type: 'Light', color: 'white' }));
         expect(subject.length).toBe(2);
     });
 
     it('works with edit', () => {
         const state2 = genState();
-        const subject = customTypes(
-            state2,
-            editCustomType('1', { color: 'black' })
-        );
+        const subject = customTypes(state2, editCustomType('1', { color: 'black' }));
         expect(subject[0].color).toBe('black');
     });
 
     it('works with delete', () => {
         const state = genState();
-        const subject = customTypes(
-            state,
-            deleteCustomType('1')
-        );
+        const subject = customTypes(state, deleteCustomType('1'));
         expect(subject.length).toBe(0);
     });
-
 });
diff --git a/src/reducers/customMoveMap.ts b/src/reducers/customMoveMap.ts
index dc7ffe297..61ed5b291 100644
--- a/src/reducers/customMoveMap.ts
+++ b/src/reducers/customMoveMap.ts
@@ -1,4 +1,10 @@
-import { EDIT_CUSTOM_MOVE_MAP, DELETE_CUSTOM_MOVE, Action, REPLACE_STATE, VERSION_1116 } from 'actions';
+import {
+    EDIT_CUSTOM_MOVE_MAP,
+    DELETE_CUSTOM_MOVE,
+    Action,
+    REPLACE_STATE,
+    VERSION_1116,
+} from 'actions';
 const uuid = require('uuid');
 import { State } from 'state';
 
diff --git a/src/reducers/editor.ts b/src/reducers/editor.ts
index 4bf3f98a8..20846f199 100644
--- a/src/reducers/editor.ts
+++ b/src/reducers/editor.ts
@@ -2,7 +2,12 @@ import { CHANGE_EDITOR_SIZE, Action, TOGGLE_TEMTEM_MODE, TOGGLE_MOBILE_RESULT_VI
 import { Editor } from 'models';
 
 export function editor(
-    state: Editor = { minimized: false, temtemMode: false, showResultInMobile: false, monsterType: 'Pokémon' },
+    state: Editor = {
+        minimized: false,
+        temtemMode: false,
+        showResultInMobile: false,
+        monsterType: 'Pokémon',
+    },
     action: Action<CHANGE_EDITOR_SIZE | TOGGLE_TEMTEM_MODE | TOGGLE_MOBILE_RESULT_VIEW>,
 ) {
     switch (action.type) {
diff --git a/src/reducers/editorHistory.ts b/src/reducers/editorHistory.ts
new file mode 100644
index 000000000..0f66f3416
--- /dev/null
+++ b/src/reducers/editorHistory.ts
@@ -0,0 +1,74 @@
+import { Action, REDO_EDITOR_HISTORY, UNDO_EDITOR_HISTORY, UPDATE_EDITOR_HISTORY } from 'actions';
+import { init, last, lift } from 'ramda';
+import { diff, applyChange, Diff, applyDiff, revertChange } from 'deep-diff';
+
+export interface History<T> {
+    past: any[];
+    present?: T;
+    future: any[];
+    lastRevisionType: 'undo' | 'redo' | 'update' | 'load';
+}
+
+export function editorHistory(
+    state: History<any> = {
+        past: [],
+        present: undefined,
+        future: [],
+        lastRevisionType: 'update',
+    },
+    action: Action<UNDO_EDITOR_HISTORY | UPDATE_EDITOR_HISTORY | REDO_EDITOR_HISTORY>,
+): History<any> {
+    switch (action.type) {
+        case UPDATE_EDITOR_HISTORY:
+            const { present, future, past } = state;
+
+            if (action.present == null) {
+                return state;
+            }
+
+            return {
+                past: present == null ? past : [...past, present],
+                present: action.present,
+                // reset the future so we can't create a forked path
+                future: [],
+                lastRevisionType: 'update',
+            };
+
+        case UNDO_EDITOR_HISTORY:
+            const undo = (): History<any> => {
+                const { past, present, future } = state;
+
+                const latest = past ? last(past) : [];
+                const newPast = past.slice(0, past.length - 1);
+                return {
+                    past: newPast,
+                    present: action.present,
+                    future: [present, ...future],
+                    lastRevisionType: 'undo',
+                };
+            };
+
+            return undo();
+
+        case REDO_EDITOR_HISTORY:
+            const redo = (): History<any> => {
+                const { past, present, future } = state;
+
+                const next = future[0];
+                const newFuture = future.slice(1);
+
+                return {
+                    past: [...past, present],
+                    present: action.present,
+                    future: newFuture,
+                    lastRevisionType: 'redo',
+                };
+            };
+
+            return redo();
+
+        default:
+            return state;
+    }
+}
+
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
index 90e6568ff..0368f2e9f 100644
--- a/src/reducers/index.ts
+++ b/src/reducers/index.ts
@@ -16,6 +16,8 @@ import { checkpoints } from './checkpoints';
 import { customMoveMap } from './customMoveMap';
 import { stats } from './stats';
 import { customTypes } from './customTypes';
+import { editorHistory } from './editorHistory';
+import { view } from './view';
 
 export const reducers = {
     box,
@@ -23,6 +25,7 @@ export const reducers = {
     confirmation,
     customMoveMap,
     customTypes,
+    editorHistory,
     game,
     nuzlockes,
     pokemon,
@@ -34,6 +37,7 @@ export const reducers = {
     rules,
     stats,
     style,
+    view,
 };
 
 export const appReducers = combineReducers(reducers);
diff --git a/src/reducers/nuzlocke.ts b/src/reducers/nuzlocke.ts
index ff18730b1..aaf630d42 100644
--- a/src/reducers/nuzlocke.ts
+++ b/src/reducers/nuzlocke.ts
@@ -1,4 +1,11 @@
-import { Action, NEW_NUZLOCKE, DELETE_NUZLOCKE, SWITCH_NUZLOCKE, UPDATE_NUZLOCKE, UPDATE_SWITCH_NUZLOCKE } from 'actions';
+import {
+    Action,
+    NEW_NUZLOCKE,
+    DELETE_NUZLOCKE,
+    SWITCH_NUZLOCKE,
+    UPDATE_NUZLOCKE,
+    UPDATE_SWITCH_NUZLOCKE,
+} from 'actions';
 const uuid = require('uuid');
 
 export interface Nuzlockes {
@@ -9,9 +16,11 @@ export interface Nuzlockes {
 export function nuzlockes(
     state: Nuzlockes = {
         currentId: '',
-        saves: []
+        saves: [],
     },
-    action: Action<NEW_NUZLOCKE | DELETE_NUZLOCKE | SWITCH_NUZLOCKE | UPDATE_NUZLOCKE | UPDATE_SWITCH_NUZLOCKE>,
+    action: Action<
+    NEW_NUZLOCKE | DELETE_NUZLOCKE | SWITCH_NUZLOCKE | UPDATE_NUZLOCKE | UPDATE_SWITCH_NUZLOCKE
+    >,
 ) {
     switch (action.type) {
         case NEW_NUZLOCKE:
@@ -25,14 +34,14 @@ export function nuzlockes(
                         id,
                         data: action?.data || null,
                         isCopy: action?.isCopy || false,
-                    }
-                ]
+                    },
+                ],
             };
 
         case DELETE_NUZLOCKE:
             return {
                 ...state,
-                saves: state.saves.filter(s => s.id !== action.id)
+                saves: state.saves.filter((s) => s.id !== action.id),
             };
         case SWITCH_NUZLOCKE:
             return {
@@ -44,12 +53,12 @@ export function nuzlockes(
                 ...state,
                 currentId: action.newId,
                 saves: [
-                    ...state.saves.filter(s => s.id !== action.id),
+                    ...state.saves.filter((s) => s.id !== action.id),
                     {
                         id: action.id,
                         data: action.data,
-                    }
-                ]
+                    },
+                ],
             };
         case UPDATE_NUZLOCKE:
             // const updateItem = state.saves.find(s => s.id === action.id);
@@ -70,12 +79,12 @@ export function nuzlockes(
             return {
                 ...state,
                 saves: [
-                    ...state.saves.filter(s => s.id !== action.id),
+                    ...state.saves.filter((s) => s.id !== action.id),
                     {
                         id: action.id,
                         data: action.data,
-                    }
-                ]
+                    },
+                ],
             };
         default:
             return state;
diff --git a/src/reducers/trainer.ts b/src/reducers/trainer.ts
index 417d05b87..a5ba80326 100644
--- a/src/reducers/trainer.ts
+++ b/src/reducers/trainer.ts
@@ -1,8 +1,8 @@
 import { Action, EDIT_TRAINER, REPLACE_STATE } from '../actions';
 
-export function trainer(state = { badges: [] }, action) {
+export function trainer(state = { badges: [] }, action: Action<EDIT_TRAINER | REPLACE_STATE>) {
     switch (action.type) {
-        case 'EDIT_TRAINER':
+        case EDIT_TRAINER:
             return { ...state, ...action.edits };
         case REPLACE_STATE:
             return action.replaceWith.trainer;
diff --git a/src/reducers/view.ts b/src/reducers/view.ts
new file mode 100644
index 000000000..fd12b6750
--- /dev/null
+++ b/src/reducers/view.ts
@@ -0,0 +1,21 @@
+import { Action, TOGGLE_DIALOG } from 'actions';
+import { View } from 'models';
+
+export function view (state: View = {
+    dialogs: {
+        imageUploader: false,
+    }
+}, action: Action<TOGGLE_DIALOG>) {
+    switch (action.type) {
+        case TOGGLE_DIALOG:
+            return {
+                ...state,
+                dialogs: {
+                    ...state.dialogs,
+                    [action.dialog]: !state?.dialogs?.[action.dialog] ?? true
+                }
+            };
+        default:
+            return state;
+    };
+}
diff --git a/src/selectors/index.ts b/src/selectors/index.ts
new file mode 100644
index 000000000..cffe6f191
--- /dev/null
+++ b/src/selectors/index.ts
@@ -0,0 +1,5 @@
+import { State } from 'state';
+
+export const gameNameSelector = (state: State) => state.game.name;
+export const minimizedSelector = (state: State) => state.editor.minimized;
+export const editorModeSelector = (state: State) => state.style.editorDarkMode;
diff --git a/src/state/index.ts b/src/state/index.ts
index 5b08c8a07..56abfc1c0 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -1,8 +1,9 @@
 import { Styles } from 'utils';
-import { Pokemon, Trainer, Game, Editor, Boxes } from 'models';
+import { Pokemon, Trainer, Game, Editor, Boxes, View } from 'models';
 import { Theme } from 'themes';
 import { Checkpoints } from 'reducers/checkpoints';
 import { Nuzlockes } from 'reducers/nuzlocke';
+import { History } from 'reducers/editorHistory';
 
 export interface State {
     box: Boxes;
@@ -21,4 +22,6 @@ export interface State {
     customTypes: { type: string; color: string; id: string }[];
     stats: { id?: string; key?: string; value?: string }[];
     nuzlockes: Nuzlockes;
+    editorHistory: History<any>;
+    view: View;
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 5504c73d8..fb2116850 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -48,7 +48,7 @@ const migrations = {
 
 const config = {
     key: 'root',
-    blacklist: ['router'],
+    blacklist: ['router', 'editorHistory'],
     storage,
     version: pkg.version,
     migrations: createMigrate(migrations, { debug: false }),
diff --git a/src/themes/json/bulbapedia.json b/src/themes/json/bulbapedia.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/themes/json/cards.json b/src/themes/json/cards.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/themes/json/compact.json b/src/themes/json/compact.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/themes/json/default.json b/src/themes/json/default.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/themes/json/generation.json b/src/themes/json/generation.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/themes/json/hexagons.json b/src/themes/json/hexagons.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/utils/Forme.ts b/src/utils/Forme.ts
index fa8a19c74..fc6f56857 100644
--- a/src/utils/Forme.ts
+++ b/src/utils/Forme.ts
@@ -90,4 +90,7 @@ export enum Forme {
     Fan = 'fan',
     Heat = 'heat',
     Hail = 'hail',
+
+    IceRider = 'ice-rider',
+    ShadowRider = 'shadow-rider',
 }
diff --git a/src/utils/TestProvider.tsx b/src/utils/TestProvider.tsx
index 695756448..00c596163 100644
--- a/src/utils/TestProvider.tsx
+++ b/src/utils/TestProvider.tsx
@@ -5,7 +5,7 @@ import configureStore from 'redux-mock-store';
 import { generateEmptyPokemon, styleDefaults } from 'utils';
 import { State } from 'state';
 
-export function TestProvider({children}: any) {
+export function TestProvider({ children }: any) {
     const store = configureStore()({
         pokemon: [generateEmptyPokemon(), generateEmptyPokemon()],
         style: {
@@ -13,7 +13,5 @@ export function TestProvider({children}: any) {
         },
     } as State);
 
-    return <Provider store={store}>
-        {children}
-    </Provider>;
+    return <Provider store={store}>{children}</Provider>;
 }
diff --git a/src/utils/__tests__/__snapshots__/utils.test.ts.snap b/src/utils/__tests__/__snapshots__/utils.test.ts.snap
index 7f3bbd247..8480dcb87 100644
--- a/src/utils/__tests__/__snapshots__/utils.test.ts.snap
+++ b/src/utils/__tests__/__snapshots__/utils.test.ts.snap
@@ -3071,5 +3071,23 @@ Array [
   Object {
     "Zarude": Array [],
   },
+  Object {
+    "Regieleki": Array [],
+  },
+  Object {
+    "Regidrago": Array [],
+  },
+  Object {
+    "Glastrier": Array [],
+  },
+  Object {
+    "Spectrier": Array [],
+  },
+  Object {
+    "Calyrex": Array [
+      "Ice Rider",
+      "Shadow Rider",
+    ],
+  },
 ]
 `;
diff --git a/src/utils/__tests__/utils.test.ts b/src/utils/__tests__/utils.test.ts
index fd2925617..80f2c7696 100644
--- a/src/utils/__tests__/utils.test.ts
+++ b/src/utils/__tests__/utils.test.ts
@@ -27,8 +27,12 @@ import { numberToSpecies } from 'utils/numberToSpecies';
 import { capitalize } from 'utils/capitalize';
 import { matchNatureToToxtricityForme } from 'utils/matchNatureToToxtricityForme';
 import { Nature } from 'utils/Nature';
-import { GenderTransformType, handleSignificantGenderDifference } from 'utils/handleSignificantGenderDifferences';
+import {
+    GenderTransformType,
+    handleSignificantGenderDifference,
+} from 'utils/handleSignificantGenderDifferences';
 import { getAdditionalFormes } from 'utils/getAdditionalFormes';
+import { getEvolutionLine } from 'utils/listOfEvolutions';
 
 const objectPropertiesWhere = (obj: object, filter: any) =>
     Array.from(Object.values(obj)).filter(filter).length;
@@ -134,7 +138,6 @@ describe('speciesToNumber', () => {
     it('returns a number', () => {
         expect(speciesToNumber('Bulbasaur')).toBe(1);
         expect(speciesToNumber('Zeraora')).toBe(807);
-        expect(typeof speciesToNumber(choose(listOfPokemon))).toBe('number');
     });
 });
 
@@ -377,6 +380,28 @@ describe(handleSignificantGenderDifference.name, () => {
 });
 
 describe(getAdditionalFormes.name, () => {
-    const subject = listOfPokemon.map(species => ({[species]: getAdditionalFormes(species)}));
+    const subject = listOfPokemon.map((species) => ({ [species]: getAdditionalFormes(species) }));
     expect(subject).toMatchSnapshot();
 });
+
+describe.skip(getEvolutionLine.name, () => {
+    it('returns proper data for basic line', () => {
+        const subject = getEvolutionLine('Bulbasaur');
+        expect(subject).toEqual(['Bulbasaur', 'Ivysaur', 'Venusaur']);
+    });
+
+    it('returns proper data for a split-evo line', () => {
+        const subject = getEvolutionLine('Burmy');
+        expect(subject).toEqual(['Burmy', 'Wormadam', 'Mothim']);
+    });
+
+    it('returns proper data for a split-evo line, multiple lines', () => {
+        const subject = getEvolutionLine('Oddish');
+        expect(subject).toEqual(['Oddish', 'Gloom', 'Vileplume', 'Bellossom']);
+    });
+
+    it('returns proper data for a split-evo line, final evo', () => {
+        const subject = getEvolutionLine('Politoed');
+        expect(subject).toEqual(['Poliwag', 'Poliwhirl', 'Poliwrath', 'Politoed']);
+    });
+});
diff --git a/src/utils/createNumArray.ts b/src/utils/createNumArray.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/utils/customCSSGuide.ts b/src/utils/customCSSGuide.ts
new file mode 100644
index 000000000..136b51200
--- /dev/null
+++ b/src/utils/customCSSGuide.ts
@@ -0,0 +1,9 @@
+
+
+export const customCSSGuide = `# Custom CSS Guide
+
+Curious about the different ways you can use CSS in the nuzlocke-generator to tweak your template? Well, look no further! This guide covers key gotchas and ways to write CSS, and some recipes to make your life easier.
+
+
+
+`;
diff --git a/src/utils/feature.ts b/src/utils/feature.ts
index 67e5ef00b..8dbe91ec8 100644
--- a/src/utils/feature.ts
+++ b/src/utils/feature.ts
@@ -1,4 +1,4 @@
-export const feature = Object.freeze({
+const featuresFromEnv = {
     themeEditing: process.env.THEME_EDITING,
     temTemMode: process.env.TEM_TEM_SUPPORT,
     multipleNuzlockes: process.env.MULTIPLE_NUZLOCKES,
@@ -6,4 +6,21 @@ export const feature = Object.freeze({
     newHotkeys: process.env.NEW_HOTKEYS,
     resultv2: process.env.RESULT_V2,
     hallOfFame: process.env.HALL_OF_FAME,
-});
+    locks: process.env.LOCKS,
+    gen2saves: process.env.GEN2_SAVES,
+    imageUploads: process.env.IMAGE_UPLOADS,
+};
+
+interface BooleanObject {
+    [x: string]: boolean;
+}
+
+const featuresToBooleans = (f: typeof featuresFromEnv): BooleanObject => {
+    const obj = {};
+    for (const feature in f) {
+        obj[feature] = Boolean(f[feature]);
+    }
+    return obj;
+};
+
+export const feature = Object.freeze(featuresToBooleans(featuresFromEnv));
diff --git a/src/utils/fixtures.ts b/src/utils/fixtures.ts
index 1e8f8c57b..2ee234732 100644
--- a/src/utils/fixtures.ts
+++ b/src/utils/fixtures.ts
@@ -3,8 +3,14 @@ import { Types } from './Types';
 import { Moves } from 'components/TeamPokemon/Moves';
 import { Forme } from './Forme';
 import { matchSpeciesToTypes } from './matchSpeciesToTypes';
+import { Pokemon } from 'models';
 
-export const PokemonFixtures = {
+export type PokemonFixtures = Record<
+'Pikachu' | 'Dragonite' | 'MegaMewtwoX' | 'ShinyCorsola' | 'CustomPokemon',
+Pokemon
+>;
+
+export const PokemonFixtures: PokemonFixtures = {
     Pikachu: {
         ...generateEmptyPokemon(),
         species: 'Pikachu',
diff --git a/src/utils/generateReleaseNotes.ts b/src/utils/generateReleaseNotes.ts
index 441449983..22c1a23a9 100644
--- a/src/utils/generateReleaseNotes.ts
+++ b/src/utils/generateReleaseNotes.ts
@@ -5,6 +5,7 @@ const spritesMode = require('assets/sprites-mode.png');
 const hexagonTheme = require('assets/hexagons-theme.png');
 const compactTheme = require('assets/compact-theme.png');
 const imageRender = require('assets/image-render.png');
+const checkpointsForPokemon = require('assets/checkpoints-for-pokemon.png');
 
 export function generateReleaseNotes(version: string) {
     return releaseNotes[version] || '';
@@ -616,5 +617,29 @@ Thank you!
 ## Known Issues
 - External Cors-blocked images cannot be downloaded, however you can use a [base 64 converter](https://www.base64-image.de/) to bypass this
 - **Drag and drop will not reorder positions, you will still have to do that in the editor**
-`
+`,
+    '1.4.0': `
+## Vote!
+- Vote on nuzlocke-generator features [here](https://www.strawpoll.me/21091547)
+- And if you're American, in the upcoming elections [here](https://www.vote.org/)
+
+## Features
+- **Crown Tundra**: new Pokémon, locations, and items from the DLC have been added
+- **Undo/Redo**: accidentally deleted your Magikarp? Now you no longer have to live in regret!
+    - Note: edit history is only through local storage and is not downloaded as part of json downloads
+- **Checkpoints for Pokémon**: you can now reward your Pokémon individually with badges
+![checkpointsForPokemon](${checkpointsForPokemon})
+- **Auto-Evolve Button**: available for Gen I & II games
+
+## Fixes
+- Improved performance of custom CSS inputs
+- Fixed an issue with base64 images as custom checkpoints
+- Added missing Gen II berries (they don't have images, as none exist in game data)
+- The loading screen now makes it clear deleting local storage is irreversible (so save your data!)
+- Fixed an edge case where importing a .json file would break the application
+
+## Known Issues
+- External Cors-blocked images cannot be downloaded, however you can use a [base 64 converter](https://www.base64-image.de/) to bypass this
+- **Drag and drop will not reorder positions, you will still have to do that in the editor**
+`,
 };
diff --git a/src/utils/getAdditionalFormes.ts b/src/utils/getAdditionalFormes.ts
index c00fa4a2b..5fdcf1665 100644
--- a/src/utils/getAdditionalFormes.ts
+++ b/src/utils/getAdditionalFormes.ts
@@ -284,6 +284,9 @@ export const getAdditionalFormes = (species: string | undefined): string[] => {
     if (s === 'toxtricity') {
         return ['Amped-Up', 'Lowkey', 'Gigantamax'];
     }
+    if (s === 'calyrex') {
+        return ['Ice Rider', 'Shadow Rider'];
+    }
 
     return [];
 };
diff --git a/src/utils/getPokemonImage.ts b/src/utils/getPokemonImage.ts
index 2f853a6eb..92a03c525 100644
--- a/src/utils/getPokemonImage.ts
+++ b/src/utils/getPokemonImage.ts
@@ -6,6 +6,7 @@ import { Forme } from './Forme';
 import { getIconFormeSuffix } from './getIconFormeSuffix';
 import { Editor } from 'models';
 import { GenderElementProps, Gender } from 'components';
+import { Species } from './listOfPokemon';
 
 const getGameName = (name: Game) => {
     if (name === 'Red' || name === 'Blue') return 'rb';
@@ -108,8 +109,8 @@ export function getPokemonImage({
     editor,
     gender,
 }: GetPokemonImage) {
-    const regularNumber = speciesToNumber(species || 'Ditto');
-    const leadingZerosNumber = (speciesToNumber(species || 'Ditto') || 0)
+    const regularNumber = speciesToNumber((species as Species) || 'Ditto');
+    const leadingZerosNumber = (speciesToNumber((species as Species) || 'Ditto') || 0)
         .toString()
         .padStart(3, '0');
 
@@ -185,7 +186,7 @@ export function getPokemonImage({
         return `url(img/dw/${regularNumber || 1}.svg)`;
     }
 
-    const handleMimeJr = (s?: string) => s === 'Mime Jr.' ? 'mime-jr' : s;
+    const handleMimeJr = (s?: string) => (s === 'Mime Jr.' ? 'mime-jr' : s);
 
     if (style.teamImages === 'shuffle') {
         return `url(img/shuffle/${(handleMimeJr(species) || 'Ditto')
diff --git a/src/utils/getSpriteIcon.ts b/src/utils/getSpriteIcon.ts
index e8c2b0f00..32f90f4c7 100644
--- a/src/utils/getSpriteIcon.ts
+++ b/src/utils/getSpriteIcon.ts
@@ -1,10 +1,11 @@
 import { speciesToNumber } from './speciesToNumber';
 import { getForme } from './getForme';
+import { Species } from './listOfPokemon';
 
 /**
  * @deprecated Use PokemonIcon component
  */
-export const getSpriteIcon = (species: string, forme: string | undefined) => {
+export const getSpriteIcon = (species: Species, forme: string | undefined) => {
     const n = speciesToNumber(species) || 150;
     return `https://www.serebii.net/pokedex-sm/icon/${
         n.toString().padStart(3, '0') + getForme(forme)
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
new file mode 100644
index 000000000..4b84fffc9
--- /dev/null
+++ b/src/utils/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useEvent';
diff --git a/src/utils/hooks/useEvent.ts b/src/utils/hooks/useEvent.ts
new file mode 100644
index 000000000..e123b495e
--- /dev/null
+++ b/src/utils/hooks/useEvent.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export function useEvent(event, handler, passive = false) {
+    React.useEffect(() => {
+        // initiate the event handler
+        window.addEventListener(event, handler, passive);
+
+        // this will clean up the event every time the component is re-rendered
+        return function cleanup() {
+            window.removeEventListener(event, handler);
+        };
+    });
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0b8ef6f90..b268f3eec 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -16,7 +16,7 @@ export * from './getForme';
 export * from './getGameRegion';
 export * from './getMoveType';
 export * from './getPokemonImage';
-export * from './hotkeyList';
+export * from './listOfHotkeys';
 export * from './listOfGames';
 export * from './listOfItems';
 export * from './listOfLocations';
diff --git a/src/utils/listOfAbilities.ts b/src/utils/listOfAbilities.ts
index 5ca18c1bc..a351b4f05 100644
--- a/src/utils/listOfAbilities.ts
+++ b/src/utils/listOfAbilities.ts
@@ -8,8 +8,10 @@ export const listOfAbilities = [
     'Anticipation',
     'Arena Trap',
     'Aroma Veil',
+    'As One',
     'Aura Break',
     'Bad Dreams',
+    'Ball Fetch',
     'Battery',
     'Battle Armor',
     'Battle Bond',
@@ -20,6 +22,7 @@ export const listOfAbilities = [
     'Bulletproof',
     'Cacophony',
     'Cheek Pouch',
+    'Chilling Neigh',
     'Chlorophyll',
     'Clear Body',
     'Cloud Nine',
@@ -29,11 +32,14 @@ export const listOfAbilities = [
     'Compound Eyes',
     'Contrary',
     'Corrosion',
+    'Cotton Down',
+    'Curious Medicine',
     'Cursed Body',
     'Cute Charm',
     'Damp',
     'Dancer',
     'Dark Aura',
+    'Dauntless Shield',
     'Dazzling',
     'Defeatist',
     'Defiant',
@@ -41,6 +47,7 @@ export const listOfAbilities = [
     'Desolate Land',
     'Disguise',
     'Download',
+    'Dragon\'s Maw',
     'Drizzle',
     'Drought',
     'Dry Skin',
@@ -66,8 +73,11 @@ export const listOfAbilities = [
     'Galvanize',
     'Gluttony',
     'Gooey',
+    'Gorilla Tactics',
     'Grass Pelt',
     'Grassy Surge',
+    'Grim Neigh',
+    'Gulp Missile',
     'Guts',
     'Harvest',
     'Healer',
@@ -75,10 +85,13 @@ export const listOfAbilities = [
     'Heavy Metal',
     'Honey Gather',
     'Huge Power',
+    'Hunger Switch',
     'Hustle',
     'Hydration',
     'Hyper Cutter',
     'Ice Body',
+    'Ice Face',
+    'Ice Scales',
     'Illuminate',
     'Illusion',
     'Immunity',
@@ -88,6 +101,7 @@ export const listOfAbilities = [
     'Inner Focus',
     'Insomnia',
     'Intimidate',
+    'Intrepid Sword',
     'Iron Barbs',
     'Iron Fist',
     'Justified',
@@ -95,6 +109,7 @@ export const listOfAbilities = [
     'Klutz',
     'Leaf Guard',
     'Levitate',
+    'Libero',
     'Light Metal',
     'Lightning Rod',
     'Limber',
@@ -109,7 +124,9 @@ export const listOfAbilities = [
     'Marvel Scale',
     'Mega Launcher',
     'Merciless',
+    'Mimicry',
     'Minus',
+    'Mirror Armor',
     'Misty Surge',
     'Mold Breaker',
     'Moody',
@@ -120,6 +137,7 @@ export const listOfAbilities = [
     'Mummy',
     'Natural Cure',
     'Neuroforce',
+    'Neutralizing Gas',
     'No Guard',
     'Normalize',
     'Oblivious',
@@ -127,6 +145,8 @@ export const listOfAbilities = [
     'Overgrow',
     'Own Tempo',
     'Parental Bond',
+    'Pastel Veil',
+    'Perish Body',
     'Pickpocket',
     'Pickup',
     'Pixilate',
@@ -136,14 +156,18 @@ export const listOfAbilities = [
     'Poison Touch',
     'Power Construct',
     'Power of Alchemy',
+    'Power Spot',
     'Prankster',
     'Pressure',
     'Primordial Sea',
     'Prism Armor',
+    'Propeller Tail',
     'Protean',
     'Psychic Surge',
+    'Punk Rock',
     'Pure Power',
     'Queenly Majesty',
+    'Quick Draw',
     'Quick Feet',
     'Rain Dish',
     'Rattled',
@@ -151,6 +175,7 @@ export const listOfAbilities = [
     'Reckless',
     'Refrigerate',
     'Regenerator',
+    'Ripen',
     'Rivalry',
     'RKS System',
     'Rock Head',
@@ -158,11 +183,13 @@ export const listOfAbilities = [
     'Run Away',
     'Sand Force',
     'Sand Rush',
+    'Sand Spit',
     'Sand Stream',
     'Sand Veil',
     'Sap Sipper',
     'Schooling',
     'Scrappy',
+    'Screen Cleaner',
     'Serene Grace',
     'Shadow Shield',
     'Shadow Tag',
@@ -185,11 +212,14 @@ export const listOfAbilities = [
     'Speed Boost',
     'Stakeout',
     'Stall',
+    'Stalwart',
     'Stamina',
     'Stance Change',
     'Static',
     'Steadfast',
+    'Steam Engine',
     'Steelworker',
+    'Steely Spirit',
     'Stench',
     'Sticky Hold',
     'Storm Drain',
@@ -214,15 +244,18 @@ export const listOfAbilities = [
     'Tough Claws',
     'Toxic Boost',
     'Trace',
+    'Transistor',
     'Triage',
     'Truant',
     'Turboblaze',
     'Unaware',
     'Unburden',
     'Unnerve',
+    'Unseen Fist',
     'Victory Star',
     'Vital Spirit',
     'Volt Absorb',
+    'Wandering Spirit',
     'Water Absorb',
     'Water Bubble',
     'Water Compaction',
@@ -233,29 +266,4 @@ export const listOfAbilities = [
     'Wonder Guard',
     'Wonder Skin',
     'Zen Mode',
-    'Ball Fetch',
-    'Cotton Down',
-    'Dauntless Shield',
-    'Gorilla Tactics',
-    'Gulp Missile',
-    'Hunger Switch',
-    'Ice Face',
-    'Ice Scales',
-    'Intrepid Sword',
-    'Libero',
-    'Mimicry',
-    'Mirror Armor',
-    'Neutralizing Gas',
-    'Pastel Veil',
-    'Perish Body',
-    'Power Spot',
-    'Propeller Tail',
-    'Punk Rock',
-    'Ripen',
-    'Sand Spit',
-    'Screen Cleaner',
-    'Stalwart',
-    'Steam Engine',
-    'Steely Spirit',
-    'Wandering Spirit',
 ];
diff --git a/src/utils/listOfEvolutions.ts b/src/utils/listOfEvolutions.ts
index 80eff53ae..a23de9d33 100644
--- a/src/utils/listOfEvolutions.ts
+++ b/src/utils/listOfEvolutions.ts
@@ -1,6 +1,8 @@
-export interface EvolutionTree {
-    [species: string]: string[];
-}
+import { Species } from './listOfPokemon';
+import { flatten } from 'ramda';
+import { uniq } from 'lodash';
+
+export type EvolutionTree = { [S in Species]?: Species[] };
 
 export const EvolutionTree: EvolutionTree = {
     Bulbasaur: ['Ivysaur'],
@@ -9,11 +11,235 @@ export const EvolutionTree: EvolutionTree = {
     Charmeleon: ['Charizard'],
     Squirtle: ['Wartortle'],
     Wartortle: ['Blastoise'],
-    Pidgey: ['Pidgeotto'],
-    Pidgeotto: ['Pidgeot'],
+
     Caterpie: ['Metapod'],
     Metapod: ['Butterfree'],
     Weedle: ['Kakuna'],
     Kakuna: ['Beedrill'],
+    Pidgey: ['Pidgeotto'],
+    Pidgeotto: ['Pidgeot'],
+    Rattata: ['Raticate'],
+    Pichu: ['Pikachu'],
+    Pikachu: ['Raichu'],
+
+    Spearow: ['Fearow'],
+    Ekans: ['Arbok'],
+    Sandshrew: ['Sandslash'],
+    'Nidoran♀': ['Nidorina'],
+    Nidorina: ['Nidoqueen'],
+    'Nidoran♂': ['Nidorino'],
+    Nidorino: ['Nidoking'],
+
+    Cleffa: ['Clefairy'],
+    Clefairy: ['Clefable'],
+    Igglybuff: ['Jigglypuff'],
+    Jigglypuff: ['Wigglytuff'],
+
+    Zubat: ['Golbat'],
+    Golbat: ['Crobat'],
+
+    Oddish: ['Gloom'],
+    Gloom: ['Vileplume', 'Bellossom'],
+
+    Diglett: ['Dugtrio'],
+    Meowth: ['Persian', 'Perrserker'],
+    Psyduck: ['Golduck'],
+    Mankey: ['Primeape'],
+    Growlithe: ['Arcanine'],
+    Poliwag: ['Poliwhirl'],
+    Poliwhirl: ['Politoed', 'Poliwrath'],
+    Abra: ['Kadabra'],
+    Kadabra: ['Alakazam'],
+
+    Machop: ['Machoke'],
+    Machoke: ['Machamp'],
+
+    Bellsprout: ['Weepinbell'],
+    Weepinbell: ['Victreebel'],
+
+    Tentacool: ['Tentacruel'],
+    Geodude: ['Graveler'],
+    Graveler: ['Golem'],
+
+    Ponyta: ['Rapidash'],
+    Slowpoke: ['Slowking', 'Slowbro'],
+
+    Magnemite: ['Magneton'],
+    Magneton: ['Magnezone'],
+
+    'Farfetch\'d': ['Sirfetch\'d'],
+    Doduo: ['Dodrio'],
+
+    Seel: ['Dewgong'],
+    Grimer: ['Muk'],
+    Shellder: ['Cloyster'],
+    Onix: ['Steelix'],
+    Gastly: ['Haunter'],
+    Haunter: ['Gengar'],
+
+    Drowzee: ['Hypno'],
+    Krabby: ['Kingler'],
+    Voltorb: ['Electrode'],
+
+    Exeggcute: ['Exeggutor'],
+    Cubone: ['Marowak'],
+    Tyrogue: ['Hitmonchan', 'Hitmonlee', 'Hitmontop'],
+
+    Lickitung: ['Lickilicky'],
+    Koffing: ['Weezing'],
+
+    Rhyhorn: ['Rhydon'],
+    Rhydon: ['Rhyperior'],
+    Happiny: ['Chansey'],
+    Chansey: ['Blissey'],
+
+    Tangela: ['Tangrowth'],
+    Horsea: ['Seadra'],
+    Seadra: ['Kingdra'],
+    Goldeen: ['Seaking'],
+    Staryu: ['Starmie'],
+    'Mime Jr.': ['Mr. Mime'],
+    'Mr. Mime': ['Mr. Rime'],
+
+    Scyther: ['Scizor'],
+    Smoochum: ['Jynx'],
+
+    Elekid: ['Electabuzz'],
+    Electabuzz: ['Electivire'],
+    Magby: ['Magmar'],
+    Magmar: ['Magmortar'],
+    Magikarp: ['Gyarados'],
+    Porygon: ['Porygon2'],
+    Porygon2: ['Porygon-Z'],
     Eevee: ['Jolteon', 'Flareon', 'Vaporeon', 'Sylveon', 'Umbreon', 'Espeon', 'Leafeon', 'Glaceon'],
+    Omanyte: ['Omastar'],
+    Kabuto: ['Kabutops'],
+    Munchlax: ['Snorlax'],
+    Dratini: ['Dragonair'],
+    Dragonair: ['Dragonite'],
+
+    Chikorita: ['Bayleef'],
+    Bayleef: ['Meganium'],
+    Cyndaquil: ['Quilava'],
+    Quilava: ['Typhlosion'],
+
+    Totodile: ['Croconaw'],
+    Croconaw: ['Feraligatr'],
+
+    Hoothoot: ['Noctowl'],
+    Sentret: ['Furret'],
+
+    Ledyba: ['Ledian'],
+    Spinarak: ['Ariados'],
+
+    Togepi: ['Togetic'],
+    Togetic: ['Togekiss'],
+
+    Mareep: ['Flaaffy'],
+    Flaaffy: ['Ampharos'],
+    Wooper: ['Quagsire'],
+
+    Hoppip: ['Skiploom'],
+    Skiploom: ['Jumpluff'],
+
+    Pineco: ['Forretress'],
+    Yanma: ['Yanmega'],
+
+    Sunkern: ['Sunflora'],
+
+    Wynaut: ['Wobbuffet'],
+    Aipom: ['Ambipom'],
+    Snubbull: ['Granbull'],
+
+    Azurill: ['Marill'],
+    Marill: ['Azumarill'],
+    Remoraid: ['Octillery'],
+    Chinchou: ['Lanturn'],
+    Swinub: ['Piloswine'],
+    Piloswine: ['Mamoswine'],
+    Teddiursa: ['Ursaring'],
+    Phanpy: ['Donphan'],
+    Mantyke: ['Mantine'],
+
+    Murkrow: ['Honchkrow'],
+    Misdreavus: ['Mismagius'],
+    Houndour: ['Houndoom'],
+    Slugma: ['Magcargo'],
+
+    Sneasel: ['Weavile'],
+    Larvitar: ['Pupitar'],
+    Pupitar: ['Tyranitar'],
+    Gligar: ['Gliscor'],
+
+
+    Turtwig: ['Grotle'],
+    Grotle: ['Torterra'],
+
+
+    Shieldon: ['Bastiodon'],
+    Budew: ['Roselia'],
+    Roselia: ['Roserade'],
+    Burmy: ['Wormadam', 'Mothim'],
+};
+
+const cycleThrough = (species: Species) => {
+    const found: Species[] = [];
+    for (const pokemon in EvolutionTree) {
+        if (EvolutionTree[pokemon].includes(species)) {
+            found.push(pokemon as Species);
+        }
+    }
+    return found;
 };
+
+export const getEvolutionLine = (species: Species, linear: boolean = false): Species[] => {
+    const line: Species[] = [];
+
+    // include queries species
+    line.push(species);
+
+    const getPriors = (species) => {
+        const priors = cycleThrough(species);
+        if (priors.length) {
+            line.push(...priors);
+            priors.forEach(prior => {
+                getPriors(prior);
+                getNextEvo(prior);
+            });
+        }
+    };
+
+    const getNextEvo = (species: Species) => {
+        const evolution = EvolutionTree[species];
+
+        console.log(`evo for ${species}`, evolution, cycleThrough(species));
+
+        if (!evolution) {
+            getPriors(species);
+        }
+        if (evolution && evolution.length === 1) {
+            line.push(evolution[0]);
+            if (EvolutionTree[evolution[0]]) {
+                getNextEvo(evolution[0]);
+            }
+        }
+        if (evolution && evolution.length > 1) {
+            return evolution.forEach(ev => getNextEvo(ev));
+        }
+    };
+
+    getNextEvo(species);
+
+
+    return uniq(line);
+};
+
+
+
+const tree = [
+    ['Bulbasaur', 'Ivysaur', 'Venusaur'],
+    ['Burmy', ['Mothim', 'Wormadam']],
+    ['Wurmple', ['Silcoon', 'Cascoon'], ['Beautifly', 'Dustox']]
+];
+
+const getFlat = tree.map(branch => flatten(branch));
diff --git a/src/utils/hotkeyList.ts b/src/utils/listOfHotkeys.ts
similarity index 74%
rename from src/utils/hotkeyList.ts
rename to src/utils/listOfHotkeys.ts
index 9f381d910..9015d5ed1 100644
--- a/src/utils/hotkeyList.ts
+++ b/src/utils/listOfHotkeys.ts
@@ -12,11 +12,25 @@ export const betaHotkeys: HotkeyList[] = [
     {
         key: 'm',
         comment: 'Toggle editor',
-        onKeyDown: 'toggleEditor',
+        onKeyUp: 'toggleEditor',
     },
+    {
+        key: 'I',
+        label: 'shift+i',
+        comment: 'Toggle image uploader',
+        onKeyUp: 'toggleImageUploader',
+    }
 ];
 
-export const hotkeyList: HotkeyList[] = [
+export const listOfHotkeys: HotkeyList[] = [
+    {
+        key: 'ctrl+z',
+        comment: 'Undo',
+    },
+    {
+        key: 'ctrl+y',
+        comment: 'Redo',
+    },
     {
         key: 'j',
         comment: 'Previous Pok\xE9mon',
diff --git a/src/utils/listOfItems.ts b/src/utils/listOfItems.ts
index ed616cecf..cdce61a3a 100644
--- a/src/utils/listOfItems.ts
+++ b/src/utils/listOfItems.ts
@@ -166,6 +166,18 @@ export const listOfItems = [
     'Wepear Berry',
     'Wiki Berry',
 
+    // Gen 2 berries
+    'Berry',
+    'Bitter Berry',
+    'Burnt Berry',
+    'Gold Berry',
+    'Ice Berry',
+    'Mint Berry',
+    'MiracleBerry',
+    'MysteryBerry',
+    'PRZCureBerry',
+    'PSNCureBerry',
+
     'Bug Gem',
     'Dark Gen',
     'Dragon Gem',
diff --git a/src/utils/listOfLocations.ts b/src/utils/listOfLocations.ts
index 610817179..f3712b203 100644
--- a/src/utils/listOfLocations.ts
+++ b/src/utils/listOfLocations.ts
@@ -292,6 +292,7 @@ export const locations = {
         'Lake Valor',
         'Lake Verity',
         'Lost Tower',
+        'Mining Museum',
         'Mt. Coronet',
         'Newmoon Island',
         'Old Chateau',
@@ -580,6 +581,28 @@ export const locations = {
         'Master Dojo',
         'Tower of Darkness',
         'Tower of Waters',
+
+        'Slipper Slope',
+        'Freezington',
+        'Frostpoint Field',
+        'Giant\'s Bed',
+        'Old Cemetery',
+        'Snowside Slope',
+        'Tunnel to the Top',
+        'Path to the Peak',
+        'Crown Shrine',
+        'Giant\'s Foot',
+        'Roaring-Sea Caves',
+        'Three-Piont Pass',
+        'Frigid Sea',
+        'Ballimere Lake',
+        'Lakeside Cave',
+        'Dynatree Hill',
+        'Rock Peak Ruins',
+        'Iceberg Ruins',
+        'Iron Ruins',
+        'Split-DecisiRuins',
+        'Max Lair',
     ],
 };
 
diff --git a/src/utils/listOfPokemon.ts b/src/utils/listOfPokemon.ts
index 84bcbcef2..c9fce0ded 100644
--- a/src/utils/listOfPokemon.ts
+++ b/src/utils/listOfPokemon.ts
@@ -892,7 +892,12 @@ export const listOfPokemon = [
     'Kubfu',
     'Urshifu',
     'Zarude',
-];
+    'Regieleki',
+    'Regidrago',
+    'Glastrier',
+    'Spectrier',
+    'Calyrex',
+] as const;
 
 const listOfTemtem = [
     'Oree',
@@ -981,7 +986,10 @@ const listOfTemtem = [
     'Vulcrane',
     'Pigepic',
     'Anahir',
-];
+] as const;
 
 export const getListOfCreatures = (isTemtemMode?: boolean) =>
     isTemtemMode ? listOfTemtem : listOfPokemon;
+
+export type Species = typeof listOfPokemon[number];
+export type TemTemSpecies = typeof listOfTemtem[number];
diff --git a/src/utils/matchNatureToToxtricityForme.ts b/src/utils/matchNatureToToxtricityForme.ts
index 80ca920f4..bbcded522 100644
--- a/src/utils/matchNatureToToxtricityForme.ts
+++ b/src/utils/matchNatureToToxtricityForme.ts
@@ -4,21 +4,23 @@ import { Nature } from './Nature';
 export const matchNatureToToxtricityForme = (nature: Nature): keyof typeof Forme => {
     console.log(nature);
 
-    if ([
-        'Adamant',
-        'Brave',
-        'Docile',
-        'Hardy',
-        'Hasty',
-        'Impish',
-        'Jolly',
-        'Lax',
-        'Naive',
-        'Naughty',
-        'Quirky',
-        'Rash',
-        'Sassy',
-    ].includes(nature)) {
+    if (
+        [
+            'Adamant',
+            'Brave',
+            'Docile',
+            'Hardy',
+            'Hasty',
+            'Impish',
+            'Jolly',
+            'Lax',
+            'Naive',
+            'Naughty',
+            'Quirky',
+            'Rash',
+            'Sassy',
+        ].includes(nature)
+    ) {
         return 'Amped';
     } else {
         return 'Lowkey';
diff --git a/src/utils/matchSpeciesToTypes.ts b/src/utils/matchSpeciesToTypes.ts
index 106e69086..b006f808c 100644
--- a/src/utils/matchSpeciesToTypes.ts
+++ b/src/utils/matchSpeciesToTypes.ts
@@ -237,12 +237,57 @@ export const handleSpeciesTypeEdgeCases = ({
     if (
         match({
             ...data,
-            species: ['Slowbro'],
+            species: ['Slowbro', 'Slowking'],
             forme: ['Galarian'],
         })
     )
         return [Types.Psychic, Types.Poison];
 
+    if (
+        match({
+            ...data,
+            species: ['Zapdos'],
+            forme: ['Galarian']
+        })
+    )
+        return [Types.Fighting, Types.Flying];
+
+    if (
+        match({
+            ...data,
+            species: ['Articuno'],
+            forme: ['Galarian'],
+        })
+    )
+        return [Types.Psychic, Types.Flying];
+
+    if (
+        match({
+            ...data,
+            species: ['Moltres'],
+            forme: ['Galarian']
+        })
+    )
+        return [Types.Dark, Types.Flying];
+
+    if (
+        match({
+            ...data,
+            species: ['Calyrex'],
+            forme: ['IceRider']
+        })
+    )
+        return [Types.Psychic, Types.Ice];
+
+    if (
+        match({
+            ...data,
+            species: ['Calyrex'],
+            forme: ['ShadowRider']
+        })
+    )
+        return [Types.Psychic, Types.Ghost];
+
     if (
         match({
             ...data,
@@ -1472,6 +1517,16 @@ export const matchSpeciesToTypes = (
         // 'Shaymin',
         case 'Victini':
             return [Types.Fire, Types.Psychic];
+        case 'Regieleki':
+            return [Types.Electric, Types.Electric];
+        case 'Regidrago':
+            return [Types.Dragon, Types.Dragon];
+        case 'Glastrier':
+            return [Types.Ice, Types.Ice];
+        case 'Spectrier':
+            return [Types.Ghost, Types.Ghost];
+        case 'Calyrex':
+            return [Types.Psychic, Types.Grass];
         // 'Snivy',
         // 'Pansage',
         // 'Simisage',
diff --git a/src/utils/movesByType.ts b/src/utils/movesByType.ts
index 899f99a44..60420226b 100644
--- a/src/utils/movesByType.ts
+++ b/src/utils/movesByType.ts
@@ -84,6 +84,7 @@ export const movesByType: MovesByType = {
         'Lash Out',
         'Wicked Blow',
         'Baddy Bad',
+        'Fiery Wrath',
     ],
     Dragon: [
         'Dragon Claw',
@@ -112,6 +113,7 @@ export const movesByType: MovesByType = {
         'Breaking Swipe',
         'Clangorous Soul',
         'Scale Shot',
+        'Dragon Energy',
     ],
     Electric: [
         '10,000,000 Volt Thunderbolt',
@@ -157,6 +159,7 @@ export const movesByType: MovesByType = {
         'Rising Voltage',
         'Zippy Zap',
         'Pika Papow',
+        'Thunder Cage',
     ],
     Fairy: [
         'Dazzling Gleam',
@@ -241,6 +244,7 @@ export const movesByType: MovesByType = {
         'No Retreat',
         'Octolock',
         'Coaching',
+        'Thunderous Kick',
     ],
     Fire: [
         'Fire Blast',
@@ -344,6 +348,7 @@ export const movesByType: MovesByType = {
         'Menacing Moonraze Maelstrom',
         'HP Ghost',
         'Poltergeist',
+        'Astral Barrage',
     ],
     Grass: [
         'Frenzy Plant',
@@ -459,6 +464,7 @@ export const movesByType: MovesByType = {
         'Powder Snow',
         'HP Ice',
         'Triple Axel',
+        'Glacial Lance',
     ],
     Normal: [
         'Bide',
@@ -757,6 +763,8 @@ export const movesByType: MovesByType = {
         'HP Psychic',
         'Magic Powder',
         'Expanding Force',
+        'Freezing Glare',
+        'Eerie Spell',
     ],
     Rock: [
         'Rock Throw',
diff --git a/src/utils/speciesToNumber.ts b/src/utils/speciesToNumber.ts
index 9e27b2e60..96382962a 100644
--- a/src/utils/speciesToNumber.ts
+++ b/src/utils/speciesToNumber.ts
@@ -1,6 +1,6 @@
-import { listOfPokemon } from './listOfPokemon';
+import { listOfPokemon, Species } from './listOfPokemon';
 
-export function speciesToNumber(s: string): number | null {
+export function speciesToNumber(s: Species): number | null {
     if (s == null) return 132;
     return listOfPokemon.indexOf(s) + 1;
 }
diff --git a/src/utils/styleDefaults.ts b/src/utils/styleDefaults.ts
index 5a2d638bc..20f6500e1 100644
--- a/src/utils/styleDefaults.ts
+++ b/src/utils/styleDefaults.ts
@@ -58,6 +58,7 @@ export interface Styles {
     displayStats: boolean;
     statsOptions: StatsOptions;
     linkedPokemonText: string;
+    customTeamHTML: string;
 }
 
 export const styleDefaults: Styles = {
@@ -111,4 +112,5 @@ export const styleDefaults: Styles = {
         mostCommonTypes: false,
         shiniesCaught: false,
     },
+    customTeamHTML: '',
 };
diff --git a/src/utils/testUtils.tsx b/src/utils/testUtils.tsx
new file mode 100644
index 000000000..83c38456f
--- /dev/null
+++ b/src/utils/testUtils.tsx
@@ -0,0 +1,16 @@
+// test-utils.js
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { store, persistor } from 'store';
+
+const Providers: any = ({ children }) => <Provider store={store}>{children}</Provider>;
+
+const customRender = (ui: Parameters<typeof render>[0], options?: Parameters<typeof render>[1]) =>
+    render(ui, { wrapper: Providers, ...options });
+
+// re-export everything
+export * from '@testing-library/react';
+
+// override render method
+export { customRender as render };
diff --git a/webpack.config.ts b/webpack.config.ts
index 549bfdaff..b94f5c725 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -6,7 +6,6 @@ const HTMLWebpackPlugin = require('html-webpack-plugin');
 // const WorkboxPlugin = require('workbox-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 
-
 // @TODO: do not this lol
 const isProduction = true;