diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 1f409da81e..4f97e1f82f 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1189,7 +1189,11 @@ module.exports = React.createClass({
         // a maxHeight on the underlying remote video tag.
 
         // header + footer + status + give us at least 100px of scrollback at all times.
-        var auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100);
+        var auxPanelMaxHeight = window.innerHeight -
+                (83 + // height of RoomHeader
+                 36 + // height of the status area
+                 72 + // minimum height of the message compmoser
+                 100); // 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
@@ -1198,16 +1202,6 @@ module.exports = React.createClass({
         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
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 0e69e24ede..41b1b364e2 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -90,6 +90,32 @@ module.exports = React.createClass({
         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.state.name;
     },
@@ -100,7 +126,8 @@ module.exports = React.createClass({
 
     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;
@@ -184,9 +211,26 @@ module.exports = React.createClass({
 
             var roomAvatar = null;
             if (this.props.room) {
-                roomAvatar = (
-