diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts
index a322d46470a4..146d6ee95b42 100644
--- a/code/lib/theming/src/base.ts
+++ b/code/lib/theming/src/base.ts
@@ -76,10 +76,13 @@ export const typography = {
       'ui-monospace',
       'Menlo',
       'Monaco',
+      '"Cascadia Mono"',
+      '"Segoe UI Mono"', 
       '"Roboto Mono"',
       '"Oxygen Mono"',
       '"Ubuntu Monospace"',
       '"Source Code Pro"',
+      '"Fira Mono"', 
       '"Droid Sans Mono"',
       '"Courier New"',
       'monospace',
diff --git a/code/ui/manager/src/container/Menu.tsx b/code/ui/manager/src/container/Menu.tsx
index 77df6aecdd01..0821c2538fbe 100644
--- a/code/ui/manager/src/container/Menu.tsx
+++ b/code/ui/manager/src/container/Menu.tsx
@@ -27,21 +27,18 @@ const Key = styled.span(({ theme }) => ({
   padding: '0 6px',
 }));
 
-const KeyChild = styled.code(
-  ({ theme }) => `
-  padding: 0;
-  vertical-align: middle;
+const KeyChild = styled.code({
+  padding: 0,
 
-  & + & {
-    margin-left: 6px;
-  }
-`
-);
+  '& + &': {
+    marginLeft: 6,
+  },
+});
 
 export const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
   <>
     <Key>
-      {keys.map((key, index) => (
+      {keys.map((key) => (
         <KeyChild key={key}>{shortcutToHumanString([key])}</KeyChild>
       ))}
     </Key>