diff --git a/src/components/CmdKMenu.tsx b/src/components/CmdKMenu.tsx
index 9f91137f..9329985d 100644
--- a/src/components/CmdKMenu.tsx
+++ b/src/components/CmdKMenu.tsx
@@ -1,26 +1,13 @@
 import { JLCPCBImportDialog } from "@/components/JLCPCBImportDialog"
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command"
 import { useAxios } from "@/hooks/use-axios"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useNotImplementedToast } from "@/hooks/use-toast"
+import { Command } from "cmdk"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
 import React from "react"
 import { useQuery } from "react-query"
 
-type SnippetType =
-  | "board"
-  | "package"
-  | "model"
-  | "footprint"
-  | "snippet"
-  | "search-result"
+type SnippetType = "board" | "package" | "model" | "footprint" | "snippet"
 
 interface Template {
   name: string
@@ -34,22 +21,7 @@ interface ImportOption {
   special?: boolean
 }
 
-interface CommandItemData {
-  label: string
-  href?: string
-  type: SnippetType
-  disabled?: boolean
-  action?: () => void
-  subtitle?: string
-  description?: string
-}
-
-interface CommandGroup {
-  group: string
-  items: CommandItemData[]
-}
-
-const CmdKMenu: React.FC = () => {
+const CmdKMenu = () => {
   const [open, setOpen] = React.useState(false)
   const [searchQuery, setSearchQuery] = React.useState("")
   const [isJLCPCBDialogOpen, setIsJLCPCBDialogOpen] = React.useState(false)
@@ -57,48 +29,48 @@ const CmdKMenu: React.FC = () => {
   const axios = useAxios()
   const currentUser = useGlobalStore((s) => s.session?.github_username)
 
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault()
-        setOpen((prev) => !prev)
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown)
-  }, [])
+  // Search results query
+  const { data: searchResults = [], isLoading: isSearching } = useQuery(
+    ["snippetSearch", searchQuery],
+    async () => {
+      if (!searchQuery) return []
+      const { data } = await axios.get("/snippets/search", {
+        params: { q: searchQuery },
+      })
+      return data.snippets || []
+    },
+    {
+      enabled: Boolean(searchQuery),
+    },
+  )
 
-  const { data: recentSnippets } = useQuery<Snippet[]>(
+  // Recent snippets query
+  const { data: recentSnippets = [] } = useQuery<Snippet[]>(
     ["userSnippets", currentUser],
     async () => {
       if (!currentUser) return []
       const response = await axios.get<{ snippets: Snippet[] }>(
         `/snippets/list?owner_name=${currentUser}`,
       )
-      return response.data.snippets
+      return response.data.snippets || []
     },
     {
-      enabled: !!currentUser,
+      enabled: !!currentUser && !searchQuery,
     },
   )
 
-  // Add search results query
-  const { data: searchResults, isLoading: isSearching } = useQuery(
-    ["snippetSearch", searchQuery],
-    async () => {
-      if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
-        params: { q: searchQuery },
-      })
-      return data.snippets
-    },
-    {
-      enabled: Boolean(searchQuery),
-    },
-  )
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault()
+        setOpen((prev) => !prev)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [])
 
