diff --git a/react/package-lock.json b/react/package-lock.json
index 1e887f9..509a12f 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -20,34 +20,70 @@
         }
       }
     },
-    "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.0-9",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.0-9.tgz",
-      "integrity": "sha512-V+PyKLFoFvfg9hj4weCjWVYPKvUI5hFLlPxPzb/SIrI9zhlOibHKtVpOy577fIXV7HFTy+FpeSlMDrhkV76dfA=="
-    },
-    "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.0-14",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.0-14.tgz",
-      "integrity": "sha512-V13Ou3UZ+Y0J5WTnhHDUmZFsz8ycxAyGaowrrPu7uuZXVT78/l4OCrOP6y5U6PdZoy3VJbZvkxCXZyTA6C32fA==",
+    "@material-ui/core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-1.1.0.tgz",
+      "integrity": "sha512-VtNKjHUgma7d6F3492qZovKxR6K9EHMRb9y+Kp5IWExWErQTcKlnqwjmVP5uvvwazTDzqWH+MJlxKj2BqCjSGw==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.0-9"
+        "@babel/runtime": "^7.0.0-beta.42",
+        "@types/jss": "^9.5.3",
+        "@types/react-transition-group": "^2.0.8",
+        "brcast": "^3.0.1",
+        "classnames": "^2.2.5",
+        "debounce": "^1.1.0",
+        "deepmerge": "^2.0.1",
+        "dom-helpers": "^3.2.1",
+        "hoist-non-react-statics": "^2.5.0",
+        "jss": "^9.3.3",
+        "jss-camel-case": "^6.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-vendor-prefixer": "^7.0.0",
+        "keycode": "^2.1.9",
+        "normalize-scroll-left": "^0.1.2",
+        "prop-types": "^15.6.0",
+        "react-event-listener": "^0.5.9",
+        "react-jss": "^8.1.0",
+        "react-popper": "^0.10.0",
+        "react-transition-group": "^2.2.1",
+        "recompose": "^0.26.0 || ^0.27.0",
+        "scroll": "^2.0.3",
+        "warning": "^3.0.0"
       }
     },
-    "@fortawesome/free-solid-svg-icons": {
-      "version": "5.1.0-11",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.1.0-11.tgz",
-      "integrity": "sha512-Dc5EaDbQryTRSt96NzxEnENX+bcKXun3mpvdPt8rSkx3Kf8Kyda60qaA3Or6AKfNYcxLup5Q6zwfWdhdhTNrpQ==",
+    "@material-ui/icons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-1.1.0.tgz",
+      "integrity": "sha512-Z4Xo/EYXuVqCIOjLw7AeBJPtJZsgy9dMAdqu6uYr7gxAefFA8L/QukLv/XE5ByxKYvRhzFG/AjA2OKXwKqfXBQ==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.0-9"
+        "recompose": "^0.26.0 || ^0.27.0"
       }
     },
-    "@fortawesome/react-fontawesome": {
-      "version": "0.1.0-10",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.0-10.tgz",
-      "integrity": "sha1-4zxIe2k9su4D9EQAgRkqPrpISOM=",
+    "@types/jss": {
+      "version": "9.5.3",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.3.tgz",
+      "integrity": "sha512-RQWhcpOVyIhGryKpnUyZARwsgmp+tB82O7c75lC4Tjbmr3hPiCnM1wc+pJipVEOsikYXW0IHgeiQzmxQXbnAIA==",
       "requires": {
-        "humps": "^2.0.1",
-        "prop-types": "^15.5.7"
+        "csstype": "^2.0.0",
+        "indefinite-observable": "^1.0.1"
+      }
+    },
+    "@types/react": {
+      "version": "16.3.16",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.3.16.tgz",
+      "integrity": "sha512-fM7YX3Q9a915DXi8T06F8906bWv19sbkVO+k5PUYRIWXU2PINLEHbMMGgySem2phwF6En0+HGI6MOrobp+Ya1g==",
+      "requires": {
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.11.tgz",
+      "integrity": "sha512-ZLShHPYsjehQBQq1wD9EQBU1BngZOJZMTuUEipENbYPvZMt4bbLcVUaohZTilKLu0viZouadQ6mANHYynNcUOQ==",
+      "requires": {
+        "@types/react": "*"
       }
     },
     "abab": {
@@ -1499,6 +1535,11 @@
         }
       }
     },
