diff --git a/ui/src/Layout.tsx b/ui/src/Layout.tsx
index f67b622..3df1e9e 100644
--- a/ui/src/Layout.tsx
+++ b/ui/src/Layout.tsx
@@ -1,6 +1,6 @@
+import {createMuiTheme, MuiThemeProvider, Theme, WithStyles, withStyles} from '@material-ui/core';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import axios, {AxiosResponse} from 'axios';
-import CssBaseline from 'material-ui/CssBaseline';
-import {createMuiTheme, MuiThemeProvider, Theme, WithStyles, withStyles} from 'material-ui/styles';
 import * as React from 'react';
 import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
 import Header from './component/Header';
diff --git a/ui/src/component/ConfirmDialog.tsx b/ui/src/component/ConfirmDialog.tsx
index 0592d98..878b30c 100644
--- a/ui/src/component/ConfirmDialog.tsx
+++ b/ui/src/component/ConfirmDialog.tsx
@@ -1,10 +1,9 @@
-import Button from 'material-ui/Button';
-import Dialog, {
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-} from 'material-ui/Dialog';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import React from 'react';
 
 interface IProps {
diff --git a/ui/src/component/Container.tsx b/ui/src/component/Container.tsx
index fbf6cd6..527f190 100644
--- a/ui/src/component/Container.tsx
+++ b/ui/src/component/Container.tsx
@@ -1,6 +1,5 @@
-import {WithStyles} from 'material-ui';
-import Paper from 'material-ui/Paper';
-import {withStyles} from 'material-ui/styles';
+import Paper from '@material-ui/core/Paper';
+import {withStyles, WithStyles} from '@material-ui/core/styles';
 import * as React from 'react';
 
 const styles = () => ({
diff --git a/ui/src/component/DefaultPage.tsx b/ui/src/component/DefaultPage.tsx
index f9e05fb..b66b17a 100644
--- a/ui/src/component/DefaultPage.tsx
+++ b/ui/src/component/DefaultPage.tsx
@@ -1,6 +1,6 @@
-import Button from 'material-ui/Button';
-import Grid from 'material-ui/Grid';
-import Typography from 'material-ui/Typography';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React, {SFC} from 'react';
 
 interface IProps {
diff --git a/ui/src/component/Header.tsx b/ui/src/component/Header.tsx
index 86891c5..ad79fad 100644
--- a/ui/src/component/Header.tsx
+++ b/ui/src/component/Header.tsx
@@ -1,16 +1,16 @@
-import {Theme, WithStyles} from 'material-ui';
-import AccountCircle from 'material-ui-icons/AccountCircle';
-import Chat from 'material-ui-icons/Chat';
-import DevicesOther from 'material-ui-icons/DevicesOther';
-import ExitToApp from 'material-ui-icons/ExitToApp';
-import LightbulbOutline from 'material-ui-icons/LightbulbOutline';
-import SupervisorAccount from 'material-ui-icons/SupervisorAccount';
-import AppBar from 'material-ui/AppBar';
-import Button from 'material-ui/Button';
-import IconButton from 'material-ui/IconButton';
-import {withStyles} from 'material-ui/styles';
-import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
+import AppBar from '@material-ui/core/AppBar';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import {Theme, WithStyles} from '@material-ui/core/styles';
+import {withStyles} from '@material-ui/core/styles';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import Chat from '@material-ui/icons/Chat';
+import DevicesOther from '@material-ui/icons/DevicesOther';
+import ExitToApp from '@material-ui/icons/ExitToApp';
+import Highlight from '@material-ui/icons/Highlight';
+import SupervisorAccount from '@material-ui/icons/SupervisorAccount';
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
 import * as UserAction from '../actions/UserAction';
@@ -70,7 +70,7 @@ class Header extends Component<IProps & Styles> {
                     </div>
                     {loggedIn && this.renderButtons(name, admin)}
                     <IconButton onClick={toggleTheme} color="inherit">
-                        <LightbulbOutline />
+                        <Highlight />
                     </IconButton>
                 </Toolbar>
             </AppBar>
diff --git a/ui/src/component/LoadingSpinner.tsx b/ui/src/component/LoadingSpinner.tsx
index 36cacbe..ab467a8 100644
--- a/ui/src/component/LoadingSpinner.tsx
+++ b/ui/src/component/LoadingSpinner.tsx
@@ -1,5 +1,5 @@
-import Grid from 'material-ui/Grid';
-import {CircularProgress} from 'material-ui/Progress';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Grid from '@material-ui/core/Grid';
 import React from 'react';
 import DefaultPage from './DefaultPage';
 
diff --git a/ui/src/component/Message.tsx b/ui/src/component/Message.tsx
index 7b65c06..da76db0 100644
--- a/ui/src/component/Message.tsx
+++ b/ui/src/component/Message.tsx
@@ -1,8 +1,7 @@
-import {WithStyles} from 'material-ui';
-import Delete from 'material-ui-icons/Delete';
-import IconButton from 'material-ui/IconButton';
-import {withStyles} from 'material-ui/styles';
-import Typography from 'material-ui/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import {withStyles, WithStyles} from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Delete from '@material-ui/icons/Delete';
 import React from 'react';
 import TimeAgo from 'react-timeago';
 import Container from './Container';
diff --git a/ui/src/component/Navigation.tsx b/ui/src/component/Navigation.tsx
index dde7d0d..8b5c192 100644
--- a/ui/src/component/Navigation.tsx
+++ b/ui/src/component/Navigation.tsx
@@ -1,8 +1,9 @@
-import {Theme, WithStyles} from 'material-ui';
-import Divider from 'material-ui/Divider';
-import Drawer from 'material-ui/Drawer';
-import {ListItem, ListItemText} from 'material-ui/List';
-import {withStyles} from 'material-ui/styles';
+import Divider from '@material-ui/core/Divider';
+import Drawer from '@material-ui/core/Drawer';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import {Theme, WithStyles} from '@material-ui/core/styles';
+import {withStyles} from '@material-ui/core/styles';
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
 import AppStore from '../stores/AppStore';
@@ -12,6 +13,7 @@ const styles = (theme: Theme) => ({
         position: 'relative' as 'relative',
         width: 250,
         minHeight: '100%',
+        height: '100vh',
     },
     toolbar: theme.mixins.toolbar as any,
     link: {
diff --git a/ui/src/component/ScrollUpButton.tsx b/ui/src/component/ScrollUpButton.tsx
index 325a6ed..e783762 100644
--- a/ui/src/component/ScrollUpButton.tsx
+++ b/ui/src/component/ScrollUpButton.tsx
@@ -1,5 +1,5 @@
-import KeyboardArrowUp from 'material-ui-icons/KeyboardArrowUp';
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
+import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
 import React, {Component} from 'react';
 
 class ScrollUpButton extends Component {
diff --git a/ui/src/component/SettingsDialog.tsx b/ui/src/component/SettingsDialog.tsx
index f03634a..eb6e8a8 100644
--- a/ui/src/component/SettingsDialog.tsx
+++ b/ui/src/component/SettingsDialog.tsx
@@ -1,7 +1,10 @@
-import Button from 'material-ui/Button';
-import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
-import TextField from 'material-ui/TextField';
-import Tooltip from 'material-ui/Tooltip';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
 import React, {ChangeEvent, Component} from 'react';
 import * as UserAction from '../actions/UserAction';
 
diff --git a/ui/src/component/SnackBarHandler.tsx b/ui/src/component/SnackBarHandler.tsx
index 772eeed..ec2e5d6 100644
--- a/ui/src/component/SnackBarHandler.tsx
+++ b/ui/src/component/SnackBarHandler.tsx
@@ -1,6 +1,6 @@
-import Close from 'material-ui-icons/Close';
-import IconButton from 'material-ui/IconButton';
-import Snackbar from 'material-ui/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import Close from '@material-ui/icons/Close';
 import React, {Component} from 'react';
 import SnackBarStore from '../stores/SnackBarStore';
 
diff --git a/ui/src/component/ToggleVisibility.tsx b/ui/src/component/ToggleVisibility.tsx
index e3f978f..b3e3d38 100644
--- a/ui/src/component/ToggleVisibility.tsx
+++ b/ui/src/component/ToggleVisibility.tsx
@@ -1,7 +1,7 @@
-import Visibility from 'material-ui-icons/Visibility';
-import VisibilityOff from 'material-ui-icons/VisibilityOff';
-import IconButton from 'material-ui/IconButton';
-import Typography from 'material-ui/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import React, {Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/pages/Applications.tsx b/ui/src/pages/Applications.tsx
index 16567d9..288a74b 100644
--- a/ui/src/pages/Applications.tsx
+++ b/ui/src/pages/Applications.tsx
@@ -1,10 +1,14 @@
-import Delete from 'material-ui-icons/Delete';
-import Edit from 'material-ui-icons/Edit';
-import Avatar from 'material-ui/Avatar';
-import Grid from 'material-ui/Grid';
-import IconButton from 'material-ui/IconButton';
-import Paper from 'material-ui/Paper';
-import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
+import Avatar from '@material-ui/core/Avatar';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Delete from '@material-ui/icons/Delete';
+import Edit from '@material-ui/icons/Edit';
 import React, {ChangeEvent, Component, SFC} from 'react';
 import * as AppAction from '../actions/AppAction';
 import ConfirmDialog from '../component/ConfirmDialog';
diff --git a/ui/src/pages/Clients.tsx b/ui/src/pages/Clients.tsx
index ddb686f..c498dc8 100644
--- a/ui/src/pages/Clients.tsx
+++ b/ui/src/pages/Clients.tsx
@@ -1,8 +1,12 @@
-import Delete from 'material-ui-icons/Delete';
-import Grid from 'material-ui/Grid';
-import IconButton from 'material-ui/IconButton';
-import Paper from 'material-ui/Paper';
-import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Delete from '@material-ui/icons/Delete';
 import React, {Component, SFC} from 'react';
 import * as ClientAction from '../actions/ClientAction';
 import ConfirmDialog from '../component/ConfirmDialog';
diff --git a/ui/src/pages/Login.tsx b/ui/src/pages/Login.tsx
index e529c7a..8de19e2 100644
--- a/ui/src/pages/Login.tsx
+++ b/ui/src/pages/Login.tsx
@@ -1,6 +1,6 @@
-import Button from 'material-ui/Button';
-import Grid from 'material-ui/Grid';
-import TextField from 'material-ui/TextField';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
 import React, {ChangeEvent, Component, FormEvent} from 'react';
 import * as UserAction from '../actions/UserAction';
 import Container from '../component/Container';
diff --git a/ui/src/pages/Messages.tsx b/ui/src/pages/Messages.tsx
index 4d15eeb..dfa10ba 100644
--- a/ui/src/pages/Messages.tsx
+++ b/ui/src/pages/Messages.tsx
@@ -1,6 +1,6 @@
-import Grid from 'material-ui/Grid';
-import {CircularProgress} from 'material-ui/Progress';
-import Typography from 'material-ui/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React, {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
 import * as MessageAction from '../actions/MessageAction';
diff --git a/ui/src/pages/Users.tsx b/ui/src/pages/Users.tsx
index ccd635e..c7ca9b1 100644
--- a/ui/src/pages/Users.tsx
+++ b/ui/src/pages/Users.tsx
@@ -1,11 +1,14 @@
-import {WithStyles} from 'material-ui';
-import Delete from 'material-ui-icons/Delete';
-import Edit from 'material-ui-icons/Edit';
-import Grid from 'material-ui/Grid';
-import IconButton from 'material-ui/IconButton';
-import Paper from 'material-ui/Paper';
-import {withStyles} from 'material-ui/styles';
-import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
+import Paper from '@material-ui/core/Paper';
+import {withStyles, WithStyles} from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Delete from '@material-ui/icons/Delete';
+import Edit from '@material-ui/icons/Edit';
 import React, {Component, SFC} from 'react';
 import * as UserAction from '../actions/UserAction';
 import ConfirmDialog from '../component/ConfirmDialog';
diff --git a/ui/src/pages/dialog/AddApplicationDialog.tsx b/ui/src/pages/dialog/AddApplicationDialog.tsx
index bab514e..e0ae73e 100644
--- a/ui/src/pages/dialog/AddApplicationDialog.tsx
+++ b/ui/src/pages/dialog/AddApplicationDialog.tsx
@@ -1,12 +1,11 @@
-import Button from 'material-ui/Button';
-import Dialog, {
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
-} from 'material-ui/Dialog';
-import TextField from 'material-ui/TextField';
-import Tooltip from 'material-ui/Tooltip';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
 import React, {Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/pages/dialog/AddClientDialog.tsx b/ui/src/pages/dialog/AddClientDialog.tsx
index f38a91d..51fb5fd 100644
--- a/ui/src/pages/dialog/AddClientDialog.tsx
+++ b/ui/src/pages/dialog/AddClientDialog.tsx
@@ -1,7 +1,10 @@
-import Button from 'material-ui/Button';
-import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
-import TextField from 'material-ui/TextField';
-import Tooltip from 'material-ui/Tooltip';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
 import React, {Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/pages/dialog/AddEditUserDialog.tsx b/ui/src/pages/dialog/AddEditUserDialog.tsx
index 6fa5f8f..f394e08 100644
--- a/ui/src/pages/dialog/AddEditUserDialog.tsx
+++ b/ui/src/pages/dialog/AddEditUserDialog.tsx
@@ -1,9 +1,12 @@
-import Button from 'material-ui/Button';
-import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
-import {FormControlLabel} from 'material-ui/Form';
-import Switch from 'material-ui/Switch';
-import TextField from 'material-ui/TextField';
-import Tooltip from 'material-ui/Tooltip';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import TextField from '@material-ui/core/TextField';
+import Tooltip from '@material-ui/core/Tooltip';
 import React, {ChangeEvent, Component} from 'react';
 
 interface IProps {