diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
index 4bc15757e..1f1719444 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeEmailContentDialog.js
@@ -16,7 +16,8 @@ class ChangeEmailContentDialog extends React.Component {
     });
   };
 
-  confirmChanges = async () => {
+  confirmChanges = async e => {
+    e.preventDefault();
     await this.props.save();
     this.props.next();
   };
@@ -44,7 +45,7 @@ class ChangeEmailContentDialog extends React.Component {
               {this.props.formData.newEmail}
             </span>
           </div>
-          <form>
+          <form onSubmit={this.confirmChanges}>
             <InputField
               id="confirmPassword"
               label={t('talk-plugin-local-auth.change_email.enter_password')}
@@ -62,18 +63,15 @@ class ChangeEmailContentDialog extends React.Component {
               columnDisplay
               showSuccess={false}
             />
+            <div className={styles.bottomActions}>
+              <Button className={styles.cancel} onClick={this.props.cancel}>
+                {t('talk-plugin-local-auth.change_email.cancel')}
+              </Button>
+              <Button className={styles.confirmChanges} type="submit">
+                {t('talk-plugin-local-auth.change_email.confirm_change')}
+              </Button>
+            </div>
           </form>
-          <div className={styles.bottomActions}>
-            <Button className={styles.cancel} onClick={this.props.cancel}>
-              {t('talk-plugin-local-auth.change_email.cancel')}
-            </Button>
-            <Button
-              className={styles.confirmChanges}
-              onClick={this.confirmChanges}
-            >
-              {t('talk-plugin-local-auth.change_email.confirm_change')}
-            </Button>
-          </div>
         </div>
       </div>
     );
diff --git a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js b/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js
index 894bdcbd6..917d77782 100644
--- a/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js
+++ b/plugins/talk-plugin-local-auth/client/components/ChangeUsernameContentDialog.js
@@ -16,7 +16,9 @@ class ChangeUsernameContentDialog extends React.Component {
     });
   };
 
-  confirmChanges = async () => {
+  confirmChanges = async e => {
+    e.preventDefault();
+
     if (this.formHasError()) {
       this.showError();
       return;
@@ -60,7 +62,7 @@ class ChangeUsernameContentDialog extends React.Component {
               {this.props.formData.newUsername}
             </span>
           </div>
-          <form>
+          <form onSubmit={this.confirmChanges}>
             <InputField
               id="confirmNewUsername"
               label="Re-enter new username"
@@ -81,18 +83,15 @@ class ChangeUsernameContentDialog extends React.Component {
                 {t('talk-plugin-local-auth.change_username.bottom_note')}
               </span>
             </InputField>
+            <div className={styles.bottomActions}>
+              <Button className={styles.cancel} onClick={this.props.cancel}>
+                {t('talk-plugin-local-auth.change_username.cancel')}
+              </Button>
+              <Button className={styles.confirmChanges} type="submit">
+                {t('talk-plugin-local-auth.change_username.confirm_changes')}
+              </Button>
+            </div>
           </form>
-          <div className={styles.bottomActions}>
-            <Button className={styles.cancel} onClick={this.props.cancel}>
-              {t('talk-plugin-local-auth.change_username.cancel')}
-            </Button>
-            <Button
-              className={styles.confirmChanges}
-              onClick={this.confirmChanges}
-            >
-              {t('talk-plugin-local-auth.change_username.confirm_changes')}
-            </Button>
-          </div>
         </div>
       </div>
     );
diff --git a/plugins/talk-plugin-local-auth/client/components/Profile.css b/plugins/talk-plugin-local-auth/client/components/Profile.css
index 30b75f451..08187e238 100644
--- a/plugins/talk-plugin-local-auth/client/components/Profile.css
+++ b/plugins/talk-plugin-local-auth/client/components/Profile.css
@@ -15,6 +15,14 @@
   }
 }
 
+.wrapper {
+  display: flex;
+  position: relative;
+  box-sizing: inherit;
+  justify-content: inherit;
+  flex-grow: 1;
+}
+
 .content {
   flex-grow: 1;
 }
diff --git a/plugins/talk-plugin-local-auth/client/components/Profile.js b/plugins/talk-plugin-local-auth/client/components/Profile.js
index 949923e77..85c1f1295 100644
--- a/plugins/talk-plugin-local-auth/client/components/Profile.js
+++ b/plugins/talk-plugin-local-auth/client/components/Profile.js
@@ -50,8 +50,12 @@ class Profile extends React.Component {
     });
   };
 
