diff --git a/.eslintrc.js b/.eslintrc.js
index 0ee1945..48fcaf4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,13 +34,6 @@ module.exports = {
     'import/no-unresolved': 2,
     'import/no-webpack-loader-syntax': 0,
     'import/prefer-default-export': 0,
-    indent: [
-      2,
-      2,
-      {
-        SwitchCase: 1,
-      },
-    ],
     'jsx-a11y/aria-props': 2,
     'jsx-a11y/heading-has-content': 0,
     'jsx-a11y/label-has-associated-control': [
diff --git a/app/components/FoodSiteDetail/index.js b/app/components/FoodSiteDetail/index.js
index 8c67dc6..e911e3e 100644
--- a/app/components/FoodSiteDetail/index.js
+++ b/app/components/FoodSiteDetail/index.js
@@ -5,14 +5,12 @@
  */
 
 import React, { memo } from 'react';
-// import _ from 'lodash';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 import Grid from '@material-ui/core/Grid';
-
-// import axios from 'axios';
+import axios from 'axios';
 
 /* eslint-disable react/prefer-stateless-function */
 class FoodSiteDetail extends React.PureComponent {
@@ -24,40 +22,11 @@ class FoodSiteDetail extends React.PureComponent {
     };
   }
 
-  //   uncomment other component mount and delete this once we have fewer null results
   componentDidMount() {
-    const res = {
-      name: 'funkytown',
-      open_from: 'March',
-      open_to: 'October',
-      open_time1: 6,
-      close_time1: 9,
-      sunday: true,
-      monday: true,
-      tuesday: true,
-      wednesday: true,
-      friday: true,
-      saturday: false,
-      snap: true,
-      wic: true,
-      fmnp: true,
-      fresh_produce: false,
-      mrfei_score: 152,
-      food_bucks: false,
-      open_to_spec_group: false,
-      address: 'yer moms house',
-      city: 'pgh',
-      state: 'pa',
-      zip_code: 12345,
-      location_description: 'sassy',
-    };
-    this.setState({ siteDetails: res });
+    axios
+      .get(`https://dev.stevesaylor.io/api/location/${this.props.siteId}/`)
+      .then(res => this.setState({ siteDetails: res.data }));
   }
-  //   componentDidMount() {
-  //     axios
-  //       .get(`https://dev.stevesaylor.io/api/location/${this.props.siteId}/`)
-  //       .then(res => this.setState({ siteDetails: res.data }));
-  //   }
 
   render() {
     return (
@@ -280,6 +249,6 @@ class FoodSiteDetail extends React.PureComponent {
 
 export default memo(FoodSiteDetail);
 
-// FoodSiteDetail.propTypes = {
-//   siteId: PropTypes.string.isRequired,
-// };
+FoodSiteDetail.propTypes = {
+  siteId: PropTypes.string.isRequired,
+};
diff --git a/app/components/Map/detailConstants.js b/app/components/Map/detailConstants.js
new file mode 100644
index 0000000..bafa129
--- /dev/null
+++ b/app/components/Map/detailConstants.js
@@ -0,0 +1 @@
+export const detailArray = ['all', 'wic', 'snap'];
diff --git a/app/components/Map/detailSelect.js b/app/components/Map/detailSelect.js
new file mode 100644
index 0000000..187c7a6
--- /dev/null
+++ b/app/components/Map/detailSelect.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    position: 'absolute',
+    top: theme.spacing(16),
+    left: theme.spacing(4),
+    zIndex: 100,
+    background: '#FAFAFA',
+  },
+});
+
+/* eslint-disable react/prefer-stateless-function */
+class DetailSelect extends Component {
+  render() {
+    const details = this.props.detailArray;
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <FormControl>
+          <InputLabel htmlFor="detail-selector">Details</InputLabel>
+          <Select
+            value={this.props.selectedDetail}
+            onChange={this.props.handleChange}
+            input={<Input name="detailSelector" id="detail-selector" />}
+          >
+            {details.map(detail => (
+              <MenuItem key={detail} value={detail}>
+                {detail.toUpperCase()}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText>Filter by important details</FormHelperText>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+DetailSelect.propTypes = {
+  detailArray: PropTypes.array.isRequired,
+  classes: PropTypes.object,
+  selectedDetail: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(DetailSelect);
diff --git a/app/components/Map/index.js b/app/components/Map/index.js
index b47deb3..005f49d 100644
--- a/app/components/Map/index.js
+++ b/app/components/Map/index.js
@@ -10,7 +10,11 @@ import _ from 'lodash';
 import ReactMapGL, { Marker, Popup } from 'react-map-gl';
 import axios from 'axios';
 import MapSelect from './mapSelect';
+import DetailSelect from './detailSelect';
+import TypeSelect from './typeSelect';
 import { townArray } from './townConstants';
+import { detailArray } from './detailConstants';
+import { typeArray } from './typeConstants';
 import CityInfo from './cityInfo';
 import CityPin from './cityPin';
 import Wrapper from './Wrapper';
@@ -28,21 +32,34 @@ class Map extends React.PureComponent {
         longitude: -79.9659,
         zoom: 12,
       },
-      selectedTown: 'Pittsburgh',
+      selectedDetail: 'wic',
+      selectedTown: {
+        place: 'Pittsburgh',
+        longitude: -79.9762579547,
+        latitude: 40.4396259337,
+      },
+      selectedTypes: [],
       popupInfo: null,
       sites: [],
+      allSites: [],
     };
   }
 
   componentDidMount() {
-    axios
-      .get('https://dev.stevesaylor.io/api/location/')
-      .then(res => this.setState({ sites: res.data }));
+    axios.get('https://dev.stevesaylor.io/api/location/').then(res =>
+      this.setState({
+        allSites: res.data,
+        sites: _.filter(res.data, site => site.wic),
+      }),
+    );
   }
 
-  handleSelection(event) {
+  handlelocationSelection(_event, value) {
+    if (!value) {
+      return;
+    }
     const oldView = _.clone(this.state.viewport);
-    const place = event.target.value;
+    const { place } = value;
     const { latitude, longitude } = _.find(townArray, { place });
     const newView = _.assign({}, oldView, {
       latitude,
@@ -55,6 +72,36 @@ class Map extends React.PureComponent {
     });
   }
 
+  handleDetailSelection(event) {
+    const totalSites = _.cloneDeep(this.state.allSites);
+    const filter = event.target.value;
+
+    if (filter === 'all') {
+      this.setState({
+        selectedDetail: filter,
+        sites: totalSites,
+      });
+    } else {
+      const filteredSites = _.filter(totalSites, site => site[filter]);
+      this.setState({
+        selectedDetail: filter,
+        sites: filteredSites,
+      });
+    }
+  }
+
+  handleTypeSelection(event) {
+    const totalSites = _.cloneDeep(this.state.allSites);
+    const types = event.target.value;
+    const filteredSites = types.length
+      ? _.filter(totalSites, site => _.includes(types, site.type))
+      : totalSites;
+    this.setState({
+      selectedTypes: types,
+      sites: filteredSites,
+    });
+  }
+
   renderCityMarker = (city, index) => {
     if (city.longitude) {
       return (
@@ -98,7 +145,17 @@ class Map extends React.PureComponent {
         <MapSelect
           townArray={townArray}
           selectedTown={this.state.selectedTown}
-          handleChange={e => this.handleSelection(e)}
+          handleChange={(_e, v) => this.handlelocationSelection(_e, v)}
+        />
+        <DetailSelect
+          detailArray={detailArray}
+          selectedDetail={this.state.selectedDetail}
+          handleChange={e => this.handleDetailSelection(e)}
+        />
+        <TypeSelect
+          typeArray={typeArray}
+          selectedTypes={this.state.selectedTypes}
+          handleChange={e => this.handleTypeSelection(e)}
         />
         <ReactMapGL
           {...this.state.viewport}
diff --git a/app/components/Map/mapSelect.js b/app/components/Map/mapSelect.js
index 07adfce..9323b2c 100644
--- a/app/components/Map/mapSelect.js
+++ b/app/components/Map/mapSelect.js
@@ -1,12 +1,11 @@
+import _ from 'lodash';
 import React, { Component } from 'react';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 
 const styles = theme => ({
   root: {
@@ -27,18 +26,21 @@ class MapSelect extends Component {
     return (
       <div className={classes.root}>
         <FormControl>
-          <InputLabel htmlFor="town-selector">Town/Neighborhood</InputLabel>
-          <Select
-            value={this.props.selectedTown}
+          <Autocomplete
+            options={towns}
+            getOptionLabel={option => option.place}
             onChange={this.props.handleChange}
-            input={<Input name="townSelector" id="town-selector" />}
-          >
-            {towns.map(town => (
-              <MenuItem key={town.latitude + town.longitude} value={town.place}>
-                {town.place}
-              </MenuItem>
-            ))}
-          </Select>
+            style={{ width: 300 }}
+            defaultValue={_.find(towns, { place: 'Pittsburgh' })}
+            renderInput={params => (
+              <TextField
+                {...params}
+                label="Zoom a Neighborhood"
+                variant="outlined"
+                fullWidth
+              />
+            )}
+          />
           <FormHelperText>Choose a region for instant zoom</FormHelperText>
         </FormControl>
       </div>
@@ -49,7 +51,7 @@ class MapSelect extends Component {
 MapSelect.propTypes = {
   townArray: PropTypes.array.isRequired,
   classes: PropTypes.object,
-  selectedTown: PropTypes.string.isRequired,
+  selectedTown: PropTypes.object.isRequired,
   handleChange: PropTypes.func.isRequired,
 };
 
diff --git a/app/components/Map/typeConstants.js b/app/components/Map/typeConstants.js
new file mode 100644
index 0000000..1f87eef
--- /dev/null
+++ b/app/components/Map/typeConstants.js
@@ -0,0 +1 @@
+export const typeArray = ['Convenience Store', 'Farmers Market', 'Supermarket'];
diff --git a/app/components/Map/typeSelect.js b/app/components/Map/typeSelect.js
new file mode 100644
index 0000000..84d6ba2
--- /dev/null
+++ b/app/components/Map/typeSelect.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    position: 'absolute',
+    top: theme.spacing(28),
+    left: theme.spacing(4),
+    zIndex: 100,
+    background: '#FAFAFA',
+  },
+});
+
+/* eslint-disable react/prefer-stateless-function */
+class TypeSelect extends Component {
+  render() {
+    const types = this.props.typeArray;
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.root}>
+        <FormControl>
+          <InputLabel htmlFor="type-selector">Site Types</InputLabel>
+          <Select
+            value={this.props.selectedTypes}
+            onChange={this.props.handleChange}
+            multiple
+            input={<Input name="typeSelector" id="type-selector" />}
+          >
+            {types.map(type => (
+              <MenuItem key={type} value={type}>
+                {type}
+              </MenuItem>
+            ))}
+          </Select>
+          <FormHelperText>Filter by site type</FormHelperText>
+        </FormControl>
+      </div>
+    );
+  }
+}
+
+TypeSelect.propTypes = {
+  typeArray: PropTypes.array.isRequired,
+  classes: PropTypes.object,
+  selectedTypes: PropTypes.array.isRequired,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(TypeSelect);
diff --git a/package-lock.json b/package-lock.json
index 8957efa..66ecf8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1933,52 +1933,185 @@
       "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
     },
     "@material-ui/core": {
-      "version": "4.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.0.0-beta.2.tgz",
-      "integrity": "sha512-AcAmd55hRloY2YqDvcwmZK4OiLZ+98nKliRh/YKyQqISEV0Lt98qRxxepluAm4KKr509Bjgg+rEJ+K+FpDTGjw==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "@material-ui/styles": "^4.0.0-beta.2",
-        "@material-ui/system": "^4.0.0-beta.2",
-        "@material-ui/types": "^4.0.0-beta.2",
-        "@material-ui/utils": "^4.0.0-beta.1",
-        "@types/react-transition-group": "^2.0.16",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.1.tgz",
+      "integrity": "sha512-wehQI0ahHDsZjK+uA8Q5Cs1K1/1HXYe2icwTqARaRCt7d9bTp0bJN/C9TLe/+sRWfRIkx6OIk7ABSJT1jBqxRg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.9.0",
+        "@material-ui/system": "^4.9.1",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "@types/react-transition-group": "^4.2.0",
         "clsx": "^1.0.2",
-        "convert-css-length": "^1.0.2",
-        "csstype": "^2.5.2",
-        "debounce": "^1.1.0",
-        "deepmerge": "^3.0.0",
-        "hoist-non-react-statics": "^3.2.1",
-        "is-plain-object": "^2.0.4",
-        "normalize-scroll-left": "^0.1.2",
+        "convert-css-length": "^2.0.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "normalize-scroll-left": "^0.2.0",
         "popper.js": "^1.14.1",
         "prop-types": "^15.7.2",
-        "react-event-listener": "^0.6.6",
-        "react-transition-group": "^4.0.0",
-        "warning": "^4.0.1"
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.4.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
-          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
           "requires": {
             "regenerator-runtime": "^0.13.2"
           }
         },
+        "@emotion/hash": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
+          "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
+        },
+        "@material-ui/styles": {
+          "version": "4.9.0",
+          "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz",
+          "integrity": "sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "@emotion/hash": "^0.7.4",
+            "@material-ui/types": "^5.0.0",
+            "@material-ui/utils": "^4.7.1",
+            "clsx": "^1.0.2",
+            "csstype": "^2.5.2",
+            "hoist-non-react-statics": "^3.2.1",
+            "jss": "^10.0.3",
+            "jss-plugin-camel-case": "^10.0.3",
+            "jss-plugin-default-unit": "^10.0.3",
+            "jss-plugin-global": "^10.0.3",
+            "jss-plugin-nested": "^10.0.3",
+            "jss-plugin-props-sort": "^10.0.3",
+            "jss-plugin-rule-value-function": "^10.0.3",
+            "jss-plugin-vendor-prefixer": "^10.0.3",
+            "prop-types": "^15.7.2"
+          }
+        },
+        "@material-ui/types": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
+          "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
+        },
+        "@types/react-transition-group": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
+          "integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
+          "requires": {
+            "@types/react": "*"
+          }
+        },
         "convert-css-length": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-1.0.2.tgz",
-          "integrity": "sha512-ecV7j3hXyXN1X2XfJBzhMR0o1Obv0v3nHmn0UiS3ACENrzbxE/EknkiunS/fCwQva0U62X1GChi8GaPh4oTlLg==",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz",
+          "integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg=="
+        },
+        "dom-helpers": {
+          "version": "5.1.3",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+          "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+          "requires": {
+            "@babel/runtime": "^7.6.3",
+            "csstype": "^2.6.7"
+          },
+          "dependencies": {
+            "csstype": {
+              "version": "2.6.8",
+              "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz",
+              "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA=="
+            }
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "jss-plugin-camel-case": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz",
+          "integrity": "sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==",
+          "requires": {
+            "@babel/runtime": "^7.3.1",
+            "hyphenate-style-name": "^1.0.3",
+            "jss": "10.0.4"
+          }
+        },
+        "jss-plugin-default-unit": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz",
+          "integrity": "sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==",
           "requires": {
-            "console-polyfill": "^0.1.2",
-            "parse-unit": "^1.0.1"
+            "@babel/runtime": "^7.3.1",
+            "jss": "10.0.4"
+          }
+        },
+        "jss-plugin-global": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz",
+          "integrity": "sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==",
+          "requires": {
+            "@babel/runtime": "^7.3.1",
+            "jss": "10.0.4"
+          }
+        },
+        "jss-plugin-nested": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz",
+          "integrity": "sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==",
+          "requires": {
+            "@babel/runtime": "^7.3.1",
+            "jss": "10.0.4",
+            "tiny-warning": "^1.0.2"
+          }
+        },
+        "jss-plugin-props-sort": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz",
+          "integrity": "sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==",
+          "requires": {
+            "@babel/runtime": "^7.3.1",
+            "jss": "10.0.4"
+          }
+        },
+        "jss-plugin-rule-value-function": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz",
+          "integrity": "sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==",
+          "requires": {
+            "@babel/runtime": "^7.3.1",
+            "jss": "10.0.4"
+          }
+        },
+        "jss-plugin-vendor-prefixer": {
+          "version": "10.0.4",
+          "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz",
+          "integrity": "sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==",
+          "requires": {
+            "@babel/runtime": "^7.3.1",
+            "css-vendor": "^2.0.7",
+            "jss": "10.0.4"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+          "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
           }
         },
         "regenerator-runtime": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -2005,6 +2138,43 @@
         }
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.41",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.41.tgz",
+      "integrity": "sha512-nVXW5eHOLtExRSlfd6Hxa0hna1xenqCunoQv1MbGAVqW3XzLgWdCE2xKWwG3Ewdt/CZ4QUF5+KTTLVtZIqIeOw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.7.1",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "@material-ui/utils": {
+          "version": "4.7.1",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz",
+          "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        }
+      }
+    },
     "@material-ui/pickers": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.7.tgz",
@@ -2092,28 +2262,27 @@
       }
     },
     "@material-ui/system": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.0.2.tgz",
