diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/hooks/use-search-navigation.ts b/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/hooks/use-search-navigation.ts
new file mode 100644
index 00000000000..2249e3591ab
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/hooks/use-search-navigation.ts
@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { NavigationPosition, NavigationSection } from '../search-modal'
+
+export function useSearchNavigation(sections: NavigationSection[], open: boolean) {
+  const [position, setPosition] = useState<NavigationPosition>({ sectionIndex: 0, itemIndex: 0 })
+  const scrollRefs = useRef<Map<string, HTMLElement>>(new Map())
+  const lastItemIndex = useRef<Map<string, number>>(new Map())
+
+  useEffect(() => {
+    if (open) {
+      setPosition({ sectionIndex: 0, itemIndex: 0 })
+    }
+  }, [open, sections])
+
+  const getCurrentItem = useCallback(() => {
+    const section = sections[position.sectionIndex]
+    if (!section || position.itemIndex >= section.items.length) return null
+
+    return {
+      section,
+      item: section.items[position.itemIndex],
+      position,
+    }
+  }, [sections, position])
+
+  const navigate = useCallback(
+    (direction: 'up' | 'down' | 'left' | 'right') => {
+      setPosition((prev) => {
+        const section = sections[prev.sectionIndex]
+        if (!section) return prev
+
+        switch (direction) {
+          case 'down':
+            if (section.type === 'grid' && section.gridCols) {
+              const totalRows = section.id === 'templates' ? 1 : 2
+              const currentCol = Math.floor(prev.itemIndex / totalRows)
+              const currentRow = prev.itemIndex % totalRows
+
+              if (currentRow < totalRows - 1) {
+                const nextIndex = currentCol * totalRows + (currentRow + 1)
+                if (nextIndex < section.items.length) {
+                  return { ...prev, itemIndex: nextIndex }
+                }
+              }
+            } else if (section.type === 'list') {
+              if (prev.itemIndex < section.items.length - 1) {
+                return { ...prev, itemIndex: prev.itemIndex + 1 }
+              }
+            }
+            if (prev.sectionIndex < sections.length - 1) {
+              const nextSection = sections[prev.sectionIndex + 1]
+
+              lastItemIndex.current.set(section.id, prev.itemIndex)
+
+              const rememberedIndex = lastItemIndex.current.get(nextSection.id)
+              const targetIndex =
+                rememberedIndex !== undefined
+                  ? Math.min(rememberedIndex, nextSection.items.length - 1)
+                  : 0
+
+              return { sectionIndex: prev.sectionIndex + 1, itemIndex: targetIndex }
+            }
+            return prev
+
+          case 'up':
+            if (section.type === 'grid' && section.gridCols) {
+              const totalRows = section.id === 'templates' ? 1 : 2
+              const currentCol = Math.floor(prev.itemIndex / totalRows)
+              const currentRow = prev.itemIndex % totalRows
+
+              if (currentRow > 0) {
+                const prevIndex = currentCol * totalRows + (currentRow - 1)
+                return { ...prev, itemIndex: prevIndex }
+              }
+            } else if (section.type === 'list') {
+              if (prev.itemIndex > 0) {
+                return { ...prev, itemIndex: prev.itemIndex - 1 }
+              }
+            }
+            if (prev.sectionIndex > 0) {
+              const prevSection = sections[prev.sectionIndex - 1]
+
+              lastItemIndex.current.set(section.id, prev.itemIndex)
+
+              const rememberedIndex = lastItemIndex.current.get(prevSection.id)
+              const targetIndex =
+                rememberedIndex !== undefined
+                  ? Math.min(rememberedIndex, prevSection.items.length - 1)
+                  : prevSection.items.length - 1
+
+              return { sectionIndex: prev.sectionIndex - 1, itemIndex: targetIndex }
+            }
+            return prev
+
+          case 'right':
+            if (section.type === 'grid' && section.gridCols) {
+              const totalRows = section.id === 'templates' ? 1 : 2
+              const currentCol = Math.floor(prev.itemIndex / totalRows)
+              const currentRow = prev.itemIndex % totalRows
+              const totalCols = Math.ceil(section.items.length / totalRows)
+
+              if (currentCol < totalCols - 1) {
+                const nextIndex = (currentCol + 1) * totalRows + currentRow
+                if (nextIndex < section.items.length) {
+                  return { ...prev, itemIndex: nextIndex }
+                }
+              }
+            } else if (section.type === 'list') {
+              if (prev.itemIndex < section.items.length - 1) {
+                return { ...prev, itemIndex: prev.itemIndex + 1 }
+              }
+            }
+            return prev
+
+          case 'left':
+            if (section.type === 'grid' && section.gridCols) {
+              const totalRows = section.id === 'templates' ? 1 : 2
+              const currentCol = Math.floor(prev.itemIndex / totalRows)
+              const currentRow = prev.itemIndex % totalRows
+
+              if (currentCol > 0) {
+                const prevIndex = (currentCol - 1) * totalRows + currentRow
+                return { ...prev, itemIndex: prevIndex }
+              }
+            } else if (section.type === 'list') {
+              if (prev.itemIndex > 0) {
+                return { ...prev, itemIndex: prev.itemIndex - 1 }
+              }
+            }
+            return prev
+
+          default:
+            return prev
+        }
+      })
+    },
+    [sections]
+  )
+
+  const scrollIntoView = useCallback(() => {
+    const current = getCurrentItem()
+    if (!current) return
+
+    const container = scrollRefs.current.get(current.section.id)
+    if (!container) return
+
+    const itemSelector = `[data-nav-item="${current.section.id}-${current.position.itemIndex}"]`
+    const element = container.querySelector(itemSelector) as HTMLElement
+    if (!element) return
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center',
+    })
+  }, [getCurrentItem])
+
+  useEffect(() => {
+    if (open) {
+      const timer = setTimeout(scrollIntoView, 10)
+      return () => clearTimeout(timer)
+    }
+  }, [position, open, scrollIntoView])
+
+  return {
+    position,
+    navigate,
+    getCurrentItem,
+    scrollRefs,
+  }
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/search-modal.tsx
index 11812463695..63633e4e046 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/search-modal/search-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { BookOpen, Building2, LibraryBig, ScrollText, Search, Shapes, Workflow } from 'lucide-react'
@@ -13,8 +13,9 @@ import {
 } from '@/app/workspace/[workspaceId]/templates/components/template-card'
 import { getKeyboardShortcutText } from '@/app/workspace/[workspaceId]/w/hooks/use-keyboard-shortcuts'
 import { getAllBlocks } from '@/blocks'