-  onSave = async () => {
-    this.showDialog();
+  onSave = async e => {
+    e.preventDefault();
+
+    if (this.isSaveEnabled()) {
+      this.showDialog();
+    }
   };
 
   addError = err => {
@@ -121,10 +125,10 @@ class Profile extends React.Component {
 
   saveUsername = async () => {
     const { newUsername } = this.state.formData;
-    const { changeUsername } = this.props;
+    const { setUsername } = this.props;
 
     try {
-      await changeUsername(this.props.root.me.id, newUsername);
+      await setUsername(newUsername);
       this.props.notify(
         'success',
         t('talk-plugin-local-auth.change_username.changed_username_success_msg')
@@ -163,6 +167,8 @@ class Profile extends React.Component {
     } = this.props;
     const { editing, formData, showDialog } = this.state;
 
+    const usernameCanBeUpdated = canUsernameBeUpdated(status);
+
     return (
       <section
         className={cn(
@@ -178,15 +184,17 @@ class Profile extends React.Component {
           closeDialog={this.closeDialog}
           finish={this.finish}
         >
-          <ChangeUsernameContentDialog
-            notify={notify}
-            canUsernameBeUpdated={canUsernameBeUpdated(status)}
-            save={this.saveUsername}
-            onChange={this.onChange}
-            formData={this.state.formData}
-            username={username}
-            enable={formData.newUsername && username !== formData.newUsername}
-          />
+          {usernameCanBeUpdated && (
+            <ChangeUsernameContentDialog
+              notify={notify}
+              canUsernameBeUpdated={usernameCanBeUpdated}
+              save={this.saveUsername}
+              onChange={this.onChange}
+              formData={this.state.formData}
+              username={username}
+              enable={formData.newUsername && username !== formData.newUsername}
+            />
+          )}
           <ChangeEmailContentDialog
             save={this.saveEmail}
             onChange={this.onChange}
@@ -197,63 +205,65 @@ class Profile extends React.Component {
         </ConfirmChangesDialog>
 
         {editing ? (
-          <div className={styles.content}>
-            <div className={styles.detailList}>
-              <InputField
-                icon="person"
-                id="newUsername"
-                name="newUsername"
-                onChange={this.onChange}
-                defaultValue={username}
-                validationType="username"
-                columnDisplay
-              >
-                <span className={styles.bottomText}>
-                  {t(
-                    'talk-plugin-local-auth.change_username.change_username_note'
-                  )}
-                </span>
-              </InputField>
-              <InputField
-                icon="email"
-                id="newEmail"
-                name="newEmail"
-                onChange={this.onChange}
-                defaultValue={email}
-                validationType="email"
-                columnDisplay
-              />
+          <form className={styles.wrapper} onSubmit={this.onSave}>
+            <div className={styles.content}>
+              <div className={styles.detailList}>
+                <InputField
+                  icon="person"
+                  id="newUsername"
+                  name="newUsername"
+                  onChange={this.onChange}
+                  defaultValue={username}
+                  validationType="username"
+                  disabled={!usernameCanBeUpdated}
+                  columnDisplay
+                >
+                  <span className={styles.bottomText}>
+                    {t(
+                      'talk-plugin-local-auth.change_username.change_username_note'
+                    )}
+                  </span>
+                </InputField>
+                <InputField
+                  icon="email"
+                  id="newEmail"
+                  name="newEmail"
+                  onChange={this.onChange}
+                  defaultValue={email}
+                  validationType="email"
+                  columnDisplay
+                />
+              </div>
             </div>
-          </div>
+            <div className={styles.actions}>
+              <Button
+                className={cn(styles.button, styles.saveButton)}
+                icon="save"
+                type="submit"
+                disabled={!this.isSaveEnabled()}
+              >
+                {t('talk-plugin-local-auth.change_username.save')}
+              </Button>
+              <a className={styles.cancelButton} onClick={this.cancel}>
+                {t('talk-plugin-local-auth.change_username.cancel')}
+              </a>
+            </div>
+          </form>
         ) : (
-          <div className={styles.content}>
-            <h2 className={styles.username}>{username}</h2>
-            {email ? <p className={styles.email}>{email}</p> : null}
-          </div>
-        )}
-        {editing ? (
-          <div className={styles.actions}>
-            <Button
-              className={cn(styles.button, styles.saveButton)}
-              icon="save"
-              onClick={this.onSave}
-              disabled={!this.isSaveEnabled()}
-            >
-              {t('talk-plugin-local-auth.change_username.save')}
-            </Button>
-            <a className={styles.cancelButton} onClick={this.cancel}>
-              {t('talk-plugin-local-auth.change_username.cancel')}
-            </a>
-          </div>
-        ) : (
-          <div className={styles.actions}>
-            <Button
-              className={styles.button}
-              icon="settings"
-              onClick={this.enableEditing}
-            >
-              {t('talk-plugin-local-auth.change_username.edit_profile')}
-            </Button>
+          <div className={styles.wrapper}>
+            <div className={styles.content}>
+              <h2 className={styles.username}>{username}</h2>
+              {email ? <p className={styles.email}>{email}</p> : null}
+            </div>
+            <div className={styles.actions}>
+              <Button
+                className={styles.button}
+                icon="settings"
+                onClick={this.enableEditing}
+              >
+                {t('talk-plugin-local-auth.change_username.edit_profile')}
+              </Button>
+            </div>
           </div>
         )}
       </section>
@@ -263,9 +273,8 @@ class Profile extends React.Component {
 
 Profile.propTypes = {
   updateEmailAddress: PropTypes.func.isRequired,
-  changeUsername: PropTypes.func.isRequired,
+  setUsername: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,
-  changeUsername: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   username: PropTypes.string,
   emailAddress: PropTypes.string,
diff --git a/plugins/talk-plugin-local-auth/client/containers/Profile.js b/plugins/talk-plugin-local-auth/client/containers/Profile.js
index e1ed99ef6..ccfca72ae 100644
--- a/plugins/talk-plugin-local-auth/client/containers/Profile.js
+++ b/plugins/talk-plugin-local-auth/client/containers/Profile.js
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux';
 import { connect, withFragments } from 'plugin-api/beta/client/hocs';
 import Profile from '../components/Profile';
 import { notify } from 'coral-framework/actions/notification';
-import { withChangeUsername } from 'plugin-api/beta/client/hocs';
+import { withSetUsername } from 'plugin-api/beta/client/hocs';
 import { withUpdateEmailAddress } from '../hocs';
 
 const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
@@ -33,7 +33,7 @@ const withData = withFragments({
 
 export default compose(
   connect(null, mapDispatchToProps),
-  withChangeUsername,
+  withSetUsername,
   withUpdateEmailAddress,
   withData
 )(Profile);
diff --git a/plugins/talk-plugin-local-auth/client/translations.yml b/plugins/talk-plugin-local-auth/client/translations.yml
index b41ad5302..8a3d7c90e 100644
--- a/plugins/talk-plugin-local-auth/client/translations.yml
+++ b/plugins/talk-plugin-local-auth/client/translations.yml
@@ -23,19 +23,18 @@ en:
       confirm_changes: "Confirm Changes"
       username_does_not_match: "Username does not match"
       cant_be_equal: "Your new {0} must be different to your current one"
-      change_username_attempt: "Username can't be updated. Usernames can be changed every 14 days"
+      changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
+      change_username_attempt: "Username can't be updated. Usernames can only be changed every 14 days."
     change_email:
       confirm_email_change: "Confirm Email Address Change"
       description: "You are attempting to change your email address. Your new email address will be used for your login and to receive account notifications."
-      old_email: "Old Email Address" 
+      old_email: "Old Email Address"
       new_email: "New Email Address"
       enter_password: "Enter Password"
       incorrect_password: "Incorrect Password"
       confirm_change: "Confirm Change"
       cancel: "Cancel"
       change_email_msg: "Email Address Changed - Your email address has been successfully changed. This email address will now be used for signing in and email notifications."
-      changed_username_success_msg: "Username Changed - Your username has been successfully changed. You will not be able to change your user name for 14 days."
-      change_username_attempt: "Username can't be updated. Usernames can only be changed every 14 days."
     add_email:
       add_email_address: "Add Email Address"
       enter_email_address: "Enter Email Address:"
@@ -53,7 +52,7 @@ en:
       verify:
         title: "Verify Your Email Address"
         description:  "We’ve sent an email to {0} to verify your account. You must verify your email address so that it can be used for account change confirmations and notifications."
-      added: 
+      added:
         title: "Email Address Added"
         description: "Your email address has been added to your account."
         subtitle: "Need to change your email address?"
@@ -84,4 +83,4 @@ es:
       confirm_changes: "Confirmar Cambios"
       username_does_not_match: "El usuario no coincide"
       changed_username_success_msg: "Usuario Actualizado - Tu usuario ha sido exitosamente actualizado. No podrás cambiar el usuario por 14 días."
-      change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."
\ No newline at end of file
+      change_username_attempt: "El usuario no puede ser actualizado. Los usuarios pueden ser cambiados cada 14 días."