diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index 75e2f93d7b..f3cada9d70 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -15,18 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Should be removable once all fields are using Field component
-.mx_Login_field {
-    width: 100%;
-    box-sizing: border-box;
-    border-radius: 3px;
-    border: 1px solid $strong-input-border-color;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
-    margin-bottom: 14px;
-}
-
 .mx_Login_submit {
     @mixin mx_DialogButton;
     width: 100%;
@@ -70,9 +58,6 @@ limitations under the License.
     color: $warning-color;
     font-weight: bold;
     text-align: center;
-/*
-    height: 24px;
-*/
     margin-top: 12px;
     margin-bottom: 12px;
 }
@@ -94,52 +79,3 @@ limitations under the License.
     align-self: flex-end;
     flex: 1 1 auto;
 }
-
-// TODO-START: Remove up to TODO-END when all the country dropdowns are in Fields
-.mx_Login_field_prefix {
-    height: 38px;
-    padding: 0px 5px;
-    line-height: 38px;
-
-    background-color: #eee;
-    border: 1px solid #c7c7c7;
-    border-right: 0px;
-    border-radius: 3px 0px 0px 3px;
-
-    text-align: center;
-}
-
-.mx_Login_field_has_prefix {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-}
-
-.mx_Login_phoneSection {
-    display:flex;
-}
-
-.mx_Login_phoneCountry {
-    margin-bottom: 14px;
-
-    /* To override mx_Login_field_prefix */
-    text-align: left;
-    padding: 0px;
-    background-color: $primary-bg-color;
-}
-
-.mx_Login_field_prefix .mx_Dropdown_input {
-    /* To use prefix border instead of dropdown border */
-    border: 0;
-}
-
-.mx_Login_phoneCountry .mx_Dropdown_option {
-    /* To match height of mx_Login_field */
-    height: 38px;
-    line-height: 38px;
-}
-
-.mx_Login_phoneCountry .mx_Dropdown_option img {
-    margin: 3px;
-    vertical-align: top;
-}
-// TODO-END: Remove from TODO-START when all the country dropdowns are in Fields
diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index 1ad93f6075..f08f75a84b 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/src/components/views/auth/PasswordLogin.js
@@ -169,67 +169,70 @@ class PasswordLogin extends React.Component {
     }
 
     renderLoginField(loginType) {
-        const classes = {
-            mx_Login_field: true,
-        };
+        const Field = sdk.getComponent('elements.Field');
+
+        const classes = {};
 
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
                 classes.error = this.props.loginIncorrect && !this.state.username;
-                return <input
-                    className="mx_Login_field"
+                return <Field
+                    className={classNames(classes)}
+                    id="mx_PasswordLogin_email"
                     ref={(e) => {this._loginField = e;}}
+                    name="username" // make it a little easier for browser's remember-password
                     key="email_input"
                     type="text"
-                    name="username" // make it a little easier for browser's remember-password
-                    onChange={this.onUsernameChanged}
-                    onBlur={this.onUsernameBlur}
+                    label={_t("Email")}
                     placeholder="joe@example.com"
                     value={this.state.username}
+                    onChange={this.onUsernameChanged}
+                    onBlur={this.onUsernameBlur}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.error = this.props.loginIncorrect && !this.state.username;
-                return <input
+                return <Field
                     className={classNames(classes)}
+                    id="mx_PasswordLogin_username"
                     ref={(e) => {this._loginField = e;}}
+                    name="username" // make it a little easier for browser's remember-password
                     key="username_input"
                     type="text"
-                    name="username" // make it a little easier for browser's remember-password
+                    label={SdkConfig.get().disable_custom_urls ?
+                        _t("Username on %(hs)s", {
+                          hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
+                        }) : _t("Username")}
+                    value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
-                    placeholder={SdkConfig.get().disable_custom_urls ?
-                                      _t("Username on %(hs)s", {
-                                        hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
-                                      }) : _t("Username")}
-                    value={this.state.username}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
-                classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
-                return <div className="mx_Login_phoneSection">
-                    <CountryDropdown
-                        className="mx_Login_phoneCountry mx_Login_field_prefix"
-                        onOptionChange={this.onPhoneCountryChanged}
-                        value={this.state.phoneCountry}
-                        isSmall={true}
-                        showPrefix={true}
-                    />
-                    <input
-                        className={classNames(classes)}
-                        ref={(e) => {this._loginField = e;}}
-                        key="phone_input"
-                        type="text"
-                        name="phoneNumber"
-                        onChange={this.onPhoneNumberChanged}
-                        onBlur={this.onPhoneNumberBlur}
-                        placeholder={_t("Mobile phone number")}
-                        value={this.state.phoneNumber}
-                        autoFocus
-                    />
-                </div>;
+
+                const phoneCountry = <CountryDropdown
+                    value={this.state.phoneCountry}
+                    isSmall={true}
+                    showPrefix={true}
+                    onOptionChange={this.onPhoneCountryChanged}
+                />;
+
+                return <Field
+                    className={classNames(classes)}
+                    id="mx_PasswordLogin_phoneNumber"
+                    ref={(e) => { this._loginField = e; }}
+                    name="phoneNumber"
+                    key="phone_input"
+                    type="text"
+                    label={_t("Phone")}
+                    value={this.state.phoneNumber}
+                    prefix={phoneCountry}
+                    onChange={this.onPhoneNumberChanged}
+                    onBlur={this.onPhoneNumberBlur}
+                    autoFocus
+                />;
             }
         }
     }
