diff --git a/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts b/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
index 1749e1654f..b51b49e87e 100644
--- a/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
+++ b/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
@@ -61,10 +61,9 @@ function adjust_mac_kbd_tags(): void {
         // problems, we don't have that problem in the new help center and
         // thus don't do that transformation here. We do need to make these
         // symbols appear larger than they do by default since they are too
-        // small to see in the default font-size.
+        // small to see in the default font-size of 0.85em for kbd elements.
         if (key_text === "⌘" || key_text === "⌥") {
-            element.style.fontSize = "1.5em";
-            element.style.verticalAlign = "middle";
+            element.style.fontSize = "1em";
         }
     }
 }
diff --git a/help-beta/src/styles/main.css b/help-beta/src/styles/main.css
index cfbb28f4fb..2ced609551 100644
--- a/help-beta/src/styles/main.css
+++ b/help-beta/src/styles/main.css
@@ -105,4 +105,28 @@
         box-shadow: -2px 0 0 6px var(--sl-color-accent-low);
         background-color: var(--sl-color-accent-low);
     }
+
+    & kbd {
+        /* Same as kbd in app_components.css */
+        display: inline-block;
+        border: 1px solid hsl(0deg 0% 80%);
+        border-radius: 4px;
+        font-weight: 600;
+        white-space: nowrap;
+        background-color: hsl(0deg 0% 98%);
+        color: hsl(0deg 0% 20%);
+        text-shadow: 0 1px 0 hsl(0deg 0% 100%);
+        /* Different from app_components.css */
+        /* Removed margin setting */
+        font-size: 0.85em;
+        padding: 0 0.4em;
+
+        &.arrow-key {
+            /* Same as in informational_overlays.css */
+            line-height: 1;
+            padding: 0 0.2em 0.2em;
+            /* Different from informational_overlays.css */
+            font-size: 1.2em;
+        }
+    }
 }