+    "brcast": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
+      "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -1779,6 +1820,11 @@
         }
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -1894,6 +1940,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
+      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+    },
     "clean-css": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
@@ -2389,6 +2440,14 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
+      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+      "requires": {
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
@@ -2520,6 +2579,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.3.tgz",
+      "integrity": "sha512-G5HnoK8nOiAq3DXIEoY2n/8Vb7Lgrms+jGJl8E4EJpQEeVONEnPFJSl8IK505wPBoxxtrtHhrRm4WX2GgdqarA=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -2554,6 +2618,11 @@
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs="
     },
+    "debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.1.0.tgz",
+      "integrity": "sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2587,6 +2656,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
+      "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+    },
     "default-require-extensions": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
@@ -2772,6 +2846,11 @@
         }
       }
     },
+    "dom-helpers": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
+      "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -2796,6 +2875,11 @@
         "urijs": "^1.16.1"
       }
     },
+    "dom-walk": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
+      "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -4533,6 +4617,22 @@
         "is-glob": "^2.0.0"
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "global-dirs": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
@@ -5103,10 +5203,10 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
-    "humps": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
-      "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao="
+    "hyphenate-style-name": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
     },
     "iconv-lite": {
       "version": "0.4.23",
@@ -5158,6 +5258,21 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.1.tgz",
+      "integrity": "sha1-CZFUI8yNb36xy3iCrRNGM8mm7cM=",
+      "requires": {
+        "symbol-observable": "1.0.4"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.4.tgz",
+          "integrity": "sha1-Kb9hXUqnEhvdiYsi1LP5vE4qoD0="
+        }
+      }
+    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -5420,6 +5535,11 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
     },
+    "is-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
+      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
+    },
     "is-glob": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
@@ -5428,6 +5548,11 @@
         "is-extglob": "^1.0.0"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -6423,6 +6548,101 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.2.tgz",
+      "integrity": "sha512-XwuTvKBI0DLnTA8elQGag6Fru7g7DwQAuaCylPR0Kj0ztHRbGll5Wg42W6zoiC0EXyF+/L5APjBddrmvUUL0dA==",
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-camel-case": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
+      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2"
+      }
+    },
+    "jss-compose": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
+      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-default-unit": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
+      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
+    },
+    "jss-expand": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
+      "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg=="
+    },
+    "jss-extend": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
+      "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-global": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
+      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
+    },
+    "jss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
+      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-preset-default": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
+      "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
+      "requires": {
+        "jss-camel-case": "^6.1.0",
+        "jss-compose": "^5.0.0",
+        "jss-default-unit": "^8.0.2",
+        "jss-expand": "^5.3.0",
+        "jss-extend": "^6.2.0",
+        "jss-global": "^3.0.0",
+        "jss-nested": "^6.0.1",
+        "jss-props-sort": "^6.0.0",
+        "jss-template": "^1.0.1",
+        "jss-vendor-prefixer": "^7.0.0"
+      }
+    },
+    "jss-props-sort": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
+      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
+    },
+    "jss-template": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
+      "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
+      "requires": {
+        "warning": "^3.0.0"
+      }
+    },
+    "jss-vendor-prefixer": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
+      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
+      "requires": {
+        "css-vendor": "^0.3.8"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
@@ -6432,6 +6652,11 @@
         "array-includes": "^3.0.3"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.0.tgz",
@@ -6870,6 +7095,14 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -7088,6 +7321,11 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
+    "normalize-scroll-left": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
+      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
+    },
     "normalize-url": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -7535,6 +7773,11 @@
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
       "integrity": "sha1-KYuJ34uTsCIdv0Ia0rGx6iP8Z3c="
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -8906,6 +9149,14 @@
         "performance-now": "^2.1.0"
       }
     },
