diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 3c3c5f4444..380cce50fa 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -97,16 +97,18 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
             display: flex;
             align-items: center;
 
-            .mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
-                // Cheaty way to return the occupied space to the filter input
-                flex-basis: 0;
-                margin: 0;
-                width: 0;
+            .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
+                & + .mx_LeftPanel_exploreButton {
+                    // Cheaty way to return the occupied space to the filter input
+                    flex-basis: 0;
+                    margin: 0;
+                    width: 0;
 
-                // Don't forget to hide the masked ::before icon,
-                // using display:none or visibility:hidden would break accessibility
-                &::before {
-                    content: none;
+                    // Don't forget to hide the masked ::before icon,
+                    // using display:none or visibility:hidden would break accessibility
+                    &::before {
+                        content: none;
+                    }
                 }
             }
 
diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
index 031ac37f9c..c33a3c0ff9 100644
--- a/res/css/structures/_RoomSearch.scss
+++ b/res/css/structures/_RoomSearch.scss
@@ -19,6 +19,8 @@ limitations under the License.
     flex: 1;
     border-radius: 8px;
     background-color: $roomlist-button-bg-color;
+    // keep border thickness consistent to prevent movement
+    border: 1px solid transparent;
     height: 28px;
     padding: 2px;
 
@@ -50,7 +52,18 @@ limitations under the License.
         }
     }
 
-    &.mx_RoomSearch_expanded {
+    &.mx_RoomSearch_hasQuery {
+        border-color: $secondary-fg-color;
+    }
+
+    &.mx_RoomSearch_focused {
+        box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
+        border-color: transparent;
+    }
+
+    &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
+        background-color: $roomlist-filter-active-bg-color;
+
         .mx_RoomSearch_clearButton {
             width: 16px;
             height: 16px;
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 8175e7d33d..d48abf6a4c 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -114,6 +114,7 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: $bg-color;
 $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index fe1103a529..4ab5f99942 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -111,6 +111,7 @@ $composer-e2e-icon-color: $header-panel-text-primary-color;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 
 $roomsublist-divider-color: $primary-fg-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 0aa9bd0394..6e66964fdf 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -178,6 +178,7 @@ $header-divider-color: #91a1c0;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 5a86a29248..ceb8d5677c 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -172,6 +172,7 @@ $header-divider-color: #91A1C0;
 $theme-button-bg-color: #e3e8f0;
 
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-filter-active-bg-color: #ffffff;
 $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index 69504e9ab8..f6b8d42c30 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -126,7 +126,8 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     public render(): React.ReactNode {
         const classes = classNames({
             'mx_RoomSearch': true,
-            'mx_RoomSearch_expanded': this.state.query || this.state.focused,
+            'mx_RoomSearch_hasQuery': this.state.query,
+            'mx_RoomSearch_focused': this.state.focused,
             'mx_RoomSearch_minimized': this.props.isMinimized,
         });