diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index aef7f6db7b..0b7be8b0ba 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -55,6 +55,7 @@
@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss";
@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/rooms/_AppsDrawer.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/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
new file mode 100644
index 0000000000..0fcabac1f4
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss
@@ -0,0 +1,159 @@
+/*
+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_AppsDrawer {
+}
+
+.mx_AppsContainer {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.mx_AddWidget_button {
+ order: 2;
+ cursor: pointer;
+ padding-right: 12px;
+ padding: 0;
+ margin: 0 0 5px 0;
+ color: $accent-color;
+ font-size: 12px;
+}
+
+.mx_SetAppURLDialog_input {
+ border-radius: 3px;
+ border: 1px solid $input-border-color;
+ padding: 9px;
+ color: $primary-hairline-color;
+ background-color: $primary-bg-color;
+ font-size: 15px;
+}
+
+.mx_AppTile {
+ width: 50%;
+ margin: 0 5px 2px 0;
+ border: 1px solid $primary-hairline-color;
+ border-radius: 2px;
+ // height: 350px;
+ // display: inline-block;
+}
+
+.mx_AppTileFullWidth {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: 1px solid $primary-hairline-color;
+ border-radius: 2px;
+ // height: 350px;
+ // display: inline-block;
+}
+
+.mx_AppTileMenuBar {
+ // height: 15px;
+ margin: 0;
+ padding: 2px 10px;
+ // background-color: $e2e-verified-color;
+ border-bottom: 1px solid $primary-hairline-color;
+ font-size: 10px;
+}
+
+.mx_AppTileMenuBarWidgets {
+ float: right;
+}
+.mx_AppTileMenuBarWidget {
+ // pointer-events: none;
+ cursor: pointer;
+}
+
+.mx_AppTileBody iframe {
+ width: 100%;
+ height: 350px;
+ overflow: hidden;
+ border: none;
+ padding: 0;
+ margin: 0;
+ display: block;
+}
+
+.mx_CloseAppWidget {
+}
+
+.mx_AppTileMenuBarWidgetPadding {
+ margin-right: 5px;
+}
+
+.mx_AppIconTile {
+ background-color: $lightbox-bg-color;
+ border: 1px solid rgba(0, 0, 0, 0);
+ width: 200px;
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
+ border-radius: 3px;
+ margin: 5px;
+ display: inline-block;
+}
+
+.mx_AppIconTile.mx_AppIconTile_active {
+ color: $accent-color;
+ border-color: $accent-color;
+}
+
+.mx_AppIconTile:hover {
+ border: 1px solid $accent-color;
+ box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
+}
+
+.mx_AppIconTile_content {
+ padding: 2px 16px;
+ height: 60px;
+ overflow: hidden;
+}
+
+.mx_AppIconTile_content h4 {
+ margin-top: 5px;
+ margin-bottom: 2px;
+}
+
+.mx_AppIconTile_content p {
+ margin-top: 0;
+ margin-bottom: 5px;
+ font-size: smaller;
+}
+
+.mx_AppIconTile_image {
+ padding: 10px;
+ width: 75%;
+ max-width:100px;
+ max-height:100px;
+ width: auto;
+ height: auto;
+}
+
+.mx_AppIconTile_imageContainer {
+ text-align: center;
+ width: 100%;
+ background-color: white;
+ border-radius: 3px 3px 0 0;
+ height: 155px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+form.mx_Custom_Widget_Form div {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
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 85c0e2c762..49111afd74 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
@@ -128,7 +128,8 @@ limitations under the License.
.mx_MessageComposer_upload,
.mx_MessageComposer_hangup,
.mx_MessageComposer_voicecall,
-.mx_MessageComposer_videocall {
+.mx_MessageComposer_videocall,
+.mx_MessageComposer_apps {
/*display: table-cell;*/
/*vertical-align: middle;*/
/*padding-left: 10px;*/
@@ -140,7 +141,8 @@ limitations under the License.
.mx_MessageComposer_upload object,
.mx_MessageComposer_hangup object,
.mx_MessageComposer_voicecall object,
-.mx_MessageComposer_videocall object {
+.mx_MessageComposer_videocall object,
+.mx_MessageComposer_apps object {
pointer-events: none;
}
diff --git a/src/skins/vector/img/edit.svg b/src/skins/vector/img/edit.svg
new file mode 100644
index 0000000000..a0be3454e1
--- /dev/null
+++ b/src/skins/vector/img/edit.svg
@@ -0,0 +1,13 @@
+
+
+
+
diff --git a/src/skins/vector/img/icons-apps-active.svg b/src/skins/vector/img/icons-apps-active.svg
new file mode 100644
index 0000000000..ea222d0511
--- /dev/null
+++ b/src/skins/vector/img/icons-apps-active.svg
@@ -0,0 +1,24 @@
+
+
+
+
diff --git a/src/skins/vector/img/icons-apps.svg b/src/skins/vector/img/icons-apps.svg
new file mode 100644
index 0000000000..affd8e6408
--- /dev/null
+++ b/src/skins/vector/img/icons-apps.svg
@@ -0,0 +1,14 @@
+
+
+
+