diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 1401bee337..e2f183d92a 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -21,6 +21,7 @@ var dis = require("../../dispatcher");
 var q = require('q');
 var version = require('../../../package.json').version;
 var UserSettingsStore = require('../../UserSettingsStore');
+var ChangeDisplayName = require("../views/settings/ChangeDisplayName");
 
 module.exports = React.createClass({
     displayName: 'UserSettings',
@@ -38,7 +39,6 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             avatarUrl: null,
-            displayName: null,
             threePids: [],
             clientVersion: version,
             phase: "UserSettings.LOADING", // LOADING, DISPLAY, SAVING
@@ -53,7 +53,6 @@ module.exports = React.createClass({
         ]).done(function(resps) {
             self.setState({
                 avatarUrl: resps[0].avatar_url,
-                displayName: resps[0].displayname,
                 threepids: resps[1].threepids,
                 phase: "UserSettings.DISPLAY",
             });
@@ -90,10 +89,6 @@ module.exports = React.createClass({
         //     savePromises.push( UserSettingsStore.saveAvatarUrl(this.state.avatarUrl) );
         // }
 
-        if (this.state.originalState.displayName !== this.state.displayName) {
-            savePromises.push( UserSettingsStore.saveDisplayName(this.state.displayName) );
-        }
-
         if (this.state.originalState.threepids.length !== this.state.threepids.length ||
                 this.state.originalState.threepids.every((element, index) => {
                     return element === this.state.threepids[index];
@@ -161,10 +156,6 @@ module.exports = React.createClass({
         this.logoutModal.closeDialog();
     },
 
-    onDisplayNameChange: function(event) {
-        this.setState({ displayName: event.target.value });
-    },
-
     onEnableNotificationsChange: function(event) {
         // don't bother waiting for Save to be clicked, as that'd be silly
         UserSettingsStore.setEnableNotifications( this.refs.enableNotifications.value );
@@ -202,9 +193,7 @@ module.exports = React.createClass({
                                 <label htmlFor="displayName">Display name</label>
                             </div>
                             <div className="mx_UserSettings_profileInputCell">
-                                <input id="displayName" ref="displayName"
-                                    value={ this.state.displayName }
-                                    onChange={ this.onDisplayNameChange } />
+                                <ChangeDisplayName />
                             </div>
                         </div>
 
diff --git a/src/components/views/settings/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js
index 4af413cfbe..9410b02290 100644
--- a/src/components/views/settings/ChangeDisplayName.js
+++ b/src/components/views/settings/ChangeDisplayName.js
@@ -98,7 +98,9 @@ module.exports = React.createClass({
         } else {
             var EditableText = sdk.getComponent('elements.EditableText');
             return (
-                <EditableText ref="displayname_edit" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.onValueChanged}/>
+                <EditableText ref="displayname_edit" initialValue={this.state.displayName}
+                    label="Click to set display name."
+                    onValueChanged={this.onValueChanged} />
             );
         }
     }