diff --git a/eslint.config.js b/eslint.config.js
index 75b6c4d067..6d554f0ed9 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -271,6 +271,18 @@ export default tseslint.config(
             },
         },
     },
+    {
+        files: ["help-beta/src/scripts/client/**"],
+        rules: {
+            "unicorn/prefer-module": "off",
+        },
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+            },
+            sourceType: "script",
+        },
+    },
     {
         files: ["web/shared/**"],
         languageOptions: {
diff --git a/help-beta/astro.config.mjs b/help-beta/astro.config.mjs
index cad576c23e..fb33a425d0 100644
--- a/help-beta/astro.config.mjs
+++ b/help-beta/astro.config.mjs
@@ -64,6 +64,7 @@ export default defineConfig({
             title: "Zulip help center",
             components: {
                 Footer: "./src/components/Footer.astro",
+                Head: "./src/components/Head.astro",
             },
             pagination: false,
             customCss: ["./src/styles/main.css", "./src/styles/steps.css"],
diff --git a/help-beta/src/components/Head.astro b/help-beta/src/components/Head.astro
new file mode 100644
index 0000000000..1c738a73ff
--- /dev/null
+++ b/help-beta/src/components/Head.astro
@@ -0,0 +1,6 @@
+---
+import Default from "@astrojs/starlight/components/Head.astro";
+---
+
+<script src="../scripts/client/adjust_mac_kbd_tags.ts"></script>
+<Default><slot /></Default>
diff --git a/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts b/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
new file mode 100644
index 0000000000..1749e1654f
--- /dev/null
+++ b/help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
@@ -0,0 +1,72 @@
+// Any changes to this file should be followed by a check for changes
+// needed to make to adjust_mac_kbd_tags of web/src/common.ts.
+
+const keys_map = new Map<string, string>([
+    ["Backspace", "Delete"],
+    ["Enter", "Return"],
+    ["Ctrl", "⌘"],
+    ["Alt", "⌥"],
+]);
+
+function has_mac_keyboard(): boolean {
+    "use strict";
+
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    return /mac/i.test(navigator.platform);
+}
+
+// We convert the <kbd> tags used for keyboard shortcuts to mac equivalent
+// key combinations, when we detect that the user is using a mac-style keyboard.
+function adjust_mac_kbd_tags(): void {
+    "use strict";
+
+    if (!has_mac_keyboard()) {
+        return;
+    }
+
+    const elements = document.querySelectorAll<HTMLElement>("kbd");
+
+    for (const element of elements) {
+        let key_text: string = element.textContent ?? "";
+
+        // We use data-mac-key attribute to override the default key in case
+        // of exceptions:
+        // - There are 2 shortcuts (for navigating back and forth in browser
+        //   history) which need "⌘" instead of the expected mapping ("Opt")
+        //   for the "Alt" key, so we use this attribute to override "Opt"
+        //   with "⌘".
+        // - The "Ctrl" + "[" shortcuts (which match the Vim keybinding behavior
+        //   of mapping to "Esc") need to display "Ctrl" for all users, so we
+        //   use this attribute to override "⌘" with "Ctrl".
+        const replace_key: string | undefined = element.dataset.macKey ?? keys_map.get(key_text);
+        if (replace_key !== undefined) {
+            key_text = replace_key;
+        }
+
+        element.textContent = key_text;
+
+        // In case of shortcuts, the Mac equivalent of which involves extra keys,
+        // we use data-mac-following-key attribute to append the extra key to the
+        // previous key. Currently, this is used to append Opt to Cmd for the Paste
+        // as plain text shortcut.
+        const following_key: string | undefined = element.dataset.macFollowingKey;
+        if (following_key !== undefined) {
+            const kbd_elem: HTMLElement = document.createElement("kbd");
+            kbd_elem.textContent = following_key;
+            element.after(kbd_elem);
+            element.after(" + ");
+        }
+
+        // In web/src/common.ts, we use zulip icon for ⌘ due to centering
+        // 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.
+        if (key_text === "⌘" || key_text === "⌥") {
+            element.style.fontSize = "1.5em";
+            element.style.verticalAlign = "middle";
+        }
+    }
+}
+
+adjust_mac_kbd_tags();
diff --git a/web/src/common.ts b/web/src/common.ts
index ca1bd70982..e7bb812276 100644
--- a/web/src/common.ts
+++ b/web/src/common.ts
@@ -11,6 +11,8 @@ export function phrase_match(query: string, phrase: string): boolean {
     return (" " + phrase.toLowerCase()).includes(" " + query.toLowerCase());
 }
 
+// Any changes to this function should be followed by a check for changes needed
+// to adjust_mac_kbd_tags of help-beta/src/scripts/adjust_mac_kbd_tags.ts.
 const keys_map = new Map([
     ["Backspace", "Delete"],
     ["Enter", "Return"],
@@ -18,6 +20,8 @@ const keys_map = new Map([
     ["Alt", "⌥"],
 ]);
 
+// Any changes to this function should be followed by a check for changes needed
+// to adjust_mac_kbd_tags of help-beta/src/scripts/adjust_mac_kbd_tags.ts.
 export function has_mac_keyboard(): boolean {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     return /mac/i.test(navigator.platform);
@@ -25,6 +29,8 @@ export function has_mac_keyboard(): boolean {
 
 // We convert the <kbd> tags used for keyboard shortcuts to mac equivalent
 // key combinations, when we detect that the user is using a mac-style keyboard.
+// Any changes to this function should be followed by a check for changes needed
+// to adjust_mac_kbd_tags of help-beta/src/scripts/adjust_mac_kbd_tags.ts.
 export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
     if (!has_mac_keyboard()) {
         return;