+    "rafl": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/rafl/-/rafl-1.2.2.tgz",
+      "integrity": "sha1-/pMPdYIRAg1H44gV9Rlqi+QVB0A=",
+      "requires": {
+        "global": "~4.3.0"
+      }
+    },
     "randomatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@@ -9054,6 +9305,43 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha1-0ZhAioW0Bwk3qYZn9QDIMvhr1dQ="
     },
+    "react-event-listener": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.5.9.tgz",
+      "integrity": "sha1-xk6E93FWpoJhSDW9wbx7oAkS35c=",
+      "requires": {
+        "@babel/runtime": "^7.0.0-beta.42",
+        "fbjs": "^0.8.16",
+        "prop-types": "^15.6.0",
+        "warning": "^3.0.0"
+      }
+    },
+    "react-jss": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.4.0.tgz",
+      "integrity": "sha512-yIi4udcTIIh5u4KJ47wsL3UZYMuSrp5xR1YBvPeRNshpCdRoJxt5BWmCu1RA3LIa+//dnRsAtAQmMAYeg1W9oQ==",
+      "requires": {
+        "hoist-non-react-statics": "^2.3.1",
+        "jss": "^9.7.0",
+        "jss-preset-default": "^4.3.0",
+        "prop-types": "^15.6.0",
+        "theming": "^1.3.0"
+      }
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-popper": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.10.4.tgz",
+      "integrity": "sha1-rypBXqIike3VBGeNev2opu4ylao=",
+      "requires": {
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-redux": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
@@ -9285,6 +9573,16 @@
         "@babel/runtime": "7.0.0-beta.49"
       }
     },
+    "react-transition-group": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.3.1.tgz",
+      "integrity": "sha512-hu4/LAOFSKjWt1+1hgnOv3ldxmt6lvZGTWz4KUkFrqzXrNDIVSu6txIcPszw7PNduR8en9YTN55JLRyd/L1ZiQ==",
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -9348,6 +9646,19 @@
         "set-immediate-shim": "^1.0.1"
       }
     },
+    "recompose": {
+      "version": "0.27.1",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.27.1.tgz",
+      "integrity": "sha512-p7xsyi/rfNjHfdP7vPU02uSFa+Q1eHhjKrvO+3+kRP4Ortj+MxEmpmd+UQtBGM2D2iNAjzNI5rCyBKp9Ob5McA==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.1.tgz",
@@ -9806,6 +10117,14 @@
         "ajv": "^5.0.0"
       }
     },
+    "scroll": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/scroll/-/scroll-2.0.3.tgz",
+      "integrity": "sha512-3ncZzf8gUW739h3LeS68nSssO60O+GGjT3SxzgofQmT8PIoyHzebql9HHPJopZX8iT6TKOdwaWFMqL6LzUN3DQ==",
+      "requires": {
+        "rafl": "~1.2.1"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -10543,6 +10862,17 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
+    "theming": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
+      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
+      "requires": {
+        "brcast": "^3.0.1",
+        "is-function": "^1.0.1",
+        "is-plain-object": "^2.0.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "throat": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-3.2.0.tgz",
diff --git a/react/package.json b/react/package.json
index a96e551..33f693d 100644
--- a/react/package.json
+++ b/react/package.json
@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
-    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
-    "@fortawesome/react-fontawesome": "0.1.0-10",
+    "@material-ui/core": "^1.1.0",
+    "@material-ui/icons": "^1.1.0",
     "normalize.css": "^8.0.0",
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
diff --git a/react/src/components/App.css b/react/src/components/App.css
index 6384f30..6e637bb 100644
--- a/react/src/components/App.css
+++ b/react/src/components/App.css
@@ -23,7 +23,6 @@
 }
 
 #listactions button {
-  font-size: 0.9rem;
   color: #555555;
   background: none;
   border: none;
@@ -31,6 +30,10 @@
   padding: 0.3rem 0.7em;
 }
 
+#listactions .backbutton {
+  margin: 1rem 0;
+}
+
 #listactions button:hover {
   transition: 0.1s ease-in-out;
   color: #222222;
