diff --git a/src/components/Hack/HackSubmitForm.tsx b/src/components/Hack/HackSubmitForm.tsx
index 5bf7705..bfea841 100644
--- a/src/components/Hack/HackSubmitForm.tsx
+++ b/src/components/Hack/HackSubmitForm.tsx
@@ -774,6 +774,7 @@ export default function HackSubmitForm({
                   <label className="text-sm text-foreground/80">Base ROM <span className="text-red-500">*</span></label>
                   {!isDummy ? (
                     <Select
+                      enableFilter
                       value={baseRom}
                       onChange={setBaseRom}
                       disabled={!platform}
diff --git a/src/components/Primitives/Select.tsx b/src/components/Primitives/Select.tsx
index 99f923e..4da36e3 100644
--- a/src/components/Primitives/Select.tsx
+++ b/src/components/Primitives/Select.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, { Fragment } from "react";
-import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Transition } from "@headlessui/react";
+import React, { Fragment, useState } from "react";
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, Transition, Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from "@headlessui/react";
 import { FiChevronDown, FiCheck } from "react-icons/fi";
 
 export interface SelectOption {
@@ -9,12 +9,18 @@ export interface SelectOption {
   label: string;
   disabled?: boolean;
   icon?: React.ComponentType<{ className?: string }>;
+  description?: string;
+}
+
+export interface SelectDivider {
+  type: "divider";
+  label?: string;
 }
 
 interface SelectProps {
   value: string;
   onChange: (value: string) => void;
-  options: SelectOption[];
+  options: (SelectOption | SelectDivider)[];
   placeholder?: string;
   disabled?: boolean;
   className?: string;
@@ -22,6 +28,24 @@ interface SelectProps {
   dropdownAlign?: "left" | "right";
   id?: string;
   name?: string;
+  enableFilter?: boolean;
+}
+
+function DividerContent({ divider, index }: { divider: SelectDivider; index: number }) {
+  return (
+    <div key={`divider-${index}`} className="relative py-2 pointer-events-none">
+      <div className="absolute inset-0 flex items-center">
+        <div className="w-full border-t border-[var(--border)]" />
+      </div>
+      {divider.label && (
+        <div className="relative flex justify-center">
+          <span className="bg-background/95 px-2 text-xs text-foreground/60">
+            {divider.label}
+          </span>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default function Select({
@@ -35,9 +59,118 @@ export default function Select({
   dropdownAlign = "left",
   id,
   name,
+  enableFilter = false,
 }: SelectProps) {
-  const selectedOption = options.find((opt) => opt.value === value);
+  const [query, setQuery] = useState("");
 
+  // Separate options and dividers
+  const actualOptions = options.filter((opt): opt is SelectOption => "value" in opt);
+  const selectedOption = actualOptions.find((opt) => opt.value === value);
+
+  // Filter function for Combobox
+  const filterOptions = (query: string) => {
+    if (!query) return options;
+
+    // When filtering, exclude dividers and return only filtered options
+    return actualOptions.filter((opt) =>
+      opt.label.toLowerCase().includes(query.toLowerCase())
+    );
+  };
+
+
+  if (enableFilter) {
+    // Use Combobox for filterable select
+    return (
+      <Combobox
+        value={value}
+        onChange={(newValue) => {
+          onChange(newValue || "");
+          setQuery("");
+        }}
+        disabled={disabled}
+        immediate
+      >
+        {({ open }) => (
+          <div className="relative">
+            <ComboboxInput
+              id={id}
+              displayValue={() => selectedOption?.label ?? ""}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={placeholder}
+              disabled={disabled}
+              className={`relative h-11 w-full rounded-md bg-[var(--surface-2)] px-3 pr-10 text-left text-sm ring-1 ring-inset ring-[var(--border)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50 ${
+                !selectedOption ? "text-foreground/60" : ""
+              } ${className}`}
+            />
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+              <FiChevronDown className={`h-4 w-4 text-foreground/60 transition-transform ${open ? "rotate-180" : ""}`} aria-hidden="true" />
+            </span>
+            {name && <input type="hidden" name={name} value={value} />}
+            <Transition
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <ComboboxOptions className={`absolute z-50 mt-1 max-h-60 min-w-full max-w-[400px] w-max overflow-auto rounded-md bg-background/95 backdrop-blur-sm py-1 text-sm shadow-lg ring-1 ring-[var(--border)] focus:outline-none ${dropdownAlign === "right" ? "right-0" : ""} ${dropdownClassName}`}>
+                {(() => {
+                  const displayItems = filterOptions(query);
+
+                  if (displayItems.length === 0) {
+                    return (
+                      <div className="py-2 px-4 text-foreground/60 text-center">No results found</div>
+                    );
+                  }
+
+                  return displayItems.map((item, index) => {
+                    if ("type" in item && item.type === "divider") {
+                      return <DividerContent key={`divider-${index}`} divider={item} index={index} />;
+                    }
+
+                    const option = item as SelectOption;
+                    const Icon = option.icon;
+                    return (
+                      <ComboboxOption
+                        key={option.value}
+                        value={option.value}
+                        disabled={option.disabled}
+                        className={({ focus }) =>
+                          `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                            focus ? "bg-black/5 dark:bg-white/10" : ""
+                          } ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            <span className={`flex items-center gap-2 min-w-0 ${selected ? "font-medium" : "font-normal"}`}>
+                              {Icon && <Icon className="h-4 w-4 shrink-0" />}
+                              <span className="shrink-0">{option.label}</span>
+                              {option.description && (
+                                <span className="ml-auto text-xs text-foreground/40 pl-2 truncate min-w-0">
+                                  {option.description}
+                                </span>
+                              )}
+                            </span>
+                            {selected && (
+                              <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-foreground">
+                                <FiCheck className="h-4 w-4" aria-hidden="true" />
+                              </span>
+                            )}
+                          </>
+                        )}
+                      </ComboboxOption>
+                    );
+                  });
+                })()}
+              </ComboboxOptions>
+            </Transition>
+          </div>
+        )}
+      </Combobox>
+    );
+  }
+
+  // Use Listbox for non-filterable select
   return (
     <Listbox value={value} onChange={onChange} disabled={disabled}>
       {({ open }) => (
@@ -61,7 +194,12 @@ export default function Select({
             leaveTo="opacity-0"
           >
             <ListboxOptions className={`absolute z-50 mt-1 max-h-60 min-w-full max-w-[400px] w-max overflow-auto rounded-md bg-background/95 backdrop-blur-sm py-1 text-sm shadow-lg ring-1 ring-[var(--border)] focus:outline-none ${dropdownAlign === "right" ? "right-0" : ""} ${dropdownClassName}`}>
-              {options.map((option) => {
+              {options.map((item, index) => {
+                if ("type" in item && item.type === "divider") {
+                  return <DividerContent key={`divider-${index}`} divider={item} index={index} />;
+                }
+
+                const option = item as SelectOption;
                 const Icon = option.icon;
                 return (
                   <ListboxOption
@@ -76,9 +214,14 @@ export default function Select({
                   >
                     {({ selected }) => (
                       <>
-                        <span className={`flex items-center gap-2 truncate ${selected ? "font-medium" : "font-normal"}`}>
+                        <span className={`flex items-center gap-2 min-w-0 ${selected ? "font-medium" : "font-normal"}`}>
                           {Icon && <Icon className="h-4 w-4 shrink-0" />}
-                          {option.label}
+                          <span className="shrink-0">{option.label}</span>
+                          {option.description && (
+                            <span className="ml-auto text-xs text-foreground/40 pl-2 truncate min-w-0">
+                              {option.description}
+                            </span>
+                          )}
                         </span>
                         {selected && (
                           <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-foreground">