diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 7e1d380c..ba4adf39 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,3 +1,5 @@
+<!-- Please report security issues by email to security@matrix.org -->
+
 <!-- This is a bug report template. By following the instructions below and
 filling out the sections with your information, you will help the us to get all
 the necessary data to fix your issue.
diff --git a/AUTHORS.rst b/AUTHORS.rst
index 68c61afb..a92ca066 100644
--- a/AUTHORS.rst
+++ b/AUTHORS.rst
@@ -13,3 +13,6 @@ include:
 
 * Michael Telatynski (https://github.com/t3chguy)
   Improved consistency of inverted elements in dark theme across browsers
+
+* Alexandr Korsak (https://github.com/oivoodoo)
+  Improved multiple file uploading
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d683290..d93444c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+Changes in [0.13.4](https://github.com/vector-im/riot-web/releases/tag/v0.13.4) (2018-01-03)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.3...v0.13.4)
+
+ * Change config of riot.im electron build to fix some widgets not working. This only affects
+   electron builds using the riot.im config - for all other builds, this is identical to
+   v0.13.3.
+
+Changes in [0.13.3](https://github.com/vector-im/riot-web/releases/tag/v0.13.3) (2017-12-04)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.2...v0.13.3)
+
+ * Bump js-sdk, react-sdk version to pull in fix for [setting room publicity in a group](https://github.com/matrix-org/matrix-js-sdk/commit/aa3201ebb0fff5af2fb733080aa65ed1f7213de6).
+
 Changes in [0.13.2](https://github.com/vector-im/riot-web/releases/tag/v0.13.2) (2017-11-28)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.1...v0.13.2)
diff --git a/README.md b/README.md
index 1da20632..273f448b 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,11 @@ You can configure the app by copying `config.sample.json` to
    anything else since it is used to isolate the privileges of file attachments to this
    domain. Default: `usercontent.riot.im`. This needs to contain v1.html from
    https://github.com/matrix-org/usercontent/blob/master/v1.html
+1. `piwik`: an object containing the following properties:
+    1. `url`: The URL of the Piwik instance to use for collecting Analytics
+    1. `whitelistedHSUrls`: a list of HS URLs to not redact from the Analytics
+    1. `whitelistedISUrls`: a list of IS URLs to not redact from the Analytics
+    1. `siteId`: The Piwik Site ID to use when sending Analytics to the Piwik server configured above
 
 Running as a Desktop app
 ========================
diff --git a/config.sample.json b/config.sample.json
index 016517cd..6e83cec2 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -24,6 +24,8 @@
     "welcomeUserId": "@riot-bot:matrix.org",
     "piwik": {
         "url": "https://piwik.riot.im/",
+        "whitelistedHSUrls": ["https://matrix.org"],
+        "whitelistedISUrls": ["https://vector.im", "https://matrix.org"],
         "siteId": 1
     }
 }
diff --git a/electron_app/package.json b/electron_app/package.json
index 85e7358b..b33da34f 100644
--- a/electron_app/package.json
+++ b/electron_app/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "src/electron-main.js",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "dependencies": {
diff --git a/electron_app/riot.im/config.json b/electron_app/riot.im/config.json
index 5b48cf67..5b2fe37b 100644
--- a/electron_app/riot.im/config.json
+++ b/electron_app/riot.im/config.json
@@ -5,6 +5,10 @@
     "brand": "Riot",
     "integrations_ui_url": "https://scalar.vector.im/",
     "integrations_rest_url": "https://scalar.vector.im/api",
+    "integrations_widgets_urls": [
+        "https://scalar-staging.riot.im/scalar/api",
+        "https://scalar.vector.im/api"
+    ],
     "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
     "welcomeUserId": "@riot-bot:matrix.org",
     "roomDirectory": {
diff --git a/package.json b/package.json
index e6d3e1f2..556f0c72 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,9 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron_app/src/electron-main.js",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "A feature-rich client for Matrix.org",
-  "author": "Vector Creations Ltd.",
+  "author": "New Vector Ltd.",
   "repository": {
     "type": "git",
     "url": "https://github.com/vector-im/riot-web"
@@ -68,8 +68,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.9.1",
-    "matrix-react-sdk": "0.11.2",
+    "matrix-js-sdk": "0.9.2",
+    "matrix-react-sdk": "0.11.3",
     "modernizr": "^3.1.0",
     "pako": "^1.0.5",
     "prop-types": "^15.5.10",
diff --git a/scripts/copy-res.js b/scripts/copy-res.js
index 775a9c13..701029db 100755
--- a/scripts/copy-res.js
+++ b/scripts/copy-res.js
@@ -16,7 +16,7 @@ const INCLUDE_LANGS = [
     {'value': 'el', 'label': 'Ελληνικά'},
     {'value': 'eo', 'label': 'Esperanto'},
     {'value': 'es', 'label': 'Español'},
-    {'value': 'eu', 'label': 'Euskal'},
+    {'value': 'eu', 'label': 'Euskara'},
     {'value': 'fi', 'label': 'Suomi'},
     {'value': 'fr', 'label': 'Français'},
     {'value': 'hu', 'label': 'Magyar'},
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 60f07a62..f78835b4 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -17,10 +17,8 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import classNames from 'classnames';
-import KeyCode from 'matrix-react-sdk/lib/KeyCode';
+import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
@@ -199,4 +197,4 @@ var LeftPanel = React.createClass({
     }
 });
 
-module.exports = DragDropContext(HTML5Backend)(LeftPanel);
+module.exports = LeftPanel;
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index c3f51bc8..251c6522 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -30,7 +30,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 import Modal from 'matrix-react-sdk/lib/Modal';
-import KeyCode from 'matrix-react-sdk/lib/KeyCode';
+import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 
 // turn this on for drop & drag console debugging galore
 var debug = false;
@@ -327,43 +327,46 @@ var RoomSubList = React.createClass({
     },
 
     calcManualOrderTagData: function(room) {
-        var index = this.state.sortedList.indexOf(room);
+        const index = this.state.sortedList.indexOf(room);
 
         // we sort rooms by the lexicographic ordering of the 'order' metadata on their tags.
         // for convenience, we calculate this for now a floating point number between 0.0 and 1.0.
 
-        var orderA = 0.0; // by default we're next to the beginning of the list
+        let orderA = 0.0; // by default we're next to the beginning of the list
         if (index > 0) {
-            var prevTag = this.state.sortedList[index - 1].tags[this.props.tagName];
+            const prevTag = this.state.sortedList[index - 1].tags[this.props.tagName];
             if (!prevTag) {
-                console.error("Previous room in sublist is not tagged to be in this list. This should never happen.")
-            }
-            else if (prevTag.order === undefined) {
+                console.error("Previous room in sublist is not tagged to be in this list. This should never happen.");
+            } else if (prevTag.order === undefined) {
                 console.error("Previous room in sublist has no ordering metadata. This should never happen.");
-            }
-            else {
+            } else {
                 orderA = prevTag.order;
             }
         }
 
-        var orderB = 1.0; // by default we're next to the end of the list too
+        let orderB = 1.0; // by default we're next to the end of the list too
         if (index < this.state.sortedList.length - 1) {
-            var nextTag = this.state.sortedList[index + 1].tags[this.props.tagName];
+            const nextTag = this.state.sortedList[index + 1].tags[this.props.tagName];
             if (!nextTag) {
-                console.error("Next room in sublist is not tagged to be in this list. This should never happen.")
-            }
-            else if (nextTag.order === undefined) {
+                console.error("Next room in sublist is not tagged to be in this list. This should never happen.");
+            } else if (nextTag.order === undefined) {
                 console.error("Next room in sublist has no ordering metadata. This should never happen.");
-            }
-            else {
+            } else {
                 orderB = nextTag.order;
             }
         }
 
-        var order = (orderA + orderB) / 2.0;
+        const order = (orderA + orderB) / 2.0;
+
         if (order === orderA || order === orderB) {
             console.error("Cannot describe new list position.  This should be incredibly unlikely.");
-            // TODO: renumber the list
+            this.state.sortedList.forEach((room, index) => {
+                MatrixClientPeg.get().setRoomTag(
+                    room.roomId, this.props.tagName,
+                    {order: index / this.state.sortedList.length},
+                );
+            });
+            return index / this.state.sortedList.length;
         }
 
         return order;
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 7de3958a..2d6e6ae0 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -18,7 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import KeyCode from 'matrix-react-sdk/lib/KeyCode';
+import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index d8f9a4da..ab30c342 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -16,15 +16,16 @@ limitations under the License.
 
 'use strict';
 
-const React = require('react');
+import React from 'react';
 
-const MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-const dis = require('matrix-react-sdk/lib/dispatcher');
-const sdk = require('matrix-react-sdk');
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import sdk from 'matrix-react-sdk';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-const Modal = require('matrix-react-sdk/lib/Modal');
-const Resend = require("matrix-react-sdk/lib/Resend");
+import Modal from 'matrix-react-sdk/lib/Modal';
+import Resend from "matrix-react-sdk/lib/Resend";
 import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
+import {makeEventPermalink} from 'matrix-react-sdk/lib/matrix-to';
 
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
@@ -107,15 +108,14 @@ module.exports = React.createClass({
             onFinished: (proceed) => {
                 if (!proceed) return;
 
-                MatrixClientPeg.get().redactEvent(
-                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
-                ).catch(function(e) {
+                const cli = MatrixClientPeg.get();
+                cli.redactEvent(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()).catch(function(e) {
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     // display error message stating you couldn't delete this.
                     const code = e.errcode || e.statusCode;
                     Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
                         title: _t('Error'),
-                        description: _t('You cannot delete this message. (%(code)s)', {code: code})
+                        description: _t('You cannot delete this message. (%(code)s)', {code}),
                     });
                 }).done();
             },
@@ -138,12 +138,12 @@ module.exports = React.createClass({
 
     onPinClick: function() {
         MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
-            .catch(e => {
+            .catch((e) => {
                 // Intercept the Event Not Found error and fall through the promise chain with no event.
                 if (e.errcode === "M_NOT_FOUND") return null;
                 throw e;
             })
-            .then(event => {
+            .then((event) => {
                 const eventIds = (event ? event.pinned : []) || [];
                 if (!eventIds.includes(this.props.mxEvent.getId())) {
                     // Not pinned - add
@@ -153,7 +153,8 @@ module.exports = React.createClass({
                     eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
                 }
 
-                MatrixClientPeg.get().sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+                const cli = MatrixClientPeg.get();
+                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
             });
         this.closeMenu();
     },
@@ -177,6 +178,14 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onReplyClick: function() {
+        dis.dispatch({
+            action: 'quote_event',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
     render: function() {
         const eventStatus = this.props.mxEvent.status;
         let resendButton;
@@ -184,12 +193,11 @@ module.exports = React.createClass({
         let cancelButton;
         let forwardButton;
         let pinButton;
-        let viewSourceButton;
         let viewClearSourceButton;
         let unhidePreviewButton;
-        let permalinkButton;
         let externalURLButton;
         let quoteButton;
+        let replyButton;
 
         if (eventStatus === 'not_sent') {
             resendButton = (
@@ -224,17 +232,25 @@ module.exports = React.createClass({
                     </div>
                 );
 
+                if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) {
+                    replyButton = (
+                        <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
+                            { _t('Reply') }
+                        </div>
+                    );
+                }
+
                 if (this.state.canPin) {
                     pinButton = (
                         <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                            {this._isPinned() ? _t('Unpin Message') : _t('Pin Message')}
+                            { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
                         </div>
                     );
                 }
             }
         }
 
-        viewSourceButton = (
+        const viewSourceButton = (
             <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
                 { _t('View Source') }
             </div>
@@ -259,10 +275,10 @@ module.exports = React.createClass({
         }
 
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
-        permalinkButton = (
+        const permalinkButton = (
             <div className="mx_MessageContextMenu_field">
-                <a href={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
-                  target="_blank" rel="noopener" onClick={ this.closeMenu }>{ _t('Permalink') }</a>
+                <a href={makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId())}
+                  target="_blank" rel="noopener" onClick={this.closeMenu}>{ _t('Permalink') }</a>
             </div>
         );
 
@@ -275,29 +291,30 @@ module.exports = React.createClass({
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if( typeof(this.props.mxEvent.event.content.external_url) === "string") {
-          externalURLButton = (
-              <div className="mx_MessageContextMenu_field">
-                  <a href={ this.props.mxEvent.event.content.external_url }
-                    rel="noopener" target="_blank" onClick={ this.closeMenu }>{ _t('Source URL') }</a>
-              </div>
-          );
+        if (typeof(this.props.mxEvent.event.content.external_url) === "string") {
+            externalURLButton = (
+                <div className="mx_MessageContextMenu_field">
+                    <a href={this.props.mxEvent.event.content.external_url}
+                       rel="noopener" target="_blank" onClick={this.closeMenu}>{ _t('Source URL') }</a>
+                </div>
+            );
         }
 
 
         return (
             <div>
-                {resendButton}
-                {redactButton}
-                {cancelButton}
-                {forwardButton}
-                {pinButton}
-                {viewSourceButton}
-                {viewClearSourceButton}
-                {unhidePreviewButton}
-                {permalinkButton}
-                {quoteButton}
-                {externalURLButton}
+                { resendButton }
+                { redactButton }
+                { cancelButton }
+                { forwardButton }
+                { pinButton }
+                { viewSourceButton }
+                { viewClearSourceButton }
+                { unhidePreviewButton }
+                { permalinkButton }
+                { quoteButton }
+                { replyButton }
+                { externalURLButton }
             </div>
         );
     },
diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 85ab4029..7db44da8 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -60,7 +60,7 @@ class GenericEditor extends DevtoolsComponent {
                 <label htmlFor={id}>{ label }</label>
             </div>
             <div className="mx_DevTools_inputCell">
-                <input id={id} onChange={this._onChange} value={this.state[id]} size="32" />
+                <input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" />
             </div>
         </div>;
     }
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index bdb9d17f..d1a34d02 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -20,7 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
-var DateUtils = require('matrix-react-sdk/lib/DateUtils');
+import {formatDate} from 'matrix-react-sdk/lib/DateUtils';
 var filesize = require('filesize');
 var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 const Modal = require('matrix-react-sdk/lib/Modal');
@@ -159,7 +159,7 @@ module.exports = React.createClass({
             }
 
             eventMeta = (<div className="mx_ImageView_metadata">
-                { _t('Uploaded on %(date)s by %(user)s', {date: DateUtils.formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
+                { _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
             </div>);
         }
 
diff --git a/src/components/views/messages/DateSeparator.js b/src/components/views/messages/DateSeparator.js
index 84d63dd5..2e081bc6 100644
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +16,9 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import DateUtils from 'matrix-react-sdk/lib/DateUtils';
+import {formatFullDateNoTime} from 'matrix-react-sdk/lib/DateUtils';
 
 function getdaysArray() {
 	return [
@@ -30,30 +32,30 @@ function getdaysArray() {
     ];
 }
 
-module.exports = React.createClass({
-    displayName: 'DateSeparator',
-    render: function() {
-        var date = new Date(this.props.ts);
-        var today = new Date();
-        var yesterday = new Date();
-        var days = getdaysArray();
-        yesterday.setDate(today.getDate() - 1);
-        var label;
-        if (date.toDateString() === today.toDateString()) {
-            label = _t('Today');
-        }
-        else if (date.toDateString() === yesterday.toDateString()) {
-            label = _t('Yesterday');
-        }
-        else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
-            label = days[date.getDay()];
-        }
-        else {
-            label = DateUtils.formatFullDate(date, this.props.showTwelveHour);
-        }
+export default class DateSeparator extends React.Component {
+    static propTypes = {
+        ts: PropTypes.number.isRequired,
+    };
 
-        return (
-            <h2 className="mx_DateSeparator">{ label }</h2>
-        );
+    getLabel() {
+        const date = new Date(this.props.ts);
+        const today = new Date();
+        const yesterday = new Date();
+        const days = getdaysArray();
+        yesterday.setDate(today.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return _t('Today');
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return _t('Yesterday');
+        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            return days[date.getDay()];
+        } else {
+            return formatFullDateNoTime(date);
+        }
     }
-});
+
+    render() {
+        return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
+    }
+}
diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index 3102b559..6d433067 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,24 +15,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
-import DateUtils from 'matrix-react-sdk/lib/DateUtils';
+import PropTypes from 'prop-types';
+import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils';
 
-module.exports = React.createClass({
-    displayName: 'MessageTimestamp',
+export default class MessageTimestamp extends React.Component {
+    static propTypes = {
+        ts: PropTypes.number.isRequired,
+        showTwelveHour: PropTypes.bool,
+    };
 
-    propTypes: {
-        showTwelveHour: React.PropTypes.bool,
-    },
-
-    render: function() {
+    render() {
         const date = new Date(this.props.ts);
         return (
-            <span className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date, this.props.showTwelveHour) }>
-                { DateUtils.formatTime(date, this.props.showTwelveHour) }
+            <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
+                { formatTime(date, this.props.showTwelveHour) }
             </span>
         );
-    },
-});
+    }
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index c1857e31..cdca2570 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -217,5 +217,6 @@
     "Contributing code to Matrix and Riot": "Contributing code to Matrix and Riot",
     "Dev chat for the Riot/Web dev team": "Dev chat for the Riot/Web dev team",
     "Dev chat for the Dendrite dev team": "Dev chat for the Dendrite dev team",
-    "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators"
+    "Co-ordination for Riot/Web translators": "Co-ordination for Riot/Web translators",
+    "Reply": "Reply"
 }
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 67ca0966..c2725aeb 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -11,6 +11,7 @@
 @import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
 @import "./matrix-react-sdk/structures/_RoomView.scss";
 @import "./matrix-react-sdk/structures/_SearchBox.scss";
+@import "./matrix-react-sdk/structures/_TagPanel.scss";
 @import "./matrix-react-sdk/structures/_UploadBar.scss";
 @import "./matrix-react-sdk/structures/_UserSettings.scss";
 @import "./matrix-react-sdk/structures/login/_Login.scss";
@@ -38,6 +39,7 @@
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
 @import "./matrix-react-sdk/views/elements/_RoleButton.scss";
 @import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
+@import "./matrix-react-sdk/views/elements/_Quote.scss";
 @import "./matrix-react-sdk/views/groups/_GroupPublicityToggle.scss";
 @import "./matrix-react-sdk/views/groups/_GroupRoomList.scss";
 @import "./matrix-react-sdk/views/groups/_GroupUserSettings.scss";
@@ -69,6 +71,7 @@
 @import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
 @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
 @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
 @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
 @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
 @import "./matrix-react-sdk/views/voip/_CallView.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
index 64dec826..6f08fd47 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
@@ -21,6 +21,8 @@ limitations under the License.
     padding-top: 24px;
     padding-bottom: 22px;
 
+    border-bottom: 1px solid $panel-divider-color;
+
     display: flex;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss
new file mode 100644
index 00000000..91199a11
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_TagPanel.scss
@@ -0,0 +1,79 @@
+/*
+Copyright 2017 New Vector 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_TagPanel {
+    width: 60px;
+    background-color: $tertiary-accent-color;
+    cursor: pointer;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mx_TagPanel .mx_TagPanel_tagTileContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 65px;
+
+    flex-grow: 1;
+}
+
+.mx_TagPanel .mx_TagTile {
+    padding: 6px 3px;
+    opacity: 0.5;
+}
+.mx_TagPanel .mx_TagTile:focus,
+.mx_TagPanel .mx_TagTile:hover,
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+    opacity: 1;
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
+    /* To offset border of mx_TagTile_avatar */
+    padding: 3px 0px;
+}
+
+.mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar {
+    border: 3px solid $accent-color;
+    border-radius: 60px;
+}
+
+.mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+.mx_TagTile_tooltip {
+    position: relative;
+    top: -30px;
+    left: 5px;
+}
+
+.mx_TagPanel_createGroupButton {
+    opacity: 0.5;
+    margin-bottom: 17px;
+    height: 25px;
+}
+
+.mx_TagPanel_createGroupButton:hover {
+    opacity: 1;
+}
+
+.mx_TagPanel_createGroupButton object {
+    pointer-events: none;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss
new file mode 100644
index 00000000..0af555b5
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_Quote.scss
@@ -0,0 +1,26 @@
+/*
+Copyright 2017 Vector Creations 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_Quote .mx_DateSeparator {
+    font-size: 1em !important;
+    margin-bottom: 0;
+    padding-bottom: 1px;
+    bottom: -5px;
+}
+
+.mx_Quote_show {
+    cursor: pointer;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupUserSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupUserSettings.scss
index 8083306b..0c909b7c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupUserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/groups/_GroupUserSettings.scss
@@ -19,4 +19,5 @@ limitations under the License.
     border: 1px solid $primary-hairline-color;
     border-radius: 3px;
     margin-right: 32px;
+    overflow: hidden;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
index 8376cea7..2d61ca77 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -85,6 +85,14 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    cursor: pointer;
+}
+
+.mx_AppTileMenuBarTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    pointer-events: none;
 }
 
 .mx_AppTileMenuBarWidgets {
@@ -93,6 +101,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
 }
+
 .mx_AppTileMenuBarWidget {
     // pointer-events: none;
     cursor: pointer;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 6bf3f3b6..732ada08 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -1,7 +1,7 @@
 .mx_Autocomplete {
     position: absolute;
     bottom: 0;
-    z-index: 1000;
+    z-index: 1001;
     width: 100%;
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
@@ -90,3 +90,4 @@
 .mx_Autocomplete_Completion_description {
     color: gray;
 }
+
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index cfc46e85..33edd045 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -109,7 +109,7 @@ limitations under the License.
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
-.mx_EventTile_selected .mx_EventTile_line {
+.mx_EventTile_selected > .mx_EventTile_line {
     border-left: $accent-color 5px solid;
     padding-left: 60px;
     background-color: $event-selected-color;
@@ -209,7 +209,7 @@ limitations under the License.
     visibility: visible;
 }
 
-.mx_EventTile_selected .mx_MessageTimestamp {
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
     left: 3px;
     width: auto;
 }
@@ -224,6 +224,10 @@ limitations under the License.
     width: 19px;
     height: 19px;
     background-image: url($edit-button-url);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index 4a84d161..e6b1a1f0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -98,6 +98,9 @@ limitations under the License.
     width: 100%;
     flex: 1;
     word-break: break-word;
+    max-height: 120px;
+    min-height: 21px;
+    overflow: auto;
 }
 
 .mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer {
@@ -105,12 +108,6 @@ limitations under the License.
     padding-top: 2px;
 }
 
-.mx_MessageComposer_input .public-DraftEditor-content {
-    max-height: 120px;
-    min-height: 21px;
-    overflow: auto;
-}
-
 .mx_MessageComposer_input blockquote {
     color: $blockquote-fg-color;
     margin: 0 0 16px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss
new file mode 100644
index 00000000..86fd79d4
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss
@@ -0,0 +1,36 @@
+.mx_QuotePreview {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_QuotePreview_section {
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_QuotePreview_header {
+    margin: 12px;
+    color: $primary-fg-color;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+.mx_QuotePreview_title {
+    float: left;
+}
+
+.mx_QuotePreview_cancel {
+    float: right;
+    cursor: pointer;
+}
+
+.mx_QuotePreview_clear {
+    clear: both;
+}
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 62d7af06..d5e862ae 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -40,6 +40,7 @@ $preview-bar-bg-color: #f7f7f7;
 
 // left-panel style muted accent color
 $secondary-accent-color: #eaf5f0;
+$tertiary-accent-color: #d3efe1;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -48,7 +49,7 @@ $plinth-bg-color: $secondary-accent-color;
 $droptarget-bg-color: rgba(255,255,255,0.5);
 
 // used by AddressSelector
-$selected-color: #eaf5f0;
+$selected-color: $secondary-accent-color;
 
 // selected for hoverover & selected event tiles
 $event-selected-color: #f7f7f7;
@@ -104,14 +105,14 @@ $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
 $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
 
 $roomsublist-label-fg-color: $h3-color;
-$roomsublist-label-bg-color: #d3efe1;
+$roomsublist-label-bg-color: $tertiary-accent-color;
 $roomsublist-chevron-color: $accent-color;
 
 $panel-divider-color: rgba(118, 207, 166, 0.2);
 
 // ********************
 
-$widget-menu-bar-bg-color: #d3efe1;
+$widget-menu-bar-bg-color: $tertiary-accent-color;
 
 // ********************
 
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index c140f707..60ffeca8 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -29,12 +29,13 @@ $preview-bar-bg-color: #333;
 
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;
+$tertiary-accent-color: #454545;
 
 // stop the tinter trying to change the secondary accent color
 // by overriding the key to something untintable
 // XXX: this is a bit of a hack.
 #mx_theme_secondaryAccentColor {
-    color: #c0ff33 ! important; // deliberately off by one
+    color: #c0ffee ! important;
 }
 
 #mx_theme_tertiaryAccentColor {
@@ -103,14 +104,14 @@ $roomtile-selected-bg-color: rgba(255, 255, 255, 0.05);
 $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
 
 $roomsublist-label-fg-color: $h3-color;
-$roomsublist-label-bg-color: #454545;
+$roomsublist-label-bg-color: $tertiary-accent-color;
 $roomsublist-chevron-color: $accent-color;
 
 $panel-divider-color: rgba(118, 207, 166, 0.2);
 
 // ********************
 
-$widget-menu-bar-bg-color: #454545;
+$widget-menu-bar-bg-color: $tertiary-accent-color;
 
 // ********************
 
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index 29786fad..8ae1fe15 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -44,6 +44,7 @@ limitations under the License.
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
    flex: 0 0 160px;
+   margin-bottom: 9px;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
@@ -77,6 +78,7 @@ limitations under the License.
 .mx_BottomLeftMenu_options .mx_RoleButton {
     margin-left: 0px;
     margin-right: 10px;
+    height: 30px;
 }
 
 .mx_BottomLeftMenu_options .mx_BottomLeftMenu_settings {
diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
index 1a78e517..db1fb170 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
@@ -33,14 +33,13 @@ limitations under the License.
     font-weight: 600;
     font-size: 12px;
     width: 203px; /* padding + width = LHS Panel width */
-    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
+    height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: $roomsublist-label-bg-color;
-    border-top: solid 2px $secondary-accent-color;
+    background-color: $secondary-accent-color;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
diff --git a/src/skins/vector/img/camera_green.svg b/src/skins/vector/img/camera_green.svg
new file mode 100644
index 00000000..5aae5502
--- /dev/null
+++ b/src/skins/vector/img/camera_green.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="2048px" height="1792px" viewBox="0 0 2048 1792" enable-background="new 0 0 2048 1792" xml:space="preserve">
+<path fill="#76CFA6" d="M1024,672c79.333,0,147.166,28.167,203.5,84.5c56.333,56.334,84.5,124.167,84.5,203.5
+	c0,79.334-28.167,147.167-84.5,203.5c-56.334,56.334-124.167,84.5-203.5,84.5c-79.334,0-147.167-28.166-203.5-84.5
+	C764.166,1107.167,736,1039.334,736,960c0-79.333,28.166-147.166,84.5-203.5C876.833,700.167,944.666,672,1024,672z M1728,256
+	c70.666,0,131,25,181,75s75,110.334,75,181v896c0,70.667-25,131-75,181s-110.334,75-181,75H320c-70.667,0-131-25-181-75
+	s-75-110.333-75-181V512c0-70.666,25-131,75-181s110.333-75,181-75h224l51-136c12.666-32.666,35.833-60.833,69.5-84.5
+	C698.166,11.834,732.666,0,768,0h512c35.333,0,69.833,11.834,103.5,35.5c33.666,23.667,56.833,51.834,69.5,84.5l51,136H1728z
+	 M1024,1408c123.333,0,228.833-43.833,316.5-131.5c87.666-87.666,131.5-193.166,131.5-316.5c0-123.333-43.834-228.833-131.5-316.5
+	C1252.833,555.834,1147.333,512,1024,512c-123.334,0-228.834,43.834-316.5,131.5C619.833,731.167,576,836.667,576,960
+	c0,123.334,43.833,228.834,131.5,316.5C795.166,1364.167,900.666,1408,1024,1408z"/>
+</svg>
diff --git a/src/skins/vector/img/maximize.svg b/src/skins/vector/img/maximize.svg
new file mode 100644
index 00000000..4f9e1019
--- /dev/null
+++ b/src/skins/vector/img/maximize.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1792px" height="1792px" viewBox="0 0 1792 1792" enable-background="new 0 0 1792 1792" xml:space="preserve">
+<path fill="#76CFA6" d="M256,1408h1280V640H256V1408z M1792,288v1216c0,44-15.667,81.667-47,113s-69,47-113,47H160
+	c-44,0-81.667-15.667-113-47s-47-69-47-113V288c0-44,15.667-81.667,47-113s69-47,113-47h1472c44,0,81.667,15.667,113,47
+	S1792,244,1792,288z"/>
+</svg>
diff --git a/src/skins/vector/img/minimize.svg b/src/skins/vector/img/minimize.svg
new file mode 100644
index 00000000..410b0bc0
--- /dev/null
+++ b/src/skins/vector/img/minimize.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1792px" height="1792px" viewBox="0 0 1792 1792" enable-background="new 0 0 1792 1792" xml:space="preserve">
+<path fill="#76CFA6" d="M1792,1312v192c0,44-15.667,81.667-47,113s-69,47-113,47H160c-44,0-81.667-15.667-113-47s-47-69-47-113v-192
+	c0-44,15.667-81.667,47-113s69-47,113-47h1472c44,0,81.667,15.667,113,47S1792,1268,1792,1312z"/>
+</svg>
diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss
index bd05efa0..ed60b83d 100644
--- a/src/skins/vector/themes/status/css/_status.scss
+++ b/src/skins/vector/themes/status/css/_status.scss
@@ -85,6 +85,7 @@ $preview-bar-bg-color: #f7f7f7;
 
 // left-panel style muted accent color
 $secondary-accent-color: #586C7B;
+$tertiary-accent-color: #DBEBF6;
 
 // stop the tinter trying to change the secondary accent color
 // by overriding the key to something untintable
@@ -236,7 +237,7 @@ $progressbar-color: #000;
 .mx_RoomSubList_label {
     font-size: 13px;
     font-family: $header-font-family;
-    letter-spacing: 1px;    
+    letter-spacing: 1px;
 }
 
 // FIXME: all these ! importants are horrid - we should instead go and define
diff --git a/src/vector/index.js b/src/vector/index.js
index b8291dcf..a00af4f8 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -387,6 +387,7 @@ async function loadLanguage() {
     }
     try {
         await languageHandler.setLanguage(langs);
+        document.documentElement.setAttribute("lang", languageHandler.getCurrentLanguage());
     } catch (e) {
         console.error("Unable to set language", e);
     }
diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js
index 29da3413..fc380e7d 100644
--- a/test/app-tests/joining.js
+++ b/test/app-tests/joining.js
@@ -16,6 +16,9 @@ limitations under the License.
 
 /* joining.js: tests for the various paths when joining a room */
 
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import Platform from '../../src/vector/platform';
+
 require('skin-sdk');
 
 var jssdk = require('matrix-js-sdk');
@@ -85,6 +88,8 @@ describe('joining a room', function () {
             localStorage.setItem("mx_access_token", ACCESS_TOKEN );
             localStorage.setItem("mx_user_id", USER_ID);
 
+            PlatformPeg.set(new Platform());
+
             var mc = (
                 <MatrixChat config={{}}
                     makeRegistrationUrl={()=>{throw new Error("unimplemented");}}
diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js
index a7e7c985..dab61657 100644
--- a/test/app-tests/loading.js
+++ b/test/app-tests/loading.js
@@ -16,6 +16,9 @@ limitations under the License.
 
 /* loading.js: test the myriad paths we have for loading the application */
 
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import Platform from '../../src/vector/platform';
+
 import 'skin-sdk';
 
 import React from 'react';
@@ -137,6 +140,8 @@ describe('loading:', function () {
             default_is_url: DEFAULT_IS_URL,
         }, opts.config || {});
 
+        PlatformPeg.set(new Platform());
+
         var params = parseQs(windowLocation);
         matrixChat = ReactDOM.render(
             <MatrixChat