diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
index 9619bad3fe8..2396ea59aec 100644
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/res/css/views/rooms/_MessageComposer.scss
@@ -22,6 +22,11 @@ limitations under the License.
     position: relative;
     padding-left: 42px;
     padding-right: 16px;
+    background: $message-composer;
+    border-radius: 12px;
+    margin-bottom: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .mx_MessageComposer_replaced_wrapper {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 4edfa523545..2f60bd0d379 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -222,6 +222,7 @@ $resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
 $codeblock-background-color: #2a3039;
 $scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
 $selected-color: $room-highlight-color;
+$message-composer: #23395d;
 // ********************
 
 // blur amounts for left left panel (only for element theme)
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 89db8827a0b..5d2e5b31dfa 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -205,6 +205,11 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 // ********************
 
+// One-off colors
+// ********************
+$message-composer: #23395d;
+// ********************
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 024147cb80e..d04649bd35c 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -303,6 +303,11 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 // ********************
 
+// One-off colors
+// ********************
+$message-composer: #b2cee6;
+// ********************
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 54d3dfd15e7..8ae0859b953 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -145,3 +145,4 @@ $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
 $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
 $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
 $icon-button-color: var(--icon-button-color, $icon-button-color);
+$message-composer: var(--message-composer, $message-composer);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index e5b1382893d..75da137e82a 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -307,6 +307,7 @@ $resend-button-divider-color: $input-darker-bg-color;
 $codeblock-background-color: $header-panel-bg-color;
 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
 $selected-color: $secondary-accent-color;
+$message-composer: #b2cee6;
 // ********************
 
 // One-off global colors - these apply to both themes