diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index bc9638ef..2f7158cc 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -86,25 +86,3 @@
     overscroll-behavior-x: contain;
   }
 }
-
-.shortcut-key {
-  @apply inline-flex;
-  @apply font-sans;
-  @apply text-xs;
-  @apply rounded;
-  @apply px-2;
-  @apply min-w-[1.5rem];
-  @apply min-h-[1.5rem];
-  @apply leading-none;
-  @apply items-center;
-  @apply justify-center;
-  @apply shadow-sm;
-  @apply border;
-
-  background-color: rgba(0, 0, 0, 0.2);
-  border-color: rgba(255, 255, 255, 0.1);
-
-  &:not(:last-child) {
-    @apply mr-1;
-  }
-}
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index a33ba666..a48b3c21 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -56,9 +56,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => {
           <div key={index} className="flex items-center gap-1">
             <div className="flex items-center">
               {key.split("+").map((keyPart: string, partIndex: number) => (
-                <kbd key={partIndex} className="shortcut-key">
+                <ShortcutKey key={partIndex}>
                   {getKeyWithModifier(keyPart)}
-                </kbd>
+                </ShortcutKey>
               ))}
             </div>
             {index < displayKeys.length - 1 && (
@@ -119,3 +119,17 @@ export const KeyboardShortcutsHelp = () => {
     </Dialog>
   );
 };
+
+function ShortcutKey({ children }: { children: React.ReactNode }) {
+  return (
+    <kbd 
+      className="inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1"
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.2)",
+        borderColor: "rgba(255, 255, 255, 0.1)"
+      }}
+    >
+      {children}
+    </kbd>
+  );
+};