diff --git a/frontend_tests/node_tests/compose_video.js b/frontend_tests/node_tests/compose_video.js
index 55a58727db..19d228aeb9 100644
--- a/frontend_tests/node_tests/compose_video.js
+++ b/frontend_tests/node_tests/compose_video.js
@@ -2,7 +2,7 @@
 
 const {strict: assert} = require("assert");
 
-const {mock_esm, zrequire} = require("../zjsunit/namespace");
+const {mock_esm, zrequire, set_global} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
 const $ = require("../zjsunit/zjquery");
 const {page_params} = require("../zjsunit/zpage_params");
@@ -17,6 +17,7 @@ mock_esm("../../static/js/giphy", {
 mock_esm("../../static/js/resize", {
     watch_manual_resize() {},
 });
+set_global("navigator", {});
 
 const server_events_dispatch = zrequire("server_events_dispatch");
 const compose_ui = zrequire("compose_ui");
diff --git a/static/js/compose.js b/static/js/compose.js
index d067739504..2ea9da68d2 100644
--- a/static/js/compose.js
+++ b/static/js/compose.js
@@ -5,6 +5,7 @@ import render_compose from "../templates/compose.hbs";
 
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
+import * as common from "./common";
 import * as compose_actions from "./compose_actions";
 import * as compose_error from "./compose_error";
 import * as compose_fade from "./compose_fade";
@@ -396,6 +397,7 @@ export function render_compose_box() {
         }),
     );
     $(`.enter_sends_${user_settings.enter_sends}`).show();
+    common.adjust_mac_shortcuts(".enter_sends kbd");
 }
 
 export function initialize() {
diff --git a/static/styles/app_components.css b/static/styles/app_components.css
index 9e7862b6dd..62a20c04a9 100644
--- a/static/styles/app_components.css
+++ b/static/styles/app_components.css
@@ -13,6 +13,21 @@
     display: none;
 }
 
+kbd {
+    display: inline-block;
+    border: 1px solid hsl(0, 0%, 80%);
+    border-radius: 4px;
+    font-weight: 600;
+    white-space: nowrap;
+    background-color: hsl(0, 0%, 98%);
+    color: hsl(0, 0%, 20%);
+    margin: 0.25em 0.1em;
+    padding: 0.1em 0.4em;
+    text-shadow: 0 1px 0 hsl(0, 0%, 100%);
+    /* Prevent selection */
+    user-select: none;
+}
+
 @media (width < $sm_min) {
     .hide-sm {
         display: none !important;
diff --git a/static/styles/compose.css b/static/styles/compose.css
index 2f8afd3a73..14420185ce 100644
--- a/static/styles/compose.css
+++ b/static/styles/compose.css
@@ -451,6 +451,11 @@ input.recipient_box {
     height: 14px;
     padding-left: 4px;
     opacity: 0.7;
+    margin-bottom: 5px;
+
+    kbd {
+        height: 16px;
+    }
 
     &:hover {
         opacity: 1;
diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index e175c404c1..3692d5b9e4 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -27,6 +27,14 @@ body.dark-theme {
         color: inherit;
     }
 
+    .enter_sends kbd {
+        background-color: hsl(211, 29%, 14%);
+        border-color: hsl(211, 29%, 14%);
+        box-shadow: inset 0 -1px 0 hsl(210, 5%, 34%, 0.2);
+        text-shadow: none;
+        color: hsl(236, 33%, 90%);
+    }
+
     table.table-striped thead.table-sticky-headers th {
         background-color: hsl(0, 0%, 0%);
 
diff --git a/static/styles/informational_overlays.css b/static/styles/informational_overlays.css
index f4e5a941c5..061612b9d0 100644
--- a/static/styles/informational_overlays.css
+++ b/static/styles/informational_overlays.css
@@ -81,21 +81,6 @@
         }
     }
 
-    kbd {
-        display: inline-block;
-        border: 1px solid hsl(0, 0%, 80%);
-        border-radius: 4px;
-        font-weight: 600;
-        white-space: nowrap;
-        background-color: hsl(0, 0%, 98%);
-        color: hsl(0, 0%, 20%);
-        margin: 0.25em 0.1em;
-        padding: 0.1em 0.4em;
-        text-shadow: 0 1px 0 hsl(0, 0%, 100%);
-        /* Prevent selection */
-        user-select: none;
-    }
-
     .arrow-key {
         font-size: 1.36em;
         line-height: 1;
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index 44fd772eaf..810721ef96 100644
--- a/static/templates/compose.hbs
+++ b/static/templates/compose.hbs
@@ -107,17 +107,17 @@
                                     <div class="enter_sends">
                                         <label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
                                             <span class="enter_sends_true">
-                                                {{t 'Enter to send' }}
+                                                <kbd>Enter</kbd> {{t 'to send' }}
                                             </span>
                                             <span class="enter_sends_false">
-                                                {{t 'Ctrl + Enter to send' }}
+                                                <kbd>Ctrl</kbd> + <kbd>Enter</kbd> {{t 'to send' }}
                                             </span>
                                             <i class="fa fa-exchange" aria-hidden="true"></i>
                                             <span class="enter_sends_true">
-                                                {{t "Ctrl + Enter to add a new line" }}
+                                                <kbd>Ctrl</kbd> + <kbd>Enter</kbd> {{t 'to add a new line' }}
                                             </span>
                                             <span class="enter_sends_false">
-                                                {{t "Enter to add a new line" }}
+                                                <kbd>Enter</kbd> {{t 'to add a new line' }}
                                             </span>
                                         </label>
                                     </div>