diff --git a/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
index 0362c330..6db57bbe 100644
--- a/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx
@@ -99,9 +99,7 @@ function ToolbarLeftSection() {
 	const { shortcuts } = useKeyboardShortcutsHelp();
 	const shortcutMap = Object.fromEntries(
 	shortcuts.map(s => [s.action, s])
-	);
-	console.log(shortcutMap);
-	
+	);	
 
 
 	const selectedElement =
diff --git a/apps/web/src/components/ui/kbd.tsx b/apps/web/src/components/ui/kbd.tsx
index 2f83e804..77a4052d 100644
--- a/apps/web/src/components/ui/kbd.tsx
+++ b/apps/web/src/components/ui/kbd.tsx
@@ -1,9 +1,18 @@
 "use client"
 import * as React from "react";
+import { cn } from "@/utils/ui";
+type KbdProps = {
+    children: React.ReactNode;
+    className?: string;
+}
+export const Kbd =  (
+    { 
+        children,
+        className
 
-export const Kbd =  ({ children }: { children: React.ReactNode }) => {
+    }: KbdProps) => {
   return (
-    <kbd className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono border">
+    <kbd className={cn("rounded bg-muted px-1.5 py-0.5 text-xs font-mono border", className)}>
       {children}
     </kbd>
   );