diff --git a/src/VectorConferenceHandler.js b/src/VectorConferenceHandler.js
index 7628e0f5e1..aa88e77fac 100644
--- a/src/VectorConferenceHandler.js
+++ b/src/VectorConferenceHandler.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/component-index.js b/src/component-index.js
index e6ff997e5a..3d814035e8 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,9 +33,9 @@ module.exports.components['structures.ViewSource'] = require('./components/struc
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar');
-module.exports.components['views.login.CustomServerDialog'] = require('./components/views/login/VectorCustomServerDialog');
-module.exports.components['views.login.LoginFooter'] = require('./components/views/login/VectorLoginFooter');
-module.exports.components['views.login.LoginHeader'] = require('./components/views/login/VectorLoginHeader');
+module.exports.components['views.login.VectorCustomServerDialog'] = require('./components/views/login/VectorCustomServerDialog');
+module.exports.components['views.login.VectorLoginFooter'] = require('./components/views/login/VectorLoginFooter');
+module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader');
 module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator');
 module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
 module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile');
@@ -45,3 +45,4 @@ module.exports.components['views.rooms.RoomDNDView'] = require('./components/vie
 module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
 module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');
 module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar');
+module.exports.components['views.settings.Notifications'] = require('./components/views/settings/Notifications');
diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index f942efd56b..a4d89fcfed 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -50,9 +50,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.png" label="Create new room" onClick={ this.onCreateRoomClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.png" label="Directory" onClick={ this.onRoomDirectoryClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.png" label="Settings" onClick={ this.onSettingsClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
                 </div>
             </div>
         );
diff --git a/src/components/structures/CompatibilityPage.js b/src/components/structures/CompatibilityPage.js
index 129ed512bf..6f2f93e6a0 100644
--- a/src/components/structures/CompatibilityPage.js
+++ b/src/components/structures/CompatibilityPage.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 1bc08cbed6..c80c481868 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index f4f0a8f332..c12f53f4c7 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -100,6 +100,7 @@ module.exports = React.createClass({
 
     render: function() {
         var MemberList = sdk.getComponent('rooms.MemberList');
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var buttonGroup;
         var panel;
 
@@ -126,13 +127,13 @@ module.exports = React.createClass({
         if (this.props.roomId) {
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
-                        <div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
-                            <img src="img/members.svg" width="17" height="22" title="Members" alt="Members"/>
+                        <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
+                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                             { membersBadge }
                             { membersHighlight }
                         </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
-                            <img src="img/files.svg" width="17" height="22" title="Files" alt="Files"/>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
+                            <TintableSvg src="img/files.svg" width="17" height="22"/>
                             { filesHighlight }
                         </div>
                     </div>;
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index c1a29779ca..d528145ea2 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -56,17 +56,28 @@ module.exports = React.createClass({
         });
     },
 
-    joinRoom: function(roomId) {        
+    joinRoom: function(roomId, shouldPeek) {
         var self = this;
         self.setState({ loading: true });
-        // XXX: check that JS SDK suppresses duplicate attempts to join the same room
-        MatrixClientPeg.get().joinRoom(roomId).done(function() {
+
+        var joinOrPeekPromise;
+
+        if (shouldPeek) {
+            joinOrPeekPromise = MatrixClientPeg.get().peekInRoom(roomId);
+        }
+        else {
+            joinOrPeekPromise = MatrixClientPeg.get().joinRoom(roomId);
+        }
+
+        joinOrPeekPromise.done(function() {
             dis.dispatch({
                 action: 'view_room',
+                auto_peek: false, // don't peek as we've already peeked here (if it was needed)
                 room_id: roomId
             });
         }, function(err) {
             console.error("Failed to join room: %s", JSON.stringify(err));
+            console.error(err);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
                 title: "Failed to join room",
@@ -87,18 +98,46 @@ module.exports = React.createClass({
         });
         var rows = [];
         var self = this;
+        var guestRead, guestJoin, perms;
         for (var i = 0; i < rooms.length; i++) {
             var name = rooms[i].name || rooms[i].aliases[0];
+            guestRead = null;
+            guestJoin = null;
+            var shouldPeek = false;
+
+            if (rooms[i].world_readable) {
+                guestRead = (
+                    <span>[world readable]</span>
+                );
+                    // <img src="img/members.svg"
+                    //     alt="World Readable" title="World Readable" width="12" height="12" />
+                if (rooms[i].world_readable) {
+                    shouldPeek = true;
+                }
+            }
+            if (rooms[i].guest_can_join) {
+                guestJoin = (
+                    <span>[guests allowed]</span>
+                );
+                    // <img src="img/leave.svg"
+                    //     alt="Guests can join" title="Guests can join" width="12" height="12" />
+            }
+            
+            perms = null;
+            if (guestRead || guestJoin) {
+                perms = <div>{guestRead} {guestJoin}</div>;
+            }
+
             // <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
             rows.unshift(
                 <tbody key={ rooms[i].room_id }>
-                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id)}>
+                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id, shouldPeek)}>
                         <td className="mx_RoomDirectory_name">{ name }</td>
                         <td>{ rooms[i].aliases[0] }</td>
                         <td>{ rooms[i].num_joined_members }</td>
                     </tr>
-                    <tr>
-                        <td className="mx_RoomDirectory_topic" colSpan="3">{ rooms[i].topic }</td>
+                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id, shouldPeek)}>
+                        <td className="mx_RoomDirectory_topic" colSpan="3">{perms} { rooms[i].topic }</td>
                     </tr>
                 </tbody>
             );
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index b9812a7746..c49a43db9c 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -255,17 +255,17 @@ var RoomSubList = React.createClass({
                     unread={ Unread.doesRoomHaveUnreadMessages(room) }
                     highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' }
                     isInvite={ self.props.label === 'Invites' }
-                    incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null }
-                     />
+                    incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } />
             );
         });
     },
 
     _getHeaderJsx: function() {
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");        
         return (
             <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <img className="mx_RoomSubList_chevron"
+                <TintableSvg className="mx_RoomSubList_chevron"
                     src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
                     width="10" height="10" />
             </h2>
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 371223d435..179f755328 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index 741524be86..ef00b387e9 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -118,6 +118,7 @@ module.exports = React.createClass({
                     <img src={this.props.src} style={style}/>
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
+                            <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">
diff --git a/src/components/views/elements/Spinner.js b/src/components/views/elements/Spinner.js
index 6dfd0c41aa..2b620f12c5 100644
--- a/src/components/views/elements/Spinner.js
+++ b/src/components/views/elements/Spinner.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js
index 7b953c4a84..b176ff2ea2 100644
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/src/components/views/globals/MatrixToolbar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/VectorCustomServerDialog.js b/src/components/views/login/VectorCustomServerDialog.js
index 22c188cc7a..b3e99a97d7 100644
--- a/src/components/views/login/VectorCustomServerDialog.js
+++ b/src/components/views/login/VectorCustomServerDialog.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,7 +25,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_ErrorDialog">
-                <div className="mx_ErrorDialogTitle">
+                <div className="mx_Dialog_title">
                     Custom Server Options
                 </div>
                 <div className="mx_Dialog_content">
diff --git a/src/components/views/login/VectorLoginFooter.js b/src/components/views/login/VectorLoginFooter.js
index 2b2f1ae827..a5c6bbf8dd 100644
--- a/src/components/views/login/VectorLoginFooter.js
+++ b/src/components/views/login/VectorLoginFooter.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js
index 61b04267fc..0a3a8c5107 100644
--- a/src/components/views/login/VectorLoginHeader.js
+++ b/src/components/views/login/VectorLoginHeader.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 061ce66daf..89cc44db89 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index b4b7546e50..609b5f4fce 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js
index ef0173d975..9455cacb4b 100644
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/BottomLeftMenuTile.js b/src/components/views/rooms/BottomLeftMenuTile.js
index 2535490fea..0db6bd92eb 100644
--- a/src/components/views/rooms/BottomLeftMenuTile.js
+++ b/src/components/views/rooms/BottomLeftMenuTile.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -48,7 +48,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
                 <div className="mx_RoomTile_avatar">
-                    <img src={ this.props.img } width="24" height="24"/>
+                    <img src={ this.props.img } width="26" height="26"/>
                 </div>
                 { label }
             </div>
diff --git a/src/components/views/rooms/MessageContextMenu.js b/src/components/views/rooms/MessageContextMenu.js
index 4950cd8825..a4631dfa6b 100644
--- a/src/components/views/rooms/MessageContextMenu.js
+++ b/src/components/views/rooms/MessageContextMenu.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomDNDView.js b/src/components/views/rooms/RoomDNDView.js
index 9b01629df2..e5c8fb334b 100644
--- a/src/components/views/rooms/RoomDNDView.js
+++ b/src/components/views/rooms/RoomDNDView.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomDropTarget.js b/src/components/views/rooms/RoomDropTarget.js
index 00d0546c90..789ba8fa85 100644
--- a/src/components/views/rooms/RoomDropTarget.js
+++ b/src/components/views/rooms/RoomDropTarget.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js
index 51b13526c5..e3cbc6ec0c 100644
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js
index e66f123609..955b4c51b6 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
new file mode 100644
index 0000000000..8ab59de8e7
--- /dev/null
+++ b/src/components/views/settings/Notifications.js
@@ -0,0 +1,1020 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+var React = require('react');
+var q = require("q");
+var sdk = require('matrix-react-sdk');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
+var Modal = require('matrix-react-sdk/lib/Modal');
+
+/**
+ * Enum for state of a push rule as defined by the Vector UI.
+ * @readonly
+ * @enum {string}
+ */
+var PushRuleVectorState = {
+    /** The user will receive push notification for this rule */
+    ON: "on",
+    /** The user will receive push notification for this rule with sound and
+        highlight if this is legitimate */
+    LOUD: "loud",
+    /** The push rule is disabled */
+    OFF: "off"
+};
+
+/**
+ * The descriptions of rules managed by the Vector UI.
+ * Each rule is described so that if the server does not have it in its default 
+ * rules or if the user wants to use actions ('PushRuleVectorState') that are 
+ * different from the hs one, the code will create a new rule that will override
+ * the hs one.
+ */
+var VectorPushRulesDefinitions = {
+
+     // Messages containing user's display name 
+     // (skip contains_user_name which is too geeky)
+     "im.vector.rule.contains_display_name": {
+        hsDefaultRuleId: ".m.rule.contains_display_name",
+        description: "Messages containing my name",
+        conditions: [{
+            "kind": "contains_display_name"
+        }],
+        hsDefaultRuleVectorState: PushRuleVectorState.LOUD,
+        vectorStateToActions: {
+            on: [
+                "notify"
+            ],
+            loud: [
+                "notify",
+                {
+                    "set_tweak": "sound",
+                    "value": "default"
+                },
+                {
+                    "set_tweak":"highlight"
+                }
+            ]
+        }
+    },
+
+    // Messages just sent to the user in a 1:1 room
+    "im.vector.rule.room_one_to_one": {
+        hsDefaultRuleId: ".m.rule.room_one_to_one",
+        description: "Messages in one-to-one chats",
+        conditions: [{
+            "is": "2",
+            "kind": "room_member_count"
+        }],
+        hsDefaultRuleVectorState: PushRuleVectorState.LOUD,
+        vectorStateToActions: {
+            on: [
+                "notify"
+            ],
+            loud: [
+                "notify",
+                {
+                    "set_tweak": "sound",
+                    "value": "default"
+                }
+            ]
+        }
+    },
+
+    // Messages just sent to a group chat room
+    "im.vector.rule.room_group": {
+        description: "Messages in group chats",
+        conditions: [{
+            "is": ">2",
+            "kind": "room_member_count"
+        }],
+        hsDefaultRuleId: undefined,     // Matrix does not define a default hs push rule for group
+        hsDefaultRuleVectorState: PushRuleVectorState.on,
+        vectorStateToActions: {
+            on: [
+                "notify"
+            ],
+            loud: [
+                "notify",
+                {
+                    "set_tweak": "sound",
+                    "value": "default"
+                }
+            ]
+        }
+    },
+
+    // Invitation for the user
+    "im.vector.rule.invite_for_me": {
+        hsDefaultRuleId: ".m.rule.invite_for_me",
+        description: "When I'm invited to a room",
+        conditions: [
+            {
+                "key": "type",
+                "kind": "event_match",
+                "pattern": "m.room.member"
+            },
+            {
+                "key": "content.membership",
+                "kind": "event_match",
+                "pattern": "invite"
+            },
+            {
+                "key": "state_key",
+                "kind": "event_match",
+                "pattern": ""   // It is updated at runtime the user id
+            }
+        ],
+        hsDefaultRuleVectorState: PushRuleVectorState.LOUD,
+        vectorStateToActions: {
+            on: [
+                "notify"
+            ],
+            loud: [
+                "notify",
+                {
+                    "set_tweak": "sound",
+                    "value": "default"
+                }
+            ]
+        }
+    },
+
+    // When people join or leave a room
+    "im.vector.rule.member_event": {
+        hsDefaultRuleId: ".m.rule.member_event",
+        description: "When people join or leave a room",
+        conditions: [{
+            "pattern": "m.room.member",
+            "kind": "event_match",
+            "key": "type"
+        }],
+        hsDefaultRuleVectorState: PushRuleVectorState.ON,
+        vectorStateToActions: {
+            on: [
+                "notify"
+            ],
+            loud: [
+                "notify",
+                {
+                    "set_tweak": "sound",
+                    "value": "default"
+                }
+            ]
+        }
+    },
+
+    // Incoming call
+    "im.vector.rule.call": {
+        hsDefaultRuleId: ".m.rule.call",
+        description: "Call invitation",
+        conditions: [{
+            "pattern": "m.room.member",
+            "kind": "event_match",
+            "key": "type"
+        }],
+        hsDefaultRuleVectorState: PushRuleVectorState.LOUD,
+        vectorStateToActions: {
+            on: [
+                "notify"
+            ],
+            loud: [
+                "notify",
+                {
+                    "set_tweak": "sound",
+                    "value": "ring"
+                }
+            ]
+        }
+    },
+};
+
+module.exports = React.createClass({
+    displayName: 'Notififications',
+
+    phases: {
+        LOADING: "LOADING", // The component is loading or sending data to the hs
+        DISPLAY: "DISPLAY", // The component is ready and display data
+        ERROR: "ERROR"      // There was an error
+    },
+    
+    getInitialState: function() {
+        return {
+            phase: this.phases.LOADING,
+            masterPushRule: undefined,      // The master rule ('.m.rule.master')
+            vectorPushRules: [],            // HS default push rules displayed in Vector UI
+            vectorContentRules: {           // Keyword push rules displayed in Vector UI
+                vectorState: PushRuleVectorState.ON,
+                rules: []
+            },
+            externalPushRules: [],          // Push rules (except content rule) that have been defined outside Vector UI
+            externalContentRules: []        // Keyword push rules that have been defined outside Vector UI
+        };
+    },
+    
+    componentWillMount: function() {
+        // Finalise the vector definitions
+        VectorPushRulesDefinitions["im.vector.rule.invite_for_me"].conditions[2].pattern = MatrixClientPeg.get().credentials.userId;
+        
+        this._refreshFromServer();
+    },
+    
+    onEnableNotificationsChange: function(event) {
+        var self = this;
+        this.setState({
+            phase: this.phases.LOADING
+        });
+
+        MatrixClientPeg.get().setPushRuleEnabled('global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !event.target.checked).done(function() {
+           self._refreshFromServer();
+        });
+    },
+    
+    onEnableDesktopNotificationsChange: function(event) {
+        UserSettingsStore.setEnableNotifications(event.target.checked);
+    },
+    
+    onNotifStateButtonClicked: function(event) {
+        var vectorRuleId = event.target.className.split("-")[0];
+        var newPushRuleVectorState = event.target.className.split("-")[1];
+        
+        if ("_keywords" === vectorRuleId) {
+            this._setKeywordsPushRuleVectorState(newPushRuleVectorState)
+        }
+        else {
+            var rule = this.getRule(vectorRuleId);
+            if (rule) {
+                this._setPushRuleVectorState(rule, newPushRuleVectorState);
+            }
+        }
+    },
+    
+    onKeywordsClicked: function(event) {
+        var self = this;
+
+        // Compute the keywords list to display
+        var keywords = [];
+        for (var i in this.state.vectorContentRules.rules) {
+            var rule = this.state.vectorContentRules.rules[i];
+            keywords.push(rule.pattern);
+        }
+        if (keywords.length) {
+            // As keeping the order of per-word push rules hs side is a bit tricky to code,
+            // display the keywords in alphabetical order to the user
+            keywords.sort();
+
+            keywords = keywords.join(", ");
+        }
+        else {
+            keywords = "";
+        }
+
+        var TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+        Modal.createDialog(TextInputDialog, {
+            title: "Keywords",
+            description: "Enter keywords separated by a comma:",
+            value: keywords,
+            onFinished: function onFinished(should_leave, newValue) {
+
+                if (should_leave && newValue !== keywords) {
+                    var newKeywords = newValue.split(',');
+                    for (var i in newKeywords) {
+                        newKeywords[i] = newKeywords[i].trim();
+                    }
+
+                    // Remove duplicates and empty
+                    newKeywords = newKeywords.reduce(function(array, keyword){
+                        if (keyword !== "" && array.indexOf(keyword) < 0) {
+                            array.push(keyword);
+                        }
+                        return array;
+                    },[]);
+                    
+                    self._setKeywords(newKeywords);
+                }
+            }
+        });
+    },
+    
+    getRule: function(vectorRuleId) {
+        for (var i in this.state.vectorPushRules) {
+            var rule = this.state.vectorPushRules[i];
+            if (rule.vectorRuleId === vectorRuleId) {
+                return rule;
+            }
+        }
+    },
+    
+    _actionsFor: function(pushRuleVectorState) {
+        if (pushRuleVectorState === PushRuleVectorState.ON) {
+            return ['notify'];
+        }
+        else if (pushRuleVectorState === PushRuleVectorState.LOUD) {
+            return ['notify',
+                {'set_tweak': 'sound', 'value': 'default'},
+                {'set_tweak': 'highlight', 'value': 'true'}
+            ];;
+        }
+    },
+    
+    // Determine whether a content rule is in the PushRuleVectorState.ON category or in PushRuleVectorState.LOUD
+    // regardless of its enabled state. Returns undefined if it does not match these categories.
+    _contentRuleVectorStateKind: function(rule) {
+        var stateKind;
+ 
+        // Count tweaks to determine if it is a ON or LOUD rule
+        var tweaks = 0;
+        for (var j in rule.actions) {
+            var action = rule.actions[j];
+            if (action.set_tweak === 'sound' ||
+                (action.set_tweak === 'highlight' &&  action.value)) {
+                tweaks++;
+            }
+        }
+        switch (tweaks) {
+            case 0:
+                stateKind = PushRuleVectorState.ON;
+                break;
+            case 2:
+                stateKind = PushRuleVectorState.LOUD;
+                break;
+        }
+        return stateKind;
+    },
+    
+    _setPushRuleVectorState: function(rule, newPushRuleVectorState) {        
+        if (rule && rule.vectorState !== newPushRuleVectorState) {   
+
+            this.setState({
+                phase: this.phases.LOADING
+            });
+
+            var self = this;
+            var cli = MatrixClientPeg.get();
+            var deferreds = [];
+            var ruleDefinition = VectorPushRulesDefinitions[rule.vectorRuleId];
+
+            if (rule.rule) {
+                if (newPushRuleVectorState === PushRuleVectorState.OFF) {
+                    // Remove the vector rule if any
+                    if (!rule.isHSDefaultRule) {
+                        deferreds.push(cli.deletePushRule('global', rule.rule.kind, rule.rule.rule_id))
+                    }
+
+                    // And disable the hs default rule
+                    deferreds.push(cli.setPushRuleEnabled('global', 'underride', ruleDefinition.hsDefaultRuleId, false));
+                }
+                else {
+                    if (rule.isHSDefaultRule) {
+                        // If the new state corresponds to the hs default rule actions, enable it
+                        // Else create a new rule that will override it
+                        if (newPushRuleVectorState === ruleDefinition.hsDefaultRuleVectorState) {
+                            deferreds.push(cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, true));
+                        }
+                        else {
+                            deferreds.push(this._addOverridingVectorPushRule(rule.vectorRuleId, newPushRuleVectorState));
+                        }
+                    }
+                    else {
+                        // Change the actions of the overriding Vector rule
+                        deferreds.push(this._updatePushRuleActions(rule.rule, ruleDefinition.vectorStateToActions[newPushRuleVectorState]));
+                    } 
+                }
+            }
+            else {
+                // This is a Vector rule which does not exist yet server side
+                // Create it
+                deferreds.push(this._addOverridingVectorPushRule(rule.vectorRuleId, newPushRuleVectorState));
+            }
+            
+            q.all(deferreds).done(function() {
+                self._refreshFromServer();
+            }, function(error) {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Can't change settings",
+                    description: error.toString(),
+                    onFinished: self._refreshFromServer
+                });
+            });
+        }
+    },
+    
+    _setKeywordsPushRuleVectorState: function(newPushRuleVectorState) {
+        // Is there really a change?
+        if (this.state.vectorContentRules.vectorState === newPushRuleVectorState 
+            || this.state.vectorContentRules.rules.length === 0) {
+            return;
+        }
+        
+        var self = this;
+        var cli = MatrixClientPeg.get();
+
+        this.setState({
+            phase: this.phases.LOADING
+        });
+
+        // Update all rules in self.state.vectorContentRules
+        var deferreds = [];
+        for (var i in this.state.vectorContentRules.rules) {
+            var rule = this.state.vectorContentRules.rules[i];
+
+            var enabled, actions;
+            switch (newPushRuleVectorState) {
+                case PushRuleVectorState.ON:
+                    if (rule.actions.length !== 1) {
+                        actions = this._actionsFor(PushRuleVectorState.ON);
+                    }
+
+                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
+                        enabled = true;
+                    }
+                    break;
+
+                case PushRuleVectorState.LOUD:
+                    if (rule.actions.length !== 3) {
+                        actions = this._actionsFor(PushRuleVectorState.LOUD);
+                    }
+
+                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
+                        enabled = true;
+                    }
+                    break;
+
+                case PushRuleVectorState.OFF:
+                    enabled = false;
+                    break;
+            }
+
+            if (actions) {
+                // Note that the workaround in _updatePushRuleActions will automatically
+                // enable the rule
+                deferreds.push(this._updatePushRuleActions(rule, actions, enabled));
+            }
+            else if (enabled != undefined) {
+                deferreds.push(cli.setPushRuleEnabled('global', rule.kind, rule.rule_id, enabled));
+            }
+        }
+
+        q.all(deferreds).done(function(resps) {
+            self._refreshFromServer();
+        }, function(error) {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Can't update user notification settings",
+                description: error.toString(),
+                onFinished: self._refreshFromServer
+            });
+        });
+    },
+    
+    _setKeywords: function(newKeywords) {
+        this.setState({
+            phase: this.phases.LOADING
+        });
+
+        var self = this;
+        var cli = MatrixClientPeg.get();
+        var removeDeferreds = [];
+
+        // Remove per-word push rules of keywords that are no more in the list
+        var vectorContentRulesPatterns = [];
+        for (var i in self.state.vectorContentRules.rules) {
+            var rule = self.state.vectorContentRules.rules[i];
+
+            vectorContentRulesPatterns.push(rule.pattern);
+
+            if (newKeywords.indexOf(rule.pattern) < 0) {
+                removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
+            }
+        }
+
+        // If the keyword is part of `externalContentRules`, remove the rule
+        // before recreating it in the right Vector path
+        for (var i in self.state.externalContentRules) {
+            var rule = self.state.externalContentRules[i];
+
+            if (newKeywords.indexOf(rule.pattern) >= 0) {
+                removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
+            }
+        }
+
+        var onError = function(error) {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Can't update keywords",
+                description: error.toString(),
+                onFinished: self._refreshFromServer
+            });
+        }
+
+        // Then, add the new ones
+        q.all(removeDeferreds).done(function(resps) {
+            var deferreds = [];
+
+            var pushRuleVectorStateKind = self.state.vectorContentRules.vectorState;
+            if (pushRuleVectorStateKind === PushRuleVectorState.OFF) {
+                // When the current global keywords rule is OFF, we need to look at
+                // the flavor of rules in 'vectorContentRules' to apply the same actions 
+                // when creating the new rule.
+                // Thus, this new rule will join the 'vectorContentRules' set. 
+                if (self.state.vectorContentRules.rules.length) {
+                    pushRuleVectorStateKind = self._contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
+                }
+                else {
+                    // ON is default
+                    pushRuleVectorStateKind =  PushRuleVectorState.ON;
+                }
+            }
+
+            for (var i in newKeywords) {
+                var keyword = newKeywords[i];
+
+                if (vectorContentRulesPatterns.indexOf(keyword) < 0) {
+                    if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
+                        deferreds.push(cli.addPushRule
+                        ('global', 'content', keyword, {
+                           actions: self._actionsFor(pushRuleVectorStateKind),
+                           pattern: keyword
+                        }));
+                    }
+                    else {
+                        deferreds.push(self._addDisabledPushRule('global', 'content', keyword, {
+                           actions: self._actionsFor(pushRuleVectorStateKind),
+                           pattern: keyword
+                        }));
+                    }
+                }
+            }
+
+            q.all(deferreds).done(function(resps) {
+                self._refreshFromServer();
+            }, onError);
+        }, onError);
+    },
+
+    // Create a push rule but disabled
+    _addDisabledPushRule: function(scope, kind, ruleId, body) {
+        var cli = MatrixClientPeg.get();
+        var deferred = q.defer();
+
+        cli.addPushRule(scope, kind, ruleId, body).done(function() {
+            cli.setPushRuleEnabled(scope, kind, ruleId, false).done(function() {
+                deferred.resolve();
+            }, function(err) {
+                deferred.reject(err);
+            });
+        }, function(err) {
+            deferred.reject(err);
+        });
+
+        return deferred.promise;
+    },
+
+    // Add a push rule server side according to the 'VectorPushRulesDefinitions' spec
+    _addOverridingVectorPushRule: function(vectorRuleId, vectorState) {
+        var self = this;
+
+        // Create the rule as predefined
+        var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
+        var body = {
+            conditions: ruleDefinition.conditions,
+            actions: ruleDefinition.vectorStateToActions[vectorState]
+        }
+        
+        return MatrixClientPeg.get().addPushRule('global', "override", vectorRuleId, body);
+    },
+
+    _refreshFromServer: function() {
+        var self = this;  
+        MatrixClientPeg.get().getPushRules().done(function(rulesets) {
+            MatrixClientPeg.get().pushRules = rulesets;
+
+            // Get homeserver default rules and triage them by categories
+            var rule_categories = {
+                // The master rule (all notifications disabling)
+                '.m.rule.master': 'master',
+
+                // The default push rules displayed by Vector UI
+                // XXX: .m.rule.contains_user_name is not managed (not a fancy rule for Vector?)
+                '.m.rule.contains_display_name': 'vector',
+                '.m.rule.room_one_to_one': 'vector',
+                '.m.rule.invite_for_me': 'vector',
+                '.m.rule.member_event': 'vector',
+                '.m.rule.call': 'vector'
+
+                // Others go to others
+            };
+
+            // HS default rules
+            var defaultRules = {master: [], vector: {}, others: []};
+            // Push rules defined py Vector to override hs default rules
+            var vectorOverridingRules = {};
+            //  Content/keyword rules
+            var contentRules = {on: [], on_but_disabled:[], loud: [], loud_but_disabled: [], other: []};
+
+            for (var kind in rulesets.global) {
+                for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
+                    var r = rulesets.global[kind][i];
+                    var cat = rule_categories[r.rule_id];
+                    r.kind = kind;
+                    if (r.rule_id[0] === '.') {
+                        if (cat) {
+                            if (cat === 'vector') {
+                                // Remove disabled, useless actions
+                                r.actions = r.actions.reduce(function(array, action){
+                                    if (action.value !== false) {
+                                        array.push(action);
+                                    }
+                                    return array;
+                                },[]);
+
+                                defaultRules.vector[r.rule_id] = r;
+                            }
+                            else {
+                                defaultRules[cat].push(r);
+                            }
+                        }
+                        else {
+                            defaultRules['others'].push(r);
+                        }
+                    }
+                    else if (r.rule_id.startsWith('im.vector')) {
+                        vectorOverridingRules[r.rule_id] = r;
+                    }
+                    else if (kind === 'content') {
+                        switch (self._contentRuleVectorStateKind(r)) {
+                            case PushRuleVectorState.ON:
+                                if (r.enabled) {
+                                    contentRules.on.push(r);
+                                }
+                                else {
+                                    contentRules.on_but_disabled.push(r);
+                                }
+                                break;
+                            case PushRuleVectorState.LOUD:
+                                if (r.enabled) {
+                                    contentRules.loud.push(r);
+                                }
+                                else {
+                                    contentRules.loud_but_disabled.push(r);
+                                }
+                                break;
+                            default:
+                                contentRules.other.push(r);
+                                break;
+                        }
+                    }
+                }
+            }
+
+            // Decide which content rules to display in Vector UI.
+            // Vector displays a single global rule for a list of keywords
+            // whereas Matrix has a push rule per keyword.
+            // Vector can set the unique rule in ON, LOUD or OFF state.
+            // Matrix has enabled/disabled plus a combination of (highlight, sound) tweaks.
+            
+            // The code below determines which set of user's content push rules can be 
+            // displayed by the vector UI.
+            // Push rules that does not fit, ie defined by another Matrix client, ends
+            // in self.state.externalContentRules.
+            // There is priority in the determination of which set will be the displayed one.
+            // The set with rules that have LOUD tweaks is the first choice. Then, the ones
+            // with ON tweaks (no tweaks).
+            if (contentRules.loud.length) {
+                self.state.vectorContentRules = {
+                    vectorState: PushRuleVectorState.LOUD,
+                    rules: contentRules.loud
+                } 
+               self.state.externalContentRules = [].concat(contentRules.loud_but_disabled, contentRules.on, contentRules.on_but_disabled, contentRules.other);
+            }
+            else if (contentRules.loud_but_disabled.length) {
+                self.state.vectorContentRules = {
+                    vectorState: PushRuleVectorState.OFF,
+                    rules: contentRules.loud_but_disabled
+                } 
+               self.state.externalContentRules = [].concat(contentRules.on, contentRules.on_but_disabled, contentRules.other);
+            }
+            else if (contentRules.on.length) {
+                self.state.vectorContentRules = {
+                    vectorState: PushRuleVectorState.ON,
+                    rules: contentRules.on
+                }
+                self.state.externalContentRules = [].concat(contentRules.on_but_disabled, contentRules.other);
+            }
+            else if (contentRules.on_but_disabled.length) {
+                self.state.vectorContentRules = {
+                    vectorState: PushRuleVectorState.OFF,
+                    rules: contentRules.on_but_disabled
+                }
+                self.state.externalContentRules = contentRules.other;
+            }
+            else {
+                self.state.externalContentRules = contentRules.other;
+            }
+
+            // Get the master rule if any defined by the hs
+            if (defaultRules.master.length > 0) {
+                self.state.masterPushRule = defaultRules.master[0];
+            }
+
+            // Build the rules displayed in the Vector UI matrix table
+            self.state.vectorPushRules = [];
+
+            var vectorRuleIds = [
+                'im.vector.rule.contains_display_name',
+                '_keywords',
+                'im.vector.rule.room_one_to_one',
+                'im.vector.rule.room_group',
+                'im.vector.rule.invite_for_me',
+                'im.vector.rule.member_event',
+                'im.vector.rule.call'
+            ];
+            for (var i in vectorRuleIds) {
+                var vectorRuleId = vectorRuleIds[i];
+                var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
+
+                if (vectorRuleId === '_keywords') {
+                    // keywords needs a special handling
+                    // For Vector UI, this is a single global push rule but translated in Matrix,
+                    // it corresponds to all content push rules (stored in self.state.vectorContentRule)
+                    self.state.vectorPushRules.push({
+                        "vectorRuleId": "_keywords",
+                        "description" : (<span>Messages containing <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>keywords</span></span>),
+                        "vectorState": self.state.vectorContentRules.vectorState
+                    });
+                }
+                else {
+                    var rule = vectorOverridingRules[vectorRuleId];
+                    var isHSDefaultRule = false;
+                    if (!rule) {
+                        // If the rule is not defined, look at the hs default one
+                        rule = defaultRules.vector[ruleDefinition.hsDefaultRuleId];     
+                        isHSDefaultRule = true;
+                    }
+
+                    // Translate the rule actions into vector state
+                    var vectorState = PushRuleVectorState.OFF;
+                    if (rule && rule.enabled) {
+                        if (JSON.stringify(rule.actions) === JSON.stringify(ruleDefinition.vectorStateToActions[PushRuleVectorState.ON])) {
+                            vectorState = PushRuleVectorState.ON;
+                        }
+                        else if (JSON.stringify(rule.actions) === JSON.stringify(ruleDefinition.vectorStateToActions[PushRuleVectorState.LOUD])) {
+                            vectorState = PushRuleVectorState.LOUD;
+                        }
+                        else {
+                           console.error("Cannot translate rule actionsinto Vector rule state");                    
+                        }
+                    }
+
+                    self.state.vectorPushRules.push({
+                        "vectorRuleId": vectorRuleId,
+                        "description" : ruleDefinition.description,
+                        "rule": rule,
+                        "vectorState": vectorState,
+                        "isHSDefaultRule": isHSDefaultRule,
+                        "hsDefaultRule": defaultRules.vector[ruleDefinition.hsDefaultRuleId]
+                    });                    
+                }
+            }
+            
+            // Build the rules not managed by Vector UI
+            var otherRulesDescriptions = {
+                '.m.rule.suppress_notices': "Suppress notifications from bots",
+                '.m.rule.message': "Notify for all other messages/rooms",
+                '.m.rule.fallback': "Notify me for anything else"
+            };
+
+            self.state.externalPushRules = [];
+            for (var i in defaultRules.others) {
+                var rule = defaultRules.others[i];
+                var ruleDescription = otherRulesDescriptions[rule.rule_id];
+                
+                // Show enabled default rules that was modified by the user
+                if (ruleDescription && rule.enabled && !rule.default) {
+                    rule.description = ruleDescription;
+                    self.state.externalPushRules.push(rule);
+                }
+            }
+
+            self.setState({
+                phase: self.phases.DISPLAY
+            });
+        });
+    },
+    
+    _updatePushRuleActions: function(rule, actions, enabled) {
+        // Workaround for SYN-590 : Push rule update fails
+        // Remove the rule and recreate it with the new actions
+        var cli = MatrixClientPeg.get();
+        var deferred = q.defer();
+        
+        cli.deletePushRule('global', rule.kind, rule.rule_id).done(function() {
+            cli.addPushRule('global', rule.kind, rule.rule_id, {
+                conditions: rule.conditions,
+                actions: actions,
+                pattern: rule.pattern
+            }).done(function() {
+
+                // Then, if requested, enabled or disabled the rule
+                if (undefined != enabled) {
+                    cli.setPushRuleEnabled('global', rule.kind, rule.rule_id, enabled).done(function() {
+                        deferred.resolve();
+                    }, function(err) {
+                        deferred.reject(err);
+                    });
+                }
+                else {  
+                    deferred.resolve();
+                }
+            }, function(err) {
+                deferred.reject(err);
+            });
+        }, function(err) {
+            deferred.reject(err);
+        });  
+        
+        return deferred.promise;
+    },
+    
+    renderNotifRulesTableRow: function(title, className, pushRuleVectorState) {
+        return (
+            <tr key = {className}>
+                <th>
+                    {title}
+                </th>
+
+                <th>
+                    <input className= {className + "-" + PushRuleVectorState.ON}
+                        type="radio"
+                        checked={ pushRuleVectorState === PushRuleVectorState.ON }
+                        onChange={ this.onNotifStateButtonClicked } />
+                </th>
+
+                <th>
+                    <input className= {className + "-" + PushRuleVectorState.LOUD}
+                        type="radio"
+                        checked={ pushRuleVectorState === PushRuleVectorState.LOUD }
+                        onChange={ this.onNotifStateButtonClicked } />
+                </th>
+
+                <th>
+                    <input className= {className + "-" + PushRuleVectorState.OFF}
+                        type="radio"
+                        checked={ pushRuleVectorState === PushRuleVectorState.OFF }
+                        onChange={ this.onNotifStateButtonClicked } />
+                </th>
+            </tr>
+        );
+    },
+    
+    renderNotifRulesTableRows: function() {
+        var rows = [];
+        for (var i in this.state.vectorPushRules) {
+            var rule = this.state.vectorPushRules[i];
+            rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
+        }
+        return rows;
+    },
+
+    render: function() { 
+        var self = this;
+
+        if (this.state.phase === this.phases.LOADING) {
+            var Loader = sdk.getComponent("elements.Spinner");
+            return (
+                <div className="mx_UserSettings_notifTable">
+                    <Loader />
+                </div>
+            );
+        }
+
+        if (this.state.masterPushRule) {
+            var masterPushRuleDiv = (
+                <div className="mx_UserNotifSettings_tableRow">
+                        <div className="mx_UserNotifSettings_inputCell">
+                            <input id="enableNotifications"
+                                ref="enableNotifications"
+                                type="checkbox"
+                                checked={ !this.state.masterPushRule.enabled }
+                                onChange={ this.onEnableNotificationsChange } />
+                        </div>
+                        <div className="mx_UserNotifSettings_labelCell">
+                            <label htmlFor="enableNotifications">
+                                Enable notifications
+                            </label>
+                        </div>
+                    </div>
+            );
+        }
+
+        // When enabled, the master rule inhibits all existing rules
+        // So do not show all notification settings
+        if (this.state.masterPushRule.enabled) {
+            return (
+                <div>
+                    {masterPushRuleDiv}
+
+                    <div className="mx_UserSettings_notifTable">
+                        All notifications are currently disabled for all devices.
+                    </div>
+                </div>
+            );
+        }
+
+        // Build external push rules
+        var externalRules = [];
+        for (var i in this.state.externalPushRules) {
+            var rule = this.state.externalPushRules[i];
+            externalRules.push(<li>{ rule.description }</li>);
+        }
+
+        // Show keywords not displayed by the vector UI as a single external push rule
+        var externalKeyWords = [];
+        for (var i in this.state.externalContentRules) {
+            var rule = this.state.externalContentRules[i];
+            externalKeyWords.push(rule.pattern);
+        }
+        if (externalKeyWords.length) {
+            externalKeyWords = externalKeyWords.join(", ");
+            externalRules.push(<li>Notifications on the following keywords follow rules which can’t be displayed here: { externalKeyWords }</li>);
+        }
+
+        var advancedSettings;
+        if (externalRules.length) {
+            advancedSettings = (
+                <div>
+                    <h3>Advanced notifications settings</h3>
+                    There are advanced notifications which are not shown here.<br/>
+                    You might have configured them in another client than Vector. You cannot tune them in Vector but they still apply.
+                    <ul>
+                        { externalRules }
+                    </ul>
+                </div>
+            ); 
+        }
+
+        return (
+            <div>
+
+                {masterPushRuleDiv}
+
+                <div className="mx_UserSettings_notifTable">
+
+                    <div className="mx_UserNotifSettings_tableRow">
+                        <div className="mx_UserNotifSettings_inputCell">
+                            <input id="enableDesktopNotifications"
+                                ref="enableDesktopNotifications"
+                                type="checkbox"
+                                checked={ UserSettingsStore.getEnableNotifications() }
+                                onChange={ this.onEnableDesktopNotificationsChange } />
+                        </div>
+                        <div className="mx_UserNotifSettings_labelCell">
+                            <label htmlFor="enableDesktopNotifications">
+                                Enable desktop notifications
+                            </label>
+                        </div>
+                    </div>
+
+                    <h3>General use</h3>
+
+                    <div className="mx_UserNotifSettings_pushRulesTableWrapper">
+                        <table className="mx_UserNotifSettings_pushRulesTable">
+                            <thead>
+                                <tr>
+                                    <th width="55%"></th>
+                                    <th width="15%">On</th>
+                                    <th width="15%">Loud</th>
+                                    <th width="15%">Off</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+
+                                { this.renderNotifRulesTableRows() }
+
+                            </tbody>
+                        </table>
+                    </div>
+
+                    { advancedSettings }
+ 
+                </div>
+
+            </div>
+        );
+    }
+});
diff --git a/src/header b/src/header
index fd88ee27f7..060709b82e 100644
--- a/src/header
+++ b/src/header
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/atoms/RoomAvatar.css b/src/skins/vector/css/atoms/RoomAvatar.css
deleted file mode 100644
index f005b25176..0000000000
--- a/src/skins/vector/css/atoms/RoomAvatar.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_RoomAvatar {
-    vertical-align: middle;
-}
-
-.mx_RoomAvatar_initial {
-    position: absolute;
-    color: #fff;
-    text-align: center;
-    font-weight: normal ! important;
-    speak: none;
-    pointer-events: none;
-}
\ No newline at end of file
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/common.css
index 2b6e02ed37..142b69ca68 100644
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -52,7 +52,7 @@ a:visited {
     color: #76cfa6;
 }
 
