diff --git a/package-lock.json b/package-lock.json
index a4615b5..096b741 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "crypto-browserify": "^3.12.0",
         "history": "2.0.1",
         "html-webpack-plugin": "^5.6.0",
-        "material-ui": "^0.16.6",
+        "material-ui": "^0.20.2",
         "nosleep": "bhspitmonkey/NoSleep.js",
         "probability-distributions": "^0.9.1",
         "prop-types": "^15.8.1",
@@ -3658,6 +3658,16 @@
         "node": "*"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "dev": true,
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -4910,9 +4920,9 @@
       }
     },
     "node_modules/hoist-non-react-statics": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-      "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=",
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
       "dev": true
     },
     "node_modules/hosted-git-info": {
@@ -5221,16 +5231,13 @@
       "dev": true
     },
     "node_modules/inline-style-prefixer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz",
-      "integrity": "sha512-rlgoApaAAv66JeDFqGYaXwglnlxjyIr7RMaFZqJw4opT0WKnZVXhXMC9SAfuMpN7NELPaImUhJmOO3hAamSlfw==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
       "dev": true,
       "dependencies": {
-        "bowser": "^1.0.0",
-        "hyphenate-style-name": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.12"
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
       }
     },
     "node_modules/interpret": {
@@ -5913,27 +5920,50 @@
       }
     },
     "node_modules/material-ui": {
-      "version": "0.16.6",
-      "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-0.16.6.tgz",
-      "integrity": "sha512-M+659ERneqs6glnmgVnt26fMQojfd5KhvrEbVtQyI9IT8LZfghcvnB/ysK/Ym55VxtLQz8D1lX5ygq0WbXuH0A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-0.20.2.tgz",
+      "integrity": "sha512-VeqgQkdvtK193w+FFvXDEwlVxI4rWk83eWbpYLeOIHDPWr3rbB9B075JRnJt/8IsI2X8q5Aia5W3+7m4KkleDg==",
+      "deprecated": "You can now upgrade to @material-ui/core",
       "dev": true,
       "dependencies": {
-        "babel-runtime": "^6.11.6",
-        "inline-style-prefixer": "^2.0.1",
-        "keycode": "^2.1.1",
+        "babel-runtime": "^6.23.0",
+        "inline-style-prefixer": "^3.0.8",
+        "keycode": "^2.1.8",
         "lodash.merge": "^4.6.0",
         "lodash.throttle": "^4.1.1",
-        "react-addons-create-fragment": "^15.0.0",
-        "react-addons-transition-group": "^15.0.0",
-        "react-event-listener": "^0.4.0",
-        "recompose": "^0.21.0",
+        "prop-types": "^15.5.7",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^1.2.1",
+        "recompose": "^0.26.0",
         "simple-assign": "^0.1.0",
         "warning": "^3.0.0"
       },
       "peerDependencies": {
-        "react": "^15.0.0",
-        "react-dom": "^15.0.0",
-        "react-tap-event-plugin": "^1.0.0 || ^2.0.0"
+        "react": "^15.4.0 || ^16.0.0",
+        "react-dom": "^15.4.0 || ^16.0.0"
+      }
+    },
+    "node_modules/material-ui/node_modules/react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0"
+      }
+    },
+    "node_modules/material-ui/node_modules/react-event-listener/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.0.0"
       }
     },
     "node_modules/material-ui/node_modules/warning": {
@@ -6890,29 +6920,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-addons-create-fragment": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz",
-      "integrity": "sha1-o5TefCx77Na1R1uhuXrEcs58dPg=",
-      "dev": true,
-      "dependencies": {
-        "fbjs": "^0.8.4",
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.0"
-      }
-    },
-    "node_modules/react-addons-transition-group": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/react-addons-transition-group/-/react-addons-transition-group-15.6.2.tgz",
-      "integrity": "sha1-i668Kukczb8kX+Kcn9PTb4tHGSM=",
-      "dev": true,
-      "dependencies": {
-        "react-transition-group": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": "^15.4.2"
-      }
-    },
     "node_modules/react-dom": {
       "version": "15.7.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.7.0.tgz",
@@ -6928,30 +6935,6 @@
         "react": "^15.7.0"
       }
     },
-    "node_modules/react-event-listener": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.4.5.tgz",
-      "integrity": "sha512-ZSWkIt+wfdeV1ulHmm1Neo8vPoAdfChELtYr2nXvwsQ8rkq6eG551iVC3xhG+ZPPuehdrzOMOwhduOY89d6dyQ==",
-      "dev": true,
-      "dependencies": {
-        "babel-runtime": "^6.20.0",
-        "fbjs": "^0.8.4",
-        "prop-types": "^15.5.4",
-        "warning": "^3.0.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0"
-      }
-    },
-    "node_modules/react-event-listener/node_modules/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
-      "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7063,7 +7046,7 @@
     "node_modules/react-transition-group/node_modules/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.0.0"
