diff --git a/package-lock.json b/package-lock.json
index ebbd6d9..e10fee6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1141,6 +1141,94 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.35",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.35.tgz",
+      "integrity": "sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.13",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
+          "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz",
@@ -1349,6 +1437,12 @@
       "resolved": "https://registry.npmjs.org/@panva/asn1.js/-/asn1.js-1.0.0.tgz",
       "integrity": "sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw=="
     },
+    "@types/chroma-js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.0.1.tgz",
+      "integrity": "sha512-vVWMMgoJPxnekRV0nccamAUVJgucvUMd0KEFQRkqLJXWvTRgMI2f9gnnGHxiF8po3XUv7ALXzVhixFclnOfX6Q==",
+      "dev": true
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -1387,6 +1481,11 @@
       "integrity": "sha512-IzMhbDYCpv26pC2wboJ4MMOa9GKtjplXfcAqrMeNJpUUwpM/2ATt2w1JPUXwS6spu856TvKZL2AOmeU2rAxskw==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -1403,6 +1502,35 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-dom": {
+      "version": "16.9.8",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
+      "integrity": "sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-select": {
+      "version": "3.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.19.tgz",
+      "integrity": "sha512-d+6qtfFXZeIOAABlVL1e50RZn8ctOABE4tFDxM6KW4lKuXgTTgLVrSik5AX9XjBjV7N80FtS6GTN/WeoXL9Jww==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "@types/react-transition-group": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/unist": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
@@ -2054,6 +2182,40 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@@ -2576,6 +2738,14 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
     },
+    "chroma-js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.0.tgz",
+      "integrity": "sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==",
+      "requires": {
+        "cross-env": "^6.0.3"
+      }
+    },
     "chrome-trace-event": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz",
@@ -2889,6 +3059,18 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -2930,6 +3112,14 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-env": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz",
+      "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==",
+      "requires": {
+        "cross-spawn": "^7.0.0"
+      }
+    },
     "cross-fetch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.5.tgz",
@@ -2942,7 +3132,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3076,8 +3265,7 @@
     "csstype": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz",
-      "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==",
-      "dev": true
+      "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -3253,6 +3441,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.0.1.tgz",
@@ -4055,6 +4252,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -4613,6 +4815,15 @@
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
       "dev": true
     },
+    "import-fresh": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+      "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -4958,6 +5169,11 @@
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
@@ -5077,6 +5293,11 @@
         "type-check": "~0.4.0"
       }
     },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -5295,6 +5516,11 @@
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
       "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -6241,7 +6467,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       },
@@ -6249,8 +6474,7 @@
         "callsites": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-          "dev": true
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
         }
       }
     },
@@ -6284,6 +6508,17 @@
         "is-hexadecimal": "^1.0.0"
       }
     },
+    "parse-json": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
+      "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -6325,8 +6560,7 @@
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
     "path-parse": {
       "version": "1.0.6",
@@ -6336,8 +6570,7 @@
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
     "pbkdf2": {
       "version": "3.1.1",
@@ -6666,6 +6899,14 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-input-autosize": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
+      "integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -6676,6 +6917,32 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-select": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz",
+      "integrity": "sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/cache": "^10.0.9",
+        "@emotion/core": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "memoize-one": "^5.0.0",
+        "prop-types": "^15.6.0",
+        "react-input-autosize": "^2.2.2",
+        "react-transition-group": "^4.3.0"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7038,6 +7305,11 @@
         "path-parse": "^1.0.6"
       }
     },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -7330,7 +7602,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "requires": {
         "shebang-regex": "^3.0.0"
       }