diff --git a/react/src/components/Container.css b/react/src/components/Container.css
index d9b70a6..6a2cd69 100644
--- a/react/src/components/Container.css
+++ b/react/src/components/Container.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons');
 
 body {
   background: white;
diff --git a/react/src/components/Input.js b/react/src/components/Input.js
index c5bfb88..3fe1ecf 100644
--- a/react/src/components/Input.js
+++ b/react/src/components/Input.js
@@ -19,6 +19,11 @@ function Input(props) {
         }}
         id="input"
         type="text"
+        onKeyPress={e => {
+          if (e.key === 'Enter') {
+            submit();
+          }
+        }}
       />
       <button id="add" onClick={() => submit()}>
         add
diff --git a/react/src/components/ListActions.js b/react/src/components/ListActions.js
index 3c699db..756b2ed 100644
--- a/react/src/components/ListActions.js
+++ b/react/src/components/ListActions.js
@@ -1,35 +1,71 @@
-import { faTrash, faEdit, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconButton } from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AddIcon from '@material-ui/icons/Add';
+import EditIcon from '@material-ui/icons/Edit';
+import BackButton from '@material-ui/icons/ArrowBack';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+const button = {
+  width: 16,
+  height: 36,
+};
+
+const icon = {
+  fontSize: 24,
+};
+
 export default function ListActions({
   startCreateList,
   removeList,
   startEditList,
+  stopCreateList,
+  stopEditList,
   creating,
   editing,
   list,
 }) {
+  function back() {
+    if (editing) {
+      stopEditList();
+    }
+    if (creating) {
+      stopCreateList();
+    }
+  }
   return (
     <div id="listactions">
-      {!creating && (
-        <button onClick={() => startCreateList()}>
-          <FontAwesomeIcon icon={faPlus} />
-        </button>
-      )}
-      {!list && !creating ? 'add list' : null}
-      {list && (
-        <button onClick={() => removeList()}>
-          <FontAwesomeIcon icon={faTrash} />
-        </button>
-      )}
-      {list &&
+      {!creating &&
         !editing && (
-          <button onClick={() => startEditList()}>
-            <FontAwesomeIcon icon={faEdit} />
-          </button>
+          <IconButton style={button} onClick={() => startCreateList()}>
+            <AddIcon style={icon} />
+          </IconButton>
         )}
+      {!list && !creating ? 'add list' : null}
+      {list &&
+        !creating &&
+        !editing && (
+          <IconButton style={button} onClick={() => removeList()}>
+            <DeleteIcon style={icon} />
+          </IconButton>
+        )}
+      {list &&
+        !creating &&
+        !editing && (
+          <IconButton style={button} onClick={() => startEditList()}>
+            <EditIcon style={icon} />
+          </IconButton>
+        )}
+
+      {(creating || editing) && (
+        <IconButton
+          style={button}
+          className="backbutton"
+          onClick={() => back()}
+        >
+          <BackButton style={icon} />
+        </IconButton>
+      )}
     </div>
   );
 }
@@ -45,4 +81,6 @@ ListActions.propTypes = {
   creating: PropTypes.bool.isRequired,
   editing: PropTypes.bool.isRequired,
   list: PropTypes.string,
+  stopCreateList: PropTypes.func.isRequired,
+  stopEditList: PropTypes.func.isRequired,
 };
diff --git a/react/src/components/Selector.css b/react/src/components/Selector.css
index 36ac573..b93eed4 100644
--- a/react/src/components/Selector.css
+++ b/react/src/components/Selector.css
@@ -17,9 +17,11 @@
   background-color: #fbfbfb;
   border-bottom: 1px solid #888888;
   width: 80%;
+  margin: 1rem 0;
 }
 
 #listselector button {
+  align-self: center;
   width: 20%;
   font-size: 0.9rem;
   color: #1b881b;
diff --git a/react/src/components/Selector.js b/react/src/components/Selector.js
index bc678b9..7b80dea 100644
--- a/react/src/components/Selector.js
+++ b/react/src/components/Selector.js
@@ -1,10 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { IconButton } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import CheckIcon from '@material-ui/icons/Check';
 
 import './Selector.css';
 
