diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/NetworkDropdown.tsx b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
similarity index 50%
rename from apps/dashboard/src/components/contract-components/contract-publish-form/NetworkDropdown.tsx
rename to apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
index 8abd5afb002..d8740d69d23 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/NetworkDropdown.tsx
+++ b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
@@ -1,97 +1,15 @@
+"use client";
+
 import { MultiSelect } from "@/components/blocks/multi-select";
+import { SelectWithSearch } from "@/components/blocks/select-with-search";
 import { Badge } from "@/components/ui/badge";
-import { Select } from "chakra-react-select";
-import type { SizeProp } from "chakra-react-select";
 import { useCallback, useMemo } from "react";
-import { useFormContext } from "react-hook-form";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 
-interface NetworkDropdownProps {
-  useCleanChainName?: boolean;
-  isDisabled?: boolean;
-  onSingleChange: (networksEnabled: number) => void;
-  value: number | undefined;
-  size?: SizeProp;
-}
-
 function cleanChainName(chainName: string) {
   return chainName.replace("Mainnet", "");
 }
 
-export const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
-  useCleanChainName = true,
-  onSingleChange,
-  value,
-  size = "md",
-}) => {
-  const form = useFormContext();
-  const { allChains } = useAllChainsData();
-
-  const options = useMemo(() => {
-    return allChains.map((chain) => {
-      return {
-        label: useCleanChainName
-          ? cleanChainName(chain.name)
-          : `${chain.name} (${chain.chainId})`,
-        value: chain.chainId,
-      };
-    });
-  }, [allChains, useCleanChainName]);
-
-  const defaultValues = useMemo(() => {
-    const networksEnabled = form?.watch(
-      "networksForDeployment.networksEnabled",
-    );
-
-    if (networksEnabled) {
-      return options.filter(({ value: val }) =>
-        form.watch("networksForDeployment.networksEnabled")?.includes(val),
-      );
-    }
-    return options;
-  }, [form, options]);
-
-  return (
-    <div className="flex w-full flex-row items-center gap-2">
-      <Select
-        size={size}
-        placeholder={"Select a network"}
-        selectedOptionStyle="check"
-        hideSelectedOptions={false}
-        options={options}
-        defaultValue={defaultValues}
-        onChange={(selectedChain) => {
-          if (selectedChain) {
-            if (onSingleChange) {
-              onSingleChange(selectedChain.value);
-            }
-          }
-        }}
-        chakraStyles={{
-          container: (provided) => ({
-            ...provided,
-            width: "full",
-          }),
-          downChevron: (provided) => ({
-            ...provided,
-            color: "hsl(var(--text-muted-foreground)/50%)",
-          }),
-          dropdownIndicator: (provided) => ({
-            ...provided,
-            color: "hsl(var(--text-muted-foreground)/50%)",
-          }),
-          control: (provided) => ({
-            ...provided,
-            borderRadius: "lg",
-            minWidth: "178px",
-          }),
-        }}
-        value={options.find(({ value: val }) => val === value)}
-      />
-    </div>
-  );
-};
-
 type Option = { label: string; value: string };
 
 export function MultiNetworkSelector(props: {
@@ -160,3 +78,68 @@ export function MultiNetworkSelector(props: {
     />
   );
 }
+
+export function SingleNetworkSelector(props: {
+  chainId: number | undefined;
+  onChange: (chainId: number) => void;
+}) {
+  const { allChains, idToChain } = useAllChainsData();
+
+  const options = useMemo(() => {
+    return allChains.map((chain) => {
+      return {
+        label: chain.name,
+        value: String(chain.chainId),
+      };
+    });
+  }, [allChains]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number.parseInt(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [idToChain],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="grow truncate text-left">{chain.name}</span>
+          <Badge variant="outline" className="gap-2">
+            <span className="text-muted-foreground">Chain ID</span>
+            {chain.chainId}
+          </Badge>
+        </div>
+      );
+    },
+    [idToChain],
+  );
+
+  return (
+    <SelectWithSearch
+      searchPlaceholder="Search by Name or Chain Id"
+      value={String(props.chainId)}
+      options={options}
+      onValueChange={(chainId) => {
+        props.onChange(Number(chainId));
+      }}
+      placeholder="Select Chain"
+      overrideSearchFn={searchFn}
+      renderOption={renderOption}
+    />
+  );
+}
diff --git a/apps/dashboard/src/@/components/blocks/select-with-search.stories.tsx b/apps/dashboard/src/@/components/blocks/select-with-search.stories.tsx
new file mode 100644
index 00000000000..980a717e6ea
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/select-with-search.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMemo, useState } from "react";
+import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { SelectWithSearch } from "./select-with-search";
+
+const meta = {
+  title: "blocks/SelectWithSearch",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function createList(len: number) {
+  return Array.from({ length: len }, (_, i) => ({
+    value: `${i}`,
+    label: `Item ${i}`,
+  }));
+}
+
+function Story() {
+  return (
+    <div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
+      <VariantTest storyLabel="5 items" listLen={5} />
+      <VariantTest storyLabel="5000 items" listLen={5000} />
+      <VariantTest
+        defaultValue={"3"}
+        storyLabel="20 items, 3 selected by default"
+        listLen={20}
+      />
+    </div>
+  );
+}
+
+function VariantTest(props: {
+  defaultValue?: string;
+  storyLabel: string;
+  listLen: number;
+}) {
+  const list = useMemo(() => createList(props.listLen), [props.listLen]);
+  const [value, setValue] = useState<string | undefined>(props.defaultValue);
+
+  return (
+    <BadgeContainer label={props.storyLabel}>
+      <SelectWithSearch
+        value={value}
+        options={list}
+        onValueChange={setValue}
+        placeholder="Select items"
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/@/components/blocks/select-with-search.tsx b/apps/dashboard/src/@/components/blocks/select-with-search.tsx
new file mode 100644
index 00000000000..536969e038f
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/select-with-search.tsx
@@ -0,0 +1,190 @@
+/* eslint-disable no-restricted-syntax */
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDown, SearchIcon } from "lucide-react";
+import React, { useRef, useMemo, useEffect } from "react";
+import { useShowMore } from "../../lib/useShowMore";
+import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
+import { Input } from "../ui/input";
+
+interface SelectWithSearchProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options: {
+    label: string;
+    value: string;
+  }[];
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+  searchPlaceholder?: string;
+  className?: string;
+  overrideSearchFn?: (
+    option: { value: string; label: string },
+    searchTerm: string,
+  ) => boolean;
+  renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+}
+
+export const SelectWithSearch = React.forwardRef<
+  HTMLButtonElement,
+  SelectWithSearchProps
+>(
+  (
+    { options, onValueChange, placeholder, className, value, ...props },
+    ref,
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const selectedOption = useMemo(
+      () => options.find((option) => option.value === value),
+      [options, value],
+    );
+
+    // show 50 initially and then 20 more when reaching the end
+    const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
+    const { overrideSearchFn } = props;
+
+    const optionsToShow = useMemo(() => {
+      const filteredOptions: {
+        label: string;
+        value: string;
+      }[] = [];
+
+      const searchValLowercase = searchValue.toLowerCase();
+
+      for (let i = 0; i <= options.length - 1; i++) {
+        if (filteredOptions.length >= itemsToShow) {
+          break;
+        }
+
+        if (overrideSearchFn) {
+          if (overrideSearchFn(options[i], searchValLowercase)) {
+            filteredOptions.push(options[i]);
+          }
+        } else {
+          if (options[i].label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(options[i]);
+          }
+        }
+      }
+
+      return filteredOptions;
+    }, [options, searchValue, itemsToShow, overrideSearchFn]);
+
+    // scroll to top when options change
+    const popoverElRef = useRef<HTMLDivElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+      const scrollContainer =
+        popoverElRef.current?.querySelector("[data-scrollable]");
+      if (scrollContainer) {
+        scrollContainer.scrollTo({
+          top: 0,
+        });
+      }
+    }, [searchValue]);
+
+    return (
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={() => setIsPopoverOpen(true)}
+            className={cn(
+              "flex w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
+              className,
+            )}
+          >
+            <div className="flex w-full items-center justify-between">
+              <span
+                className={cn(
+                  "text-muted-foreground text-sm",
+                  selectedOption && "text-foreground",
+                )}
+              >
+                {selectedOption?.label || placeholder}
+              </span>
+              <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+            </div>
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="z-[10001] p-0"
+          align="center"
+          sideOffset={10}
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+          style={{
+            width: "var(--radix-popover-trigger-width)",
+            maxHeight: "var(--radix-popover-content-available-height)",
+          }}
+          ref={popoverElRef}
+        >
+          <div>
+            {/* Search */}
+            <div className="relative">
+              <Input
+                placeholder={props.searchPlaceholder || "Search"}
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="!h-auto rounded-b-none border-0 border-border border-b py-3 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+              />
+              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+            </div>
+
+            <ScrollShadow
+              scrollableClassName="max-h-[min(calc(var(--radix-popover-content-available-height)-60px),350px)] p-1"
+              className="rounded"
+            >
+              {/* List */}
+              <div>
+                {optionsToShow.length === 0 && (
+                  <div className="flex justify-center py-10">
+                    No results found
+                  </div>
+                )}
+
+                {optionsToShow.map((option, i) => {
+                  const isSelected = value === option.value;
+                  return (
+                    <Button
+                      key={option.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => onValueChange(option.value)}
+                      variant="ghost"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2 text-left"
+                      ref={
+                        i === optionsToShow.length - 1 ? lastItemRef : undefined
+                      }
+                    >
+                      <div className="flex size-4 items-center justify-center">
+                        {isSelected && <CheckIcon className="size-4" />}
+                      </div>
+
+                      <div className="min-w-0 grow">
+                        {props.renderOption
+                          ? props.renderOption(option)
+                          : option.label}
+                      </div>
+                    </Button>
+                  );
+                })}
+              </div>
+            </ScrollShadow>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+SelectWithSearch.displayName = "SelectWithSearch";
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
index 06f54be0ac6..5277b7a0b7f 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx
@@ -1,3 +1,4 @@
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import {
   Box,
   Flex,
@@ -15,7 +16,6 @@ import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { FiTrash } from "react-icons/fi";
 import { Button, Heading, Text } from "tw-components";
 import { useCustomFactoryAbi } from "../hooks";
-import { NetworkDropdown } from "./NetworkDropdown";
 import { AbiSelector } from "./abi-selector";
 
 interface CustomFactoryProps {
@@ -76,19 +76,20 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
         {fields.map((field, index) => (
           <div key={field.id}>
             <FormControl isRequired as={Flex} gap={4}>
-              <Box w={{ base: "full", md: "30%" }}>
+              <Box w={{ base: "full", md: "40%" }}>
                 <Controller
                   name={`customFactoryAddresses[${index}].key`}
                   control={form.control}
-                  render={({ field: _field }) => (
-                    <NetworkDropdown
-                      {..._field}
-                      onSingleChange={(value) => {
-                        _field.onChange(value);
-                      }}
-                      value={_field.value}
-                    />
-                  )}
+                  render={({ field: _field }) => {
+                    return (
+                      <SingleNetworkSelector
+                        chainId={_field.value}
+                        onChange={(value) => {
+                          _field.onChange(value);
+                        }}
+                      />
+                    );
+                  }}
                 />
               </Box>
               <Box w="full">
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
index 058438abd81..e59319e46c3 100644
--- a/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
+++ b/apps/dashboard/src/components/contract-components/contract-publish-form/networks-fieldset.tsx
@@ -1,7 +1,7 @@
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Flex, FormControl, Select } from "@chakra-ui/react";
 import { useFormContext } from "react-hook-form";
 import { Heading, Text } from "tw-components";
-import { MultiNetworkSelector } from "./NetworkDropdown";
 
 interface NetworksFieldsetProps {
   fromStandard?: boolean;
diff --git a/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx b/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx
index 1b7e97f98e1..1d59100a8ba 100644
--- a/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx
+++ b/apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import {
   type AddContractSubscriptionInput,
@@ -26,7 +27,6 @@ import {
   type UseDisclosureReturn,
   useDisclosure,
 } from "@chakra-ui/react";
-import { NetworkDropdown } from "components/contract-components/contract-publish-form/NetworkDropdown";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
 import { useV5DashboardChain } from "lib/v5-adapter";
@@ -191,9 +191,9 @@ const ModalBodyInputContract = ({
 
           <FormControl isRequired>
             <FormLabel>Chain</FormLabel>
-            <NetworkDropdown
-              value={form.watch("chainId")}
-              onSingleChange={(val) => form.setValue("chainId", val)}
+            <SingleNetworkSelector
+              chainId={form.watch("chainId")}
+              onChange={(val) => form.setValue("chainId", val)}
             />
           </FormControl>
 
diff --git a/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx b/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx
index 90baf38248d..9c271865f57 100644
--- a/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx
+++ b/apps/dashboard/src/components/engine/relayer/add-relayer-button.tsx
@@ -1,3 +1,4 @@
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import {
   type CreateRelayerInput,
   useEngineBackendWallets,
@@ -20,7 +21,6 @@ import {
   type UseDisclosureReturn,
   useDisclosure,
 } from "@chakra-ui/react";
-import { NetworkDropdown } from "components/contract-components/contract-publish-form/NetworkDropdown";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTxNotifications } from "hooks/useTxNotifications";
@@ -136,9 +136,9 @@ const AddModal = ({
           <Flex flexDir="column" gap={4}>
             <FormControl isRequired>
               <FormLabel>Chain</FormLabel>
-              <NetworkDropdown
-                value={form.watch("chainId")}
-                onSingleChange={(val) => form.setValue("chainId", val)}
+              <SingleNetworkSelector
+                chainId={form.watch("chainId")}
+                onChange={(val) => form.setValue("chainId", val)}
               />
             </FormControl>
             <FormControl isRequired>
diff --git a/apps/dashboard/src/components/engine/relayer/relayers-table.tsx b/apps/dashboard/src/components/engine/relayer/relayers-table.tsx
index daeebd36dd2..be0dd23e2c0 100644
--- a/apps/dashboard/src/components/engine/relayer/relayers-table.tsx
+++ b/apps/dashboard/src/components/engine/relayer/relayers-table.tsx
@@ -1,3 +1,4 @@
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import {
   type EngineRelayer,
   type UpdateRelayerInput,
@@ -22,7 +23,6 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
-import { NetworkDropdown } from "components/contract-components/contract-publish-form/NetworkDropdown";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { TWTable } from "components/shared/TWTable";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -271,9 +271,9 @@ const EditModal = ({
           <div className="flex flex-col gap-4">
             <FormControl>
               <FormLabel>Chain</FormLabel>
-              <NetworkDropdown
-                value={form.watch("chainId")}
-                onSingleChange={(val) => form.setValue("chainId", val)}
+              <SingleNetworkSelector
+                chainId={form.watch("chainId")}
+                onChange={(val) => form.setValue("chainId", val)}
               />
             </FormControl>
             <FormControl>
diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
index e84e5140386..790ad366ecb 100644
--- a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import {
   type ApiKeyService,
@@ -38,7 +39,6 @@ import {
 import { joinWithComma, toArrFromList } from "utils/string";
 import { validStrList } from "utils/validations";
 import { z } from "zod";
-import { MultiNetworkSelector } from "../../contract-components/contract-publish-form/NetworkDropdown";
 
 type AccountAbstractionSettingsPageProps = {
   apiKeyServices: ApiKeyService[];