diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index 4eb2adad5d..d4e7df3a16 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -141,8 +141,7 @@ var commands = {
                     return reject("Usage: /join #alias:domain");
                 }
                 if (!room_alias.match(/:/)) {
-                    var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
-                    room_alias += ':' + domain;
+                    room_alias += ':' + MatrixClientPeg.get().getDomain();
                 }
 
                 // Try to find a room with this alias
@@ -188,8 +187,7 @@ var commands = {
                     return reject(this.getUsage());
                 }
                 if (!room_alias.match(/:/)) {
-                    var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
-                    room_alias += ':' + domain;
+                    room_alias += ':' + MatrixClientPeg.get().getDomain();
                 }
 
                 // Try to find a room with this alias
diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index 5296ef833e..f2ae22a1bb 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -66,7 +66,7 @@ function textForMemberEvent(ev) {
 function textForTopicEvent(ev) {
     var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 
-    return senderDisplayName + ' changed the topic to, "' + ev.getContent().topic + '"';
+    return senderDisplayName + ' changed the topic to "' + ev.getContent().topic + '"';
 };
 
 function textForRoomNameEvent(ev) {
diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index c21bc80c6b..116202d324 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -251,7 +251,7 @@ module.exports = React.createClass({
             var UserSelector = sdk.getComponent("elements.UserSelector");
             var RoomHeader = sdk.getComponent("rooms.RoomHeader");
 
-            var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
+            var domain = MatrixClientPeg.get().getDomain();
 
             return (
             <div className="mx_CreateRoom">
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 23be8d6587..462933cbc6 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -64,7 +64,7 @@ module.exports = React.createClass({
             collapse_lhs: false,
             collapse_rhs: false,
             ready: false,
-            width: 10000
+            width: 10000,
         };
         if (s.logged_in) {
             if (MatrixClientPeg.get().getRooms().length) {
@@ -304,7 +304,7 @@ module.exports = React.createClass({
                 });
                 break;
             case 'view_room':
-                this._viewRoom(payload.room_id);
+                this._viewRoom(payload.room_id, payload.show_settings);
                 break;
             case 'view_prev_room':
                 roomIndexDelta = -1;
@@ -357,8 +357,29 @@ module.exports = React.createClass({
                 this.notifyNewScreen('settings');
                 break;
             case 'view_create_room':
-                this._setPage(this.PageTypes.CreateRoom);
-                this.notifyNewScreen('new');
+                //this._setPage(this.PageTypes.CreateRoom);
+                //this.notifyNewScreen('new');
+
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                var Loader = sdk.getComponent("elements.Spinner");
+                var modal = Modal.createDialog(Loader);
+
+                MatrixClientPeg.get().createRoom({
+                    preset: "private_chat"
+                }).done(function(res) {
+                    modal.close();
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_id: res.room_id,
+                        show_settings: true,
+                    });
+                }, function(err) {
+                    modal.close();
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Failed to create room",
+                        description: err.toString()
+                    });
+                });
                 break;
             case 'view_room_directory':
                 this._setPage(this.PageTypes.RoomDirectory);
@@ -399,7 +420,7 @@ module.exports = React.createClass({
         });
     },
 
-    _viewRoom: function(roomId) {
+    _viewRoom: function(roomId, showSettings) {
         // before we switch room, record the scroll state of the current room
         this._updateScrollMap();
 
@@ -437,6 +458,9 @@ module.exports = React.createClass({
             var scrollState = this.scrollStateMap[roomId];
             this.refs.roomView.restoreScrollState(scrollState);
         }
+        if (this.refs.roomView && showSettings) {
+            this.refs.roomView.showSettings(true);
+        }
     },
 
     // update scrollStateMap according to the current scroll state of the
@@ -522,7 +546,9 @@ module.exports = React.createClass({
         UserActivity.start();
         Presence.start();
         cli.startClient({
-            pendingEventOrdering: "end"
+            pendingEventOrdering: "end",
+            // deliberately huge limit for now to avoid hitting gappy /sync's until gappy /sync performance improves
+            initialSyncLimit: 250,
         });
     },
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index b20f615a3f..5604565dd7 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -142,16 +142,16 @@ module.exports = React.createClass({
         // (We could use isMounted, but facebook have deprecated that.)
         this.unmounted = true;
 
-        if (this.refs.messagePanel) {
-            // disconnect the D&D event listeners from the message panel. This
-            // is really just for hygiene - the messagePanel is going to be
+        if (this.refs.roomView) {
+            // disconnect the D&D event listeners from the room view. This
+            // is really just for hygiene - we're going to be
             // deleted anyway, so it doesn't matter if the event listeners
             // don't get cleaned up.
-            var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
-            messagePanel.removeEventListener('drop', this.onDrop);
-            messagePanel.removeEventListener('dragover', this.onDragOver);
-            messagePanel.removeEventListener('dragleave', this.onDragLeaveOrEnd);
-            messagePanel.removeEventListener('dragend', this.onDragLeaveOrEnd);
+            var roomView = ReactDOM.findDOMNode(this.refs.roomView);
+            roomView.removeEventListener('drop', this.onDrop);
+            roomView.removeEventListener('dragover', this.onDragOver);
+            roomView.removeEventListener('dragleave', this.onDragLeaveOrEnd);
+            roomView.removeEventListener('dragend', this.onDragLeaveOrEnd);
         }
         dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
@@ -414,6 +414,14 @@ module.exports = React.createClass({
         window.addEventListener('resize', this.onResize);
         this.onResize();
 
+        if (this.refs.roomView) {
+            var roomView = ReactDOM.findDOMNode(this.refs.roomView);
+            roomView.addEventListener('drop', this.onDrop);
+            roomView.addEventListener('dragover', this.onDragOver);
+            roomView.addEventListener('dragleave', this.onDragLeaveOrEnd);
+            roomView.addEventListener('dragend', this.onDragLeaveOrEnd);
+        }
+
         this._updateTabCompleteList(this.state.room);
     },
 
@@ -432,11 +440,6 @@ module.exports = React.createClass({
         var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
         this.refs.messagePanel.initialised = true;
 
-        messagePanel.addEventListener('drop', this.onDrop);
-        messagePanel.addEventListener('dragover', this.onDragOver);
-        messagePanel.addEventListener('dragleave', this.onDragLeaveOrEnd);
-        messagePanel.addEventListener('dragend', this.onDragLeaveOrEnd);
-
         this.scrollToBottom();
         this.sendReadReceipt();
 
@@ -884,9 +887,27 @@ module.exports = React.createClass({
             old_history_visibility = "shared";
         }
 
+        var old_guest_read = (old_history_visibility === "world_readable");
+
+        var old_guest_join = this.state.room.currentState.getStateEvents('m.room.guest_access', '');
+        if (old_guest_join) {
+            old_guest_join = (old_guest_join.getContent().guest_access === "can_join");
+        }
+        else {
+            old_guest_join = false;
+        }
+
+        var old_canonical_alias = this.state.room.currentState.getStateEvents('m.room.canonical_alias', '');
+        if (old_canonical_alias) {
+            old_canonical_alias = old_canonical_alias.getContent().alias;
+        }
+        else {
+            old_canonical_alias = "";   
+        }
+
         var deferreds = [];
 
-        if (old_name != newVals.name && newVals.name != undefined && newVals.name) {
+        if (old_name != newVals.name && newVals.name != undefined) {
             deferreds.push(
                 MatrixClientPeg.get().setRoomName(this.state.room.roomId, newVals.name)
             );
@@ -927,6 +948,83 @@ module.exports = React.createClass({
             );
         }
 
+        if (newVals.alias_operations) {
+            var oplist = [];
+            for (var i = 0; i < newVals.alias_operations.length; i++) {
+                var alias_operation = newVals.alias_operations[i];
+                switch (alias_operation.type) {
+                    case 'put':
+                        oplist.push(
+                            MatrixClientPeg.get().createAlias(
+                                alias_operation.alias, this.state.room.roomId
+                            )
+                        );
+                        break;
+                    case 'delete':
+                        oplist.push(
+                            MatrixClientPeg.get().deleteAlias(
+                                alias_operation.alias
+                            )
+                        );
+                        break;
+                    default:
+                        console.log("Unknown alias operation, ignoring: " + alias_operation.type);
+                }
+            }
+
+            if (oplist.length) {
+                var deferred = oplist[0];
+                oplist.splice(1).forEach(function (f) {
+                    deferred = deferred.then(f);
+                });
+                deferreds.push(deferred);
+            }
+        }
+
+        if (newVals.tag_operations) {
+            // FIXME: should probably be factored out with alias_operations above
+            var oplist = [];
+            for (var i = 0; i < newVals.tag_operations.length; i++) {
+                var tag_operation = newVals.tag_operations[i];
+                switch (tag_operation.type) {
+                    case 'put':
+                        oplist.push(
+                            MatrixClientPeg.get().setRoomTag(
+                                this.props.roomId, tag_operation.tag, {}
+                            )
+                        );
+                        break;
+                    case 'delete':
+                        oplist.push(
+                            MatrixClientPeg.get().deleteRoomTag(
+                                this.props.roomId, tag_operation.tag
+                            )
+                        );
+                        break;
+                    default:
+                        console.log("Unknown tag operation, ignoring: " + tag_operation.type);
+                }
+            }
+
+            if (oplist.length) {
+                var deferred = oplist[0];
+                oplist.splice(1).forEach(function (f) {
+                    deferred = deferred.then(f);
+                });
+                deferreds.push(deferred);
+            }            
+        }
+
+        if (old_canonical_alias !== newVals.canonical_alias) {
+            deferreds.push(
+                MatrixClientPeg.get().sendStateEvent(
+                    this.state.room.roomId, "m.room.canonical_alias", {
+                        alias: newVals.canonical_alias
+                    }, ""
+                )
+            );            
+        }
+
         if (newVals.color_scheme) {
             deferreds.push(
                 MatrixClientPeg.get().setRoomAccountData(
@@ -935,26 +1033,43 @@ module.exports = React.createClass({
             );
         }
 
-        deferreds.push(
-            MatrixClientPeg.get().setGuestAccess(this.state.room.roomId, {
-                allowRead: newVals.guest_read,
-                allowJoin: newVals.guest_join
-            })
-        );
+        if (old_guest_read != newVals.guest_read ||
+            old_guest_join != newVals.guest_join)
+        {
+            deferreds.push(
+                MatrixClientPeg.get().setGuestAccess(this.state.room.roomId, {
+                    allowRead: newVals.guest_read,
+                    allowJoin: newVals.guest_join
+                })
+            );
+        }
 
         if (deferreds.length) {
             var self = this;
-            q.all(deferreds).fail(function(err) {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failed to set state",
-                    description: err.toString()
+            q.allSettled(deferreds).then(
+                function(results) {
+                    var fails = results.filter(function(result) { return result.state !== "fulfilled" });
+                    if (fails.length) {
+                        fails.forEach(function(result) {
+                            console.error(result.reason);
+                        });
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to set state",
+                            description: fails.map(function(result) { return result.reason }).join("\n"),
+                        });
+                        self.refs.room_settings.resetState();
+                    }
+                    else {
+                        self.setState({
+                            editingRoomSettings: false
+                        });
+                    }
+                }).finally(function() {
+                    self.setState({
+                        uploadingRoomSettings: false,
+                    });
                 });
-            }).finally(function() {
-                self.setState({
-                    uploadingRoomSettings: false,
-                });
-            });
         } else {
             this.setState({
                 editingRoomSettings: false,
@@ -1022,16 +1137,18 @@ module.exports = React.createClass({
 
     onSaveClick: function() {
         this.setState({
-            editingRoomSettings: false,
             uploadingRoomSettings: true,
         });
 
         this.uploadNewState({
             name: this.refs.header.getRoomName(),
-            topic: this.refs.room_settings.getTopic(),
+            topic: this.refs.header.getTopic(),
             join_rule: this.refs.room_settings.getJoinRules(),
             history_visibility: this.refs.room_settings.getHistoryVisibility(),
             power_levels: this.refs.room_settings.getPowerLevels(),
+            alias_operations: this.refs.room_settings.getAliasOperations(),
+            tag_operations: this.refs.room_settings.getTagOperations(),
+            canonical_alias: this.refs.room_settings.getCanonicalAlias(),
             guest_join: this.refs.room_settings.canGuestsJoin(),
             guest_read: this.refs.room_settings.canGuestsRead(),
             color_scheme: this.refs.room_settings.getColorScheme(),
@@ -1187,26 +1304,32 @@ module.exports = React.createClass({
         // a minimum of the height of the video element, whilst also capping it from pushing out the page
         // so we have to do it via JS instead.  In this implementation we cap the height by putting
         // a maxHeight on the underlying remote video tag.
-        var auxPanelMaxHeight;
+
+        // header + footer + status + give us at least 120px of scrollback at all times.
+        var auxPanelMaxHeight = window.innerHeight -
+                (83 + // height of RoomHeader
+                 36 + // height of the status area
+                 72 + // minimum height of the message compmoser
+                 120); // amount of desired scrollback
+
+        // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
+        // but it's better than the video going missing entirely
+        if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
+
         if (this.refs.callView) {
             var video = this.refs.callView.getVideoView().getRemoteVideoElement();
 
-            // header + footer + status + give us at least 100px of scrollback at all times.
-            auxPanelMaxHeight = window.innerHeight -
-                (83 + 72 +
-                 sdk.getComponent('rooms.MessageComposer').MAX_HEIGHT +
-                 100);
-
-            // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
-            // but it's better than the video going missing entirely
-            if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
-
             video.style.maxHeight = auxPanelMaxHeight + "px";
 
             // the above might have made the video panel resize itself, so now
             // we need to tell the gemini panel to adapt.
             this.onChildResize();
         }
+
+        // we need to do this for general auxPanels too
+        if (this.refs.auxPanel) {
+            this.refs.auxPanel.style.maxHeight = auxPanelMaxHeight + "px";
+        }
     },
 
     onFullscreenClick: function() {
@@ -1249,6 +1372,13 @@ module.exports = React.createClass({
         }
     },
 
+    showSettings: function(show) {
+        // XXX: this is a bit naughty; we should be doing this via props
+        if (show) {
+            this.setState({editingRoomSettings: true});
+        }
+    },
+
     render: function() {
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1399,7 +1529,7 @@ module.exports = React.createClass({
 
             var aux = null;
             if (this.state.editingRoomSettings) {
-                aux = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
+                aux = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} room={this.state.room} />;
             }
             else if (this.state.uploadingRoomSettings) {
                 var Loader = sdk.getComponent("elements.Spinner");                
@@ -1433,7 +1563,7 @@ module.exports = React.createClass({
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
                                         <TintableSvg src="img/upload-big.svg" width="45" height="59"/><br/>
-                                        Drop File Here
+                                        Drop file here to upload
                                     </div>
                                  </div>;
             }
@@ -1534,7 +1664,7 @@ module.exports = React.createClass({
             );
 
             return (
-                <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") }>
+                <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") } ref="roomView">
                     <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
                         editing={this.state.editingRoomSettings}
                         onSearchClick={this.onSearchClick}
@@ -1547,8 +1677,8 @@ module.exports = React.createClass({
                         onLeaveClick={
                             (myMember && myMember.membership === "join") ? this.onLeaveClick : null
                         } />
-                    { fileDropTarget }    
-                    <div className="mx_RoomView_auxPanel">
+                    <div className="mx_RoomView_auxPanel" ref="auxPanel">
+                        { fileDropTarget }    
                         <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}
                             onResize={this.onChildResize} />
                         { conferenceCallNotification }
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ddf4229170..fa932b6757 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 GeminiScrollbar = require('react-gemini-scrollbar');
 
 module.exports = React.createClass({
     displayName: 'UserSettings',
@@ -83,6 +84,12 @@ module.exports = React.createClass({
         }
     },
 
+    onAvatarPickerClick: function(ev) {
+        if (this.refs.file_label) {
+            this.refs.file_label.click();
+        }
+    },
+
     onAvatarSelected: function(ev) {
         var self = this;
         var changeAvatar = this.refs.changeAvatar;
@@ -175,7 +182,7 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get().isGuest()) {
             accountJsx = (
                 <div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
-                    Upgrade (It's free!)
+                    Create an account
                 </div>
             );
         }
@@ -196,6 +203,8 @@ module.exports = React.createClass({
             <div className="mx_UserSettings">
                 <RoomHeader simpleHeader="Settings" />
 
+                <GeminiScrollbar className="mx_UserSettings_body" autoshow={true}>
+
                 <h2>Profile</h2>
 
                 <div className="mx_UserSettings_section">
@@ -225,13 +234,15 @@ module.exports = React.createClass({
                     </div>
 
                     <div className="mx_UserSettings_avatarPicker">
-                        <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
-                            showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
+                        <div onClick={ this.onAvatarPickerClick }>
+                            <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
+                                showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
+                        </div>
                         <div className="mx_UserSettings_avatarPicker_edit">
-                            <label htmlFor="avatarInput">
-                                <img src="img/upload.svg"
+                            <label htmlFor="avatarInput" ref="file_label">
+                                <img src="img/camera.svg"
                                     alt="Upload avatar" title="Upload avatar"
-                                    width="19" height="24" />
+                                    width="17" height="15" />
                             </label>
                             <input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
                         </div>
@@ -241,13 +252,12 @@ module.exports = React.createClass({
                 <h2>Account</h2>
 
                 <div className="mx_UserSettings_section">
-                    {accountJsx}
-                </div>
-
-                <div className="mx_UserSettings_logout">
-                    <div className="mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    
+                    <div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Log out
                     </div>
+
+                    {accountJsx}
                 </div>
 
                 <h2>Notifications</h2>
@@ -281,6 +291,8 @@ module.exports = React.createClass({
                         Version {this.state.clientVersion}
                     </div>
                 </div>
+
+                </GeminiScrollbar>
             </div>
         );
     }
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index beedfc35c8..683cfe4fc8 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -18,13 +18,22 @@ limitations under the License.
 
 var React = require('react');
 
+const KEY_TAB = 9;
+const KEY_SHIFT = 16;
+const KEY_WINDOWS = 91;
+
 module.exports = React.createClass({
     displayName: 'EditableText',
     propTypes: {
         onValueChanged: React.PropTypes.func,
         initialValue: React.PropTypes.string,
         label: React.PropTypes.string,
-        placeHolder: React.PropTypes.string,
+        placeholder: React.PropTypes.string,
+        className: React.PropTypes.string,
+        labelClassName: React.PropTypes.string,
+        placeholderClassName: React.PropTypes.string,
+        blurToCancel: React.PropTypes.bool,
+        editable: React.PropTypes.bool,
     },
 
     Phases: {
@@ -36,38 +45,62 @@ module.exports = React.createClass({
         return {
             onValueChanged: function() {},
             initialValue: '',
-            label: 'Click to set',
+            label: '',
             placeholder: '',
+            editable: true,
         };
     },
 
     getInitialState: function() {
         return {
-            value: this.props.initialValue,
             phase: this.Phases.Display,
         }
     },
 
     componentWillReceiveProps: function(nextProps) {
-        this.setState({
-            value: nextProps.initialValue
-        });
+        if (nextProps.initialValue !== this.props.initialValue) {
+            this.value = nextProps.initialValue;
+            if (this.refs.editable_div) {
+                this.showPlaceholder(!this.value);
+            }
+        }
+    },
+
+    componentWillMount: function() {
+        // we track value as an JS object field rather than in React state
+        // as React doesn't play nice with contentEditable.
+        this.value = '';
+        this.placeholder = false;
+    },
+
+    componentDidMount: function() {
+        this.value = this.props.initialValue;
+        if (this.refs.editable_div) {
+            this.showPlaceholder(!this.value);
+        }
+    },
+
+    showPlaceholder: function(show) {
+        if (show) {
+            this.refs.editable_div.textContent = this.props.placeholder;
+            this.refs.editable_div.setAttribute("class", this.props.className + " " + this.props.placeholderClassName);
+            this.placeholder = true;
+            this.value = '';
+        }
+        else {
+            this.refs.editable_div.textContent = this.value;
+            this.refs.editable_div.setAttribute("class", this.props.className);
+            this.placeholder = false;
+        }            
     },
 
     getValue: function() {
-        return this.state.value;
+        return this.value;
     },
 
-    setValue: function(val, shouldSubmit, suppressListener) {
-        var self = this;
-        this.setState({
-            value: val,
-            phase: this.Phases.Display,
-        }, function() {
-            if (!suppressListener) {
-                self.onValueChanged(shouldSubmit);
-            }
-        });
+    setValue: function(value) {
+        this.value = value;
+        this.showPlaceholder(!this.value);        
     },
 
     edit: function() {
@@ -80,65 +113,106 @@ module.exports = React.createClass({
         this.setState({
             phase: this.Phases.Display,
         });
+        this.value = this.props.initialValue;
+        this.showPlaceholder(!this.value);
         this.onValueChanged(false);
     },
 
     onValueChanged: function(shouldSubmit) {
-        this.props.onValueChanged(this.state.value, shouldSubmit);
+        this.props.onValueChanged(this.value, shouldSubmit);
+    },
+
+    onKeyDown: function(ev) {
+        // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
+        
+        if (this.placeholder) {
+            this.showPlaceholder(false);
+        }
+
+        if (ev.key == "Enter") {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+
+        // console.log("keyDown: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
     },
 
     onKeyUp: function(ev) {
+        // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
+
+        if (!ev.target.textContent) {
+            this.showPlaceholder(true);
+        }
+        else if (!this.placeholder) {
+            this.value = ev.target.textContent;
+        }
+
         if (ev.key == "Enter") {
             this.onFinish(ev);
         } else if (ev.key == "Escape") {
             this.cancelEdit();
         }
+
+        // console.log("keyUp: textContent=" + ev.target.textContent + ", value=" + this.value + ", placeholder=" + this.placeholder);
     },
 
-    onClickDiv: function() {
+    onClickDiv: function(ev) {
+        if (!this.props.editable) return;
+
         this.setState({
             phase: this.Phases.Edit,
         })
     },
 
     onFocus: function(ev) {
-        ev.target.setSelectionRange(0, ev.target.value.length);
-    },
+        //ev.target.setSelectionRange(0, ev.target.textContent.length);
 
-    onFinish: function(ev) {
-        if (ev.target.value) {
-            this.setValue(ev.target.value, ev.key === "Enter");
-        } else {
-            this.cancelEdit();
+        var node = ev.target.childNodes[0];
+        if (node) {
+            var range = document.createRange();
+            range.setStart(node, 0);
+            range.setEnd(node, node.length);
+            
+            var sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
         }
     },
 
-    onBlur: function() {
-        this.cancelEdit();
+    onFinish: function(ev) {
+        var self = this;
+        var submit = (ev.key === "Enter");
+        this.setState({
+            phase: this.Phases.Display,
+        }, function() {
+            self.onValueChanged(submit);
+        });
+    },
+
+    onBlur: function(ev) {
+        var sel = window.getSelection();
+        sel.removeAllRanges();
+
+        if (this.props.blurToCancel)
+            this.cancelEdit();
+        else
+            this.onFinish(ev);
+
+        this.showPlaceholder(!this.value);
     },
 
     render: function() {
         var editable_el;
 
-        if (this.state.phase == this.Phases.Display) {
-            if (this.state.value) {
-                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
-            } else {
-                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.props.label}</div>;
-            }
-        } else if (this.state.phase == this.Phases.Edit) {
-            editable_el = (
-                <div>
-                    <input type="text" defaultValue={this.state.value}
-                        onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur} placeholder={this.props.placeHolder} autoFocus/>
-                </div>
-            );
+        if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
+            // show the label
+            editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{ this.props.label || this.props.initialValue }</div>;
+        } else {
+            // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
+            editable_el = <div ref="editable_div" contentEditable="true" className={this.props.className}
+                               onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur}></div>;
         }
 
-        return (
-            <div className="mx_EditableText">
-                {editable_el}
-            </div>
-        );
+        return editable_el;
     }
 });
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index fe763d06bf..e3613ef9a3 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -36,6 +36,9 @@ module.exports = React.createClass({
     },
 
     componentDidUpdate: function() {
+        // XXX: why don't we linkify here?
+        // XXX: why do we bother doing this on update at all, given events are immutable?
+
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
             HtmlUtils.highlightDom(ReactDOM.findDOMNode(this));
     },
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index f4073035af..3e3221992e 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -318,7 +318,7 @@ module.exports = React.createClass({
         } else {
             return (
                 <form onSubmit={this.onPopulateInvite}>
-                    <input className="mx_MemberList_invite" ref="invite" placeholder="Invite user (email)"/>
+                    <input className="mx_MemberList_invite" ref="invite" id="mx_MemberList_invite" placeholder="Invite user (email)"/>
                 </form>
             );
         }
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index 84d8edb2b5..0f40180274 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -137,7 +137,7 @@ module.exports = React.createClass({
         }
 
         var nameEl;
-        if (this.state.hover) {
+        if (this.state.hover && this.props.member) {
             var presenceState = (member && member.user) ? member.user.presence : null;
             var PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
             nameEl = (
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index a05c6c30ac..5340798875 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -21,6 +21,12 @@ var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 
+var linkify = require('linkifyjs');
+var linkifyElement = require('linkifyjs/element');
+var linkifyMatrix = require('../../../linkify-matrix');
+
+linkifyMatrix(linkify);
+
 module.exports = React.createClass({
     displayName: 'RoomHeader',
 
@@ -41,6 +47,25 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillReceiveProps: function(newProps) {
+        if (newProps.editing) {
+            var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
+            var name = this.props.room.currentState.getStateEvents('m.room.name', '');
+
+            this.setState({
+                name: name ? name.getContent().name : '',
+                defaultName: this.props.room.getDefaultRoomName(MatrixClientPeg.get().credentials.userId),
+                topic: topic ? topic.getContent().topic : '',
+            });
+        }
+    },
+
+    componentDidUpdate: function() {
+        if (this.refs.topic) {
+            linkifyElement(this.refs.topic, linkifyMatrix.options);
+        }
+    },
+
     onVideoClick: function(e) {
         dis.dispatch({
             action: 'place_call',
@@ -57,26 +82,59 @@ module.exports = React.createClass({
         });
     },
 
-    onNameChange: function(new_name) {
-        if (this.props.room.name != new_name && new_name) {
-            MatrixClientPeg.get().setRoomName(this.props.room.roomId, new_name);
+    onNameChanged: function(value) {
+        this.setState({ name : value });
+    },
+
+    onTopicChanged: function(value) {
+        this.setState({ topic : value });
+    },
+
+    onAvatarPickerClick: function(ev) {
+        if (this.refs.file_label) {
+            this.refs.file_label.click();
         }
     },
 
+    onAvatarSelected: function(ev) {
+        var self = this;
+        var changeAvatar = this.refs.changeAvatar;
+        if (!changeAvatar) {
+            console.error("No ChangeAvatar found to upload image to!");
+            return;
+        }
+        changeAvatar.onFileSelected(ev).done(function() {
+            // dunno if the avatar changed, re-check it.
+            self._refreshFromServer();
+        }, function(err) {
+            var errMsg = (typeof err === "string") ? err : (err.error || "");
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: "Failed to set avatar. " + errMsg
+            });
+        });
+    },    
+
     getRoomName: function() {
-        return this.refs.name_edit.value;
+        return this.state.name;
+    },
+
+    getTopic: function() {
+        return this.state.topic;
     },
 
     render: function() {
         var EditableText = sdk.getComponent("elements.EditableText");
-        var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+        var RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
+        var ChangeAvatar = sdk.getComponent("settings.ChangeAvatar");
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         var header;
         if (this.props.simpleHeader) {
             var cancel;
             if (this.props.onCancelClick) {
-                cancel = <img className="mx_RoomHeader_simpleHeaderCancel" src="img/cancel-black.png" onClick={ this.props.onCancelClick } alt="Close" width="18" height="18"/>
+                cancel = <img className="mx_RoomHeader_simpleHeaderCancel" src="img/cancel.svg" onClick={ this.props.onCancelClick } alt="Close" width="18" height="18"/>
             }
             header =
                 <div className="mx_RoomHeader_wrapper">
@@ -87,27 +145,72 @@ module.exports = React.createClass({
                 </div>
         }
         else {
-            var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
-
             var name = null;
             var searchStatus = null;
             var topic_el = null;
             var cancel_button = null;
             var save_button = null;
             var settings_button = null;
-            var actual_name = this.props.room.currentState.getStateEvents('m.room.name', '');
-            if (actual_name) actual_name = actual_name.getContent().name;
             if (this.props.editing) {
-                name = 
-                    <div className="mx_RoomHeader_nameEditing">
-                        <input className="mx_RoomHeader_nameInput" type="text" defaultValue={actual_name} placeholder="Name" ref="name_edit"/>
-                    </div>
-                // if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
-                cancel_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onCancelClick}>Cancel</div>
-                save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save Changes</div>
-            } else {
-                // <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
 
+                // calculate permissions.  XXX: this should be done on mount or something, and factored out with RoomSettings
+                var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
+                var events_levels = (power_levels ? power_levels.events : {}) || {};
+                var user_id = MatrixClientPeg.get().credentials.userId;
+
+                if (power_levels) {
+                    power_levels = power_levels.getContent();
+                    var default_user_level = parseInt(power_levels.users_default || 0);
+                    var user_levels = power_levels.users || {};
+                    var current_user_level = user_levels[user_id];
+                    if (current_user_level == undefined) current_user_level = default_user_level;
+                } else {
+                    var default_user_level = 0;
+                    var user_levels = [];
+                    var current_user_level = 0;
+                }
+                var state_default = parseInt((power_levels ? power_levels.state_default : 0) || 0);
+
+                var room_avatar_level = state_default;
+                if (events_levels['m.room.avatar'] !== undefined) {
+                    room_avatar_level = events_levels['m.room.avatar'];
+                }
+                var can_set_room_avatar = current_user_level >= room_avatar_level;
+
+                var room_name_level = state_default;
+                if (events_levels['m.room.name'] !== undefined) {
+                    room_name_level = events_levels['m.room.name'];
+                }
+                var can_set_room_name = current_user_level >= room_name_level;
+
+                var room_topic_level = state_default;
+                if (events_levels['m.room.topic'] !== undefined) {
+                    room_topic_level = events_levels['m.room.topic'];
+                }
+                var can_set_room_topic = current_user_level >= room_topic_level;
+
+                var placeholderName = "Unnamed Room";
+                if (this.state.defaultName && this.state.defaultName !== '?') {
+                    placeholderName += " (" + this.state.defaultName + ")";
+                }
+
+                save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>
+                cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            }
+
+            if (can_set_room_name) {
+                name =
+                    <div className="mx_RoomHeader_name">
+                        <EditableText
+                             className="mx_RoomHeader_nametext mx_RoomHeader_editable"
+                             placeholderClassName="mx_RoomHeader_placeholder"
+                             placeholder={ placeholderName }
+                             blurToCancel={ false }
+                             onValueChanged={ this.onNameChanged }
+                             initialValue={ this.state.name }/>
+                    </div>
+            }
+            else {
                 var searchStatus;
                 // don't display the search count until the search completes and
                 // gives us a valid (possibly zero) searchCount.
@@ -116,21 +219,55 @@ module.exports = React.createClass({
                 }
 
                 name =
-                    <div className="mx_RoomHeader_name">
+                    <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
                         <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
                         { searchStatus }
                         <div className="mx_RoomHeader_settingsButton" title="Settings">
                             <TintableSvg src="img/settings.svg" width="12" height="12"/>
                         </div>
                     </div>
-                if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
+            }
+
+            if (can_set_room_topic) {
+                topic_el =
+                    <EditableText 
+                         className="mx_RoomHeader_topic mx_RoomHeader_editable"
+                         placeholderClassName="mx_RoomHeader_placeholder"
+                         placeholder="Add a topic"
+                         blurToCancel={ false }
+                         onValueChanged={ this.onTopicChanged }
+                         initialValue={ this.state.topic }/>
+            } else {
+                var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
+                if (topic) topic_el = <div className="mx_RoomHeader_topic" ref="topic" title={ topic.getContent().topic }>{ topic.getContent().topic }</div>;
             }
 
             var roomAvatar = null;
             if (this.props.room) {
-                roomAvatar = (
-                    <RoomAvatar room={this.props.room} width={48} height={48} />
-                );
+                if (can_set_room_avatar) {
+                    roomAvatar = (
+                        <div className="mx_RoomHeader_avatarPicker">
+                            <div onClick={ this.onAvatarPickerClick }>
+                                <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
+                            </div>
+                            <div className="mx_RoomHeader_avatarPicker_edit">
+                                <label htmlFor="avatarInput" ref="file_label">
+                                    <img src="img/camera.svg"
+                                        alt="Upload avatar" title="Upload avatar"
+                                        width="17" height="15" />
+                                </label>
+                                <input id="avatarInput" type="file" onChange={ this.onAvatarSelected }/>
+                            </div>
+                        </div>
+                    );
+                }
+                else {
+                    roomAvatar = (
+                        <div onClick={this.props.onSettingsClick}>
+                            <RoomAvatar room={this.props.room} width={48} height={48}/>
+                        </div>
+                    );
+                }
             }
 
             var leave_button;
@@ -149,9 +286,21 @@ module.exports = React.createClass({
                     </div>;
             }
 
+            var right_row;
+            if (!this.props.editing) {
+                right_row = 
+                    <div className="mx_RoomHeader_rightRow">
+                        { forget_button }
+                        { leave_button }
+                        <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                            <TintableSvg src="img/search.svg" width="21" height="19"/>
+                        </div>
+                    </div>;
+            }
+
             header =
                 <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_leftRow" onClick={this.props.onSettingsClick}>
+                    <div className="mx_RoomHeader_leftRow">
                         <div className="mx_RoomHeader_avatar">
                             { roomAvatar }
                         </div>
@@ -160,20 +309,14 @@ module.exports = React.createClass({
                             { topic_el }
                         </div>
                     </div>
-                    {cancel_button}
                     {save_button}
-                    <div className="mx_RoomHeader_rightRow">
-                        { forget_button }
-                        { leave_button }
-                        <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
-                            <TintableSvg src="img/search.svg" width="21" height="19"/>
-                        </div>
-                    </div>
+                    {cancel_button}
+                    {right_row}
                 </div>
         }
 
         return (
-            <div className="mx_RoomHeader">
+            <div className={ "mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "") }>
                 { header }
             </div>
         );
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index c5e37521c5..0ff15a4f43 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -18,6 +18,7 @@ var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Tinter = require('../../../Tinter');
 var sdk = require('../../../index');
+var Modal = require('../../../Modal');
 
 var room_colors = [
     // magic room default values courtesy of Ribot
@@ -38,6 +39,16 @@ module.exports = React.createClass({
 
     propTypes: {
         room: React.PropTypes.object.isRequired,
+        onSaveClick: React.PropTypes.func,
+        onCancelClick: React.PropTypes.func,
+    },
+
+    componentDidMount: function() {
+        // XXX: dirty hack to gutwrench to focus on the invite box
+        if (this.props.room.getJoinedMembers().length == 1) {
+            var inviteBox = document.getElementById("mx_MemberList_invite");
+            if (inviteBox) setTimeout(function() { inviteBox.focus(); }, 0);
+        }
     },
 
     getInitialState: function() {
@@ -68,13 +79,35 @@ module.exports = React.createClass({
             room_color_index = 0;
         }
 
+        // get the aliases
+        var aliases = {};
+        var domain = MatrixClientPeg.get().getDomain();
+        var alias_events = this.props.room.currentState.getStateEvents('m.room.aliases');
+        for (var i = 0; i < alias_events.length; i++) {
+            aliases[alias_events[i].getStateKey()] = alias_events[i].getContent().aliases.slice(); // shallow copy
+        }
+        aliases[domain] = aliases[domain] || [];
+
+        var tags = {};
+        Object.keys(this.props.room.tags).forEach(function(tagName) {
+            tags[tagName] = {};
+        });
+
         return {
             power_levels_changed: false,
             color_scheme_changed: false,
             color_scheme_index: room_color_index,
+            aliases_changed: false,
+            aliases: aliases,
+            tags_changed: false,
+            tags: tags,
         };
     },
 
+    resetState: function() {
+        this.set.state(this.getInitialState());
+    },
+
     canGuestsJoin: function() {
         return this.refs.guests_join.checked;
     },
@@ -84,7 +117,7 @@ module.exports = React.createClass({
     },
 
     getTopic: function() {
-        return this.refs.topic.value;
+        return this.refs.topic ? this.refs.topic.value : "";
     },
 
     getJoinRules: function() {
@@ -102,13 +135,13 @@ module.exports = React.createClass({
         power_levels = power_levels.getContent();
 
         var new_power_levels = {
-            ban: parseInt(this.refs.ban.value),
-            kick: parseInt(this.refs.kick.value),
-            redact: parseInt(this.refs.redact.value),
-            invite: parseInt(this.refs.invite.value),
-            events_default: parseInt(this.refs.events_default.value),
-            state_default: parseInt(this.refs.state_default.value),
-            users_default: parseInt(this.refs.users_default.value),
+            ban: parseInt(this.refs.ban.getValue()),
+            kick: parseInt(this.refs.kick.getValue()),
+            redact: parseInt(this.refs.redact.getValue()),
+            invite: parseInt(this.refs.invite.getValue()),
+            events_default: parseInt(this.refs.events_default.getValue()),
+            state_default: parseInt(this.refs.state_default.getValue()),
+            users_default: parseInt(this.refs.users_default.getValue()),
             users: power_levels.users,
             events: power_levels.events,
         };
@@ -116,6 +149,112 @@ module.exports = React.createClass({
         return new_power_levels;
     },
 
+    getCanonicalAlias: function() {
+        return this.refs.canonical_alias ? this.refs.canonical_alias.value : "";        
+    },
+
+    getAliasOperations: function() {
+        if (!this.state.aliases_changed) return undefined;
+
+        // work out the delta from room state to UI state
+        var ops = [];
+
+        // calculate original ("old") aliases
+        var oldAliases = {};
+        var aliases = this.state.aliases;
+        var alias_events = this.props.room.currentState.getStateEvents('m.room.aliases');
+        for (var i = 0; i < alias_events.length; i++) {
+            var domain = alias_events[i].getStateKey();
+            oldAliases[domain] = alias_events[i].getContent().aliases.slice(); // shallow copy
+        }
+
+        // FIXME: this whole delta-based set comparison function used for domains, aliases & tags
+        // should be factored out asap rather than duplicated like this.
+
+        // work out whether any domains have entirely disappeared or appeared
+        var domainDelta = {}
+        Object.keys(oldAliases).forEach(function(domain) {
+            domainDelta[domain] = domainDelta[domain] || 0;
+            domainDelta[domain]--;
+        });
+        Object.keys(aliases).forEach(function(domain) {
+            domainDelta[domain] = domainDelta[domain] || 0;
+            domainDelta[domain]++;
+        });
+
+        Object.keys(domainDelta).forEach(function(domain) {
+            switch (domainDelta[domain]) {
+                case 1: // entirely new domain
+                    aliases[domain].forEach(function(alias) {
+                        ops.push({ type: "put", alias : alias });
+                    });
+                    break;
+                case -1: // entirely removed domain
+                    oldAliases[domain].forEach(function(alias) {
+                        ops.push({ type: "delete", alias : alias });
+                    });
+                    break;
+                case 0: // mix of aliases in this domain.
+                    // compare old & new aliases for this domain
+                    var delta = {};
+                    oldAliases[domain].forEach(function(item) {
+                        delta[item] = delta[item] || 0;
+                        delta[item]--;
+                    });
+                    aliases[domain].forEach(function(item) {
+                        delta[item] = delta[item] || 0;
+                        delta[item]++;
+                    });
+
+                    Object.keys(delta).forEach(function(alias) {
+                        if (delta[alias] == 1) {
+                            ops.push({ type: "put", alias: alias });
+                        } else if (delta[alias] == -1) {
+                            ops.push({ type: "delete", alias: alias });
+                        } else {
+                            console.error("Calculated alias delta of " + delta[alias] +
+                                          " - this should never happen!");                            
+                        }
+                    });
+                    break;
+                default:
+                    console.error("Calculated domain delta of " + domainDelta[domain] +
+                                  " - this should never happen!");
+                    break;
+            }
+        });
+
+        return ops;
+    },
+
+    getTagOperations: function() {
+        if (!this.state.tags_changed) return undefined;
+
+        var ops = [];
+
+        var delta = {};
+        Object.keys(this.props.room.tags).forEach(function(oldTag) {
+            delta[oldTag] = delta[oldTag] || 0;
+            delta[oldTag]--;
+        });
+        Object.keys(this.state.tags).forEach(function(newTag) {
+            delta[newTag] = delta[newTag] || 0;
+            delta[newTag]++;
+        });
+        Object.keys(delta).forEach(function(tag) {
+            if (delta[tag] == 1) {
+                ops.push({ type: "put", tag: tag });
+            } else if (delta[tag] == -1) {
+                ops.push({ type: "delete", tag: tag });
+            } else {
+                console.error("Calculated tag delta of " + delta[tag] +
+                              " - this should never happen!");
+            }
+        });
+
+        return ops;
+    },
+
     onPowerLevelsChanged: function() {
         this.setState({
             power_levels_changed: true
@@ -141,11 +280,100 @@ module.exports = React.createClass({
         });
     },
 
-    render: function() {
-        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+    onAliasChanged: function(domain, index, alias) {
+        if (alias === "") return; // hit the delete button to delete please
+        var oldAlias;
+        if (this.isAliasValid(alias)) {
+            oldAlias = this.state.aliases[domain][index];
+            this.state.aliases[domain][index] = alias;
+            this.setState({ aliases_changed : true });
+        }
+        else {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");            
+            Modal.createDialog(ErrorDialog, {
+                title: "Invalid alias format", 
+                description: "'" + alias + "' is not a valid format for an alias",
+            });
+        }        
+    },
 
-        var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
-        if (topic) topic = topic.getContent().topic;
+    onAliasDeleted: function(domain, index) {
+        // It's a bit naughty to directly manipulate this.state, and React would
+        // normally whine at you, but it can't see us doing the splice.  Given we
+        // promptly setState anyway, it's just about acceptable.  The alternative
+        // would be to arbitrarily deepcopy to a temp variable and then setState
+        // that, but why bother when we can cut this corner.
+        var alias = this.state.aliases[domain].splice(index, 1);
+        this.setState({ 
+            aliases: this.state.aliases
+        });
+
+        this.setState({ aliases_changed : true });
+    },
+
+    onAliasAdded: function(alias) {
+        if (alias === "") return; // ignore attempts to create blank aliases
+        if (alias === undefined) {
+            alias = this.refs.add_alias ? this.refs.add_alias.getValue() : undefined;
+            if (alias === undefined || alias === "") return;
+        }
+
+        if (this.isAliasValid(alias)) {
+            var domain = alias.replace(/^.*?:/, '');
+            // XXX: do we need to deep copy aliases before editing it?
+            this.state.aliases[domain] = this.state.aliases[domain] || [];
+            this.state.aliases[domain].push(alias);
+            this.setState({ 
+                aliases: this.state.aliases
+            });
+
+            // reset the add field
+            this.refs.add_alias.setValue('');
+
+            this.setState({ aliases_changed : true });
+        }
+        else {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");            
+            Modal.createDialog(ErrorDialog, {
+                title: "Invalid alias format", 
+                description: "'" + alias + "' is not a valid format for an alias",
+            });
+        }
+    },
+
+    isAliasValid: function(alias) {
+        // XXX: FIXME SPEC-1
+        return (alias.match(/^#([^\/:,]+?):(.+)$/) && encodeURI(alias) === alias);
+    },
+
+    onTagChange: function(tagName, event) {
+        if (event.target.checked) {
+            if (tagName === 'm.favourite') {
+                delete this.state.tags['m.lowpriority'];
+            }
+            else if (tagName === 'm.lowpriority') {
+                delete this.state.tags['m.favourite'];
+            }
+
+            this.state.tags[tagName] = this.state.tags[tagName] || {};
+        }
+        else {
+            delete this.state.tags[tagName];
+        }
+
+        // XXX: hacky say to deep-edit state
+        this.setState({
+            tags: this.state.tags,
+            tags_changed: true
+        });
+    },
+
+    render: function() {
+        // TODO: go through greying out things you don't have permission to change
+        // (or turning them into informative stuff)
+
+        var EditableText = sdk.getComponent('elements.EditableText');
+        var PowerSelector = sdk.getComponent('elements.PowerSelector');
 
         var join_rule = this.props.room.currentState.getStateEvents('m.room.join_rules', '');
         if (join_rule) join_rule = join_rule.getContent().join_rule;
@@ -159,7 +387,9 @@ module.exports = React.createClass({
             guest_access = guest_access.getContent().guest_access;
         }
 
-        var events_levels = power_levels.events || {};
+        var events_levels = (power_levels ? power_levels.events : {}) || {};
+
+        var user_id = MatrixClientPeg.get().credentials.userId;
 
         if (power_levels) {
             power_levels = power_levels.getContent();
@@ -178,8 +408,6 @@ module.exports = React.createClass({
 
             var user_levels = power_levels.users || {};
 
-            var user_id = MatrixClientPeg.get().credentials.userId;
-
             var current_user_level = user_levels[user_id];
             if (current_user_level == undefined) current_user_level = default_user_level;
 
@@ -208,14 +436,127 @@ module.exports = React.createClass({
             var can_change_levels = false;
         }
 
-        var room_avatar_level = parseInt(power_levels.state_default || 0);
-        if (events_levels['m.room.avatar'] !== undefined) {
-            room_avatar_level = events_levels['m.room.avatar'];
+        var state_default = (parseInt(power_levels ? power_levels.state_default : 0) || 0);
+
+        var room_aliases_level = state_default;
+        if (events_levels['m.room.aliases'] !== undefined) {
+            room_avatar_level = events_levels['m.room.aliases'];
         }
-        var can_set_room_avatar = current_user_level >= room_avatar_level;
+        var can_set_room_aliases = current_user_level >= room_aliases_level;
+
+        var canonical_alias_level = state_default;
+        if (events_levels['m.room.canonical_alias'] !== undefined) {
+            room_avatar_level = events_levels['m.room.canonical_alias'];
+        }
+        var can_set_canonical_alias = current_user_level >= canonical_alias_level;
+
+        var tag_level = state_default;
+        if (events_levels['m.tag'] !== undefined) {
+            tag_level = events_levels['m.tag'];
+        }
+        var can_set_tag = current_user_level >= tag_level;
 
         var self = this;
 
+        var canonical_alias_event = this.props.room.currentState.getStateEvents('m.room.canonical_alias', '');
+        var canonical_alias = canonical_alias_event ? canonical_alias_event.getContent().alias : "";
+        var domain = MatrixClientPeg.get().getDomain();
+
+        var remote_domains = Object.keys(this.state.aliases).filter(function(alias) { return alias !== domain });
+
+        var remote_aliases_section;
+        if (remote_domains.length) {
+            remote_aliases_section = 
+                <div>
+                    <div className="mx_RoomSettings_aliasLabel">
+                        This room can be found elsewhere as:
+                    </div>
+                    <div className="mx_RoomSettings_aliasesTable">
+                        { remote_domains.map(function(state_key, i) {
+                            self.state.aliases[state_key].map(function(alias, j) {
+                                return (
+                                    <div className="mx_RoomSettings_aliasesTableRow" key={ i + "_" + j }>
+                                        <EditableText
+                                             className="mx_RoomSettings_alias mx_RoomSettings_editable"
+                                             blurToCancel={ false }
+                                             editable={ false }
+                                             initialValue={ alias } />
+                                        <div className="mx_RoomSettings_deleteAlias">
+                                        </div>
+                                    </div>
+                                );
+                            });
+                        })}
+                    </div>
+                </div>
+        }
+
+        var canonical_alias_section;
+        if (can_set_canonical_alias) {
+            canonical_alias_section = 
+                <select ref="canonical_alias" defaultValue={ canonical_alias }>
+                    { Object.keys(self.state.aliases).map(function(stateKey, i) {
+                        return self.state.aliases[stateKey].map(function(alias, j) {
+                            return <option value={ alias } key={ i + "_" + j }>{ alias }</option>
+                        });
+                    })}
+                    <option value="" key="unset">not set</option>
+                </select>
+        }
+        else {
+            canonical_alias_section = <b>{ canonical_alias || "not set" }</b>;
+        }
+
+        var aliases_section =
+            <div>
+                <h3>Directory</h3>
+                <div className="mx_RoomSettings_aliasLabel">
+                    { this.state.aliases[domain].length
+                      ? "This room can be found on " + domain + " as:"
+                      : "This room is not findable on " + domain }
+                </div>
+                <div className="mx_RoomSettings_aliasesTable">
+                    { this.state.aliases[domain].map(function(alias, i) {
+                        var deleteButton;
+                        if (can_set_room_aliases) {
+                            deleteButton = <img src="img/cancel-small.svg" width="14" height="14" alt="Delete" onClick={ self.onAliasDeleted.bind(self, domain, i) }/>;
+                        }
+                        return (
+                            <div className="mx_RoomSettings_aliasesTableRow" key={ i }>
+                                <EditableText
+                                    className="mx_RoomSettings_alias mx_RoomSettings_editable"
+                                    placeholderClassName="mx_RoomSettings_aliasPlaceholder"
+                                    placeholder={ "New alias (e.g. #foo:" + domain + ")" }
+                                    blurToCancel={ false }
+                                    onValueChanged={ self.onAliasChanged.bind(self, domain, i) }
+                                    editable={ can_set_room_aliases }
+                                    initialValue={ alias } />
+                                <div className="mx_RoomSettings_deleteAlias">
+                                     { deleteButton }
+                                </div>
+                            </div>
+                        );
+                    })}
+
+                    <div className="mx_RoomSettings_aliasesTableRow" key="new">
+                        <EditableText
+                            ref="add_alias"
+                            className="mx_RoomSettings_alias mx_RoomSettings_editable"
+                            placeholderClassName="mx_RoomSettings_aliasPlaceholder"
+                            placeholder={ "New alias (e.g. #foo:" + domain + ")" }
+                            blurToCancel={ false }
+                            onValueChanged={ self.onAliasAdded } />
+                        <div className="mx_RoomSettings_addAlias">
+                             <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={ self.onAliasAdded.bind(self, undefined) }/>
+                        </div>                        
+                    </div>                      
+                </div>
+
+                { remote_aliases_section }
+
+                <div className="mx_RoomSettings_aliasLabel">The official way to refer to this room is: { canonical_alias_section }</div>
+            </div>;
+
         var room_colors_section =
             <div>
                 <h3>Room Colour</h3>
@@ -242,35 +583,30 @@ module.exports = React.createClass({
                 </div>
             </div>;
 
-        var change_avatar;
-        if (can_set_room_avatar) {
-            change_avatar =
+        var user_levels_section;
+        if (user_levels.length) {
+            user_levels_section =
                 <div>
-                    <h3>Room Icon</h3>
-                    <ChangeAvatar room={this.props.room} />
-                </div>;
-        }
-
-        var banned = this.props.room.getMembersWithMembership("ban");
-
-        var events_levels_section;
-        if (events_levels.length) {
-            events_levels_section = 
-                <div>
-                    <h3>Event levels</h3>
-                    <div className="mx_RoomSettings_eventLevels mx_RoomSettings_settings">
-                        {Object.keys(events_levels).map(function(event_type, i) {
+                    <div>
+                        Users with specific roles are:
+                    </div>
+                    <div>
+                        {Object.keys(user_levels).map(function(user, i) {
                             return (
-                                <div key={event_type}>
-                                    <label htmlFor={"mx_RoomSettings_event_"+i}>{event_type}</label>
-                                    <input type="text" defaultValue={events_levels[event_type]} size="3" id={"mx_RoomSettings_event_"+i} disabled/>
+                                <div className="mx_RoomSettings_userLevel" key={user}>
+                                    { user } is a
+                                    <PowerSelector value={ user_levels[user] } disabled={true}/>
                                 </div>
                             );
                         })}
                     </div>
                 </div>;
         }
+        else {
+            user_levels_section = <div>No users have specific privileges in this room.</div>
+        }
 
+        var banned = this.props.room.getMembersWithMembership("ban");
         var banned_users_section;
         if (banned.length) {
             banned_users_section =
@@ -288,79 +624,115 @@ module.exports = React.createClass({
                 </div>;
         }
 
+        var create_event = this.props.room.currentState.getStateEvents('m.room.create', '');
+        var unfederatable_section;
+        if (create_event.getContent()["m.federate"] === false) {
+             unfederatable_section = <div className="mx_RoomSettings_powerLevel">Ths room is not accessible by remote Matrix servers.</div>
+        }
+
+        // TODO: support editing custom events_levels
+        // TODO: support editing custom user_levels
+
+        var tags = [
+            { name: "m.favourite", label: "Favourite", ref: "tag_favourite" },
+            { name: "m.lowpriority", label: "Low priority", ref: "tag_lowpriority" },
+        ];
+
+        Object.keys(this.state.tags).sort().forEach(function(tagName) {
+            if (tagName !== 'm.favourite' && tagName !== 'm.lowpriority') {
+                tags.push({ name: tagName, label: tagName });
+            }
+        });
+
+        var tags_section = 
+            <div className="mx_RoomSettings_tags">
+                This room is tagged as
+                { can_set_tag ?
+                    tags.map(function(tag, i) {
+                        return (<label key={ i }>
+                                    <input type="checkbox"
+                                           ref={ tag.ref }
+                                           checked={ tag.name in self.state.tags }
+                                           onChange={ self.onTagChange.bind(self, tag.name) }/>
+                                    { tag.label }
+                                </label>);
+                    }) : tags.map(function(tag) { return tag.label; }).join(", ")
+                }
+            </div>
+
         return (
             <div className="mx_RoomSettings">
-                <textarea className="mx_RoomSettings_description" placeholder="Topic" defaultValue={topic} ref="topic"/> <br/>
                 <label><input type="checkbox" ref="is_private" defaultChecked={join_rule != "public"}/> Make this room private</label> <br/>
                 <label><input type="checkbox" ref="share_history" defaultChecked={history_visibility == "shared"}/> Share message history with new users</label> <br/>
-                <label>
-                    <input type="checkbox" ref="guests_read" defaultChecked={history_visibility === "world_readable"}/>
-                    Allow guests to read messages in this room
-                </label> <br/>
-                <label>
-                    <input type="checkbox" ref="guests_join" defaultChecked={guest_access === "can_join"}/>
-                    Allow guests to join this room
-                </label> <br/>
+                <label><input type="checkbox" ref="guests_read" defaultChecked={history_visibility === "world_readable"}/> Allow guests to read messages in this room</label> <br/>
+                <label><input type="checkbox" ref="guests_join" defaultChecked={guest_access === "can_join"}/> Allow guests to join this room</label> <br/>
                 <label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label>
 
+                { tags_section }
+
                 { room_colors_section }
 
+                { aliases_section }
 
-                <h3>Power levels</h3>
+                <h3>Permissions</h3>
                 <div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
-                    <div>
-                        <label htmlFor="mx_RoomSettings_ban_level">Ban level</label>
-                        <input type="text" defaultValue={ban_level} size="3" ref="ban" id="mx_RoomSettings_ban_level"
-                            disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">The default role for new room members is </span>
+                        <PowerSelector ref="users_default" value={default_user_level} disabled={!can_change_levels || current_user_level < default_user_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                    <div>
-                        <label htmlFor="mx_RoomSettings_kick_level">Kick level</label>
-                        <input type="text" defaultValue={kick_level} size="3" ref="kick" id="mx_RoomSettings_kick_level"
-                            disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">To send messages, you must be a </span>
+                        <PowerSelector ref="events_default" value={send_level} disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                    <div>
-                        <label htmlFor="mx_RoomSettings_redact_level">Redact level</label>
-                        <input type="text" defaultValue={redact_level} size="3" ref="redact" id="mx_RoomSettings_redact_level"
-                            disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">To invite users into the room, you must be a </span>
+                        <PowerSelector ref="invite" value={invite_level} disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                    <div>
-                        <label htmlFor="mx_RoomSettings_invite_level">Invite level</label>
-                        <input type="text" defaultValue={invite_level} size="3" ref="invite" id="mx_RoomSettings_invite_level"
-                            disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">To configure the room, you must be a </span>
+                        <PowerSelector ref="state_default" value={state_level} disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                    <div>
-                        <label htmlFor="mx_RoomSettings_event_level">Send event level</label>
-                        <input type="text" defaultValue={send_level} size="3" ref="events_default" id="mx_RoomSettings_event_level"
-                            disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">To kick users, you must be a </span>
+                        <PowerSelector ref="kick" value={kick_level} disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                    <div>
-                        <label htmlFor="mx_RoomSettings_state_level">Set state level</label>
-                        <input type="text" defaultValue={state_level} size="3" ref="state_default" id="mx_RoomSettings_state_level"
-                            disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">To ban users, you must be a </span>
+                        <PowerSelector ref="ban" value={ban_level} disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                    <div>
-                        <label htmlFor="mx_RoomSettings_user_level">Default user level</label>
-                        <input type="text" defaultValue={default_user_level} size="3" ref="users_default"
-                            id="mx_RoomSettings_user_level" disabled={!can_change_levels || current_user_level < default_user_level}
-                            onChange={this.onPowerLevelsChanged}/>
+                    <div className="mx_RoomSettings_powerLevel">
+                        <span className="mx_RoomSettings_powerLevelKey">To redact messages, you must be a </span>
+                        <PowerSelector ref="redact" value={redact_level} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
-                </div>
 
-                <h3>User levels</h3>
-                <div className="mx_RoomSettings_userLevels mx_RoomSettings_settings">
-                    {Object.keys(user_levels).map(function(user, i) {
+                    {Object.keys(events_levels).map(function(event_type, i) {
                         return (
-                            <div key={user}>
-                                <label htmlFor={"mx_RoomSettings_user_"+i}>{user}</label>
-                                <input type="text" defaultValue={user_levels[user]} size="3" id={"mx_RoomSettings_user_"+i} disabled/>
+                            <div className="mx_RoomSettings_powerLevel" key={event_type}>
+                                <span className="mx_RoomSettings_powerLevelKey">To send events of type <code>{ event_type }</code>, you must be a </span>
+                                <PowerSelector value={ events_levels[event_type] } disabled={true} onChange={self.onPowerLevelsChanged}/>
                             </div>
                         );
                     })}
+
+                { unfederatable_section }                    
+                </div>
+
+                <h3>Users</h3>
+                <div className="mx_RoomSettings_userLevels mx_RoomSettings_settings">
+                    <div>
+                        Your role in this room is currently <b><PowerSelector room={ this.props.room } value={current_user_level} disabled={true}/></b>.
+                    </div>
+
+                    { user_levels_section }
                 </div>
 
-                { events_levels_section }
                 { banned_users_section }
-                { change_avatar }
+
+                <h3>Advanced</h3>
+                <div className="mx_RoomSettings_settings">
+                    This room's internal ID is <code>{ this.props.room.roomId }</code>
+                </div>
+
             </div>
         );
     }
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 979b4b3c1b..7bd3d7754b 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -25,6 +25,8 @@ module.exports = React.createClass({
         room: React.PropTypes.object,
         // if false, you need to call changeAvatar.onFileSelected yourself.
         showUploadSection: React.PropTypes.bool,
+        width: React.PropTypes.number,
+        height: React.PropTypes.number,
         className: React.PropTypes.string
     },
 
@@ -37,7 +39,9 @@ module.exports = React.createClass({
     getDefaultProps: function() {
         return {
             showUploadSection: true,
-            className: "mx_Dialog_content" // FIXME - shouldn't be this by default
+            className: "",
+            width: 80,
+            height: 80,
         };
     },
 
@@ -111,13 +115,14 @@ module.exports = React.createClass({
         // Having just set an avatar we just display that since it will take a little
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
-            avatarImg = <RoomAvatar room={this.props.room} width={240} height={240} resizeMethod='crop' />;
+            avatarImg = <RoomAvatar room={this.props.room} width={ this.props.width } height={ this.props.height } resizeMethod='crop' />;
         } else {
             var style = {
-                maxWidth: 240,
-                maxHeight: 240,
+                width: this.props.width,
+                height: this.props.height,
                 objectFit: 'cover',
             };
+            // FIXME: surely we should be using MemberAvatar or UserAvatar or something here...
             avatarImg = <img className="mx_RoomAvatar" src={this.state.avatarUrl} style={style} />;
         }
 
diff --git a/src/components/views/settings/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js
index 8b31fbf1e3..ed5eb3fa42 100644
--- a/src/components/views/settings/ChangeDisplayName.js
+++ b/src/components/views/settings/ChangeDisplayName.js
@@ -99,7 +99,9 @@ module.exports = React.createClass({
             var EditableText = sdk.getComponent('elements.EditableText');
             return (
                 <EditableText ref="displayname_edit" initialValue={this.state.displayName}
-                    label="Click to set display name."
+                    className="mx_EditableText"
+                    placeholderClassName="mx_EditableText_placeholder"
+                    placeholder="No display name"
                     onValueChanged={this.onValueChanged} />
             );
         }