diff --git a/src/components/structures/LoginBox.js b/src/components/structures/LoginBox.js
index 445585a75..c9f8e87a1 100644
--- a/src/components/structures/LoginBox.js
+++ b/src/components/structures/LoginBox.js
@@ -47,6 +47,10 @@ module.exports = React.createClass({
         dis.dispatch({ action: 'start_login' });
     },
 
+    onRegisterClick: function() {
+        dis.dispatch({ action: 'start_registration' });
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent('elements.TintableSvg');
 
@@ -71,6 +75,9 @@ module.exports = React.createClass({
                     <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
                         { _t("Login") }
                     </AccessibleButton>
+                    <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
+                        { _t("Register") }
+                    </AccessibleButton>
                 </div>
             );
         }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss
index 3c8091fe9..92d8833bc 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_LoginBox.scss
@@ -19,13 +19,15 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_LoginBox_loginButton {
+.mx_LoginBox_loginButton,
+.mx_LoginBox_registerButton {
     margin-top: -8px;
     height: 40px;
     border: 0px;
     border-radius: 40px;
-    padding-left: 1em;
-    padding-right: 1em;
+    margin-left: 4px;
+    margin-right: 4px;
+    width: 80px;
 
     background-color: $accent-color;
     color: $primary-bg-color;