-input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
+input[type=text]:focus, textarea:focus {
     border: 1px solid #76CFA6;
     outline: none;
     box-shadow: none;
@@ -187,8 +187,7 @@ input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
     padding-right: 1em;
 }
 
-.mx_ErrorDialogTitle,
-.mx_QuestionDialogTitle {
+.mx_Dialog_title {
     min-height: 16px;
     padding: 12px;
     border-bottom: 1px solid #a4a4a4;
@@ -196,3 +195,14 @@ input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
     font-size: 18px;
     line-height: 1.4;
 }
+
+.mx_TextInputDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_TextInputDialog_input {
+    color: #747474;
+    font-weight: 300;
+    font-size: 15px;
+}
diff --git a/src/skins/vector/css/organisms/CreateRoom.css b/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
similarity index 96%
rename from src/skins/vector/css/organisms/CreateRoom.css
rename to src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
index feb8bbff36..d9b121fe5f 100644
--- a/src/skins/vector/css/organisms/CreateRoom.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
similarity index 98%
rename from src/skins/vector/css/pages/MatrixChat.css
rename to src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
index 2190e49601..88d558debe 100644
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
similarity index 89%
rename from src/skins/vector/css/organisms/RoomView.css
rename to src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index 3ec5bbdcd0..64bd4ba682 100644
--- a/src/skins/vector/css/organisms/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -44,7 +44,7 @@ limitations under the License.
     min-width: 0px;
     max-width: 960px;
     width: 100%;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
 
     pointer-events: none;
@@ -113,6 +113,20 @@ limitations under the License.
 .mx_RoomView_messageListWrapper {
     max-width: 960px;
     margin: auto;
+    
+    min-height: 100%;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+
+    justify-content: flex-end;
+    -webkit-justify-content: flex-end;
 }
 
 .mx_RoomView_MessageList {
@@ -150,6 +164,21 @@ limitations under the License.
     margin-bottom: 12px;
 }
 
+li.mx_RoomView_myReadMarker_container {
+    height: 0px;
+    margin: 0px;
+    padding: 0px;
+    border: 0px;
+}
+
+hr.mx_RoomView_myReadMarker {
+    border-top: solid 1px #76cfa6;
+    border-bottom: solid 1px #76cfa6;
+    margin-top: 0px;
+    position: relative;
+    top: 5px;
+}
+
 .mx_RoomView_statusArea {
     -webkit-box-ordinal-group: 4;
     -moz-box-ordinal-group: 4;
@@ -189,7 +218,7 @@ limitations under the License.
 
 .mx_RoomView_voipChevron {
     position: absolute;
-    bottom: -10px;
+    bottom: -11px;
     right: 11px;
 }
 
@@ -199,6 +228,10 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_RoomView_voipButton object {
+    pointer-events: none;
+}
+
 .mx_RoomView_unreadMessagesBar {
     color: #ff0064;
     cursor: pointer;
@@ -296,7 +329,7 @@ limitations under the License.
     color: #76CFA6;
 }
 
-.mx_RoomView_tabCompleteEol img {
+.mx_RoomView_tabCompleteEol object {
     vertical-align: middle;
     margin-right: 8px;
     margin-top: -2px;
diff --git a/src/skins/vector/css/MOVE_ME/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
similarity index 100%
rename from src/skins/vector/css/MOVE_ME/UploadBar.css
rename to src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
new file mode 100644
index 0000000000..605c1edc70
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
@@ -0,0 +1,173 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserSettings {
+    width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;    
+}
+
+.mx_UserSettings .mx_RoomHeader {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
+}
+
+.mx_UserSettings_body {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    overflow-y: auto;    
+}
+
+.mx_UserSettings_spinner {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 12px;
+    width: 32px;
+    height: 32px;
+}
+
+.mx_UserSettings_button {
+    display: inline;
+    vertical-align: middle;
+    border: 0px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #fff;
+    background-color: #76cfa6;
+    width: auto;
+    margin: auto;
+    padding: 7px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    cursor: pointer;
+}
+
+.mx_UserSettings h2 {
+    clear: both;
+    margin-top: 32px;
+    margin-bottom: 8px;
+    margin-left: 63px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #eee;
+}
+
+.mx_UserSettings h3 {
+    font-weight: bold;
+    font-size: 15px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+.mx_UserSettings_section {
+    margin-left: 63px;
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+.mx_UserSettings_accountTable
+.mx_UserSettings_notifTable
+{
+    display: table;
+}
+
+.mx_UserSettings_profileTable
+{
+    display: table;
+    float: left;
+}
+
+.mx_UserSettings_profileTableRow
+{
+    display: table-row;
+}
+
+.mx_UserSettings_profileLabelCell
+{
+    padding-bottom: 21px;
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 24px;
+}
+
+.mx_UserSettings_profileInputCell {
+    display: table-cell;
+    padding-bottom: 21px;
+    width: 240px;
+}
+
+.mx_UserSettings_profileInputCell input,
+.mx_UserSettings_profileInputCell .mx_EditableText
+{
+    display: inline-block;
+    border: 0px;
+    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+    padding: 0px;
+    width: 240px;
+    color: rgba(74, 74, 74, 0.9);
+    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+}
+
+.mx_UserSettings_changePasswordButton {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+    margin-top: -54px;
+}
+
+.mx_UserSettings_logout {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+}
+
+.mx_UserSettings_avatarPicker {
+    margin-left: 32px;
+    margin-right: 32px;
+    float: right;
+    cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker_edit {
+    text-align: center;
+    margin-top: 10px;
+}
+
+.mx_UserSettings_avatarPicker_edit > input {
+    display: none;
+}
diff --git a/src/skins/vector/css/templates/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
similarity index 93%
rename from src/skins/vector/css/templates/Login.css
rename to src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
index d1b28b1e59..5ee580046f 100644
--- a/src/skins/vector/css/templates/Login.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -105,6 +105,15 @@ limitations under the License.
    color: #4a4a4a;
 }
 
+.mx_Login_forgot {
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+.mx_Login_forgot:link {
+    color: #4a4a4a;
+}
+
 .mx_Login_loader {
     position: absolute;
     left: 50%;
diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
similarity index 82%
rename from src/skins/vector/css/atoms/MemberAvatar.css
rename to src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
index 3da56172d1..901a29599a 100644
--- a/src/skins/vector/css/atoms/MemberAvatar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,20 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberAvatar {
+.mx_BaseAvatar {
     position: relative;
 }
 
-.mx_MemberAvatar_initial {
+.mx_BaseAvatar_initial {
     position: absolute;
     z-index: 1;
     color: #fff;
     text-align: center;
     speak: none;
     pointer-events: none;
+    font-weight: normal;
 }
 
-.mx_MemberAvatar_image {
-    border-radius: 20px;
+.mx_BaseAvatar_image {
+    border-radius: 40px;
     vertical-align: top;
 }
diff --git a/src/skins/vector/css/molecules/ProgressBar.css b/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
similarity index 94%
rename from src/skins/vector/css/molecules/ProgressBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
index 8b8adc09c1..7b5e0c7461 100644
--- a/src/skins/vector/css/molecules/ProgressBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/ServerConfig.css b/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
similarity index 95%
rename from src/skins/vector/css/molecules/ServerConfig.css
rename to src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
index 58bdcfdf94..75cd4170da 100644
--- a/src/skins/vector/css/molecules/ServerConfig.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/MImageTile.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
similarity index 72%
rename from src/skins/vector/css/molecules/MImageTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
index 94f1c9198a..fe10f3309e 100644
--- a/src/skins/vector/css/molecules/MImageTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MImageTile_thumbnail {
+.mx_MImageBody_thumbnail {
 /*
     background-color: #fff;
     border: 2px solid #fff;
@@ -22,16 +22,20 @@ limitations under the License.
 */
 }
 
-.mx_MImageTile_download {
+.mx_MImageBody_download {
     color: #76cfa6;
     cursor: pointer;
+    margin-left: -16px;
 }
 
-.mx_MImageTile_download a {
+.mx_MImageBody_download a {
     color: #76cfa6;
     text-decoration: none;
 }
 
-.mx_MImageTile_download img {
-    padding-right: 8px;
-}
\ No newline at end of file
+.mx_MImageBody_download object {
+    padding-right: 4px;
+    margin-top: -4px;
+    vertical-align: middle;
+    pointer-events: none;
+}
diff --git a/src/skins/vector/css/molecules/MNoticeTile.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
similarity index 91%
rename from src/skins/vector/css/molecules/MNoticeTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
index 9fe5376a9e..a88c20863d 100644
--- a/src/skins/vector/css/molecules/MNoticeTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MNoticeTile {
+.mx_MNoticeBody {
     white-space: pre-wrap;
     opacity: 0.6;
 }
diff --git a/src/skins/vector/css/molecules/MTextTile.css b/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
similarity index 91%
rename from src/skins/vector/css/molecules/MTextTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
index 96a9d1db48..93a89ad1b7 100644
--- a/src/skins/vector/css/molecules/MTextTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MTextTile {
+.mx_MTextBody {
     white-space: pre-wrap;
 }
diff --git a/src/skins/vector/css/molecules/EventAsTextTile.css b/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
similarity index 91%
rename from src/skins/vector/css/molecules/EventAsTextTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
index da95352296..be7565b3c5 100644
--- a/src/skins/vector/css/molecules/EventAsTextTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_EventAsTextTile {
+.mx_TextualEvent {
     opacity: 0.5;
     overflow-y: hidden;
 }
diff --git a/src/skins/vector/css/molecules/MemberTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
similarity index 62%
rename from src/skins/vector/css/molecules/MemberTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
index 874710d9de..8bf5f83ce1 100644
--- a/src/skins/vector/css/molecules/MemberTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,14 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberTile {
+.mx_EntityTile {
     display: table-row;
     position: relative;
     color: #454545;
     cursor: pointer;
 }
 
-.mx_MemberTile_avatar {
+.mx_EntityTile_invite {
+    display: table-cell;
+    vertical-align: middle;
+    margin-left: 10px;
+    width: 26px;
+}
+
+.mx_EntityTile_avatar {
     display: table-cell;
     padding-left: 3px;
     padding-right: 12px;
@@ -33,71 +40,59 @@ limitations under the License.
     position: relative;
 }
 
-.mx_MemberTile_power {
+.mx_EntityTile_power {
     position: absolute;
-    width: 44px;
-    height: 44px;
-    left: 10px;
-    top: -1px;
+    width: 16px;
+    height: 17px;
+    top: 0px;
+    right: 6px;
 }
-
-.mx_MemberTile_name {
+  
+.mx_EntityTile_name {
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_details {
+.mx_EntityTile_details {
     display: table-cell;
     padding-right: 14px;
     vertical-align: middle;
 }
 
-.mx_MemberTile_userId {
+.mx_EntityTile_name_hover {
     font-size: 13px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_presence {
-    font-size: 11px;
-    opacity: 0.5;
-}
-
-.mx_MemberTile_chevron {
+.mx_EntityTile_chevron {
     margin-top: 8px;
     margin-right: -4px;
     margin-left: 6px;
     float: right;
 }
 
-/*
-.mx_MemberTile_nameWrapper {
-    display: table-cell;
-    vertical-align: middle;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mx_MemberTile_nameSpan {
-}
-*/
-
-.mx_MemberTile_unavailable .mx_MemberTile_avatar,
-.mx_MemberTile_unavailable .mx_MemberTile_name,
-.mx_MemberTile_unavailable .mx_MemberTile_userId
+.mx_EntityTile_unavailable .mx_EntityTile_avatar,
+.mx_EntityTile_unavailable .mx_EntityTile_name,
+.mx_EntityTile_unavailable .mx_EntityTile_name_hover
 {
     opacity: 0.66;
 }
 
-.mx_MemberTile_offline .mx_MemberTile_avatar,
-.mx_MemberTile_offline .mx_MemberTile_name,
-.mx_MemberTile_offline .mx_MemberTile_userId
+.mx_EntityTile_offline .mx_EntityTile_avatar,
+.mx_EntityTile_offline .mx_EntityTile_name,
+.mx_EntityTile_offline .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }
 
-.mx_MemberTile:hover .mx_MessageTimestamp {
-    display: block;
+.mx_EntityTile_unknown .mx_EntityTile_avatar,
+.mx_EntityTile_unknown .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_name_hover
+{
+    opacity: 0.25;
 }
+
+
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
similarity index 78%
rename from src/skins/vector/css/molecules/EventTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
index 17d1599e1f..2d0205f58c 100644
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -31,11 +31,6 @@ limitations under the License.
     top: 0px;
 }
 
-.mx_EventTile_avatar img {
-    border-radius: 20px;
-    border: 0px;
-}
-
 .mx_EventTile_continuation {
     margin-top: 8px ! important;
 }
@@ -59,11 +54,6 @@ limitations under the License.
 }
 
 .mx_EventTile_content {
-    padding-right: 100px;
-    display: block;
-}
-
-.mx_MessageTile_content {
     display: block;
     margin-right: 100px;
     overflow-y: hidden;
@@ -71,7 +61,7 @@ limitations under the License.
 
 /* Various markdown overrides */
 
-.mx_MessageTile_content .markdown-body {
+.mx_EventTile_content .markdown-body {
     font-family: inherit ! important;
     white-space: normal ! important;
     line-height: inherit ! important;
@@ -79,34 +69,34 @@ limitations under the License.
     font-size: 15px;
 }
 
-.mx_MessageTile_content .markdown-body h1,
-.mx_MessageTile_content .markdown-body h2,
-.mx_MessageTile_content .markdown-body h3,
-.mx_MessageTile_content .markdown-body h4,
-.mx_MessageTile_content .markdown-body h5,
-.mx_MessageTile_content .markdown-body h6
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6
 {
     font-family: inherit ! important;
 }
 
-.mx_MessageTile_content .markdown-body a {
+.mx_EventTile_content .markdown-body a {
     color: #76cfa6;
 }
 
-.mx_MessageTile_content .markdown-body .hljs {
-    display: inherit ! important;
+.mx_EventTile_content .markdown-body .hljs {
+    display: inline ! important;
 }
 
 /* end of overrides */
 
-.mx_MessageTile_searchHighlight {
+.mx_EventTile_searchHighlight {
     background-color: #76cfa6;
     color: #fff;
     border-radius: 5px;
     padding: 4px;
 }
 
-.mx_MessageTile_searchHighlight a {
+.mx_EventTile_searchHighlight a {
     background-color: #76cfa6;
     color: #fff;    
 }
@@ -135,11 +125,11 @@ limitations under the License.
     z-index: 1;
     position: relative;
     width: 90px;
+    height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
     margin-right: 10px;
-    margin-top: -6px;
 }
 
-.mx_MessageTimestamp {
+.mx_EventTile .mx_MessageTimestamp {
     display: block;
     visibility: hidden;
     text-align: right;
@@ -178,7 +168,7 @@ limitations under the License.
     height: 14px;
 }
 
-.mx_EventTile_readAvatars .mx_MemberAvatar {
+.mx_EventTile_readAvatars .mx_BaseAvatar {
     position: absolute;
     display: inline-block;
 }
diff --git a/src/skins/vector/css/molecules/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
similarity index 71%
rename from src/skins/vector/css/molecules/MemberInfo.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
index 1c4ab3856c..4d421007dc 100644
--- a/src/skins/vector/css/molecules/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -32,8 +32,17 @@ limitations under the License.
     clear: both;
 }
 
-.mx_MemberInfo_avatar img {
-    border-radius: 48px;
+.mx_MemberInfo_profile {
+    margin-bottom: 16px;
+}
+
+.mx_MemberInfo h3 {
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 16px;
+    margin-bottom: 14px;
 }
 
 .mx_MemberInfo_profileField {
@@ -44,21 +53,13 @@ limitations under the License.
 }
 
 .mx_MemberInfo_buttons {
-    margin-top: 18px;
+    margin-bottom: 16px;
 }
 
 .mx_MemberInfo_field {
     cursor: pointer;
-    width: 100px;
-    text-align: center;
-    font-size: 11px;    
-    background-color: #888;
-    color: #fff;
-    font-weight: bold;
-    border-radius: 20px;
-    padding-left: 6px;
-    padding-right: 6px;
-    padding-top: 4px;
-    padding-bottom: 2px;
-    margin-bottom: 4px;
+    font-size: 13px;
+    color: #76cfa6;
+    margin-left: 8px;
+    line-height: 23px;
 }
diff --git a/src/skins/vector/css/organisms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
similarity index 62%
rename from src/skins/vector/css/organisms/MemberList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
index ce936d2c85..de05d3e8c4 100644
--- a/src/skins/vector/css/organisms/MemberList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -44,25 +44,43 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
-.mx_MemberList_invite {
-    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
-    border-radius: 3px;
-    border: 1px solid #f0f0f0;
-    padding: 9px;
-    color: #454545;
-    margin-left: 3px;
-    font-size: 15px;
-    margin-bottom: 8px;
-    width: 180px;
+.mx_MemberList .mx_SearchableEntityList {
+    order: 1;
+    flex: 0;
+    -webkit-flex: 0;
 }
 
-.mx_MemberList_invite::-moz-placeholder {
-    color: #454545;
-    opacity: 0.5;
+.mx_MemberList .mx_SearchableEntityList_expanded {
+    flex: 1 1 100%;
+    -webkit-flex: 1 1 100%;
 }
-.mx_MessageList_invite::-webkit-input-placeholder {
-    color: #454545;
-    opacity: 0.5;
+
+.mx_MemberList_joined {
+    order: 2;
+    flex: 1 1 50%;
+    -webkit-flex: 1 1 50%;
+
+    overflow-y: auto;
+}
+
+/*
+.mx_MemberList_invited {
+    order: 3;
+    flex: 0 0 100px;
+    -webkit-flex: 0 0 100px;
+    overflow-y: auto;
+}
+*/
+
+.mx_MemberList_bottom {
+    order: 4;
+    flex: 0 0 72px;
+    -webkit-flex: 0 0 72px;
+}
+
+.mx_MemberList_bottomRule {
+    border-top: 2px solid #e1dddd;
+    margin-right: 15px;
 }
 
 .mx_MemberList_invited h2 {
@@ -76,8 +94,13 @@ limitations under the License.
     margin-bottom: 4px;    
 }
 
+/* we have to have display: table in order for the horizontal wrapping to work */
 .mx_MemberList_wrapper {
-    display: table;
+    display: table; 
     table-layout: fixed;
     width: 100%;
 }
+
+.mx_MemberList_outerWrapper {
+    height: 0px;
+}
diff --git a/src/skins/vector/css/molecules/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
similarity index 87%
rename from src/skins/vector/css/molecules/MessageComposer.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
index 4d5668518d..6eca5415ba 100644
--- a/src/skins/vector/css/molecules/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,7 +33,7 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
     display: block;
 }
 
@@ -82,6 +82,13 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_MessageComposer_upload object,
+.mx_MessageComposer_hangup object,
+.mx_MessageComposer_voicecall object,
+.mx_MessageComposer_videocall object {
+    pointer-events: none;
+}
+
 .mx_MessageComposer_videocall {
     padding-right: 10px;
     padding-top: 4px;
@@ -92,6 +99,6 @@ limitations under the License.
     padding-top: 4px;
 }
 
-.mx_MessageComposer_upload img {
+.mx_MessageComposer_upload object {
     margin-top: 5px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css
new file mode 100644
index 0000000000..682c849cee
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css
@@ -0,0 +1,20 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PresenceLabel {
+    font-size: 11px;
+    opacity: 0.5;
+}
\ No newline at end of file
diff --git a/src/skins/vector/css/molecules/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
similarity index 63%
rename from src/skins/vector/css/molecules/RoomHeader.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
index 70d9bf310d..78ce5d22aa 100644
--- a/src/skins/vector/css/molecules/RoomHeader.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomHeader {
+/* add 20px to the height of the header when editing */
+.mx_RoomHeader_editing {
+    -webit-flex: 0 0 93px ! important;
+    flex: 0 0 93px ! important;
 }
 
 .mx_RoomHeader_wrapper {
@@ -33,6 +36,10 @@ limitations under the License.
     display: flex;
 }
 
+.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
+    border-bottom: 1px solid transparent;
+}
+
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
@@ -47,12 +54,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_textButton {
-    height: 48px;
+    height: 36px;
     background-color: #76cfa6;
-    border-radius: 48px;
+    border-radius: 36px;
     margin-right: 8px;
     color: #fff;
-    line-height: 48px;
+    line-height: 34px;
+    margin-top: -2px;
     text-align: center;
 
     -webkit-box-ordinal-group: 2;
@@ -69,7 +77,20 @@ limitations under the License.
 */
     padding-left: 12px;
     padding-right: 12px;
-    }
+}
+
+.mx_RoomHeader_cancelButton {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    cursor: pointer;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}
 
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
@@ -84,7 +105,7 @@ limitations under the License.
 
 .mx_RoomHeader_info {
     display: table-cell;
-    /* height: 48px; */
+    width: 100%;
     vertical-align: middle;
 }
 
@@ -94,13 +115,22 @@ limitations under the License.
     font-size: 22px;
     font-weight: bold;
     overflow: hidden;
+    margin-left: 63px;
     text-overflow: ellipsis;
+    width: 100%;
+}
+
+.mx_RoomHeader_simpleHeaderCancel {
+    float: right;
+    margin-top: 8px;
+    padding: 24px;
+    cursor: pointer;
 }
 
 .mx_RoomHeader_name {
-    cursor: pointer;
     vertical-align: middle;
-    height: 28px;
+    width: 100%;
+    height: 31px;
     overflow: hidden;
     color: #454545;
     font-weight: bold;
@@ -109,12 +139,17 @@ limitations under the License.
     padding-right: 16px;
     /* why isn't text-overflow working? */
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
 }
 
 .mx_RoomHeader_nametext {
     display: inline-block;
 }
 
+.mx_RoomHeader_settingsHint {
+    color: #a2a2a2 ! important;
+}
+
 .mx_RoomHeader_searchStatus {
     display: inline-block;
     font-weight: normal;
@@ -129,11 +164,22 @@ limitations under the License.
     left: 4px;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
+.mx_RoomHeader_settingsButton object {
+    pointer-events: none;
+}
+
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_settingsButton {
+.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
     visibility: visible;
 }
 
@@ -146,24 +192,20 @@ limitations under the License.
     visibility: visible;
 }
 
-
-.mx_RoomHeader_nameEditing {
-    padding-left: 8px;
-    padding-right: 16px;
-    margin-top: -5px;
+.mx_RoomHeader_placeholder {
+    color: #a2a2a2 ! important;
 }
 
-.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
-    border-radius: 3px;
-    width: 260px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
+.mx_RoomHeader_editable {
+    border-bottom: 1px solid #c7c7c7 ! important;
+    min-width: 150px;
+    cursor: text;
 }
 
-.mx_RoomHeader_nameInput {
-    margin-top: 6px;
+.mx_RoomHeader_editable:focus {
+    border-bottom: 1px solid #76CFA6 ! important;
+    outline: none;
+    box-shadow: none;
 }
 
 .mx_RoomHeader_topic {
@@ -172,10 +214,11 @@ limitations under the License.
     max-height: 42px;
     color: #454545;
     font-weight: 300;  
-    padding-left: 19px;
-    padding-right: 16px;
+    margin-left: 19px;
+    margin-right: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;    
 }
 
 .mx_RoomHeader_avatar {
@@ -185,8 +228,18 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_RoomHeader_avatar img {
-	border-radius: 24px;
+.mx_RoomHeader_avatarPicker_edit {
+    position: absolute;
+    margin-left: 16px;
+    margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > label {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+    display: none;
 }
 
 .mx_RoomHeader_button {
@@ -194,10 +247,11 @@ limitations under the License.
     vertical-align: top;
     padding-left: 8px;
     padding-right: 8px;
+    cursor: pointer;
 }
 
-.mx_RoomHeader_button img {
-    cursor: pointer;
+.mx_RoomHeader_button object {
+    pointer-events: none;
 }
 
 .mx_RoomHeader_voipButton {
diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
similarity index 96%
rename from src/skins/vector/css/organisms/RoomList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
index 6b8152e097..1a4ec869f2 100644
--- a/src/skins/vector/css/organisms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
new file mode 100644
index 0000000000..5a6ee551cf
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
@@ -0,0 +1,56 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomPreviewBar {
+    text-align: center;
+    height: 176px;
+
+    -webkit-align-items: center;
+    align-items: center;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    
+    justify-content: center;
+    -webkit-justify-content: center;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.mx_RoomPreviewBar_wrapper {
+}
+
+.mx_RoomPreviewBar_invite_text {
+    color: #454545;
+}
+
+.mx_RoomPreviewBar_join_text {
+    color: #ff0064;
+}
+
+.mx_RoomPreviewBar_preview_text {
+    margin-top: 25px;
+    color: #a4a4a4;
+}
+
+.mx_RoomPreviewBar_join_text a {
+    text-decoration: underline;
+    cursor: pointer;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
new file mode 100644
index 0000000000..006882ebb5
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
@@ -0,0 +1,191 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomSettings {
+    margin-left: 65px;
+    margin-bottom: 20px;
+}
+
+.mx_RoomSettings_powerLevels {
+    display: table;
+}
+
+.mx_RoomSettings_powerLevel {
+    display: table-row;
+}
+
+.mx_RoomSettings_powerLevelKey,
+.mx_RoomSettings_powerLevel .mx_PowerSelector {
+    display: table-cell;
+    padding-bottom: 5px;
+}
+
+.mx_RoomSettings_powerLevelKey {
+    text-align: right;
+    padding-right: 0.3em;
+}
+
+.mx_RoomSettings h3 {
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 36px;
+    margin-bottom: 10px;
+}
+
+/*
+.mx_RoomSettings input,
+.mx_RoomSettings textarea  {
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 13px;
+    padding: 9px;
+    margin-top: 6px;
+}
+*/
+
+.mx_RoomSettings .mx_RoomSettings_toggles label {
+    margin-bottom: 8px;
+    display: block;
+}
+
+.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"] {
+    margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
+    margin-left: 1em;
+    margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags {
+    margin-bottom: 8px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColor {
+    display: inline-block;
+    position: relative;
+    width: 37px;
+    height: 37px;
+    border: 1px solid #979797;
+    margin-right: 13px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColor_selected {
+    position: absolute;
+    left: 10px;
+    top: 4px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColorPrimary {
+    height: 10px;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasLabel {
+    margin-bottom: 8px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTable {
+    margin-top: 12px;
+    margin-bottom: 0px;
+    margin-left: 56px;
+    display: table;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow {
+    display: table-row;
+    margin-bottom: 16px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_alias {
+    max-width: 400px;
+    margin-bottom: 16px;
+    /* 
+    commented out so margin applies
+    display: table-cell; */
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias {
+    display: table-cell;
+    padding-left: 0.5em;
+    position: relative;
+    cursor: pointer;
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias img,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias img {
+    visibility: hidden;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img,
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img {
+    visibility: visible;
+}
+
+.mx_RoomSettings_editable {
+    border: 0px;
+    border-bottom: 1px solid #c7c7c7;
+    padding: 0px;
+    min-width: 240px;
+}
+
+.mx_RoomSettings_editable:focus {
+    border-bottom: 1px solid #76CFA6;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_RoomSettings_deleteAlias,
+.mx_RoomSettings_addAlias {
+    display: table-cell;
+    visibility: visible;
+}
+
+.mx_RoomSettings_deleteAlias:hover,
+.mx_RoomSettings_addAlias:hover {
+    visibility: visible;
+}
+
+.mx_RoomSettings_aliasPlaceholder {
+    color: #a2a2a2;
+}
+
+.mx_RoomSettings_buttons {
+    text-align: right;
+    margin-bottom: 16px;
+}
+
+.mx_RoomSettings_button {
+    display: inline;
+    border: 0px;
+    height: 36px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 15px;
+    color: #fff;
+    background-color: #76cfa6;
+    width: auto;
+    margin: auto;
+    padding: 6px;
+    padding-left: 1em;
+    padding-right: 1em;
+}
\ No newline at end of file
diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
similarity index 96%
rename from src/skins/vector/css/molecules/RoomTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index ef907d25a1..44b884e859 100644
--- a/src/skins/vector/css/molecules/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,10 +33,6 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_RoomTile_avatar img {
-    border-radius: 20px;
-}
-
 .mx_RoomTile_name {
     display: table-cell;
     width: 100%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
new file mode 100644
index 0000000000..3cdc291cc8
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
@@ -0,0 +1,78 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SearchableEntityList {
+    display: flex;
+    display: -webkit-flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+}
+
+.mx_SearchableEntityList_query {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    border-radius: 3px;
+    border: 1px solid #f0f0f0;
+    padding: 9px;
+    color: #454545;
+    margin-left: 3px;
+    font-size: 15px;
+    margin-bottom: 8px;
+    width: 180px;
+}
+
+.mx_SearchableEntityList_query::-moz-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+
+.mx_SearchableEntityList_query::-webkit-input-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+
+.mx_SearchableEntityList_listWrapper {
+    flex: 1;
+    -webkit-flex: 1;
+
+    overflow-y: auto;    
+}
+
+.mx_SearchableEntityList_list {
+    display: table;
+    table-layout: fixed;
+    width: 100%;    
+}
+
+.mx_SearchableEntityList_list .mx_EntityTile_chevron {
+    display: none;
+}
+
+.mx_SearchableEntityList_hrWrapper {
+    width: 100%;
+    flex: 0;
+    -webkit-flex: 0;    
+}
+
+.mx_SearchableEntityList hr {
+    height: 1px;
+    border: 0px;
+    color: #e1dddd;
+    background-color: #e1dddd;
+    margin-right: 15px;
+    margin-top: 11px;
+    margin-bottom: 11px;
+}
diff --git a/src/skins/vector/css/molecules/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
similarity index 68%
rename from src/skins/vector/css/molecules/TabCompleteBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
index 51ac41980d..e0d0965e34 100644
--- a/src/skins/vector/css/molecules/TabCompleteBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,10 +21,26 @@ limitations under the License.
 .mx_TabCompleteBar_item {
     display: inline-block;
     margin-right: 15px;
+    cursor: pointer;
+}
+
+.mx_TabCompleteBar_command {
+    margin-right: 8px;
+    background-color: #76CFA6;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-bottom: 6px;
+    border-radius: 30px;
+}
+
+.mx_TabCompleteBar_command .mx_TabCompleteBar_text {
+    opacity: 1.0;
+    color: #fff;
 }
 
 .mx_TabCompleteBar_item img {
-    border-radius: 24px;
     margin-right: 8px;
     vertical-align: middle;
 }
diff --git a/src/skins/vector/css/molecules/voip/CallView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
similarity index 93%
rename from src/skins/vector/css/molecules/voip/CallView.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
index 01cdb45ae1..179fd29467 100644
--- a/src/skins/vector/css/molecules/voip/CallView.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/voip/IncomingCallbox.css b/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
similarity index 97%
rename from src/skins/vector/css/molecules/voip/IncomingCallbox.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
index 80e4920231..5cf62091b3 100644
--- a/src/skins/vector/css/molecules/voip/IncomingCallbox.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/voip/VideoView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
similarity index 95%
rename from src/skins/vector/css/molecules/voip/VideoView.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
index b47039c340..e499a478ea 100644
--- a/src/skins/vector/css/molecules/voip/VideoView.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/RoomSettings.css b/src/skins/vector/css/molecules/RoomSettings.css
deleted file mode 100644
index dabdd55f09..0000000000
--- a/src/skins/vector/css/molecules/RoomSettings.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_RoomSettings {
-    max-height: 250px;
-    padding-top: 12px;
-}
-
-.mx_RoomSettings_settings {
-    display: table;
-    margin: 5px 0;
-}
-
-.mx_RoomSettings_settings > div {
-    display: table-row;
-}
-
-.mx_RoomSettings_settings > div > * {
-    display: table-cell;
-
-    margin: 0 10px;
-}
-
-.mx_RoomSettings input,
-.mx_RoomSettings textarea  {
-    border-radius: 3px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
-    margin-top: 6px;
-}
-
-.mx_RoomSettings_description {
-    width: 330px;
-}
-
-.mx_RoomSettings_buttons {
-    text-align: right;
-    margin-bottom: 16px;
-}
-
-.mx_RoomSettings_button {
-    display: inline;
-    border: 0px;
-    height: 36px;
-    border-radius: 36px;
-    font-weight: 400;
-    font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
-    width: auto;
-    margin: auto;
-    padding: 6px;
-    padding-left: 1em;
-    padding-right: 1em;
-}
\ No newline at end of file
diff --git a/src/skins/vector/css/organisms/UserSettings.css b/src/skins/vector/css/organisms/UserSettings.css
deleted file mode 100644
index 2b0aca3d0f..0000000000
--- a/src/skins/vector/css/organisms/UserSettings.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_UserSettings {
-    width: 960px;
-    margin-left: auto;
-    margin-right: auto;
-}
diff --git a/src/skins/vector/css/pages/CompatibilityPage.css b/src/skins/vector/css/vector-web/structures/CompatibilityPage.css
similarity index 100%
rename from src/skins/vector/css/pages/CompatibilityPage.css
rename to src/skins/vector/css/vector-web/structures/CompatibilityPage.css
diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
similarity index 95%
rename from src/skins/vector/css/organisms/LeftPanel.css
rename to src/skins/vector/css/vector-web/structures/LeftPanel.css
index 7451d1677f..68f689b6af 100644
--- a/src/skins/vector/css/organisms/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -61,7 +61,7 @@ limitations under the License.
     -webkit-flex: 0 0 140px;
     flex: 0 0 140px;
 
-    background-color: rgba(118,207,166,0.19);
+    background-color: rgba(118,207,166,0.2);
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
diff --git a/src/skins/vector/css/organisms/RightPanel.css b/src/skins/vector/css/vector-web/structures/RightPanel.css
similarity index 95%
rename from src/skins/vector/css/organisms/RightPanel.css
rename to src/skins/vector/css/vector-web/structures/RightPanel.css
index 645a626314..12e101a37a 100644
--- a/src/skins/vector/css/organisms/RightPanel.css
+++ b/src/skins/vector/css/vector-web/structures/RightPanel.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -55,6 +55,10 @@ limitations under the License.
     position: relative;
 }
 
+.mx_RightPanel_headerButton object {
+    pointer-events: none;
+}
+
 .mx_RightPanel_headerButton_highlight {
     position: absolute;
     bottom: -2px;
diff --git a/src/skins/vector/css/organisms/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/RoomDirectory.css
similarity index 98%
rename from src/skins/vector/css/organisms/RoomDirectory.css
rename to src/skins/vector/css/vector-web/structures/RoomDirectory.css
index 61fcfa6e3b..0be475480a 100644
--- a/src/skins/vector/css/organisms/RoomDirectory.css
+++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/organisms/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
similarity index 93%
rename from src/skins/vector/css/organisms/RoomSubList.css
rename to src/skins/vector/css/vector-web/structures/RoomSubList.css
index 46bcc64a1a..d385397beb 100644
--- a/src/skins/vector/css/organisms/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,6 +33,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     padding-left: 5px;
+    pointer-events: none;
 }
 
 .collapsed .mx_RoomSubList_chevron  {
diff --git a/src/skins/vector/css/organisms/ViewSource.css b/src/skins/vector/css/vector-web/structures/ViewSource.css
similarity index 94%
rename from src/skins/vector/css/organisms/ViewSource.css
rename to src/skins/vector/css/vector-web/structures/ViewSource.css
index f932c9a468..c4017e455b 100644
--- a/src/skins/vector/css/organisms/ViewSource.css
+++ b/src/skins/vector/css/vector-web/structures/ViewSource.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/atoms/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css
similarity index 92%
rename from src/skins/vector/css/atoms/ImageView.css
rename to src/skins/vector/css/vector-web/views/elements/ImageView.css
index 9dd34f804e..79d0b1af4f 100644
--- a/src/skins/vector/css/atoms/ImageView.css
+++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -60,9 +60,10 @@ limitations under the License.
     max-width: 100%;
     /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
     max-height: 100%;
-    /* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */
+    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
     /* background-image: url('img/trans.png'); */
+    pointer-events: all;
 }
 
 .mx_ImageView_labelWrapper {
@@ -70,6 +71,7 @@ limitations under the License.
     top: 0px;
     height: 100%;
     overflow: auto;
+    pointer-events: all;
 }
 
 .mx_ImageView_label {
@@ -86,20 +88,25 @@ limitations under the License.
     color: #fff;
 }
 
+.mx_ImageView_cancel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 35px;
+    cursor: pointer;
+}
+
 .mx_ImageView_name {
     font-size: 18px;
     margin-bottom: 6px;
-    pointer-events: all;
 }
 
 .mx_ImageView_metadata {
     font-size: 15px;
     opacity: 0.5;
-    pointer-events: all;
 }
 
 .mx_ImageView_download {
-    pointer-events: all;
     display: table;
     margin-top: 24px;
     margin-bottom: 6px;
@@ -120,7 +127,6 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    pointer-events: all;
     font-size: 15px;
     opacity: 0.5;
     margin-top: 18px;
diff --git a/src/skins/vector/css/atoms/Spinner.css b/src/skins/vector/css/vector-web/views/elements/Spinner.css
similarity index 95%
rename from src/skins/vector/css/atoms/Spinner.css
rename to src/skins/vector/css/vector-web/views/elements/Spinner.css
index b2a04607fc..3831cc4c1c 100644
--- a/src/skins/vector/css/atoms/Spinner.css
+++ b/src/skins/vector/css/vector-web/views/elements/Spinner.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
similarity index 97%
rename from src/skins/vector/css/molecules/MatrixToolbar.css
rename to src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
index b545b1ad3a..b5e910210e 100644
--- a/src/skins/vector/css/molecules/MatrixToolbar.css
+++ b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/atoms/MessageTimestamp.css b/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
similarity index 93%
rename from src/skins/vector/css/atoms/MessageTimestamp.css
rename to src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
index b3c6850949..e21189c59e 100644
--- a/src/skins/vector/css/atoms/MessageTimestamp.css
+++ b/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/SenderProfile.css b/src/skins/vector/css/vector-web/views/messages/SenderProfile.css
similarity index 93%
rename from src/skins/vector/css/molecules/SenderProfile.css
rename to src/skins/vector/css/vector-web/views/messages/SenderProfile.css
index fd88ee27f7..060709b82e 100644
--- a/src/skins/vector/css/molecules/SenderProfile.css
+++ b/src/skins/vector/css/vector-web/views/messages/SenderProfile.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
similarity index 97%
rename from src/skins/vector/css/molecules/RoomDropTarget.css
rename to src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
index 2e655c7376..7ad5e89334 100644
--- a/src/skins/vector/css/molecules/RoomDropTarget.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
similarity index 95%
rename from src/skins/vector/css/molecules/RoomTooltip.css
rename to src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
index 4e831d48c1..3aec0fa7f6 100644
--- a/src/skins/vector/css/molecules/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/molecules/SearchBar.css b/src/skins/vector/css/vector-web/views/rooms/SearchBar.css
similarity index 98%
rename from src/skins/vector/css/molecules/SearchBar.css
rename to src/skins/vector/css/vector-web/views/rooms/SearchBar.css
index 27096b0ecc..54e9d526cf 100644
--- a/src/skins/vector/css/molecules/SearchBar.css
+++ b/src/skins/vector/css/vector-web/views/rooms/SearchBar.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/src/skins/vector/css/vector-web/views/settings/Notifications.css b/src/skins/vector/css/vector-web/views/settings/Notifications.css
new file mode 100644
index 0000000000..f0446e43b9
--- /dev/null
+++ b/src/skins/vector/css/vector-web/views/settings/Notifications.css
@@ -0,0 +1,62 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserNotifSettings_tableRow
+{
+    display: table-row;
+}
+
+.mx_UserNotifSettings_inputCell {
+    display: table-cell;
+    padding-bottom: 21px;
+    padding-right: 8px;
+    width: 16px;
+}
+
+.mx_UserNotifSettings_labelCell
+{
+    padding-bottom: 21px;
+    width: 270px;
+    display: table-cell;
+}
+
+.mx_UserNotifSettings_pushRulesTableWrapper {
+    padding-bottom: 21px;
+}
+
+.mx_UserNotifSettings_pushRulesTable {
+    width: 100%;
+    table-layout: fixed;
+}
+
+.mx_UserNotifSettings_pushRulesTable thead {
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.mx_UserNotifSettings_pushRulesTable tbody th {
+    font-weight: 400;
+    font-size: 15px;
+}
+
+.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
+    text-align: left;
+}
+
+.mx_UserNotifSettings_keywords {
+    cursor: pointer;
+    color: #76cfa6;
+}
diff --git a/src/skins/vector/img/admin.svg b/src/skins/vector/img/admin.svg
new file mode 100644
index 0000000000..7ea7459304
--- /dev/null
+++ b/src/skins/vector/img/admin.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="17px" viewBox="-1 -1 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4.4 (395) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_owner</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_19-Room-contextual-menu-hover" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -128.000000)">
+            <g id="people_open" sketch:type="MSLayerGroup" transform="translate(966.000000, 59.000000)">
+                <g id="icons_owner" transform="translate(35.000000, 70.000000)" sketch:type="MSShapeGroup">
+                    <path d="M0.441894529,1.80537109 C2.59277353,3.03442388 4.25305977,2.17675781 5.9832796,0.805371094 C8.01666135,2.17675787 9.50756797,3.12670903 11.6293941,1.80537109 C11.6293941,7.01538067 11.9379879,12.2253912 5.9832796,12.2253906 C0.0285712975,12.2253901 0.441894531,7.01538067 0.441894529,1.80537109 Z" id="Path-2-Copy" stroke="#FFFFFF" fill="#F6A623"></path>
+                    <polygon id="Star-1" fill="#FFFFFF" points="6 8.8 3.88397309 9.91246118 4.28809827 7.55623059 2.57619654 5.88753882 4.94198655 5.54376941 6 3.4 7.05801345 5.54376941 9.42380346 5.88753882 7.71190173 7.55623059 8.11602691 9.91246118 "></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/skins/vector/img/camera.svg b/src/skins/vector/img/camera.svg
new file mode 100644
index 0000000000..6519496f78
--- /dev/null
+++ b/src/skins/vector/img/camera.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="15px" viewBox="-1 -1 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_camera</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="06a-Room-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="06_4-Room-settings-admin" sketch:type="MSArtboardGroup" transform="translate(-248.000000, -71.000000)" fill="#454545">
+            <path d="M255.5,76.25 C256.119795,76.25 256.649737,76.4700499 257.089844,76.9101562 C257.52995,77.3502626 257.75,77.8802052 257.75,78.5 C257.75,79.1197948 257.52995,79.6497374 257.089844,80.0898438 C256.649737,80.5299501 256.119795,80.75 255.5,80.75 C254.880205,80.75 254.350263,80.5299501 253.910156,80.0898438 C253.47005,79.6497374 253.25,79.1197948 253.25,78.5 C253.25,77.8802052 253.47005,77.3502626 253.910156,76.9101562 C254.350263,76.4700499 254.880205,76.25 255.5,76.25 L255.5,76.25 Z M261,73 C261.552086,73 262.023436,73.1953105 262.414062,73.5859375 C262.804689,73.9765645 263,74.4479139 263,75 L263,82 C263,82.5520861 262.804689,83.0234355 262.414062,83.4140625 C262.023436,83.8046895 261.552086,84 261,84 L250,84 C249.447914,84 248.976564,83.8046895 248.585938,83.4140625 C248.195311,83.0234355 248,82.5520861 248,82 L248,75 C248,74.4479139 248.195311,73.9765645 248.585938,73.5859375 C248.976564,73.1953105 249.447914,73 250,73 L251.75,73 L252.148438,71.9375 C252.247396,71.6822904 252.428384,71.4622405 252.691406,71.2773438 C252.954428,71.092447 253.223957,71 253.5,71 L257.5,71 C257.776043,71 258.045572,71.092447 258.308594,71.2773438 C258.571616,71.4622405 258.752604,71.6822904 258.851562,71.9375 L259.25,73 L261,73 Z M255.5,82 C256.463546,82 257.287757,81.6575555 257.972656,80.9726562 C258.657556,80.287757 259,79.4635465 259,78.5 C259,77.5364535 258.657556,76.712243 257.972656,76.0273438 C257.287757,75.3424445 256.463546,75 255.5,75 C254.536454,75 253.712243,75.3424445 253.027344,76.0273438 C252.342444,76.712243 252,77.5364535 252,78.5 C252,79.4635465 252.342444,80.287757 253.027344,80.9726562 C253.712243,81.6575555 254.536454,82 255.5,82 L255.5,82 Z" id="icon_camera" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/skins/vector/img/cancel-small.svg b/src/skins/vector/img/cancel-small.svg
new file mode 100644
index 0000000000..e4c8cafc10
--- /dev/null
+++ b/src/skins/vector/img/cancel-small.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Line + Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
+            <path d="M8,0 L0,8" id="Line" sketch:type="MSShapeGroup"></path>
+            <path d="M0,0 L8,8" id="Line" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/cancel-white.svg b/src/skins/vector/img/cancel-white.svg
new file mode 100644
index 0000000000..65e14c2fbc
--- /dev/null
+++ b/src/skins/vector/img/cancel-white.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/create-big.svg b/src/skins/vector/img/create-big.svg
new file mode 100644
index 0000000000..2450542b63
--- /dev/null
+++ b/src/skins/vector/img/create-big.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_create_room</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -653.000000)">
+            <g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
+                <g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
+                        <g id="Group-Copy-15">
+                            <g id="icons_create_room">
+                                <g id="Oval-1-Copy-7-+-Group-Copy-5-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy" fill="#454545">
+                                    <circle id="Oval-1-Copy-7" cx="12" cy="12" r="12"></circle>
+                                </g>
+                                <path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                                <path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/directory-big.svg b/src/skins/vector/img/directory-big.svg
new file mode 100644
index 0000000000..5631a2ae3e
--- /dev/null
+++ b/src/skins/vector/img/directory-big.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="26px" height="26px" viewBox="-1 -2 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_directory</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -689.000000)" fill="#454545">
+            <g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
+                <g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
+                        <g id="icons_directory" transform="translate(0.000000, 36.000000)">
+                            <path d="M8.74940618,2.46971496 C8.58491686,2.46971496 8.47565321,2.15795724 8.32719715,1.68349169 C8.11698337,1.01306413 7.80106888,0 6.69002375,0 L1.38182898,0 C0.63064133,0 0.0243467933,0.589073634 0.00118764846,1.35391924 L0,19.6264846 C0,20.3895487 0.620546318,21.0095012 1.38182898,21.0095012 L22.6187648,21.0095012 C23.3800475,21.0095012 24,20.3895487 24,19.6264846 L24,3.85213777 C24,3.08966746 23.3800475,2.46971496 22.6187648,2.46971496 L8.74940618,2.46971496 Z M23.1086698,19.5068597 C23.1086698,19.7757653 22.8889549,19.9946556 22.6187648,19.9946556 L1.38182898,19.9946556 C1.11163895,19.9946556 0.890736342,19.7757653 0.890736342,19.5068597 L0.89192399,6.49465558 L23.1086698,6.49465558 L23.1086698,19.5068597 L23.1086698,19.5068597 Z M23.1086698,5.60391924 L0.89192399,5.60391924 L0.89192399,1.36698337 C0.90023753,1.09976247 1.11579572,0.890736342 1.38182898,0.890736342 L6.69002375,0.890736342 C7.10273159,0.890736342 7.24643705,1.2131829 7.47624703,1.94893112 C7.66270784,2.54453682 7.91805226,3.36045131 8.74940618,3.36045131 L22.6187648,3.36045131 C22.8889549,3.36045131 23.1086698,3.5807601 23.1086698,3.85213777 L23.1086698,5.60391924 L23.1086698,5.60391924 Z" id="Fill-137"></path>
+                            <path d="M23.1086698,19.5068597 C23.1086698,19.7757653 22.8889549,19.9946556 22.6187648,19.9946556 L1.38182898,19.9946556 C1.11163895,19.9946556 0.890736342,19.7757653 0.890736342,19.5068597 L0.89192399,6.49465558 L23.1086698,6.49465558 L23.1086698,19.5068597 L23.1086698,19.5068597 Z" id="Path-Copy-2" fill-opacity="0.1"></path>
+                            <path d="M0.89192399,5.60391924 L0.89192399,1.36698337 C0.90023753,1.09976247 1.11579572,0.890736342 1.38182898,0.890736342 L6.69002375,0.890736342 C7.10273159,0.890736342 7.24643705,1.2131829 7.47624703,1.94893112 C7.66270784,2.54453682 7.91805226,3.36045131 8.74940618,3.36045131 L22.6187648,3.36045131 C22.8889549,3.36045131 23.1086698,3.5807601 23.1086698,3.85213777 L23.1086698,5.60391924 L0.89192399,5.60391924 Z" id="Path-Copy" fill-opacity="0.1"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/download.svg b/src/skins/vector/img/download.svg
new file mode 100644
index 0000000000..d0ea090d8a
--- /dev/null
+++ b/src/skins/vector/img/download.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="14px" viewBox="-1 -1 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 75</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_x-Chat-MAX" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -546.000000)" fill="#76CFA6">
+            <g id="Group" sketch:type="MSLayerGroup" transform="translate(243.000000, 58.000000)">
+                <g id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap" transform="translate(1.000000, 181.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-13">
+                        <path d="M45.3400426,312.526774 C45.4870048,312.526774 45.633967,312.470898 45.7464849,312.35838 C45.9699899,312.134109 45.9699899,311.771296 45.7464849,311.547026 L41.3659396,307.168011 C41.1424345,306.943741 40.7788562,306.944506 40.5545857,307.167246 L36.1686823,311.540137 C35.9444119,311.764408 35.9436465,312.127986 36.1671515,312.352256 C36.3906565,312.577292 36.7542349,312.577292 36.9785053,312.353787 L40.3915495,308.950694 L40.3930804,318.425929 C40.3930804,318.742816 40.6510296,319 40.9671515,319 C41.2848042,319 41.5412226,318.742816 41.5412226,318.425929 L41.5396917,308.965237 L44.9343656,312.35838 C45.0461182,312.470898 45.1930804,312.526774 45.3400426,312.526774 L45.3400426,312.526774 Z" id="Fill-75" transform="translate(40.957057, 313.000000) rotate(-180.000000) translate(-40.957057, -313.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/eol.svg b/src/skins/vector/img/eol.svg
index a331b3e49c..02d1946cf4 100644
--- a/src/skins/vector/img/eol.svg
+++ b/src/skins/vector/img/eol.svg
@@ -9,7 +9,7 @@
             <g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
                 <path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
                 <path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
-                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
+                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
             </g>
         </g>
     </g>
diff --git a/src/skins/vector/img/leave.svg b/src/skins/vector/img/leave.svg
index 8485607360..1acbe59313 100644
--- a/src/skins/vector/img/leave.svg
+++ b/src/skins/vector/img/leave.svg
@@ -3,24 +3,20 @@
 <svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 20 26"
 	 xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#76CFA6;}
-	.st1{fill:#76CFA6;}
-</style>
 <g id="Page-1" sketch:type="MSPage">
 	<g id="Exit-Copy-6" sketch:type="MSLayerGroup">
-		<path id="Rectangle-140_1_" sketch:type="MSShapeGroup" class="st0" d="M4.4,0.5h7.5c2.2,0,4,1.8,4,4v14c0,2.2-1.8,4-4,4H4.4
+		<path id="Rectangle-140_1_" sketch:type="MSShapeGroup" fill="none" stroke="#76CFA6" d="M4.4,0.5h7.5c2.2,0,4,1.8,4,4v14c0,2.2-1.8,4-4,4H4.4
 			c-2.2,0-4-1.8-4-4v-14C0.4,2.3,2.2,0.5,4.4,0.5z"/>
 		<g id="Rectangle-140_2_">
 			<g>
-				<path class="st1" d="M12,23H4.5C2,23,0,21,0,18.5v-14C0,2,2,0,4.5,0H12c2.5,0,4.5,2,4.5,4.5v14C16.4,21,14.4,23,12,23z M4.4,1
+				<path fill="#76CFA6" d="M12,23H4.5C2,23,0,21,0,18.5v-14C0,2,2,0,4.5,0H12c2.5,0,4.5,2,4.5,4.5v14C16.4,21,14.4,23,12,23z M4.4,1
 					C2.5,1,0.9,2.6,0.9,4.5v14c0,1.9,1.6,3.5,3.5,3.5h7.5c1.9,0,3.5-1.6,3.5-3.5v-14c0-1.9-1.6-3.5-3.5-3.5H4.4z"/>
 				<g>
-					<path class="st0" d="M3.2,20.6l8.3-1.8c1.1-0.2,2-1,2-1.7V5.7c0-0.7-0.9-1.4-2-1.7L3.2,2.2"/>
+					<path fill="none" stroke="#76CFA6" d="M3.2,20.6l8.3-1.8c1.1-0.2,2-1,2-1.7V5.7c0-0.7-0.9-1.4-2-1.7L3.2,2.2"/>
 				</g>
 			</g>
 		</g>
-		<circle id="Oval-605" sketch:type="MSShapeGroup" class="st1" cx="10.7" cy="11.1" r="1">
+		<circle id="Oval-605" sketch:type="MSShapeGroup" fill="#76CFA6" cx="10.7" cy="11.1" r="1">
 		</circle>
 	</g>
 </g>
diff --git a/src/skins/vector/img/mod.svg b/src/skins/vector/img/mod.svg
new file mode 100644
index 0000000000..847baf98f9
--- /dev/null
+++ b/src/skins/vector/img/mod.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="17px" viewBox="-1 -1 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4.4 (395) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_admin</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_19-Room-contextual-menu-hover" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -172.000000)" stroke="#FFFFFF" fill="#C2C5AF">
+            <g id="people_open" sketch:type="MSLayerGroup" transform="translate(966.000000, 59.000000)">
+                <g id="icons_admin" transform="translate(35.000000, 114.000000)" sketch:type="MSShapeGroup">
+                    <path d="M0.441894529,1.80537109 C2.59277353,3.03442388 4.25305977,2.17675781 5.9832796,0.805371094 C8.01666135,2.17675787 9.50756797,3.12670903 11.6293941,1.80537109 C11.6293941,7.01538067 11.9379879,12.2253912 5.9832796,12.2253906 C0.0285712975,12.2253901 0.441894531,7.01538067 0.441894529,1.80537109 Z" id="Path-2-Copy-2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/skins/vector/img/plus.svg b/src/skins/vector/img/plus.svg
new file mode 100644
index 0000000000..e1d59ec6f4
--- /dev/null
+++ b/src/skins/vector/img/plus.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Line + Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
+            <path d="M4,0.228763834 L4,7.77123617" id="Line" sketch:type="MSShapeGroup"></path>
+            <path d="M0.228763834,4 L7.77123617,4" id="Line" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/skins/vector/img/settings-big.svg b/src/skins/vector/img/settings-big.svg
new file mode 100644
index 0000000000..c9587d58c2
--- /dev/null
+++ b/src/skins/vector/img/settings-big.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_settings</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -720.000000)" fill="#454545" opacity="0.9">
+            <g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
+                <g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
+                        <path d="M16,79 C16,77.8958278 15.6093789,76.9531289 14.828125,76.171875 C14.0468711,75.3906211 13.1041722,75 12,75 C10.8958278,75 9.95312891,75.3906211 9.171875,76.171875 C8.39062109,76.9531289 8,77.8958278 8,79 C8,80.1041722 8.39062109,81.0468711 9.171875,81.828125 C9.95312891,82.6093789 10.8958278,83 12,83 C13.1041722,83 14.0468711,82.6093789 14.828125,81.828125 C15.6093789,81.0468711 16,80.1041722 16,79 L16,79 Z M24,77.296875 L24,80.765625 C24,80.8906256 23.9583338,81.0104161 23.875,81.125 C23.7916662,81.2395839 23.6875006,81.3072916 23.5625,81.328125 L20.671875,81.765625 C20.4739573,82.3281278 20.2708344,82.8020814 20.0625,83.1875 C20.4270852,83.7083359 20.9843712,84.4270787 21.734375,85.34375 C21.8385422,85.4687506 21.890625,85.5989577 21.890625,85.734375 C21.890625,85.8697923 21.8437505,85.9895828 21.75,86.09375 C21.4687486,86.4791686 20.9531288,87.041663 20.203125,87.78125 C19.4531212,88.520837 18.9635428,88.890625 18.734375,88.890625 C18.6093744,88.890625 18.4739591,88.8437505 18.328125,88.75 L16.171875,87.0625 C15.7135394,87.3020845 15.2395858,87.4999992 14.75,87.65625 C14.5833325,89.0729238 14.4322923,90.0416641 14.296875,90.5625 C14.223958,90.8541681 14.0364598,91 13.734375,91 L10.265625,91 C10.1197909,91 9.99218805,90.9557296 9.8828125,90.8671875 C9.77343695,90.7786454 9.71354172,90.6666673 9.703125,90.53125 L9.265625,87.65625 C8.75520578,87.4895825 8.28646047,87.2968761 7.859375,87.078125 L5.65625,88.75 C5.55208281,88.8437505 5.42187578,88.890625 5.265625,88.890625 C5.11979094,88.890625 4.98958391,88.8333339 4.875,88.71875 C3.56249344,87.5312441 2.70312703,86.6562528 2.296875,86.09375 C2.22395797,85.9895828 2.1875,85.8697923 2.1875,85.734375 C2.1875,85.6093744 2.22916625,85.4895839 2.3125,85.375 C2.46875078,85.1562489 2.73437313,84.8098982 3.109375,84.3359375 C3.48437688,83.8619768 3.76562406,83.494793 3.953125,83.234375 C3.67187359,82.7135391 3.45833406,82.1979192 3.3125,81.6875 L0.453125,81.265625 C0.317707656,81.2447916 0.20833375,81.179688 0.125,81.0703125 C0.04166625,80.960937 0,80.8385423 0,80.703125 L0,77.234375 C0,77.1093744 0.04166625,76.9895839 0.125,76.875 C0.20833375,76.7604161 0.307291094,76.6927084 0.421875,76.671875 L3.328125,76.234375 C3.47395906,75.7552059 3.67708203,75.2760441 3.9375,74.796875 C3.52083125,74.203122 2.96354516,73.4843792 2.265625,72.640625 C2.16145781,72.5156244 2.109375,72.3906256 2.109375,72.265625 C2.109375,72.1614578 2.15624953,72.0416673 2.25,71.90625 C2.52083469,71.5312481 3.03385039,70.9713579 3.7890625,70.2265625 C4.54427461,69.4817671 5.03645719,69.109375 5.265625,69.109375 C5.40104234,69.109375 5.53645766,69.1614578 5.671875,69.265625 L7.828125,70.9375 C8.28646063,70.6979155 8.76041422,70.5000008 9.25,70.34375 C9.4166675,68.9270762 9.56770766,67.9583359 9.703125,67.4375 C9.77604203,67.1458319 9.96354016,67 10.265625,67 L13.734375,67 C13.8802091,67 14.007812,67.0442704 14.1171875,67.1328125 C14.226563,67.2213546 14.2864583,67.3333327 14.296875,67.46875 L14.734375,70.34375 C15.2447942,70.5104175 15.7135395,70.7031239 16.140625,70.921875 L18.359375,69.25 C18.4531255,69.1562495 18.5781242,69.109375 18.734375,69.109375 C18.8697923,69.109375 18.9999994,69.1614578 19.125,69.265625 C20.4687567,70.5052145 21.3281231,71.3906223 21.703125,71.921875 C21.776042,72.0052088 21.8125,72.1197909 21.8125,72.265625 C21.8125,72.3906256 21.7708338,72.5104161 21.6875,72.625 C21.5312492,72.8437511 21.2656269,73.1901018 20.890625,73.6640625 C20.5156231,74.1380232 20.2343759,74.505207 20.046875,74.765625 C20.3177097,75.2864609 20.5312492,75.7968725 20.6875,76.296875 L23.546875,76.734375 C23.6822923,76.7552084 23.7916662,76.820312 23.875,76.9296875 C23.9583338,77.039063 24,77.1614577 24,77.296875 L24,77.296875 Z" id="icons_settings"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/tab.svg b/src/skins/vector/img/tab.svg
deleted file mode 100644
index eae92dcf32..0000000000
--- a/src/skins/vector/img/tab.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_eol</title>
-    <desc>Created with bin/sketchtool.</desc>
-    <defs></defs>
-    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="03_2-Mentions-autocomplete" sketch:type="MSArtboardGroup" transform="translate(-772.000000, -670.000000)">
-            <g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
-                <path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
-                <path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
-                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/tick.svg b/src/skins/vector/img/tick.svg
new file mode 100644
index 0000000000..6177f15f5e
--- /dev/null
+++ b/src/skins/vector/img/tick.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="14px" viewBox="-1 -1 17 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_tick</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="06a-Room-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="06_4-Room-settings-admin" sketch:type="MSArtboardGroup" transform="translate(-310.000000, -206.000000)" fill="#4A4A4A">
+            <path d="M315,218 L310,213 L312,211 L315,214 L323,206 L325,208 L315,218 Z" id="icon_tick" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/skins/vector/img/upload-original.svg b/src/skins/vector/img/upload-original.svg
deleted file mode 100644
index 962fc49d77..0000000000
--- a/src/skins/vector/img/upload-original.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_upload</title>
-    <desc>Created with bin/sketchtool.</desc>
-    <defs></defs>
-    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="02_13-Chat-member-profile" sketch:type="MSArtboardGroup" transform="translate(-873.000000, -722.000000)">
-            <g id="icons_upload" sketch:type="MSLayerGroup" transform="translate(873.000000, 722.000000)">
-                <g id="Rectangle-5-+-Rectangle-6" sketch:type="MSShapeGroup">
-                    <path d="M0,4.00955791 C0,1.79514022 1.78163126,0 3.99825563,0 L9.59161955,0 C9.59161955,0 16.3225806,6.49234232 16.3225806,6.49234232 L16.3225806,18.0063928 C16.3225806,20.2120012 14.5290874,22 12.3296282,22 L3.99295243,22 C1.7877057,22 0,20.1996477 0,17.9904421 L0,4.00955791 Z" id="Rectangle-5" stroke="#76CFA6"></path>
-                    <path d="M15.6804916,7.49527496 L11.5273266,7.49527496 C10.3308881,7.49527496 9.3609831,6.52527676 9.3609831,5.3289315 L9.3609831,1.88544393 L15.6804916,7.49527496 Z" id="Rectangle-6-Copy" fill="#FFFFFF"></path>
-                    <path d="M16.3225806,7.09677419 L11.4129801,7.09677419 C10.2050375,7.09677419 9.22580645,6.11744908 9.22580645,4.90960051 L9.22580645,0" id="Rectangle-6" stroke="#76CFA6"></path>
-                </g>
-                <path d="M12.3736951,12.709235 C12.5125582,12.709235 12.6514212,12.6596674 12.7577382,12.5598531 C12.9689258,12.3609035 12.9689258,12.0390533 12.7577382,11.8401037 L8.61860697,7.95549406 C8.40741942,7.75654446 8.06387804,7.75722347 7.85196724,7.95481505 L3.70777326,11.8339926 C3.49586247,12.0329422 3.49513923,12.3554714 3.70632677,12.554421 C3.91751432,12.7540496 4.2610557,12.7540496 4.4729665,12.555779 L7.69791605,9.53690567 L7.69936254,17.9423563 C7.69936254,18.2234659 7.94309612,18.4516129 8.24179631,18.4516129 C8.541943,18.4516129 8.78423008,18.2234659 8.78423008,17.9423563 L8.78278359,9.54980684 L11.9903753,12.5598531 C12.095969,12.6596674 12.2348321,12.709235 12.3736951,12.709235 L12.3736951,12.709235 Z" id="Fill-75" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/src/vector/index.js b/src/vector/index.js
index 3812e65407..9585f686da 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -117,6 +117,7 @@ var onNewScreen = function(screen) {
         var hash = '#/' + screen;
         lastLocationHashSet = hash;
         window.location.hash = hash;
+        if (ga) ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);
     }
 }
 
@@ -154,7 +155,8 @@ function loadApp() {
                 registrationUrl={makeRegistrationUrl()}
                 ConferenceHandler={VectorConferenceHandler}
                 config={configJson}
-                startingQueryParams={parseQsFromFragment(window.location)} />,
+                startingQueryParams={parseQsFromFragment(window.location)}
+                enableGuest={true} />,
             document.getElementById('matrixchat')
         );
     }
diff --git a/vector/img b/vector/img
index 8f1382c0ad..855fa9738f 120000
--- a/vector/img
+++ b/vector/img
@@ -1 +1 @@
-../src/skins/vector/img
\ No newline at end of file
+../src/skins/vector/img/
\ No newline at end of file
diff --git a/vector/index.html b/vector/index.html
index 777c2a9710..d0043001ea 100644
--- a/vector/index.html
+++ b/vector/index.html
@@ -25,6 +25,7 @@
   <body style="height: 100%;">
     <section id="matrixchat" style="height: 100%;"></section>
     <script src="bundle.js"></script>
+    <noscript>Sorry, Vector requires JavaScript to be enabled.</noscript>
     <link rel="stylesheet" href="bundle.css">
     <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <audio id="ringAudio" loop>
@@ -43,5 +44,19 @@
         <source src="media/busy.ogg" type="audio/ogg" />
         <source src="media/busy.mp3" type="audio/mpeg" />
     </audio>
+    <script>
+        if (window.location.host === 'www.vector.im' || window.location.host === 'vector.im') {
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', 'UA-54779209-2', 'auto');
+            ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);
+        }
+        else {
+            var ga = null;
+        }
+    </script>
   </body>
 </html>