diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx
index e19ef8b10..7aab90e5b 100644
--- a/src/components/CommandMenu/CommandMenu.tsx
+++ b/src/components/CommandMenu/CommandMenu.tsx
@@ -25,10 +25,12 @@ export function CommandMenu() {
           <input
             type="text"
             value={searchedText}
-            class={
-              'w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-0'
-            }
+            className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-0"
             placeholder="Search anywhere .."
+            onInput={(e) => {
+              const value = (e.target as HTMLInputElement).value.trim();
+              setSearchedText(value);
+            }}
             onKeyDown={(e) => {
               if (e.key === 'ArrowDown') {
                 const canGoNext = activeCounter < pages.length - 1;
@@ -54,9 +56,12 @@ export function CommandMenu() {
                   onMouseOver={() => setActiveCounter(counter)}
                   href={page.href}
                 >
-
-                  {searchedText && <span class='text-gray-400 mr-2'>{ page.group }</span> }
-                  {!searchedText && <span class='text-gray-400 mr-2'>ICON</span> }
+                  {searchedText && (
+                    <span class="mr-2 text-gray-400">{page.group}</span>
+                  )}
+                  {!searchedText && (
+                    <span class="mr-2 text-gray-400">ICON</span>
+                  )}
                   {page.title}
                 </a>
               ))}
diff --git a/src/pages/pages.json.astro b/src/pages/pages.json.astro
index f48bf15d6..d467d09b8 100644
--- a/src/pages/pages.json.astro
+++ b/src/pages/pages.json.astro
@@ -9,24 +9,28 @@ const videos = await getAllVideos();
 const roadmaps = await getRoadmapsByTag('roadmap');
 const bestPractices = await getAllBestPractices();
 
-const formattedData = {
-  Roadmaps: roadmaps.map((roadmap) => ({
+const formattedData = [
+  ...roadmaps.map((roadmap) => ({
     url: `/${roadmap.id}`,
     title: roadmap.frontmatter.briefTitle,
+    group: 'Roadmaps',
   })),
-  'Best Practices': bestPractices.map((bestPractice) => ({
+  ...bestPractices.map((bestPractice) => ({
     url: `/${bestPractice.id}`,
     title: bestPractice.frontmatter.briefTitle,
+    group: 'Best Practices',
   })),
-  Guides: guides.map((guide) => ({
+  ...guides.map((guide) => ({
     url: `/${guide.id}`,
     title: guide.frontmatter.title,
+    group: 'Guides',
   })),
-  Videos: videos.map((guide) => ({
+  ...videos.map((guide) => ({
     url: `/${guide.id}`,
     title: guide.frontmatter.title,
+    group: 'Videos',
   })),
-};
+];
 ---
 
 {JSON.stringify(formattedData)}