@@ -7135,18 +7118,18 @@
       }
     },
     "node_modules/recompose": {
-      "version": "0.21.2",
-      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.21.2.tgz",
-      "integrity": "sha512-kBumTYMpiE7Xe53tcKiDmD2fp/57wBjAohiTER/dwDNLUUtdNMkZUhccjWEbuQ/jQk+7owvjPSac0j4+B9TzmQ==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
       "dev": true,
       "dependencies": {
         "change-emitter": "^0.1.2",
         "fbjs": "^0.8.1",
-        "hoist-non-react-statics": "^1.0.0",
+        "hoist-non-react-statics": "^2.3.1",
         "symbol-observable": "^1.0.4"
       },
       "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0"
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
       }
     },
     "node_modules/redent": {
diff --git a/package.json b/package.json
index 87c6390..e29b7c9 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "crypto-browserify": "^3.12.0",
     "history": "2.0.1",
     "html-webpack-plugin": "^5.6.0",
-    "material-ui": "^0.16.6",
+    "material-ui": "^0.20.2",
     "nosleep": "bhspitmonkey/NoSleep.js",
     "probability-distributions": "^0.9.1",
     "prop-types": "^15.8.1",
@@ -33,7 +33,7 @@
     "webpack-dev-server": "^5.0.2"
   },
   "scripts": {
-    "build": "npm run make-dist",
+    "build": "tsc && npm run make-dist",
     "clean": "rm -rf build",
     "start": "webpack serve --mode=development",
     "make-dist": "rm -rf build && webpack --mode=production --progress && cp -r manifest.json css img build && cd build && sw-precache"
diff --git a/src/application.tsx b/src/application.tsx
index 469932a..f0a50d2 100644
--- a/src/application.tsx
+++ b/src/application.tsx
@@ -160,7 +160,7 @@ class Application extends React.Component {
           title={this.state.appBarTitle}
           iconElementLeft={this.state.appBarLeftElement}
           iconElementRight={this.state.appBarRightElement}
-          onLeftIconButtonTouchTap={this.toggleDrawer}
+          onLeftIconButtonClick={this.toggleDrawer}
           style={{position: "fixed", top: 0, left: 0}}
         />
         <Drawer
@@ -170,7 +170,7 @@ class Application extends React.Component {
           {
             Object.keys(this.menuItems).map(function (text) {
               let item = this.menuItems[text];
-              return <MenuItem onTouchTap={this.drawerMenuItemTouched} key={text} leftIcon={item.icon}>{text}</MenuItem>
+              return <MenuItem onClick={this.drawerMenuItemTouched} key={text} leftIcon={item.icon}>{text}</MenuItem>
             }.bind(this))
           }
         </Drawer>
diff --git a/src/common/practice-intro.tsx b/src/common/practice-intro.tsx
index 0d01036..5a7448a 100644
--- a/src/common/practice-intro.tsx
+++ b/src/common/practice-intro.tsx
@@ -95,7 +95,7 @@ class PracticeIntro extends React.Component {
     this.setState({started: true});
     this.context.appbar(
       this.props.title,
-      <IconButton onTouchTap={this.end}><NavigationBackIcon /></IconButton>
+      <IconButton onClick={this.end}><NavigationBackIcon /></IconButton>
     );
   }
 
@@ -107,7 +107,7 @@ class PracticeIntro extends React.Component {
     this.context.appbar(
       this.props.title,
       null,
-      <FlatButton label="Start" onTouchTap={this.start} />
+      <FlatButton label="Start" onClick={this.start} />
     );
   }
 
diff --git a/src/modes/perfect-pitch-practice.tsx b/src/modes/perfect-pitch-practice.tsx
index c8de474..fed65da 100644
--- a/src/modes/perfect-pitch-practice.tsx
+++ b/src/modes/perfect-pitch-practice.tsx
@@ -216,12 +216,12 @@ export default class PerfectPitchPractice extends React.Component {
         <CardTitle title="What note is being played?" />
         <CardText>
           <div style={{textAlign: "center"}}>
-            <FloatingActionButton onTouchTap={this.playSound} style={{textAlign: "center", margin: "20px auto 40px"}}>
+            <FloatingActionButton onClick={this.playSound} style={{textAlign: "center", margin: "20px auto 40px"}}>
               <PlayArrow />
             </FloatingActionButton>
           </div>
           <KeyboardButtons onEntry={this.handleGuess} style={{margin: "10px auto"}} showLabels={this.props.prefs["keyboardLabels"]} enableSound={false} />
-          <FlatButton label="Next" onTouchTap={this.newQuestion} style={{display: "block", margin: "40px auto 20px"}} />
+          <FlatButton label="Next" onClick={this.newQuestion} style={{display: "block", margin: "40px auto 20px"}} />
         </CardText>
       </Card>
     )
diff --git a/src/modes/sight-reading-practice.tsx b/src/modes/sight-reading-practice.tsx
index 7fab0ac..7d04c4d 100644
--- a/src/modes/sight-reading-practice.tsx
+++ b/src/modes/sight-reading-practice.tsx
@@ -500,7 +500,7 @@ export default class SightReadingPractice extends React.Component {
           />
           <FlatButton
             label="Skip"
-            onTouchTap={this.newQuestion}
+            onClick={this.newQuestion}
             style={{display: "block", margin: "40px auto 20px"}}
           />
         </CardText>