diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css
index 8ab9eb5cd..5b4631ecf 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css
@@ -109,7 +109,6 @@
 .bottomText {
   color: #474747;
   font-size: 0.9em;
-  display: block;
 }
 
 .detailList {
@@ -119,5 +118,5 @@
 } 
 
 .detailItem {
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
index 42349e3e9..a146ea5f9 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js
@@ -43,8 +43,10 @@ class ChangeUsername extends React.Component {
 
   onSave = async () => {
     this.showDialog();
-    // this.clearForm();
-    // this.disableEditing();
+  };
+
+  saveChanges = async () => {
+    // savechanges
   };
 
   onChange = e => {
@@ -78,8 +80,6 @@ class ChangeUsername extends React.Component {
     const { username, emailAddress } = this.props;
     const { editing } = this.state;
 
-    console.log('loading xxxx');
-
     return (
       <section
         className={cn('talk-plugin-auth--edit-profile', styles.container, {
@@ -101,7 +101,7 @@ class ChangeUsername extends React.Component {
                 <label className={cn(styles.detailLabel)}>
                   <Icon name="person" className={styles.detailLabelIcon} />
                   <input
-                    name="username"
+                    name="newUsername"
                     type="text"
                     className={styles.detailValue}
                     onChange={this.onChange}
@@ -141,6 +141,7 @@ class ChangeUsername extends React.Component {
               className={cn(styles.button, styles.saveButton)}
               icon="save"
               onClick={this.onSave}
+              disabled={!this.state.formData.newUsername}
             >
               Save
             </Button>
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css
index b3c4524fe..af681d596 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css
@@ -46,6 +46,8 @@
 .bottomNote {
   font-size: 0.9em;
   line-height: 20px;
+  padding-top: 10px;
+  display: block;
 }
 
 .bottomActions {
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
index e0c08ec3e..b337af007 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js
@@ -6,6 +6,28 @@ import Form from './Form';
 import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
 
 class ChangeUsernameDialog extends React.Component {
+  state = {
+    showErrors: false,
+  };
+
+  showErrors = () => {
+    this.setState({
+      showErrors: true,
+    });
+  };
+
+  confirmChanges = async () => {
+    if (this.formHasError()) {
+      this.showErrors();
+    } else {
+      // await this.props.saveChanges
+      this.props.closeDialog();
+    }
+  };
+
+  formHasError = () =>
+    this.props.formData.confirmNewUsername !== this.props.formData.newUsername;
+
   render() {
     return (
       <Dialog
@@ -37,6 +59,11 @@ class ChangeUsernameDialog extends React.Component {
               type="text"
               onChange={this.props.onChange}
               value={this.props.formData.confirmNewUsername}
+              hasError={this.formHasError() && this.state.showErrors}
+              errorMsg={'Username does not match'}
+              showErrors={this.state.showErrors}
+              columnDisplay
+              showSuccess={false}
             >
               <span className={styles.bottomNote}>
                 Note: You will not be able to change your username again for 14
@@ -46,7 +73,12 @@ class ChangeUsernameDialog extends React.Component {
           </Form>
           <div className={styles.bottomActions}>
             <Button className={styles.cancel}>Cancel</Button>
-            <Button className={styles.confirmChanges}>Confirm Changes</Button>
+            <Button
+              className={styles.confirmChanges}
+              onClick={this.confirmChanges}
+            >
+              Confirm Changes
+            </Button>
           </div>
         </div>
       </Dialog>
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css b/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css
index d7a1b6d45..abcf692fe 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css
@@ -1,6 +1,5 @@
 .errorMsg {
   color: #FA4643;
-  padding-left: 4px;
   font-size: 0.9em;
 }
 
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css b/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css
index be25a44b9..b2648e116 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/InputField.css
@@ -7,6 +7,14 @@
   display: flex;
 }
 
+.columnDisplay {
+  flex-direction: column;
+
+  .detailItemMessage {
+    padding: 4px 0 0;
+  }
+}
+
 .detailItemContent {
   min-width: 280px;
 }
@@ -28,13 +36,17 @@
   color: #979797;
   box-sizing: border-box;
   width: 100%;
+
+  &.error {
+    border-color: #FA4643;
+  }
 }
 
 .detailItemMessage {
   flex-grow: 1;
   display: flex;
   align-items: center;
-  padding-left: 2px;
+  padding-left: 6px;
   padding-top: 16px;
 
   .warningIcon, .checkIcon {
@@ -48,4 +60,4 @@
 
 .warningIcon {
   color: #FA4643;
-}
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js b/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js
index ed9c394ee..5818bfd2c 100644
--- a/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js
+++ b/plugins/talk-plugin-auth/client/profile-settings/components/InputField.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
 import styles from './InputField.css';
 import ErrorMessage from './ErrorMessage';
 import { Icon } from 'plugin-api/beta/client/components/ui';
@@ -15,10 +16,16 @@ const InputField = ({
   hasError = false,
   errorMsg = '',
   children,
+  columnDisplay = false,
+  showSuccess = true,
 }) => {
   return (
     <li className={styles.detailItem}>
-      <div className={styles.detailItemContainer}>
+      <div
+        className={cn(styles.detailItemContainer, {
+          [styles.columnDisplay]: columnDisplay,
+        })}
+      >
         <div className={styles.detailItemContent}>
           <label className={styles.detailLabel} id={id}>
             {label}
@@ -27,7 +34,7 @@ const InputField = ({
             id={id}
             type={type}
             name={name}
-            className={styles.detailValue}
+            className={cn(styles.detailValue, styles.error)}
             onChange={onChange}
             value={value}
             autoComplete="off"
@@ -35,6 +42,7 @@ const InputField = ({
         </div>
         <div className={styles.detailItemMessage}>
           {!hasError &&
+            showSuccess &&
             value && <Icon className={styles.checkIcon} name="check_circle" />}
           {hasError && showError && <ErrorMessage>{errorMsg}</ErrorMessage>}
         </div>
@@ -55,6 +63,8 @@ InputField.propTypes = {
   hasError: PropTypes.bool,
   errorMsg: PropTypes.string,
   children: PropTypes.node,
+  columnDisplay: PropTypes.bool,
+  showSuccess: PropTypes.bool,
 };
 
 export default InputField;