diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index 917f82dc66..7bd5fa5cf9 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -18,20 +18,52 @@ limitations under the License.
     position: absolute;
     visibility: hidden;
     cursor: pointer;
-    top: 6px;
-    right: 6px;
+    display: flex;
+    height: 24px;
+    border-radius: 4px;
+    background: $primary-bg-color;
+    top: -13px;
+    right: 8px;
     user-select: none;
-}
 
-.mx_MessageActionBar_optionsButton {
-    display: inline-block;
-    width: 19px;
-    height: 19px;
-    background-image: url($edit-button-url);
-}
+    > * {
+        display: inline-block;
+        position: relative;
+        width: 27px;
+        border: 1px solid $message-action-bar-border-color;
+        margin-left: -1px;
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_MessageActionBar {
-        top: 3px;
+        &:hover {
+            border-color: $message-action-bar-hover-border-color;
+            z-index: 1;
+        }
+
+        &:first-child {
+            border-radius: 3px 0 0 3px;
+        }
+
+        &:last-child {
+            border-radius: 0 3px 3px 0;
+        }
+
+        &:only-child {
+            border-radius: 3px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: $primary-fg-color;
+        }
     }
 }
+
+.mx_MessageActionBar_optionsButton::after {
+    mask-image: url('$(res)/img/icon_context.svg');
+}
diff --git a/res/img/icon_context_message.svg b/res/img/icon_context_message.svg
deleted file mode 100644
index f2ceccfa78..0000000000
--- a/res/img/icon_context_message.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="icon_context">
-            <g>
-                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#ECECEC"></path>
-                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#9B9B9B"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index c433a028a3..0d3b40b64f 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -146,6 +146,9 @@ $room-warning-bg-color: $header-panel-bg-color;
 $dark-panel-bg-color: $header-panel-bg-color;
 $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
 
+$message-action-bar-border-color: $input-darker-bg-color;
+$message-action-bar-hover-border-color: $text-secondary-color;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index ca2e4cf58d..bdd5f10cc9 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -73,7 +73,7 @@ $primary-hairline-color: #e5e5e5;
 
 // used for the border of input text fields
 $input-border-color: #e7e7e7;
-$input-darker-bg-color: rgba(193, 201, 214, 0.29);
+$input-darker-bg-color: #e3e8f0;
 $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: #f2f5f8;
 $input-lighter-fg-color: $input-darker-fg-color;
@@ -153,7 +153,7 @@ $roomheader-button-color: #91A1C0;
 $groupheader-button-color: #91A1C0;
 $rightpanel-button-color: #91A1C0;
 $composer-button-color: #91A1C0;
-$roomtopic-color: #9fa9ba;
+$roomtopic-color: #9e9e9e;
 $eventtile-meta-color: $roomtopic-color;
 
 $composer-e2e-icon-color: #c9ced6;
@@ -203,7 +203,6 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "$(res)/img/icon_context_message.svg";
 $copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
@@ -255,6 +254,9 @@ $authpage-secondary-color: #61708b;
 $dark-panel-bg-color: $secondary-accent-color;
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 
+$message-action-bar-border-color: $input-darker-bg-color;
+$message-action-bar-hover-border-color: $roomtopic-color;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index c4c271e1a5..3543c41ace 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -78,10 +78,11 @@ export default class MessageActionBar extends React.PureComponent {
     }
 
     render() {
-        // TODO: Move the bar to a separate element once there are several buttons
-        return <span className="mx_MessageActionBar mx_MessageActionBar_optionsButton"
-            title={_t("Options")}
-            onClick={this.onOptionsClicked}
-        />;
+        return <div className="mx_MessageActionBar">
+            <span className="mx_MessageActionBar_optionsButton"
+                title={_t("Options")}
+                onClick={this.onOptionsClicked}
+            />
+        </div>;
     }
 }