-  // Templates and import options
   const blankTemplates: Template[] = [
     { name: "Blank Circuit Board", type: "board" },
     { name: "Blank Circuit Module", type: "package" },
@@ -115,134 +87,191 @@ const CmdKMenu: React.FC = () => {
     { name: "JLCPCB Component", type: "package", special: true },
   ]
 
-  // Combine regular commands with search results
-  const commands: CommandGroup[] = [
-    ...(searchResults && searchResults.length > 0
-      ? [
-          {
-            group: "Search Results",
-            items: searchResults.map((snippet: any) => ({
-              label: snippet.name,
-              href: `/editor?snippet_id=${snippet.snippet_id}`,
-              type: "search-result" as const,
-              subtitle: `By ${snippet.owner_name}`,
-              description: snippet.description,
-            })),
-          },
-        ]
-      : []),
-    {
-      group: "Recent Snippets",
-      items: (recentSnippets?.slice(0, 6) || []).map((snippet) => ({
-        label: snippet.unscoped_name,
-        href: `/editor?snippet_id=${snippet.snippet_id}`,
-        type: "snippet" as const,
-        subtitle: `Last edited: ${new Date(snippet.updated_at).toLocaleDateString()}`,
-      })),
-    },
-    {
-      group: "Start Blank Snippet",
-      items: blankTemplates.map((template) => ({
-        label: template.name,
-        href: template.disabled
-          ? undefined
-          : `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`,
-        type: template.type,
-        disabled: template.disabled,
-      })),
-    },
-    {
-      group: "Start from Template",
-      items: templates.map((template) => ({
-        label: template.name,
-        href: `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`,
-        type: template.type,
-      })),
-    },
-    {
-      group: "Import",
-      items: importOptions.map((option) => ({
-        label: `Import ${option.name}`,
-        action: option.special
-          ? () => {
-              setOpen(false)
-              setIsJLCPCBDialogOpen(true)
-            }
-          : () => {
-              setOpen(false)
-              toastNotImplemented(`${option.name} Import`)
-            },
-        type: option.type,
-      })),
-    },
-  ]
-
-  const filteredCommands = commands
-    .map((group) => ({
-      ...group,
-      items: group.items.filter((command) =>
-        command.label.toLowerCase().includes(searchQuery.toLowerCase()),
-      ),
-    }))
-    .filter((group) => group.items.length > 0)
-
   return (
     <>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput
-          placeholder="Search snippets and commands..."
-          value={searchQuery}
-          onValueChange={setSearchQuery}
-        />
-        <CommandList>
-          {isSearching && (
-            <CommandGroup heading="Search">
-              <CommandItem disabled>Searching...</CommandItem>
-            </CommandGroup>
-          )}
+      <Command.Dialog
+        open={open}
+        onOpenChange={setOpen}
+        label="Command Menu"
+        className="fixed top-32 left-1/2 -translate-x-1/2 max-w-2xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"
+      >
+        <div className="flex items-center border-b border-gray-200 dark:border-gray-700 px-3">
+          <svg
+            className="w-4 h-4 mr-2 text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <Command.Input
+            placeholder="Search snippets and commands..."
+            value={searchQuery}
+            onValueChange={setSearchQuery}
+            className="w-full h-12 bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500"
+          />
+        </div>
+
+        <Command.List className="max-h-96 overflow-y-auto p-2">
+          {isSearching ? (
+            <Command.Loading className="p-4 text-sm text-gray-500">
+              Loading results...
+            </Command.Loading>
+          ) : (
+            <>
+              {searchQuery && searchResults.length > 0 && (
+                <Command.Group
+                  heading="Search Results"
+                  className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+                >
+                  {searchResults.map((snippet: Snippet) => (
+                    <Command.Item
+                      key={snippet.snippet_id}
+                      value={snippet.name || snippet.unscoped_name}
+                      onSelect={() => {
+                        window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
+                        setOpen(false)
+                      }}
+                      className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                    >
+                      <div className="flex flex-col">
+                        <span className="text-gray-900 dark:text-gray-100">
+                          {snippet.name || snippet.unscoped_name}
+                        </span>
+                        {snippet.description && (
+                          <span className="text-sm text-gray-500">
+                            {snippet.description}
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-sm text-gray-500">snippet</span>
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              )}
 
-          {filteredCommands.length > 0 ? (
-            filteredCommands.map((group, groupIndex) => (
-              <CommandGroup key={groupIndex} heading={group.group}>
-                {group.items.map((command, itemIndex) => (
-                  <CommandItem
-                    key={itemIndex}
+              {!searchQuery && recentSnippets.length > 0 && (
+                <Command.Group
+                  heading="Recent Snippets"
+                  className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+                >
+                  {recentSnippets.slice(0, 6).map((snippet) => (
+                    <Command.Item
+                      key={snippet.snippet_id}
+                      value={snippet.unscoped_name}
+                      onSelect={() => {
+                        window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
+                        setOpen(false)
+                      }}
+                      className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                    >
+                      <div className="flex flex-col">
+                        <span className="text-gray-900 dark:text-gray-100">
+                          {snippet.unscoped_name}
+                        </span>
+                        <span className="text-sm text-gray-500">
+                          Last edited:{" "}
+                          {new Date(snippet.updated_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                      <span className="text-sm text-gray-500">snippet</span>
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              )}
+
+              <Command.Group
+                heading="Start Blank Snippet"
+                className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+              >
+                {blankTemplates.map((template) => (
+                  <Command.Item
+                    key={template.name}
+                    value={template.name}
+                    disabled={template.disabled}
                     onSelect={() => {
-                      if (command.action) {
-                        command.action()
-                      } else if (command.href && !command.disabled) {
-                        window.location.href = command.href
+                      if (!template.disabled) {
+                        window.location.href = `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`
                         setOpen(false)
                       }
                     }}
-                    disabled={command.disabled}
-                    className="flex items-center justify-between"
+                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default disabled:opacity-50"
                   >
-                    <div className="flex flex-col">
-                      <span>{command.label}</span>
-                      {command.subtitle && (
-                        <span className="text-sm text-gray-500">
-                          {command.subtitle}
-                        </span>
-                      )}
-                      {command.description && (
-                        <span className="text-sm text-gray-500">
-                          {command.description}
-                        </span>
-                      )}
-                    </div>
-                    <span className="text-sm text-gray-500 ml-2">
-                      {command.type}
+                    <span className="text-gray-900 dark:text-gray-100">
+                      {template.name}
                     </span>
-                  </CommandItem>
+                    <span className="text-sm text-gray-500">
+                      {template.type}
+                    </span>
+                  </Command.Item>
                 ))}
-              </CommandGroup>
-            ))
-          ) : (
-            <CommandEmpty>No results found.</CommandEmpty>
+              </Command.Group>
+
+              <Command.Group
+                heading="Start from Template"
+                className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+              >
+                {templates.map((template) => (
+                  <Command.Item
+                    key={template.name}
+                    value={template.name}
+                    onSelect={() => {
+                      window.location.href = `/editor?template=${template.name.toLowerCase().replace(/ /g, "-")}`
+                      setOpen(false)
+                    }}
+                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                  >
+                    <span className="text-gray-900 dark:text-gray-100">
+                      {template.name}
+                    </span>
+                    <span className="text-sm text-gray-500">
+                      {template.type}
+                    </span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+
+              <Command.Group
+                heading="Import"
+                className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
+              >
+                {importOptions.map((option) => (
+                  <Command.Item
+                    key={option.name}
+                    value={option.name}
+                    onSelect={() => {
+                      if (option.special) {
+                        setOpen(false)
+                        setIsJLCPCBDialogOpen(true)
+                      } else {
+                        setOpen(false)
+                        toastNotImplemented(`${option.name} Import`)
+                      }
+                    }}
+                    className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                  >
+                    <span className="text-gray-900 dark:text-gray-100">
+                      Import {option.name}
+                    </span>
+                    <span className="text-sm text-gray-500">{option.type}</span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+
+              {searchQuery && !searchResults.length && !isSearching && (
+                <Command.Empty className="py-6 text-center text-sm text-gray-500">
+                  No results found.
+                </Command.Empty>
+              )}
+            </>
           )}
-        </CommandList>
-      </CommandDialog>
+        </Command.List>
+      </Command.Dialog>
 
       <JLCPCBImportDialog
         open={isJLCPCBDialogOpen}