diff --git a/packages/ui/src/components/multi-select.tsx b/packages/ui/src/components/multi-select.tsx
index 5c14e34432..77c74a73c6 100644
--- a/packages/ui/src/components/multi-select.tsx
+++ b/packages/ui/src/components/multi-select.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 
 import {
   Button,
@@ -12,6 +12,9 @@ import {
   SearchBox
 } from '@/components'
 import { useDebounceSearch } from '@hooks/use-debounce-search'
+import { useSortedOptionsOnOpen } from '@hooks/use-sorted-options-on-open'
+import { useFetchOptions } from '@hooks/useFetchOptions'
+import { useFilteredOptions } from '@hooks/useFilteredOptions'
 import { cn } from '@utils/cn'
 import { TFunction } from 'i18next'
 
@@ -32,6 +35,8 @@ export interface MultiSelectProps<T = unknown> {
   customOptionElem?: (data: MultiSelectOptionType<T>) => ReactNode
   error?: string
   label?: string
+  enableSortOnOpen?: boolean
+  fetchOptions?: (query: string) => Promise<MultiSelectOptionType<T>[]>
 }
 
 export const MultiSelect = <T = unknown,>({
@@ -45,13 +50,29 @@ export const MultiSelect = <T = unknown,>({
   handleChangeSearchValue,
   customOptionElem,
   error,
-  label
+  label,
+  enableSortOnOpen = false,
+  fetchOptions
 }: MultiSelectProps<T>) => {
   const { search, handleSearchChange } = useDebounceSearch({
     handleChangeSearchValue,
     searchValue
   })
 
+  const [isOpen, setIsOpen] = useState(false)
+
+  // const filteredOptions = useFilteredOptions(options, search)
+  const {
+    options: filteredOptions,
+    isLoading,
+    error: errorFetch
+  } = useFetchOptions({
+    searchValue: search,
+    fetchOptions: fetchOptions || (() => Promise.resolve([]))
+  })
+
+  const sortedOptions = useSortedOptionsOnOpen(isOpen, filteredOptions, selectedItems, enableSortOnOpen)
+
   return (
     <ControlGroup className={className}>
       {!!label && (
@@ -59,8 +80,8 @@ export const MultiSelect = <T = unknown,>({
           {label}
         </Label>
       )}
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="data-[state=open]:border-cn-borders-8 flex h-9 w-full items-center justify-between rounded border border-cn-borders-2 bg-cn-background-2 px-3 transition-colors">
+      <DropdownMenu.Root onOpenChange={open => setIsOpen(open)}>
+        <DropdownMenu.Trigger className="data-[state=open]:border-cn-borders-8 border-cn-borders-2 bg-cn-background-2 flex h-9 w-full items-center justify-between rounded border px-3 transition-colors">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />
         </DropdownMenu.Trigger>
@@ -80,37 +101,44 @@ export const MultiSelect = <T = unknown,>({
               <DropdownMenu.Separator />
             </>
           )}
-          {options.length ? (
-            <ScrollArea viewportClassName="max-h-[300px]">
-              {options.map(option => {
-                const isSelected = selectedItems.findIndex(it => it.id === option.id) > -1
+          {sortedOptions.length
+            ? !isLoading && (
+                <ScrollArea viewportClassName="max-h-[300px]">
+                  {sortedOptions.map(option => {
+                    const isSelected = selectedItems.findIndex(it => it.id === option.id) > -1
 
-                return (
-                  <DropdownMenu.Item
-                    key={option.id}
-                    className={cn('px-3', { 'pl-8': !isSelected })}
-                    onSelect={e => {
-                      e.preventDefault()
-                      handleChange(option)
-                    }}
-                  >
-                    <div className="flex items-center gap-x-2">
-                      {isSelected && <Icon className="min-w-3 text-icons-2" name="tick" size={12} />}
-                      {customOptionElem ? (
-                        customOptionElem(option)
-                      ) : (
-                        <span className="font-medium">{option.label}</span>
-                      )}
-                    </div>
-                  </DropdownMenu.Item>
-                )
-              })}
-            </ScrollArea>
-          ) : (
+                    return (
+                      <DropdownMenu.Item
+                        key={option.id}
+                        className={cn('px-3', { 'pl-8': !isSelected })}
+                        onSelect={e => {
+                          e.preventDefault()
+                          handleChange(option)
+                        }}
+                      >
+                        <div className="flex items-center gap-x-2">
+                          {isSelected && <Icon className="text-icons-2 min-w-3" name="tick" size={12} />}
+                          {customOptionElem ? (
+                            customOptionElem(option as MultiSelectOptionType<T>)
+                          ) : (
+                            <span className="font-medium">{option.label}</span>
+                          )}
+                        </div>
+                      </DropdownMenu.Item>
+                    )
+                  })}
+                </ScrollArea>
+              )
+            : !isLoading && (
+                <div className="px-5 py-4 text-center">
+                  <span className="text-cn-foreground-2 leading-tight">
+                    {t('views:noData.noResults', 'No search results')}
+                  </span>
+                </div>
+              )}
+          {isLoading && !!searchValue && (
             <div className="px-5 py-4 text-center">
-              <span className="leading-tight text-cn-foreground-2">
-                {t('views:noData.noResults', 'No search results')}
-              </span>
+              <span className="text-cn-foreground-2 leading-tight">loading...</span>
             </div>
           )}
         </DropdownMenu.Content>
@@ -131,6 +159,12 @@ export const MultiSelect = <T = unknown,>({
           {error}
         </Message>
       )}
+
+      {!!errorFetch && (
+        <Message className="mt-0.5" theme={MessageTheme.ERROR}>
+          {errorFetch?.message}
+        </Message>
+      )}
     </ControlGroup>
   )
 }
diff --git a/packages/ui/src/components/search-box.tsx b/packages/ui/src/components/search-box.tsx
index e06ae6bb57..e5bfab63f1 100644
--- a/packages/ui/src/components/search-box.tsx
+++ b/packages/ui/src/components/search-box.tsx
@@ -65,6 +65,7 @@ const Root = forwardRef<HTMLInputElement, SearchBoxProps>(
     }, [onSearch])
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation()
       if (e.key === 'Enter') {
         e.preventDefault()
         handleSearch()
diff --git a/packages/ui/src/hooks/use-sorted-options-on-open.tsx b/packages/ui/src/hooks/use-sorted-options-on-open.tsx
new file mode 100644
index 0000000000..f856bc3fe6
--- /dev/null
+++ b/packages/ui/src/hooks/use-sorted-options-on-open.tsx
@@ -0,0 +1,25 @@
+import { useEffect, useMemo, useState } from 'react'
+
+export function useSortedOptionsOnOpen<T extends { id: string | number }>(
+  isOpen: boolean,
+  options: T[],
+  selectedItems: T[],
+  enable: boolean = true
+): T[] {
+  const [snapshotIds, setSnapshotIds] = useState<Set<string | number>>(new Set())
+
+  useEffect(() => {
+    if (enable && isOpen) {
+      setSnapshotIds(new Set(selectedItems.map(item => item.id)))
+    }
+  }, [isOpen, enable])
+
+  return useMemo(() => {
+    if (!enable || !isOpen) return options
+
+    const selected = options.filter(opt => snapshotIds.has(opt.id))
+    const unselected = options.filter(opt => !snapshotIds.has(opt.id))
+
+    return [...selected, ...unselected]
+  }, [options, snapshotIds, isOpen, enable])
+}
diff --git a/packages/ui/src/hooks/useFetchOptions.tsx b/packages/ui/src/hooks/useFetchOptions.tsx
new file mode 100644
index 0000000000..b284176c1d
--- /dev/null
+++ b/packages/ui/src/hooks/useFetchOptions.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react'
+
+export interface UseFetchOptionsParams<T> {
+  searchValue: string
+  fetchOptions: (query: string) => Promise<T[]>
+}
+
+export interface UseFetchOptionsResult<T> {
+  options: T[]
+  isLoading: boolean
+  error: Error | null
+}
+
+export function useFetchOptions<T>({ searchValue, fetchOptions }: UseFetchOptionsParams<T>): UseFetchOptionsResult<T> {
+  const [options, setOptions] = useState<T[]>([])
+  const [isLoading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const abortControllerRef = useRef<AbortController | null>(null)
+
+  useEffect(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort()
+    }
+
+    const controller = new AbortController()
+    abortControllerRef.current = controller
+
+    const fetchData = async () => {
+      setLoading(true)
+      setError(null)
+
+      try {
+        const result = await fetchOptions(searchValue)
+        if (!controller.signal.aborted) {
+          setOptions(result)
+        }
+      } catch (err) {
+        if (!controller.signal.aborted) {
+          setError(err instanceof Error ? err : new Error('Unknown error'))
+          setOptions([])
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false)
+        }
+      }
+    }
+
+    fetchData()
+
+    return () => {
+      controller.abort()
+    }
+  }, [searchValue, fetchOptions])
+
+  return {
+    options,
+    isLoading,
+    error
+  }
+}
diff --git a/packages/ui/src/hooks/useFilteredOptions.ts b/packages/ui/src/hooks/useFilteredOptions.ts
new file mode 100644
index 0000000000..2be1b2402e
--- /dev/null
+++ b/packages/ui/src/hooks/useFilteredOptions.ts
@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+
+export interface Option {
+  id: string | number
+  label: string
+}
+
+export function useFilteredOptions<T extends Option>(options: T[], searchQuery: string): T[] {
+  return useMemo(() => {
+    const search = searchQuery.trim().toLowerCase()
+
+    if (!search) return options
+
+    return options.filter(option => option.label.toLowerCase().includes(search))
+  }, [options, searchQuery])
+}
diff --git a/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx b/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx
index 4db668dbc4..bce9d43505 100644
--- a/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx
+++ b/packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx
@@ -150,6 +150,25 @@ export const DelegateSelectorForm = (props: DelegateSelectorFormProps): JSX.Elem
     [selectedTags, setValue]
   )
 
+  const fetchOptions = useCallback(
+    (query: string) => {
+      return new Promise<MultiSelectOptionType<{ id: string; label: string }>[]>(resolve => {
+        if (!query) {
+          resolve(tagsList.map(tag => ({ id: tag, label: tag })))
+          return
+        }
+        setTimeout(() => {
+          resolve(
+            tagsList
+              .filter(tag => tag.toLowerCase().includes(query.toLowerCase()))
+              .map(tag => ({ id: tag, label: tag }))
+          )
+        }, 500)
+      })
+    },
+    [tagsList]
+  )
+
   return (
     <SandboxLayout.Content className="h-full px-0 pt-0">
       <Spacer size={5} />
@@ -188,6 +207,8 @@ export const DelegateSelectorForm = (props: DelegateSelectorFormProps): JSX.Elem
                 searchValue={searchTag}
                 handleChangeSearchValue={setSearchTag}
                 error={errors.tags?.message?.toString()}
+                enableSortOnOpen
+                fetchOptions={fetchOptions}
               />
             </Fieldset>
             <Text size={4}>Test Delegate connectivity</Text>
@@ -202,7 +223,7 @@ export const DelegateSelectorForm = (props: DelegateSelectorFormProps): JSX.Elem
           </>
         )}
 
-        <div className="absolute inset-x-0 bottom-0 bg-cn-background-2 p-4 shadow-md">
+        <div className="bg-cn-background-2 absolute inset-x-0 bottom-0 p-4 shadow-md">
           <ControlGroup>
             <ButtonGroup className="flex flex-row justify-between">
               <Button type="button" variant="ghost" onClick={onBack}>