+const button = {
+  width: 16,
+  height: 36,
+};
+
+const icon = {
+  fontSize: 24,
+};
+
 export default function Selector({
   lists,
   list,
@@ -17,7 +27,7 @@ export default function Selector({
   if (creating) {
     let input = null;
     return (
-      <div id="listselector">
+      <div id="listselector" className="list--input">
         <input
           ref={node => {
             input = node;
@@ -30,16 +40,19 @@ export default function Selector({
             }
           }}
         />
-        <button onClick={() => addList(input.value)}>
-          <FontAwesomeIcon icon={faPlus} />
-        </button>
+        <IconButton
+          style={button}
+          onClick={() => input.value.trim() && addList(input.value)}
+        >
+          <AddIcon style={icon} />
+        </IconButton>
       </div>
     );
   }
   if (editing) {
     let input = null;
     return (
-      <div id="listselector">
+      <div id="listselector" className="list--input">
         <input
           ref={node => {
             input = node;
@@ -53,9 +66,12 @@ export default function Selector({
             }
           }}
         />
-        <button onClick={() => editList(input.value)}>
-          <FontAwesomeIcon icon={faCheck} />
-        </button>
+        <IconButton
+          style={button}
+          onClick={() => input.value.trim() && editList(input.value)}
+        >
+          <CheckIcon style={icon} />
+        </IconButton>
       </div>
     );
   }
diff --git a/react/src/components/Todo.js b/react/src/components/Todo.js
index a0e9c99..f3ac814 100644
--- a/react/src/components/Todo.js
+++ b/react/src/components/Todo.js
@@ -1,8 +1,13 @@
-import { faTrash, faEdit, faCheck } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated } from 'react-spring';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+import CheckIcon from '@material-ui/icons/Check';
+
+const icon = {
+  fontSize: 16,
+};
 
 class Todo extends React.Component {
   constructor(props) {
@@ -83,7 +88,7 @@ class Todo extends React.Component {
             className="save"
             onClick={() => this.stopEdit(input.value)}
           >
-            <FontAwesomeIcon icon={faCheck} />
+            <CheckIcon style={icon} />
           </animated.button>,
         ]
       : [
@@ -92,14 +97,14 @@ class Todo extends React.Component {
             className={deleteClasses.join(' ')}
             onClick={this.props.removeTodo}
           >
-            <FontAwesomeIcon icon={faTrash} />
+            <DeleteIcon style={icon} />
           </animated.button>,
           <animated.button
             key="edit"
             className={editClasses.join(' ')}
             onClick={this.startEdit}
           >
-            <FontAwesomeIcon icon={faEdit} />
+            <EditIcon style={icon} />
           </animated.button>,
         ];
     return (
diff --git a/react/src/containers/InputContainer.js b/react/src/containers/InputContainer.js
index 661f815..da97978 100644
--- a/react/src/containers/InputContainer.js
+++ b/react/src/containers/InputContainer.js
@@ -9,4 +9,7 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(null, mapDispatchToProps)(Input);
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Input);
diff --git a/react/src/containers/ListActionsContainer.js b/react/src/containers/ListActionsContainer.js
index 8d01570..dd1efbe 100644
--- a/react/src/containers/ListActionsContainer.js
+++ b/react/src/containers/ListActionsContainer.js
@@ -1,6 +1,12 @@
 import { connect } from 'react-redux';
 import ListActions from '../components/ListActions';
-import { startCreateList, startEditList, removeList } from '../actions/lists';
+import {
+  startCreateList,
+  startEditList,
+  removeList,
+  stopCreateList,
+  stopEditList,
+} from '../actions/lists';
 
 function mapStateToProps(state) {
   const editing =
@@ -17,6 +23,8 @@ function mapDispatchToProps(dispatch) {
   return {
     startCreateList: () => dispatch(startCreateList()),
     startEditList: () => dispatch(startEditList()),
+    stopCreateList: () => dispatch(stopCreateList()),
+    stopEditList: () => dispatch(stopEditList()),
     removeList: () => dispatch(removeList()),
   };
 }