diff --git a/app/package.json b/app/package.json
index 6fc85ce..3aeffcd 100644
--- a/app/package.json
+++ b/app/package.json
@@ -9,7 +9,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@material-ui/core": "^3.9.0",
+    "@material-ui/core": "^4.0.0-alpha.0",
     "@material-ui/icons": "^3.0.1",
     "@material-ui/styles": "^3.0.0-alpha.8",
     "@types/node": "^10.12.18",
@@ -34,7 +34,7 @@
     "lodash.throttle": "^4.1.1",
     "moving-average": "^1.0.0",
     "number-abbreviate": "^2.0.0",
-    "react": "^16.8.0-alpha.1",
+    "react": "16.8",
     "react-ace": "^6.3.2",
     "react-dom": "^16.7.0",
     "react-json-view": "^1.19.1",
diff --git a/app/src/ErrorBoundary.tsx b/app/src/ErrorBoundary.tsx
index dd4f850..4b69c70 100644
--- a/app/src/ErrorBoundary.tsx
+++ b/app/src/ErrorBoundary.tsx
@@ -89,7 +89,7 @@ const styles = (theme: Theme) => ({
     maxWidth: 650,
     backgroundColor: theme.palette.background.default,
     margin: '10vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
     outline: 'none',
   },
   title: {
@@ -105,7 +105,7 @@ const styles = (theme: Theme) => ({
   },
   buttonPositioning: {
     textAlign: 'center' as 'center',
-    marginTop: `${theme.spacing.unit * 2}px`,
+    marginTop: theme.spacing(2),
   },
 })
 
diff --git a/app/src/UpdateNotifier.tsx b/app/src/UpdateNotifier.tsx
index 8fbb3fe..f2ffce0 100644
--- a/app/src/UpdateNotifier.tsx
+++ b/app/src/UpdateNotifier.tsx
@@ -232,14 +232,14 @@ const styles = (theme: Theme) => ({
     color: theme.typography.button.color,
   },
   close: {
-    padding: theme.spacing.unit / 2,
+    padding: '4px',
   },
   root: {
     minWidth: '350px',
     maxWidth: '500px',
     backgroundColor: theme.palette.background.default,
     margin: '20vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
     outline: 'none',
   },
   title: {
@@ -252,7 +252,7 @@ const styles = (theme: Theme) => ({
     maxHeight: '28vh',
   },
   paper: {
-    padding: `${theme.spacing.unit * 2}px`,
+    padding: theme.spacing(2),
     color: theme.palette.text.secondary,
   },
   download: {
diff --git a/app/src/components/ConnectionSetup/AddButton.tsx b/app/src/components/ConnectionSetup/AddButton.tsx
index a06992a..7d6e18a 100644
--- a/app/src/components/ConnectionSetup/AddButton.tsx
+++ b/app/src/components/ConnectionSetup/AddButton.tsx
@@ -5,12 +5,12 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 
 const styles = (theme: Theme) => ({
   addButton: {
-    height: `${theme.spacing.unit * 4}px`,
-    width: `${theme.spacing.unit * 4}px`,
+    height: theme.spacing(4),
+    width: theme.spacing(4),
     minHeight: '0',
   },
   addIcon: {
-    height: `${theme.spacing.unit * 2}px`,
+    height: theme.spacing(2),
   },
 })
 
diff --git a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
index a6efbce..cd17cd2 100644
--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -45,7 +45,7 @@ class ConnectionSettings extends React.Component<Props, State> {
     return (
       <div>
         <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={24}>
+          <Grid container={true} spacing={3}>
             <Grid item={true} xs={10} className={classes.gridPadding}>
               <TextField
                 className={classes.fullWidth}
@@ -145,7 +145,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       backgroundColor: theme.palette.background.default,
     },
     button: {
-      marginTop: `${theme.spacing.unit * 3 + 2}px`,
+      marginTop: theme.spacing(3),
       float: 'right',
     },
   }
diff --git a/app/src/components/ConnectionSetup/ConnectionSettings.tsx b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
index fbcbd30..db05134 100644
--- a/app/src/components/ConnectionSetup/ConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
@@ -120,7 +120,7 @@ class ConnectionSettings extends React.Component<Props, State> {
       <div>
         {renderError}
         <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={24}>
+          <Grid container={true} spacing={3}>
             <Grid item={true} xs={5}>
               <TextField
                 label="Name"
@@ -344,7 +344,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       marginTop: 0,
     },
     button: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
     inputFormControl: {
       marginTop: '16px',
diff --git a/app/src/components/ConnectionSetup/ConnectionSetup.tsx b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
index e9ac5f2..c9ee07f 100644
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
@@ -87,7 +87,7 @@ const styles = (theme: Theme) => ({
   left: {
     borderRightStyle: 'dotted' as 'dotted',
     borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
-    paddingTop: `${2 * theme.spacing.unit}px`,
+    paddingTop: theme.spacing(2),
     flex: 3,
     overflow: 'hidden',
     backgroundColor: theme.palette.background.default,
@@ -96,7 +96,7 @@ const styles = (theme: Theme) => ({
   right: {
     borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
     backgroundColor: theme.palette.background.paper,
-    padding: `${2 * theme.spacing.unit}px`,
+    padding: theme.spacing(2),
     flex: 10,
   },
   connectionUri: {
@@ -106,7 +106,7 @@ const styles = (theme: Theme) => ({
     overflow: 'hidden' as 'hidden',
     color: theme.palette.text.hint,
     fontSize: '0.9em',
-    marginLeft: '24px',
+    marginLeft: theme.spacing(4),
   },
 })
 
diff --git a/app/src/components/Settings.tsx b/app/src/components/Settings.tsx
index 81eaa7c..1f24c8b 100644
--- a/app/src/components/Settings.tsx
+++ b/app/src/components/Settings.tsx
@@ -47,12 +47,12 @@ const styles: StyleRulesCallback = theme => ({
   },
   title: {
     color: theme.palette.text.primary,
-    paddingTop: `${theme.spacing.unit}px`,
+    paddingTop: theme.spacing(1),
     ...theme.mixins.toolbar,
   },
   input: {
     minWidth: '150px',
-    margin: `auto ${theme.spacing.unit}px auto ${2 * theme.spacing.unit}px`,
+    margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
   },
 })
 
diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index f96cbbb..4f13bcf 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -230,7 +230,7 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       height: '100%',
     },
     valuePaper: {
-      margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
+      margin: theme.spacing(1),
     },
     heading: {
       fontSize: theme.typography.pxToRem(15),
diff --git a/app/src/components/TitleBar.tsx b/app/src/components/TitleBar.tsx
index 599e6f8..069d7f8 100644
--- a/app/src/components/TitleBar.tsx
+++ b/app/src/components/TitleBar.tsx
@@ -32,16 +32,16 @@ const styles: StyleRulesCallback = theme => ({
     '&:hover': {
       backgroundColor: fade(theme.palette.common.white, 0.25),
     },
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     marginLeft: 0,
     width: '100%',
     [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
+      marginLeft: theme.spacing(3),
       width: 'auto',
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 8,
+    width: theme.spacing(8),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -54,10 +54,10 @@ const styles: StyleRulesCallback = theme => ({
     width: '100%',
   },
   inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(10),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {
diff --git a/app/src/components/Tree/TreeNodeSubnodes.tsx b/app/src/components/Tree/TreeNodeSubnodes.tsx
index 6187427..3ff851c 100644
--- a/app/src/components/Tree/TreeNodeSubnodes.tsx
+++ b/app/src/components/Tree/TreeNodeSubnodes.tsx
@@ -101,7 +101,7 @@ const styles = (theme: Theme) => ({
     clear: 'both' as 'both',
   },
   listItem: {
-    padding: `0px 0px 0px ${theme.spacing.unit}px`,
+    padding: `0px 0px 0px ${theme.spacing(1)}`,
   },
 })
 
diff --git a/app/yarn.lock b/app/yarn.lock
index 26d610b..ea24a58 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -21,18 +21,18 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
   integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
 
-"@material-ui/core@^3.9.0":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.1.tgz#994fa54f0936092556d231d1055b8f76b12be06e"
-  integrity sha512-26GtjuwxPPfSsUnYrTOC8zuCuhWPVhc4SsUSFTZq0n1QvpGi9UEZRFe8yp6FykQE+PmqyyY+eWdrfiXKSUKZ0w==
+"@material-ui/core@^4.0.0-alpha.0":
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.0.0-alpha.0.tgz#7342e6c672d2351a7657af9b92fe7a5411b7dd00"
+  integrity sha512-2bg325ZdSLRHbHMluoXvUzrnLu6WwMyiSfQhDZtwlpaFgWRZSwGskWQLGxNp/O9Lwu/SMYA2A0YHJtaMbvKqFw==
   dependencies:
     "@babel/runtime" "^7.2.0"
-    "@material-ui/system" "^3.0.0-alpha.0"
-    "@material-ui/utils" "^3.0.0-alpha.2"
+    "@material-ui/system" "^4.0.0-alpha.0"
+    "@material-ui/utils" "^4.0.0-alpha.0"
     "@types/jss" "^9.5.6"
     "@types/react-transition-group" "^2.0.8"
     brcast "^3.0.1"
-    classnames "^2.2.5"
+    clsx "^1.0.2"
     csstype "^2.5.2"
     debounce "^1.1.0"
     deepmerge "^3.0.0"
@@ -51,7 +51,6 @@
     prop-types "^15.6.0"
     react-event-listener "^0.6.2"
     react-transition-group "^2.2.1"
-    recompose "0.28.0 - 0.30.0"
     warning "^4.0.1"
 
 "@material-ui/icons@^3.0.1":
@@ -84,10 +83,10 @@
     prop-types "^15.6.0"
     warning "^4.0.1"
 
-"@material-ui/system@^3.0.0-alpha.0":
-  version "3.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.2.tgz#096e80c8bb0f70aea435b9e38ea7749ee77b4e46"
-  integrity sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==
+"@material-ui/system@^4.0.0-alpha.0":
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.0.0-alpha.0.tgz#9972a797f04e1b96b84ad462243086fe89038f73"
+  integrity sha512-qJLLx+rBmj1AsnuOLja9eN0x/ajZWM6FgCUVV08ecQ2FHEb+TT5QK6b+Lcw5TNnHxakGC8wkmUkIYafwcqGA5g==
   dependencies:
     "@babel/runtime" "^7.2.0"
     deepmerge "^3.0.0"
@@ -103,6 +102,15 @@
     prop-types "^15.6.0"
     react-is "^16.6.3"
 
+"@material-ui/utils@^4.0.0-alpha.0":
+  version "4.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.0.0-alpha.0.tgz#b8ed6953ae07d36856a5867ffe759bc0e08147b4"
+  integrity sha512-w8zSXDuAyS0J5Z8mnU0+HgFf+GP3vGno8wecHT011DM7P3ZoS/2ngU2SqJGwRxuNk7N65tWX1h8NKvoevDPUyQ==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    prop-types "^15.6.0"
+    react-is "^16.8.0"
+
 "@types/jss@^9.5.6":
   version "9.5.7"
   resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.7.tgz#fa57a6d0b38a3abef8a425e3eb6a53495cb9d5a0"
@@ -1024,6 +1032,11 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+clsx@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.2.tgz#2e0d63a900d7fe33218d7a53dee9e3a0c7300e1d"
+  integrity sha512-NQZV7ri2Gfufu9q1P9JDV4MHhdJvUukOadjAoN12pK37P12nrYp/mC05BSoekv0KX/5hGHAe2WQeOlhaWhXC5Q==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -4492,6 +4505,11 @@ react-is@^16.6.3, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
   integrity sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==
 
+react-is@^16.8.0:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.2.tgz#09891d324cad1cb0c1f2d91f70a71a4bee34df0f"
+  integrity sha512-D+NxhSR2HUCjYky1q1DwpNUD44cDpUXzSmmFyC3ug1bClcU/iDNy0YNn1iwme28fn+NFhpA13IndOd42CrFb+Q==
+
 react-json-view@^1.19.1:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.19.1.tgz#95d8e59e024f08a25e5dc8f076ae304eed97cf5c"
@@ -4597,6 +4615,16 @@ react-vis@^1.11.6:
     prop-types "^15.5.8"
     react-motion "^0.5.2"
 
+react@16.8:
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.2.tgz#83064596feaa98d9c2857c4deae1848b542c9c0c"
+  integrity sha512-aB2ctx9uQ9vo09HVknqv3DGRpI7OIGJhCx3Bt0QqoRluEjHSaObJl+nG12GDdYH6sTgE7YiPJ6ZUyMx9kICdXw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.2"
+
 react@^16.6.3:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
@@ -4607,16 +4635,6 @@ react@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
-react@^16.8.0-alpha.1:
-  version "16.8.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.0-alpha.1.tgz#c2b32689f3b466d3ce85a634dd9035f789d2cd97"
-  integrity sha512-vLwwnhM2dXrCsiQmcSxF2UdZVV5xsiXjK5Yetmy8dVqngJhQ3aw3YJhZN/YmyonxwdimH40wVqFQfsl4gSu2RA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.0-alpha.1"
-
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -4886,10 +4904,10 @@ scheduler@^0.12.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.13.0-alpha.1:
-  version "0.13.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.0-alpha.1.tgz#753977fb4fb35d8cdd559868a11e46b640955556"
-  integrity sha512-W0sH0848sVuPKg+I18vTYQyzVtA4X1lrVgSeXK6KnOPUltFdJcY5nkbTkjGUeS/E0x+eBsNYfSdhJtGjT95njw==
+scheduler@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.2.tgz#969eaee2764a51d2e97b20a60963b2546beff8fa"
+  integrity sha512-qK5P8tHS7vdEMCW5IPyt8v9MJOHqTrOUgPXib7tqm9vh834ibBX5BNhwkplX/0iOzHW5sXyluehYfS9yrkz9+w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"