+import { useSearchNavigation } from './hooks/use-search-navigation'
 
-interface SearchModalProps {
+export interface SearchModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   templates?: TemplateData[]
@@ -24,7 +25,7 @@ interface SearchModalProps {
   isOnWorkflowPage?: boolean
 }
 
-interface TemplateData {
+export interface TemplateData {
   id: string
   title: string
   description: string
@@ -39,21 +40,21 @@ interface TemplateData {
   isStarred?: boolean
 }
 
-interface WorkflowItem {
+export interface WorkflowItem {
   id: string
   name: string
   href: string
   isCurrent?: boolean
 }
 
-interface WorkspaceItem {
+export interface WorkspaceItem {
   id: string
   name: string
   href: string
   isCurrent?: boolean
 }
 
-interface BlockItem {
+export interface BlockItem {
   id: string
   name: string
   icon: React.ComponentType<any>
@@ -61,7 +62,7 @@ interface BlockItem {
   type: string
 }
 
-interface ToolItem {
+export interface ToolItem {
   id: string
   name: string
   icon: React.ComponentType<any>
@@ -69,7 +70,7 @@ interface ToolItem {
   type: string
 }
 
-interface PageItem {
+export interface PageItem {
   id: string
   name: string
   icon: React.ComponentType<any>
@@ -77,7 +78,7 @@ interface PageItem {
   shortcut?: string
 }
 
-interface DocItem {
+export interface DocItem {
   id: string
   name: string
   icon: React.ComponentType<any>
@@ -85,6 +86,19 @@ interface DocItem {
   type: 'main' | 'block' | 'tool'
 }
 
+export interface NavigationPosition {
+  sectionIndex: number
+  itemIndex: number
+}
+
+export interface NavigationSection {
+  id: string
+  name: string
+  type: 'grid' | 'list'
+  items: any[]
+  gridCols?: number // How many columns per row for grid sections
+}
+
 export function SearchModal({
   open,
   onOpenChange,
@@ -95,51 +109,16 @@ export function SearchModal({
   isOnWorkflowPage = false,
 }: SearchModalProps) {
   const [searchQuery, setSearchQuery] = useState('')
-  const [selectedIndex, setSelectedIndex] = useState(0)
   const params = useParams()
   const router = useRouter()
   const workspaceId = params.workspaceId as string
 
-  // Local state for templates to handle star changes
   const [localTemplates, setLocalTemplates] = useState<TemplateData[]>(templates)
 
-  // Update local templates when props change
   useEffect(() => {
     setLocalTemplates(templates)
   }, [templates])
 
-  // Refs for synchronized scrolling
-  const blocksRow1Ref = useRef<HTMLDivElement>(null)
-  const blocksRow2Ref = useRef<HTMLDivElement>(null)
-  const toolsRow1Ref = useRef<HTMLDivElement>(null)
-  const toolsRow2Ref = useRef<HTMLDivElement>(null)
-
-  // Synchronized scrolling functions
-  const handleBlocksRow1Scroll = useCallback(() => {
-    if (blocksRow1Ref.current && blocksRow2Ref.current) {
-      blocksRow2Ref.current.scrollLeft = blocksRow1Ref.current.scrollLeft
-    }
-  }, [])
-
-  const handleBlocksRow2Scroll = useCallback(() => {
-    if (blocksRow1Ref.current && blocksRow2Ref.current) {
-      blocksRow1Ref.current.scrollLeft = blocksRow2Ref.current.scrollLeft
-    }
-  }, [])
-
-  const handleToolsRow1Scroll = useCallback(() => {
-    if (toolsRow1Ref.current && toolsRow2Ref.current) {
-      toolsRow2Ref.current.scrollLeft = toolsRow1Ref.current.scrollLeft
-    }
-  }, [])
-
-  const handleToolsRow2Scroll = useCallback(() => {
-    if (toolsRow1Ref.current && toolsRow2Ref.current) {
-      toolsRow1Ref.current.scrollLeft = toolsRow2Ref.current.scrollLeft
-    }
-  }, [])
-
-  // Get all available blocks - only when on workflow page
   const blocks = useMemo(() => {
     if (!isOnWorkflowPage) return []
 
@@ -163,7 +142,6 @@ export function SearchModal({
       .sort((a, b) => a.name.localeCompare(b.name))
   }, [isOnWorkflowPage])
 
-  // Get all available tools - only when on workflow page
   const tools = useMemo(() => {
     if (!isOnWorkflowPage) return []
 
@@ -182,7 +160,6 @@ export function SearchModal({
       .sort((a, b) => a.name.localeCompare(b.name))
   }, [isOnWorkflowPage])
 
-  // Define pages
   const pages = useMemo(
     (): PageItem[] => [
       {
@@ -215,12 +192,10 @@ export function SearchModal({
     [workspaceId]
   )
 
-  // Define docs
   const docs = useMemo((): DocItem[] => {
     const allBlocks = getAllBlocks()
     const docsItems: DocItem[] = []
 
-    // Add individual block/tool docs
     allBlocks.forEach((block) => {
       if (block.docsLink) {
         docsItems.push({
@@ -236,7 +211,6 @@ export function SearchModal({
     return docsItems.sort((a, b) => a.name.localeCompare(b.name))
   }, [])
 
-  // Filter all items based on search query
   const filteredBlocks = useMemo(() => {
     if (!searchQuery.trim()) return blocks
     const query = searchQuery.toLowerCase()
@@ -285,71 +259,78 @@ export function SearchModal({
     return docs.filter((doc) => doc.name.toLowerCase().includes(query))
   }, [docs, searchQuery])
 
-  // Create flattened list of navigatable items for keyboard navigation
-  const navigatableItems = useMemo(() => {
-    const items: Array<{
-      type: 'workspace' | 'workflow' | 'page' | 'doc'
-      data: any
-      section: string
-    }> = []
-
-    // Add workspaces
-    filteredWorkspaces.forEach((workspace) => {
-      items.push({ type: 'workspace', data: workspace, section: 'Workspaces' })
-    })
-
-    // Add workflows
-    filteredWorkflows.forEach((workflow) => {
-      items.push({ type: 'workflow', data: workflow, section: 'Workflows' })
-    })
-
-    // Add pages
-    filteredPages.forEach((page) => {
-      items.push({ type: 'page', data: page, section: 'Pages' })
-    })
+  const navigationSections = useMemo((): NavigationSection[] => {
+    const sections: NavigationSection[] = []
 
-    // Add docs
-    filteredDocs.forEach((doc) => {
-      items.push({ type: 'doc', data: doc, section: 'Docs' })
-    })
-
-    return items
-  }, [filteredWorkspaces, filteredWorkflows, filteredPages, filteredDocs])
+    if (filteredBlocks.length > 0) {
+      sections.push({
+        id: 'blocks',
+        name: 'Blocks',
+        type: 'grid',
+        items: filteredBlocks,
+        gridCols: 4, // 4 items per row
+      })
+    }
 
-  // Reset selected index when items change or modal opens
-  useEffect(() => {
-    setSelectedIndex(0)
-  }, [navigatableItems, open])
+    if (filteredTools.length > 0) {
+      sections.push({
+        id: 'tools',
+        name: 'Tools',
+        type: 'grid',
+        items: filteredTools,
+        gridCols: 4, // 4 items per row
+      })
+    }
 
-  // Handle keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && open) {
-        onOpenChange(false)
-      }
+    if (filteredTemplates.length > 0) {
+      sections.push({
+        id: 'templates',
+        name: 'Templates',
+        type: 'grid',
+        items: filteredTemplates,
+        gridCols: 2, // 2 templates per row
+      })
     }
 
-    if (open) {
-      document.addEventListener('keydown', handleKeyDown)
-      return () => document.removeEventListener('keydown', handleKeyDown)
+    const listItems = [
+      ...filteredWorkspaces.map((item) => ({ type: 'workspace', data: item })),
+      ...filteredWorkflows.map((item) => ({ type: 'workflow', data: item })),
+      ...filteredPages.map((item) => ({ type: 'page', data: item })),
+      ...filteredDocs.map((item) => ({ type: 'doc', data: item })),
+    ]
+
+    if (listItems.length > 0) {
+      sections.push({
+        id: 'list',
+        name: 'Navigation',
+        type: 'list',
+        items: listItems,
+      })
     }
-  }, [open, onOpenChange])
 
-  // Clear search when modal closes
+    return sections
+  }, [
+    filteredBlocks,
+    filteredTools,
+    filteredTemplates,
+    filteredWorkspaces,
+    filteredWorkflows,
+    filteredPages,
+    filteredDocs,
+  ])
+
+  const { navigate, getCurrentItem, scrollRefs } = useSearchNavigation(navigationSections, open)
+
   useEffect(() => {
     if (!open) {
       setSearchQuery('')
     }
   }, [open])
 
-  // Handle block/tool click (same as toolbar interaction)
   const handleBlockClick = useCallback(
     (blockType: string) => {
-      // Dispatch a custom event to be caught by the workflow component
       const event = new CustomEvent('add-block-from-toolbar', {
-        detail: {
-          type: blockType,
-        },
+        detail: { type: blockType },
       })
       window.dispatchEvent(event)
       onOpenChange(false)
@@ -357,10 +338,8 @@ export function SearchModal({
     [onOpenChange]
   )
 
-  // Handle page navigation
   const handlePageClick = useCallback(
     (href: string) => {
-      // External links open in new tab
       if (href.startsWith('http')) {
         window.open(href, '_blank', 'noopener,noreferrer')
       } else {
@@ -371,7 +350,6 @@ export function SearchModal({
     [router, onOpenChange]
   )
 
-  // Handle workflow/workspace navigation (same as page navigation)
   const handleNavigationClick = useCallback(
     (href: string) => {
       router.push(href)
@@ -380,10 +358,8 @@ export function SearchModal({
     [router, onOpenChange]
   )
 
-  // Handle docs navigation
   const handleDocsClick = useCallback(
     (href: string) => {
-      // External links open in new tab
       if (href.startsWith('http')) {
         window.open(href, '_blank', 'noopener,noreferrer')
       } else {
@@ -394,72 +370,17 @@ export function SearchModal({
     [router, onOpenChange]
   )
 
-  // Handle page navigation shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Only handle shortcuts when modal is open
-      if (!open) return
-
-      const isMac =
-        typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0
-      const isModifierPressed = isMac ? e.metaKey : e.ctrlKey
-
-      // Check if this is one of our specific shortcuts
-      const isOurShortcut =
-        isModifierPressed &&
-        e.shiftKey &&
-        (e.key.toLowerCase() === 'l' || e.key.toLowerCase() === 'k')
-
-      // Don't trigger other shortcuts if user is typing in the search input
-      // But allow our specific shortcuts to pass through
-      if (!isOurShortcut) {
-        const activeElement = document.activeElement
-        const isEditableElement =
-          activeElement instanceof HTMLInputElement ||
-          activeElement instanceof HTMLTextAreaElement ||
-          activeElement?.hasAttribute('contenteditable')
-
-        if (isEditableElement) return
-      }
-
-      if (isModifierPressed && e.shiftKey) {
-        // Command+Shift+L - Navigate to Logs
-        if (e.key.toLowerCase() === 'l') {
-          e.preventDefault()
-          handlePageClick(`/workspace/${workspaceId}/logs`)
-        }
-        // Command+Shift+K - Navigate to Knowledge
-        else if (e.key.toLowerCase() === 'k') {
-          e.preventDefault()
-          handlePageClick(`/workspace/${workspaceId}/knowledge`)
-        }
-      }
-    }
+  const handleItemSelection = useCallback(() => {
+    const current = getCurrentItem()
+    if (!current) return
 
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [open, handlePageClick, workspaceId])
+    const { section, item } = current
 
-  // Handle template usage callback (closes modal after template is used)
-  const handleTemplateUsed = useCallback(() => {
-    onOpenChange(false)
-  }, [onOpenChange])
-
-  // Handle star change callback from template card
-  const handleStarChange = useCallback(
-    (templateId: string, isStarred: boolean, newStarCount: number) => {
-      setLocalTemplates((prevTemplates) =>
-        prevTemplates.map((template) =>
-          template.id === templateId ? { ...template, isStarred, stars: newStarCount } : template
-        )
-      )
-    },
-    []
-  )
-
-  // Handle item selection based on type
-  const handleItemSelection = useCallback(
-    (item: (typeof navigatableItems)[0]) => {
+    if (section.id === 'blocks' || section.id === 'tools') {
+      handleBlockClick(item.type)
+    } else if (section.id === 'templates') {
+      onOpenChange(false)
+    } else if (section.id === 'list') {
       switch (item.type) {
         case 'workspace':
           if (item.data.isCurrent) {
@@ -482,11 +403,16 @@ export function SearchModal({
           handleDocsClick(item.data.href)
           break
       }
-    },
-    [handleNavigationClick, handlePageClick, handleDocsClick, onOpenChange]
-  )
+    }
+  }, [
+    getCurrentItem,
+    handleBlockClick,
+    handleNavigationClick,
+    handlePageClick,
+    handleDocsClick,
+    onOpenChange,
+  ])
 
-  // Handle keyboard navigation
   useEffect(() => {
     if (!open) return
 
@@ -494,18 +420,23 @@ export function SearchModal({
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault()
-          setSelectedIndex((prev) => Math.min(prev + 1, navigatableItems.length - 1))
+          navigate('down')
           break
         case 'ArrowUp':
           e.preventDefault()
-          setSelectedIndex((prev) => Math.max(prev - 1, 0))
+          navigate('up')
+          break
+        case 'ArrowRight':
+          e.preventDefault()
+          navigate('right')
+          break
+        case 'ArrowLeft':
+          e.preventDefault()
+          navigate('left')
           break
         case 'Enter':
           e.preventDefault()
-          if (navigatableItems.length > 0 && selectedIndex < navigatableItems.length) {
-            const selectedItem = navigatableItems[selectedIndex]
-            handleItemSelection(selectedItem)
-          }
+          handleItemSelection()
           break
         case 'Escape':
           onOpenChange(false)
@@ -515,32 +446,27 @@ export function SearchModal({
 
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [open, selectedIndex, navigatableItems, onOpenChange, handleItemSelection])
+  }, [open, navigate, handleItemSelection, onOpenChange])
 
-  // Helper function to check if an item is selected
-  const isItemSelected = useCallback(
-    (item: any, itemType: string) => {
-      if (navigatableItems.length === 0 || selectedIndex >= navigatableItems.length) return false
-      const selectedItem = navigatableItems[selectedIndex]
-      return selectedItem.type === itemType && selectedItem.data.id === item.id
+  const handleStarChange = useCallback(
+    (templateId: string, isStarred: boolean, newStarCount: number) => {
+      setLocalTemplates((prevTemplates) =>
+        prevTemplates.map((template) =>
+          template.id === templateId ? { ...template, isStarred, stars: newStarCount } : template
+        )
+      )
     },
-    [navigatableItems, selectedIndex]
+    []
   )
 
-  // Scroll selected item into view
-  useEffect(() => {
-    if (selectedIndex >= 0 && navigatableItems.length > 0) {
-      const selectedItem = navigatableItems[selectedIndex]
-      const itemElement = document.querySelector(
-        `[data-search-item="${selectedItem.type}-${selectedItem.data.id}"]`
-      )
-      if (itemElement) {
-        itemElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
-      }
-    }
-  }, [selectedIndex, navigatableItems])
+  const isItemSelected = useCallback(
+    (sectionId: string, itemIndex: number) => {
+      const current = getCurrentItem()
+      return current?.section.id === sectionId && current.position.itemIndex === itemIndex
+    },
+    [getCurrentItem]
+  )
 
-  // Render skeleton cards for loading state
   const renderSkeletonCards = () => {
     return Array.from({ length: 8 }).map((_, index) => (
       <div key={`skeleton-${index}`} className='w-80 flex-shrink-0'>
@@ -560,6 +486,7 @@ export function SearchModal({
           <VisuallyHidden.Root>
             <DialogTitle>Search</DialogTitle>
           </VisuallyHidden.Root>
+
           {/* Header with search input */}
           <div className='flex items-center border-b px-6 py-2'>
             <Search className='h-5 w-5 font-sans text-muted-foreground text-xl' />
@@ -584,61 +511,40 @@ export function SearchModal({
                   <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
                     Blocks
                   </h3>
-                  <div className='space-y-2'>
-                    {/* First row */}
+                  <div
+                    ref={(el) => {
+                      if (el) scrollRefs.current.set('blocks', el)
+                    }}
+                    className='scrollbar-none overflow-x-auto pr-6 pb-1 pl-6'
+                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                  >
                     <div
-                      ref={blocksRow1Ref}
-                      onScroll={handleBlocksRow1Scroll}
-                      className='scrollbar-none flex gap-2 overflow-x-auto pr-6 pb-1 pl-6'
-                      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                      className='grid auto-cols-max grid-flow-col gap-2'
+                      style={{ gridTemplateRows: 'repeat(2, minmax(0, 1fr))' }}
                     >
-                      {filteredBlocks
-                        .slice(0, Math.ceil(filteredBlocks.length / 2))
-                        .map((block) => (
-                          <button
-                            key={block.id}
-                            onClick={() => handleBlockClick(block.type)}
-                            className='flex h-9 w-[153.5px] flex-shrink-0 items-center gap-3 whitespace-nowrap rounded-xl bg-secondary p-2 transition-colors hover:bg-secondary/80'
+                      {filteredBlocks.map((block, index) => (
+                        <button
+                          key={block.id}
+                          onClick={() => handleBlockClick(block.type)}
+                          data-nav-item={`blocks-${index}`}
+                          className={`flex h-9 w-[153.5px] flex-shrink-0 items-center gap-3 whitespace-nowrap rounded-xl p-2 transition-all duration-200 ${
+                            isItemSelected('blocks', index)
+                              ? 'bg-accent'
+                              : 'bg-secondary hover:bg-secondary/80'
+                          }`}
+                        >
+                          <div
+                            className='flex h-5 w-5 items-center justify-center rounded-md'
+                            style={{ backgroundColor: block.bgColor }}
                           >
-                            <div
-                              className='flex h-5 w-5 items-center justify-center rounded-md'
-                              style={{ backgroundColor: block.bgColor }}
-                            >
-                              <block.icon className='h-4 w-4 text-white' />
-                            </div>
-                            <span className='font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                              {block.name}
-                            </span>
-                          </button>
-                        ))}
+                            <block.icon className='h-4 w-4 text-white' />
+                          </div>
+                          <span className='font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                            {block.name}
+                          </span>
+                        </button>
+                      ))}
                     </div>
-                    {/* Second row */}
-                    {filteredBlocks.length > Math.ceil(filteredBlocks.length / 2) && (
-                      <div
-                        ref={blocksRow2Ref}
-                        onScroll={handleBlocksRow2Scroll}
-                        className='scrollbar-none flex gap-2 overflow-x-auto pr-6 pb-1 pl-6'
-                        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-                      >
-                        {filteredBlocks.slice(Math.ceil(filteredBlocks.length / 2)).map((block) => (
-                          <button
-                            key={block.id}
-                            onClick={() => handleBlockClick(block.type)}
-                            className='flex h-9 w-[153.5px] flex-shrink-0 items-center gap-3 whitespace-nowrap rounded-xl bg-secondary p-2 transition-colors hover:bg-secondary/80'
-                          >
-                            <div
-                              className='flex h-5 w-5 items-center justify-center rounded-md'
-                              style={{ backgroundColor: block.bgColor }}
-                            >
-                              <block.icon className='h-4 w-4 text-white' />
-                            </div>
-                            <span className='font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                              {block.name}
-                            </span>
-                          </button>
-                        ))}
-                      </div>
-                    )}
                   </div>
                 </div>
               )}
@@ -649,19 +555,27 @@ export function SearchModal({
                   <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
                     Tools
                   </h3>
-                  <div className='space-y-2'>
-                    {/* First row */}
+                  <div
+                    ref={(el) => {
+                      if (el) scrollRefs.current.set('tools', el)
+                    }}
+                    className='scrollbar-none overflow-x-auto pr-6 pb-1 pl-6'
+                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                  >
                     <div
-                      ref={toolsRow1Ref}
-                      onScroll={handleToolsRow1Scroll}
-                      className='scrollbar-none flex gap-2 overflow-x-auto pr-6 pb-1 pl-6'
-                      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                      className='grid auto-cols-max grid-flow-col gap-2'
+                      style={{ gridTemplateRows: 'repeat(2, minmax(0, 1fr))' }}
                     >
-                      {filteredTools.slice(0, Math.ceil(filteredTools.length / 2)).map((tool) => (
+                      {filteredTools.map((tool, index) => (
                         <button
                           key={tool.id}
                           onClick={() => handleBlockClick(tool.type)}
-                          className='flex h-9 w-[153.5px] flex-shrink-0 items-center gap-3 whitespace-nowrap rounded-xl bg-secondary p-2 transition-colors hover:bg-secondary/80'
+                          data-nav-item={`tools-${index}`}
+                          className={`flex h-9 w-[153.5px] flex-shrink-0 items-center gap-3 whitespace-nowrap rounded-xl p-2 transition-all duration-200 ${
+                            isItemSelected('tools', index)
+                              ? 'bg-accent'
+                              : 'bg-secondary hover:bg-secondary/80'
+                          }`}
                         >
                           <div
                             className='flex h-5 w-5 items-center justify-center rounded-md'
@@ -675,33 +589,6 @@ export function SearchModal({
                         </button>
                       ))}
                     </div>
-                    {/* Second row */}
-                    {filteredTools.length > Math.ceil(filteredTools.length / 2) && (
-                      <div
-                        ref={toolsRow2Ref}
-                        onScroll={handleToolsRow2Scroll}
-                        className='scrollbar-none flex gap-2 overflow-x-auto pr-6 pb-1 pl-6'
-                        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-                      >
-                        {filteredTools.slice(Math.ceil(filteredTools.length / 2)).map((tool) => (
-                          <button
-                            key={tool.id}
-                            onClick={() => handleBlockClick(tool.type)}
-                            className='flex h-9 w-[153.5px] flex-shrink-0 items-center gap-3 whitespace-nowrap rounded-xl bg-secondary p-2 transition-colors hover:bg-secondary/80'
-                          >
-                            <div
-                              className='flex h-5 w-5 items-center justify-center rounded-md'
-                              style={{ backgroundColor: tool.bgColor }}
-                            >
-                              <tool.icon className='h-4 w-4 text-white' />
-                            </div>
-                            <span className='font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                              {tool.name}
-                            </span>
-                          </button>
-                        ))}
-                      </div>
-                    )}
                   </div>
                 </div>
               )}
@@ -713,13 +600,22 @@ export function SearchModal({
                     Templates
                   </h3>
                   <div
+                    ref={(el) => {
+                      if (el) scrollRefs.current.set('templates', el)
+                    }}
                     className='scrollbar-none flex gap-4 overflow-x-auto pr-6 pb-1 pl-6'
                     style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
                   >
                     {loading
                       ? renderSkeletonCards()
-                      : filteredTemplates.map((template) => (
-                          <div key={template.id} className='w-80 flex-shrink-0'>
+                      : filteredTemplates.map((template, index) => (
+                          <div
+                            key={template.id}
+                            data-nav-item={`templates-${index}`}
+                            className={`w-80 flex-shrink-0 rounded-lg transition-all duration-200 ${
+                              isItemSelected('templates', index) ? 'bg-accent' : ''
+                            }`}
+                          >
                             <TemplateCard
                               id={template.id}
                               title={template.title}
@@ -731,7 +627,7 @@ export function SearchModal({
                               iconColor={template.iconColor}
                               state={template.state}
                               isStarred={template.isStarred}
-                              onTemplateUsed={handleTemplateUsed}
+                              onTemplateUsed={() => onOpenChange(false)}
                               onStarChange={handleStarChange}
                             />
                           </div>
@@ -740,142 +636,168 @@ export function SearchModal({
                 </div>
               )}
 
-              {/* Workspaces Section */}
-              {filteredWorkspaces.length > 0 && (
-                <div>
-                  <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                    Workspaces
-                  </h3>
-                  <div className='space-y-1 px-6'>
-                    {filteredWorkspaces.map((workspace) => (
-                      <button
-                        key={workspace.id}
-                        onClick={() =>
-                          workspace.isCurrent
-                            ? onOpenChange(false)
-                            : handleNavigationClick(workspace.href)
-                        }
-                        data-search-item={`workspace-${workspace.id}`}
-                        className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
-                          isItemSelected(workspace, 'workspace')
-                            ? 'bg-accent text-accent-foreground'
-                            : 'hover:bg-accent/60 focus:bg-accent/60'
-                        }`}
-                      >
-                        <div className='flex h-5 w-5 items-center justify-center'>
-                          <Building2 className='h-4 w-4 text-muted-foreground' />
-                        </div>
-                        <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                          {workspace.name}
-                          {workspace.isCurrent && ' (current)'}
-                        </span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Workflows Section */}
-              {filteredWorkflows.length > 0 && (
-                <div>
-                  <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                    Workflows
-                  </h3>
-                  <div className='space-y-1 px-6'>
-                    {filteredWorkflows.map((workflow) => (
-                      <button
-                        key={workflow.id}
-                        onClick={() =>
-                          workflow.isCurrent
-                            ? onOpenChange(false)
-                            : handleNavigationClick(workflow.href)
-                        }
-                        data-search-item={`workflow-${workflow.id}`}
-                        className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
-                          isItemSelected(workflow, 'workflow')
-                            ? 'bg-accent text-accent-foreground'
-                            : 'hover:bg-accent/60 focus:bg-accent/60'
-                        }`}
-                      >
-                        <div className='flex h-5 w-5 items-center justify-center'>
-                          <Workflow className='h-4 w-4 text-muted-foreground' />
-                        </div>
-                        <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                          {workflow.name}
-                          {workflow.isCurrent && ' (current)'}
-                        </span>
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Pages Section */}
-              {filteredPages.length > 0 && (
-                <div>
-                  <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                    Pages
-                  </h3>
-                  <div className='space-y-1 px-6'>
-                    {filteredPages.map((page) => (
-                      <button
-                        key={page.id}
-                        onClick={() => handlePageClick(page.href)}
-                        data-search-item={`page-${page.id}`}
-                        className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
-                          isItemSelected(page, 'page')
-                            ? 'bg-accent text-accent-foreground'
-                            : 'hover:bg-accent/60 focus:bg-accent/60'
-                        }`}
-                      >
-                        <div className='flex h-5 w-5 items-center justify-center'>
-                          <page.icon className='h-4 w-4 text-muted-foreground' />
-                        </div>
-                        <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                          {page.name}
-                        </span>
-                        {page.shortcut && (
-                          <kbd className='flex h-6 w-10 items-center justify-center rounded-[5px] border border-border bg-background font-mono text-[#CDCDCD] text-xs dark:text-[#454545]'>
-                            <span className='flex items-center justify-center gap-[1px] pt-[1px]'>
-                              <span className='text-lg'>⌘</span>
-                              <span className='pb-[4px] text-lg'>⇧</span>
-                              <span className='text-xs'>{page.shortcut.slice(-1)}</span>
-                            </span>
-                          </kbd>
-                        )}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Docs Section */}
-              {filteredDocs.length > 0 && (
-                <div>
-                  <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                    Docs
-                  </h3>
-                  <div className='space-y-1 px-6'>
-                    {filteredDocs.map((doc) => (
-                      <button
-                        key={doc.id}
-                        onClick={() => handleDocsClick(doc.href)}
-                        data-search-item={`doc-${doc.id}`}
-                        className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
-                          isItemSelected(doc, 'doc')
-                            ? 'bg-accent text-accent-foreground'
-                            : 'hover:bg-accent/60 focus:bg-accent/60'
-                        }`}
-                      >
-                        <div className='flex h-5 w-5 items-center justify-center'>
-                          <doc.icon className='h-4 w-4 text-muted-foreground' />
-                        </div>
-                        <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
-                          {doc.name}
-                        </span>
-                      </button>
-                    ))}
-                  </div>
+              {/* List sections (Workspaces, Workflows, Pages, Docs) */}
+              {navigationSections.find((s) => s.id === 'list') && (
+                <div
+                  ref={(el) => {
+                    if (el) scrollRefs.current.set('list', el)
+                  }}
+                >
+                  {/* Workspaces */}
+                  {filteredWorkspaces.length > 0 && (
+                    <div className='mb-6'>
+                      <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                        Workspaces
+                      </h3>
+                      <div className='space-y-1 px-6'>
+                        {filteredWorkspaces.map((workspace, workspaceIndex) => {
+                          const globalIndex = workspaceIndex
+                          return (
+                            <button
+                              key={workspace.id}
+                              onClick={() =>
+                                workspace.isCurrent
+                                  ? onOpenChange(false)
+                                  : handleNavigationClick(workspace.href)
+                              }
+                              data-nav-item={`list-${globalIndex}`}
+                              className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
+                                isItemSelected('list', globalIndex)
+                                  ? 'bg-accent text-accent-foreground'
+                                  : 'hover:bg-accent/60 focus:bg-accent/60'
+                              }`}
+                            >
+                              <div className='flex h-5 w-5 items-center justify-center'>
+                                <Building2 className='h-4 w-4 text-muted-foreground' />
+                              </div>
+                              <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                                {workspace.name}
+                                {workspace.isCurrent && ' (current)'}
+                              </span>
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Workflows */}
+                  {filteredWorkflows.length > 0 && (
+                    <div className='mb-6'>
+                      <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                        Workflows
+                      </h3>
+                      <div className='space-y-1 px-6'>
+                        {filteredWorkflows.map((workflow, workflowIndex) => {
+                          const globalIndex = filteredWorkspaces.length + workflowIndex
+                          return (
+                            <button
+                              key={workflow.id}
+                              onClick={() =>
+                                workflow.isCurrent
+                                  ? onOpenChange(false)
+                                  : handleNavigationClick(workflow.href)
+                              }
+                              data-nav-item={`list-${globalIndex}`}
+                              className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
+                                isItemSelected('list', globalIndex)
+                                  ? 'bg-accent text-accent-foreground'
+                                  : 'hover:bg-accent/60 focus:bg-accent/60'
+                              }`}
+                            >
+                              <div className='flex h-5 w-5 items-center justify-center'>
+                                <Workflow className='h-4 w-4 text-muted-foreground' />
+                              </div>
+                              <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                                {workflow.name}
+                                {workflow.isCurrent && ' (current)'}
+                              </span>
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Pages */}
+                  {filteredPages.length > 0 && (
+                    <div className='mb-6'>
+                      <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                        Pages
+                      </h3>
+                      <div className='space-y-1 px-6'>
+                        {filteredPages.map((page, pageIndex) => {
+                          const globalIndex =
+                            filteredWorkspaces.length + filteredWorkflows.length + pageIndex
+                          return (
+                            <button
+                              key={page.id}
+                              onClick={() => handlePageClick(page.href)}
+                              data-nav-item={`list-${globalIndex}`}
+                              className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
+                                isItemSelected('list', globalIndex)
+                                  ? 'bg-accent text-accent-foreground'
+                                  : 'hover:bg-accent/60 focus:bg-accent/60'
+                              }`}
+                            >
+                              <div className='flex h-5 w-5 items-center justify-center'>
+                                <page.icon className='h-4 w-4 text-muted-foreground' />
+                              </div>
+                              <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                                {page.name}
+                              </span>
+                              {page.shortcut && (
+                                <kbd className='flex h-6 w-10 items-center justify-center rounded-[5px] border border-border bg-background font-mono text-[#CDCDCD] text-xs dark:text-[#454545]'>
+                                  <span className='flex items-center justify-center gap-[1px] pt-[1px]'>
+                                    <span className='text-lg'>⌘</span>
+                                    <span className='pb-[4px] text-lg'>⇧</span>
+                                    <span className='text-xs'>{page.shortcut.slice(-1)}</span>
+                                  </span>
+                                </kbd>
+                              )}
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Docs */}
+                  {filteredDocs.length > 0 && (
+                    <div>
+                      <h3 className='mb-3 ml-6 font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                        Docs
+                      </h3>
+                      <div className='space-y-1 px-6'>
+                        {filteredDocs.map((doc, docIndex) => {
+                          const globalIndex =
+                            filteredWorkspaces.length +
+                            filteredWorkflows.length +
+                            filteredPages.length +
+                            docIndex
+                          return (
+                            <button
+                              key={doc.id}
+                              onClick={() => handleDocsClick(doc.href)}
+                              data-nav-item={`list-${globalIndex}`}
+                              className={`flex h-10 w-full items-center gap-3 rounded-lg px-3 py-2 transition-colors focus:outline-none ${
+                                isItemSelected('list', globalIndex)
+                                  ? 'bg-accent text-accent-foreground'
+                                  : 'hover:bg-accent/60 focus:bg-accent/60'
+                              }`}
+                            >
+                              <div className='flex h-5 w-5 items-center justify-center'>
+                                <doc.icon className='h-4 w-4 text-muted-foreground' />
+                              </div>
+                              <span className='flex-1 text-left font-normal font-sans text-muted-foreground text-sm leading-none tracking-normal'>
+                                {doc.name}
+                              </span>
+                            </button>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}