diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index aa56c23866..677fa34c6f 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_FilePanel {
     order: 2;
     flex: 1 1 0;
-    background-color: $secondary-accent-color;
     overflow-y: auto;
 }
 
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index fc1622aa4d..1fe7a42678 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -46,7 +46,6 @@ limitations under the License.
 }
 
 .mx_LeftPanel {
-    background-color: $secondary-accent-color;
     flex: 1;
     overflow-x: hidden;
     display: flex;
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index 6fd1f1690d..b171aa3e36 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_NotificationPanel {
     order: 2;
     flex: 1 1 0;
-    background-color: $secondary-accent-color;
     overflow-y: auto;
 }
 
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 2223d8eee8..142a43af95 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -37,7 +37,6 @@ limitations under the License.
 .mx_RoomSubList_label {
     flex: 1;
     cursor: pointer;
-    background-color: $secondary-accent-color;
     display: flex;
     align-items: center;
     padding: 0 6px;
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index ab029874b4..a027c575dd 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_MemberInfo {
-    background-color: $secondary-accent-color;
     display: flex;
     flex-direction: column;
     flex: 1;
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss
index cb0a541e23..e21bc22f2e 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_MemberList,
 .mx_GroupMemberList,
 .mx_GroupRoomList {
-    background-color: $secondary-accent-color;
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -40,20 +39,6 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
-.mx_MemberList form,
-.mx_GroupMemberList form,
-.mx_GroupRoomList form {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.mx_MemberList form > *,
-.mx_GroupMemberList form > *,
-.mx_GroupRoomList form > * {
-    margin: 9px;
-}
-
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
@@ -75,28 +60,24 @@ limitations under the License.
     padding: 10px;
 }
 
-.mx_MemberList_inviteIcon object {
-    pointer-events: none;
-}
-
-.mx_MemberList_inviteIcon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-}
-
 
 .mx_MemberList_invite {
     flex: 0 0 auto;
     position: relative;
     background-color: $button-bg-color;
-    color: $button-fg-color;
     border-radius: 4px;
     padding: 8px;
-    font-weight: 600;
-}
+    margin: 9px;
+    display: flex;
 
-/* move text to left */
-.mx_MemberList_invite > :last-child {
-    margin-left: 25px;
+    span {
+        margin: 0 auto;
+        background-image: url('../../img/icon-invite-people.svg');
+        background-repeat: no-repeat;
+        background-position: center left;
+        padding-left: 25px;
+
+        font-weight: 600;
+        color: $button-fg-color;
+    }
 }
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
index 54f7d023e4..30a569d41f 100644
--- a/res/css/views/rooms/_RoomList.scss
+++ b/res/css/views/rooms/_RoomList.scss
@@ -37,7 +37,6 @@ limitations under the License.
 }
 
 .mx_RoomList_emptySubListTip_container {
-    background-color: $secondary-accent-color;
     padding-left: 18px;
     padding-right: 18px;
     padding-top: 8px;
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index 3bb6339a3c..ff54da7196 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -23,7 +23,6 @@ limitations under the License.
     margin: 0;
     padding: 0 8px 0 10px;
     position: relative;
-    background-color: $secondary-accent-color;
 }
 
 .mx_RoomTile_menuButton {
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 1fa5963ccd..0b53202240 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -180,7 +180,7 @@ $lightbox-border-color: #ffffff;
 // unused?
 $progressbar-color: #000;
 
-// form elements
+/*** form elements ***/
 
 // .mx_textinput is a container for a text input
 // + some other controls like buttons, ...
@@ -220,6 +220,11 @@ input[type=search] {
     min-width: 0;
 }
 
+/*** panels ***/
+.dark-panel {
+    background-color: $secondary-accent-color;
+}
+
 .dark-panel {
     :not(.mx_textinput) > input[type=text],
     :not(.mx_textinput) > input[type=search],
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 95261597fe..33c09e1b16 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -213,6 +213,7 @@ export default class RightPanel extends React.Component {
         const classes = classNames("mx_RightPanel", "mx_fadable", {
             "collapsed": this.props.collapsed,
             "mx_fadable_faded": this.props.disabled,
+            "dark-panel": true,
         });
 
         return (
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 156785efe8..38c679a5b5 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -163,7 +163,7 @@ export default React.createClass({
             </div> : <div />;
 
         return (
-            <div className="mx_MemberList dark-panel">
+            <div className="mx_MemberList">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true}>
                     { joined }
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index 1abf6acb94..cfd2b806d4 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -131,7 +131,7 @@ export default React.createClass({
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
-            <div className="mx_GroupRoomList dark-panel">
+            <div className="mx_GroupRoomList">
                 { inputBox }
                 <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 69e5dbb76c..92c486825c 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -429,10 +429,7 @@ module.exports = React.createClass({
             const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             inviteButton =
                 <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
-                    <div className="mx_MemberList_inviteIcon" >
-                        <TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
-                    </div>
-                    <div>{ _t('Invite to this room') }</div>
+                    <span>{ _t('Invite to this room') }</span>
                 </AccessibleButton>;
         }
 
@@ -447,18 +444,9 @@ module.exports = React.createClass({
                 />;
         }
 
-        const filterAndButtons = (
-            <form autoComplete="off">
-                <input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="search"
-                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={_t('Filter room members')} />
-                { inviteButton }
-            </form>
-        );
-
         return (
-            <div className="mx_MemberList dark-panel">
-                { filterAndButtons }
+            <div className="mx_MemberList">
+                { inviteButton }
                 <GeminiScrollbarWrapper autoshow={true}>
                     <div className="mx_MemberList_wrapper">
                         <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
@@ -469,6 +457,9 @@ module.exports = React.createClass({
                         { invitedSection }
                     </div>
                 </GeminiScrollbarWrapper>
+                <input className="mx_MemberList_query mx_textinput_icon mx_textinput_search" id="mx_MemberList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter room members')} />
             </div>
         );
     },