@@ -245,6 +248,8 @@ class PasswordLogin extends React.Component {
     }
 
     render() {
+        const Field = sdk.getComponent('elements.Field');
+
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
@@ -286,7 +291,6 @@ class PasswordLogin extends React.Component {
         }
 
         const pwFieldClass = classNames({
-            mx_Login_field: true,
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
@@ -320,12 +324,16 @@ class PasswordLogin extends React.Component {
                 <form onSubmit={this.onSubmitForm}>
                     { loginType }
                     { loginField }
-                    <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
+                    <Field
+                        className={pwFieldClass}
+                        id="mx_PasswordLogin_password"
+                        ref={(e) => {this._passwordField = e;}}
+                        type="password"
                         name="password"
-                        value={this.state.password} onChange={this.onPasswordChanged}
-                        placeholder={_t('Password')}
+                        label={_t('Password')}
+                        value={this.state.password}
+                        onChange={this.onPasswordChanged}
                     />
-                    <br />
                     { forgotPasswordJsx }
                     <input className="mx_Login_submit"
                         type="submit"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 19259c6341..362c516de8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1255,19 +1255,18 @@
     "The username field must not be blank.": "The username field must not be blank.",
     "The phone number field must not be blank.": "The phone number field must not be blank.",
     "The password field must not be blank.": "The password field must not be blank.",
+    "Email": "Email",
     "Username on %(hs)s": "Username on %(hs)s",
     "Username": "Username",
-    "Mobile phone number": "Mobile phone number",
+    "Phone": "Phone",
     "Not sure of your password? <a>Set a new one</a>": "Not sure of your password? <a>Set a new one</a>",
     "Sign in to your Matrix account": "Sign in to your Matrix account",
     "Sign in to your Matrix account on %(serverName)s": "Sign in to your Matrix account on %(serverName)s",
     "Change": "Change",
     "Sign in with": "Sign in with",
-    "Phone": "Phone",
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
     "Create your Matrix account": "Create your Matrix account",
     "Create your Matrix account on %(serverName)s": "Create your Matrix account on %(serverName)s",
-    "Email": "Email",
     "Email (optional)": "Email (optional)",
     "Phone (optional)": "Phone (optional)",
     "Confirm": "Confirm",