diff --git a/src/features/home/Login.js b/src/features/home/Login.js
index d516072..a491870 100644
--- a/src/features/home/Login.js
+++ b/src/features/home/Login.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom'
+import { Button, TextField } from '@material-ui/core';
 import matrixLogo from '../../images/matrix-logo.svg';
 import * as actions from './redux/actions';
 
@@ -59,45 +60,31 @@ export class Login extends Component {
           <h1 className="app-title">Welcome to Synapse Admin</h1>
         </header>
         <form className="app-login" onSubmit={this.handleSubmit}>
-          <table>
-            <tbody>
-              <tr>
-                <th className={'form-group' + (submitted && !homeserver ? ' has-error' : '')}>
-                  <label htmlFor="username">Homeserver</label>
-                </th>
-                <td>
-                  <input type="text" className="form-control" name="homeserver" value={homeserver} onChange={this.handleChange} />
-                  {submitted && !homeserver &&
-                    <div className="help-block">Homeserver is required</div>
-                  }
-                </td>
-              </tr>
-              <tr>
-                <th className={'form-group' + (submitted && !username ? ' has-error' : '')}>
-                  <label htmlFor="username">Username</label>
-                </th>
-                <td>
-                  <input type="text" className="form-control" name="username" value={username} onChange={this.handleChange} />
-                  {submitted && !username &&
-                    <div className="help-block">Username is required</div>
-                  }
-                </td>
-              </tr>
-              <tr>
-                <th className={'form-group' + (submitted && !password ? ' has-error' : '')}>
-                  <label htmlFor="password">Password</label>
-                </th>
-                <td>
-                  <input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
-                  {submitted && !password &&
-                    <div className="help-block">Password is required</div>
-                  }
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div className="form-group">
-            <button className="btn btn-primary">Login</button>
+          <div>
+            <TextField error={submitted && !homeserver}
+              label="Homeserver" name="homeserver"
+              value={homeserver} onChange={this.handleChange}
+              variant="filled" margin="normal"
+              helperText={submitted && !homeserver && 'Homeserver is required'} />
+          </div>
+          <div>
+            <TextField error={submitted && !username}
+              label="Username" name="username"
+              value={username} onChange={this.handleChange}
+              variant="filled" margin="normal"
+              helperText={submitted && !username && 'Username is required'} />
+          </div>
+          <div>
+            <TextField error={submitted && !password}
+              label="Password" type="password" name="password"
+              value={password} onChange={this.handleChange}
+              variant="filled" margin="normal"
+              helperText={submitted && !password && 'Password is required'} />
+          </div>
+          <div className="button">
+            <Button type="submit" variant="contained" color="primary">
+              Login
+            </Button>
             {loginPending &&
               <img alt="logging in" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
             }
diff --git a/src/features/home/Login.scss b/src/features/home/Login.scss
index 3c95800..17025f3 100644
--- a/src/features/home/Login.scss
+++ b/src/features/home/Login.scss
@@ -28,4 +28,8 @@
     display: inline-block;
     padding: 16px;
   }
+
+  .button {
+    margin: 16px;
+  }
 }