-      "integrity": "sha512-gpLYcDycJjK8tvWI9ZKrVLdGjFQ/YJM74TvhIMkP5ML453ZtPuFzMLt6FVEKp8okWxFEgYXVBNNSB4IF3Yig8g==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.1.tgz",
+      "integrity": "sha512-CLrJK2aKNWNwruGVTRf+rLz96P4jmozpY2UaCE6hBTa1oGsQ396YXOQQABQ4c0igawmdyf5iQb0zs9j5zsAf1w==",
       "requires": {
-        "@babel/runtime": "^7.2.0",
-        "deepmerge": "^3.0.0",
-        "prop-types": "^15.7.2",
-        "warning": "^4.0.1"
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.7.1",
+        "prop-types": "^15.7.2"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.4.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
-          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
           "requires": {
             "regenerator-runtime": "^0.13.2"
           }
         },
         "regenerator-runtime": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -2123,27 +2292,27 @@
       "integrity": "sha512-FGhogU9l4s+ycMcC3hhOAvu5hcWa5TVSCCGUf4NOUF904ythroWSAvcCHn92NjftXZ8WZqmtPjL1K/d90Pq/3Q=="
     },
     "@material-ui/utils": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.0.1.tgz",
-      "integrity": "sha512-mWRcMQIrqsXGze73tx3hNfB1NUu+BL/oIQI7TImyuhsia1EQXw3bPVBjgwTzqM6MqfXw6eh1fR45Di+WN5hASA==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.7.1.tgz",
+      "integrity": "sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ==",
       "requires": {
-        "@babel/runtime": "^7.2.0",
+        "@babel/runtime": "^7.4.4",
         "prop-types": "^15.7.2",
         "react-is": "^16.8.0"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.4.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
-          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
           "requires": {
             "regenerator-runtime": "^0.13.2"
           }
         },
         "regenerator-runtime": {
-          "version": "0.13.2",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
         }
       }
     },