@@ -7338,8 +7609,7 @@
     "shebang-regex": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
     },
     "shell-quote": {
       "version": "1.7.2",
@@ -8899,7 +9169,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
diff --git a/package.json b/package.json
index 4adde5b..5585b80 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "chroma-js": "^2.1.0",
     "date-fns": "^2.16.1",
     "gql-compress": "^2.0.20",
     "gray-matter": "^4.0.2",
@@ -22,15 +23,18 @@
     "node-sass": "^4.14.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-select": "^3.1.0",
     "remark": "^12.0.0",
     "remark-html": "^11.0.1",
     "yaml": "^1.10.0"
   },
   "devDependencies": {
+    "@types/chroma-js": "^2.0.1",
     "@types/jsonwebtoken": "^8.5.0",
     "@types/next-auth": "^3.1.4",
     "@types/node": "^14.10.2",
     "@types/react": "^16.9.49",
+    "@types/react-select": "^3.0.19",
     "@typescript-eslint/eslint-plugin": "^4.1.1",
     "@typescript-eslint/parser": "^4.1.1",
     "eslint": "^7.9.0",
diff --git a/src/components/layout/Layout.module.sass b/src/components/layout/Layout.module.sass
index 6aa160c..f4c0dd1 100644
--- a/src/components/layout/Layout.module.sass
+++ b/src/components/layout/Layout.module.sass
@@ -6,3 +6,9 @@
   width: calc(90% - 4ch)
   padding: 1rem 1rem
   background: none
+
+@media screen and (max-width: 800px)
+  .container
+    margin-left: 3ch
+    width: calc(100% - 4ch)
+    padding: 0.01rem 0.1rem
\ No newline at end of file
diff --git a/src/components/logs/LogFilterSelector.module.sass b/src/components/logs/LogFilterSelector.module.sass
new file mode 100644
index 0000000..ad6e94f
--- /dev/null
+++ b/src/components/logs/LogFilterSelector.module.sass
@@ -0,0 +1 @@
+.multiSelect
diff --git a/src/components/logs/LogFilterSelector.tsx b/src/components/logs/LogFilterSelector.tsx
new file mode 100644
index 0000000..db70f39
--- /dev/null
+++ b/src/components/logs/LogFilterSelector.tsx
@@ -0,0 +1,144 @@
+import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import chroma from "chroma-js";
+import Select, { createFilter, Styles } from "react-select";
+import LogListContext from "../../hooks/LogListContext";
+import LogFilterChoiceContext from "../../hooks/LogFilterChoiceContext";
+import { Config } from "react-select/src/filters";
+
+import cssStyles from "./LogFilterSelector.module.sass";
+
+export default function LogFilterSelector(props: {}) {
+  const {filter, updateFilter} = useContext(LogListContext);
+  const {channelNames, eventNames, characters} = useContext(LogFilterChoiceContext);
+
+  const options = useMemo(() => [
+    ...channelNames.map(n => ({type: 0, color: "#77BB77", value: n, label: n})),
+    ...eventNames.map(n => ({type: 1, color: "#BB7777", value: n, label: n})),
+    ...characters.map(c => ({type: 2, color: "#3377BB", value: c.id, label: c.name})),
+  ], [channelNames, eventNames, characters])
+
+  const value = useMemo(() => {
+    const value = [];
+    if (filter.characters && filter.characters.length > 0) {
+      value.push(...filter.characters.map(ch => options.find(c => c.type === 2 && c.value === ch)))
+    }
+    if (filter.events && filter.events.length > 0) {
+      value.push(...filter.events.map(v => options.find(c => c.type === 1 && c.value === v)))
+    }
+    if (filter.channels && filter.channels.length > 0) {
+      value.push(...filter.channels.map(v => options.find(c => c.type === 0 && c.value === v)))
+    }
+
+    return value
+  }, [filter, options])
+
+  const setValue = useCallback((value: {type:number, value:string}[] ) => {
+    if (value == null) {
+      value = [];
+    }
+
+    updateFilter({
+      ...filter,
+      channels: value.filter(v => v.type === 0).map(v => v.value),
+      events: value.filter(v => v.type === 1).map(v => v.value),
+      characters: value.filter(v => v.type === 2).map(v => v.value),
+    })
+  }, [filter, updateFilter]);
+
+  return (
+    <Select
+      className={cssStyles.multiSelect}
+      closeMenuOnSelect={false}
+      styles={colourStyles}
+      filterOption={createFilter(filterConfig)}
+      defaultValue={[]}
+      isMulti={true}
+      options={options}
+      value={value}
+      onChange={setValue}
+      theme={defaultTheme => ({
+        ...defaultTheme,
+        colors: {
+          ...defaultTheme.colors,
+          ...customTheme,
+        },
+      })}
+    />
+  );
+}
+
+const customTheme = {
+  "primary": "#333333",
+  "primary75": "#333333",
+  "primary50": "#333333",
+  "primary25": "#333333",
+  "danger": "#000000",
+  "dangerLight": "#000000",
+  "neutral0": "#000000",
+  "neutral5": "#000000",
+  "neutral10": "#000000",
+  "neutral20": "#000000",
+  "neutral30": "#000000",
+  "neutral40": "#000000",
+  "neutral50": "#000000",
+  "neutral60": "#000000",
+  "neutral70": "#000000",
+  "neutral80": "#000000",
+  "neutral90": "#000000",
+}
+
+const filterConfig: Config = {
+  ignoreCase: true,
+  ignoreAccents: true,
+  trim: true,
+  matchFrom: 'start',
+};
+
+const colourStyles: Styles = {
+  control: styles => ({ ...styles, backgroundColor: 'rgba(0, 0, 0, 0.25)' }),
+  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+    const color = chroma(data.color);
+    return {
+      ...styles,
+      backgroundColor: isDisabled
+        ? null
+        : isSelected
+        ? data.color
+        : isFocused
+        ? color.alpha(0.1).css()
+        : null,
+      color: isDisabled
+        ? '#ccc'
+        : isSelected
+        ? chroma.contrast(color, 'white') > 2
+          ? 'white'
+          : 'black'
+        : data.color,
+      cursor: isDisabled ? 'not-allowed' : 'default',
+
+      ':active': {
+        ...styles[':active'],
+        backgroundColor: !isDisabled && (isSelected ? data.color : color.alpha(0.3).css()),
+      },
+    };
+  },
+  multiValue: (styles, { data }) => {
+    const color = chroma(data.color);
+    return {
+      ...styles,
+      backgroundColor: color.alpha(0.1).css(),
+    };
+  },
+  multiValueLabel: (styles, { data }) => ({
+    ...styles,
+    color: data.color,
+  }),
+  multiValueRemove: (styles, { data }) => ({
+    ...styles,
+    color: data.color,
+    ':hover': {
+      backgroundColor: data.color,
+      color: 'white',
+    },
+  }),
+};
diff --git a/src/components/logs/LogList.tsx b/src/components/logs/LogList.tsx
new file mode 100644
index 0000000..ff417b6
--- /dev/null
+++ b/src/components/logs/LogList.tsx
@@ -0,0 +1,24 @@
+import React, { useContext, useEffect } from "react";
+
+import LogListContext from "../../hooks/LogListContext";
+
+export default function LogList() {
+  const {headers, filter, updateFilter} = useContext(LogListContext);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      updateFilter({...filter, limit: 10});
+    }, 3000);
+
+    return () => clearTimeout(timeout);
+  }, [updateFilter]);
+
+  return (
+    <>
+      <ol>
+        {headers.map(l => <li key={l.shortId}>{l.title || `${l.channelName} — ${l.date}`}</li>)}
+      </ol>
+      <pre>{JSON.stringify(filter, null, 4)}</pre>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/hooks/LogFilterChoiceContext.tsx b/src/hooks/LogFilterChoiceContext.tsx
new file mode 100644
index 0000000..603e9db
--- /dev/null
+++ b/src/hooks/LogFilterChoiceContext.tsx
@@ -0,0 +1,59 @@
+import React, { useState, useCallback, useEffect, useContext } from "react";
+import { LogHeaderCharacter } from "../lib/rpdata/logs";
+import LogListContext from "./LogListContext";
+
+export interface LogFilterChoiceContextData {
+  characters: LogHeaderCharacter[]
+  channelNames: string[]
+  eventNames: string[]
+}
+
+const LogFilterChoiceContext: React.Context<LogFilterChoiceContextData> = React.createContext({
+  characters: [],
+  channelNames: [],
+  eventNames: [],
+});
+
+interface LogFilterChoiceContextProviderProps {
+  children: JSX.Element | JSX.Element[]
+}
+
+export function LogFilterChoiceContextProvider(props: LogFilterChoiceContextProviderProps) {
+  const {headers} = useContext(LogListContext);
+  const [value, setValue] = useState<LogFilterChoiceContextData>({
+    characters: [],
+    channelNames: [],
+    eventNames: [],
+  });
+
+  useEffect(() => {
+    const characters = new Map<string, LogHeaderCharacter>();
+    const channelNames = new Set<string>();
+    const eventNames = new Set<string>();
+
+    for (const header of headers) {
+      for (const character of header.characters) {
+        characters.set(character.id, character);
+      }
+
+      channelNames.add(header.channelName);
+      if (header.eventName) {
+        eventNames.add(header.eventName);
+      }
+    }
+
+    setValue(c => c.characters.length < characters.size ? {
+      channelNames: Array.from(channelNames.values()),
+      eventNames: Array.from(eventNames.values()),
+      characters: Array.from(characters.values()),
+    } : c);
+  }, [headers])
+
+  return (
+    <LogFilterChoiceContext.Provider value={value}>
+      {props.children}
+    </LogFilterChoiceContext.Provider>
+  );
+}
+
+export default LogFilterChoiceContext
\ No newline at end of file
diff --git a/src/lib/rpdata/logs.ts b/src/lib/rpdata/logs.ts
index 9aadce3..a6fae0e 100644
--- a/src/lib/rpdata/logs.ts
+++ b/src/lib/rpdata/logs.ts
@@ -110,7 +110,7 @@ interface LogCommon {
   open: boolean
 }
 
-interface LogHeaderCharacter {
+export interface LogHeaderCharacter {
   id: string
   name: string
   shortName: string
diff --git a/src/pages/logs/index.tsx b/src/pages/logs/index.tsx
index 70669fb..24e4756 100644
--- a/src/pages/logs/index.tsx
+++ b/src/pages/logs/index.tsx
@@ -1,11 +1,14 @@
-import React, { useContext, useEffect } from "react";
+import React from "react";
 import { parse } from "url";
 import { GetServerSideProps } from "next";
 import Head from "next/head";
 
 import { LogHeader, listLogs, LogFilter, logFilterFromQueryString } from "../../lib/rpdata/logs";
 import gqlSsrClient from "../../lib/client/graphql-ssr";
-import LogListContext, { LogListContextProvider } from "../../hooks/LogListContext";
+import { LogListContextProvider } from "../../hooks/LogListContext";
+import { LogFilterChoiceContextProvider } from "../../hooks/LogFilterChoiceContext";
+import LogList from "../../components/logs/LogList";
+import LogFilterSelector from "../../components/logs/LogFilterSelector";
 
 interface LogsPageProps {
   headers: LogHeader[]
@@ -18,31 +21,14 @@ export default function LogsPage(props: LogsPageProps) {
       <Head>
         <title>Logs - Aite RP</title>
       </Head>
+      <LogFilterChoiceContextProvider>
+        <LogFilterSelector />
+      </LogFilterChoiceContextProvider>
       <LogList />
     </LogListContextProvider>
   );
 }
 
-function LogList() {
-  const {headers, filter, updateFilter} = useContext(LogListContext);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      updateFilter({...filter, limit: 10});
-    }, 3000);
-
-    return () => clearTimeout(timeout);
-  }, [updateFilter]);
-
-  return (
-    <>
-      <ol>
-        {headers.map(l => <li key={l.shortId}>{l.title || `${l.channelName} — ${l.date}`}</li>)}
-      </ol>
-      <pre>{JSON.stringify(filter, null, 4)}</pre>
-    </>
-  );
-}
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const u = parse(ctx.req.url);
diff --git a/src/styles/global.css b/src/styles/global.css
index cb36704..6e4cd04 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -9,6 +9,10 @@ body {
   color: #abc;
 }
 
+html {
+  background-color: black;
+}
+
 * {
   box-sizing: border-box;
 }