@@ -5208,6 +5377,30 @@
       "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
       "dev": true
     },
+    "css-vendor": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
+      "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "is-in-browser": "^1.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        }
+      }
+    },
     "css-what": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
@@ -9594,6 +9787,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
       "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
       "requires": {
         "isobject": "^3.0.1"
       }
@@ -9753,7 +9947,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
     },
     "isomorphic-fetch": {
       "version": "2.2.1",
@@ -11076,6 +11271,37 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.4.tgz",
+      "integrity": "sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "csstype": {
+          "version": "2.6.8",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.8.tgz",
+          "integrity": "sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA=="
+        },
+        "regenerator-runtime": {
+          "version": "0.13.3",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
+          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+        }
+      }
+    },
     "jss-plugin-camel-case": {
       "version": "10.0.0-alpha.17",
       "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.17.tgz",
@@ -12808,9 +13034,9 @@
       "dev": true
     },
     "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=="
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
+      "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
     },
     "normalize-selector": {
       "version": "0.2.0",
diff --git a/package.json b/package.json
index ac0d58e..3d7511c 100644
--- a/package.json
+++ b/package.json
@@ -66,8 +66,9 @@
   "dependencies": {
     "@babel/polyfill": "7.4.3",
     "@date-io/date-fns": "1.3.5",
-    "@material-ui/core": "4.0.0-beta.2",
+    "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.4.1",
+    "@material-ui/lab": "^4.0.0-alpha.41",
     "@material-ui/pickers": "latest",
     "axios": "^0.19.0",
     "chalk": "^2.4.2",