diff --git a/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts b/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
index c98adc0e50..a9611a8ba8 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/clusterStorage.ts
@@ -29,7 +29,7 @@ class ClusterStorageModal extends Modal {
   findWorkbenchConnectionSelect() {
     return this.find()
       .findByTestId('connect-existing-workbench-group')
-      .findByRole('button', { name: 'Options menu' });
+      .findByRole('button', { name: 'Typeahead menu toggle' });
   }
 
   findMountField() {
diff --git a/frontend/src/__tests__/cypress/cypress/pages/dataConnection.ts b/frontend/src/__tests__/cypress/cypress/pages/dataConnection.ts
index 93266f4247..1dcba70dee 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/dataConnection.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/dataConnection.ts
@@ -36,7 +36,7 @@ class DataConnectionModal extends Modal {
   findWorkbenchConnectionSelect() {
     return cy
       .findByTestId('connect-existing-workbench-group')
-      .findByRole('button', { name: 'Options menu' });
+      .findByRole('button', { name: 'Notebook select' });
   }
 
   findNotebookRestartAlert() {
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts
index 7c29c8c019..1b9c2a1d9c 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/modelRegistry.ts
@@ -92,7 +92,7 @@ class ModelRegistry {
   }
 
   shouldModelRegistrySelectorExist() {
-    cy.get('#model-registry-selector-dropdown').should('exist');
+    cy.findByTestId('model-registry-selector-dropdown').should('exist');
   }
 
   shouldtableToolbarExist() {
@@ -145,7 +145,7 @@ class ModelRegistry {
   }
 
   findModelRegistry() {
-    return cy.get('#model-registry-selector-dropdown');
+    return cy.findByTestId('model-registry-selector-dropdown');
   }
 
   findModelVersionsTableHeaderButton(name: string) {
diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelRegistryPermissions.ts b/frontend/src/__tests__/cypress/cypress/pages/modelRegistryPermissions.ts
index 37b8fc2208..701987f12e 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/modelRegistryPermissions.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/modelRegistryPermissions.ts
@@ -71,7 +71,7 @@ class PermissionTable extends Contextual<HTMLElement> {
   }
 
   findNameSelect() {
-    return this.find().get(`[aria-label="Name selection"]`);
+    return this.find().get(`[aria-label="Type to filter"]`);
   }
 
   getTableRow(name: string) {
diff --git a/frontend/src/__tests__/cypress/cypress/pages/userManagement.ts b/frontend/src/__tests__/cypress/cypress/pages/userManagement.ts
index 1dd1ef0041..232b4b772d 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/userManagement.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/userManagement.ts
@@ -39,7 +39,7 @@ class GroupSettingSection extends Contextual<HTMLElement> {
   }
 
   findMultiGroupSelectButton() {
-    return this.find().findByRole('button', { name: 'Options menu' });
+    return this.find().findByTestId('group-setting-select');
   }
 
   selectMultiGroup(name: string) {
diff --git a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
index 88e5d96f45..d1d3f13170 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/workbench.ts
@@ -8,11 +8,10 @@ class StorageModal extends Modal {
   }
 
   selectExistingPersistentStorage(name: string) {
-    this.find()
-      .findByTestId('persistent-storage-group')
-      .findByRole('button', { name: 'Options menu' })
-      .findSelectOption(name)
+    cy.findByTestId('persistent-storage-group')
+      .findByRole('button', { name: 'Typeahead menu toggle' })
       .click();
+    cy.findByTestId('persistent-storage-group').findByRole('option', { name }).click();
   }
 
   findSubmitButton() {
@@ -190,9 +189,9 @@ class CreateSpawnerPage {
 
   selectExistingPersistentStorage(name: string) {
     cy.findByTestId('persistent-storage-group')
-      .findByRole('button', { name: 'Options menu' })
-      .findSelectOption(name)
+      .findByRole('button', { name: 'Typeahead menu toggle' })
       .click();
+    cy.get('[id="dashboard-page-main"]').findByRole('option', { name }).click();
   }
 
   selectPVSize(name: string) {
@@ -271,9 +270,9 @@ class CreateSpawnerPage {
 
   selectExistingDataConnection(name: string) {
     cy.findByTestId('data-connection-group')
-      .findByRole('button', { name: 'Options menu' })
-      .findSelectOption(name)
+      .findByRole('button', { name: 'Typeahead menu toggle' })
       .click();
+    cy.get('[id="dashboard-page-main"]').findByRole('option', { name }).click();
   }
 
   findAwsNameInput() {
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts
index 7e6274f6fc..9283c0c224 100644
--- a/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/userManagement/userManagement.cy.ts
@@ -44,7 +44,7 @@ describe('User Management', () => {
     userGroupSection.findChipItem('system:authenticated').should('exist');
     userGroupSection.clearMultiChipItem();
     userGroupSection.findErrorText().should('exist');
-    userGroupSection.selectMultiGroup('odh-admins');
+    userGroupSection.selectMultiGroup('odh-admins', false);
     userGroupSection.findChipItem(/^odh-admins$/).should('exist');
     userGroupSection.findMultiGroupSelectButton().click();
     userManagement.findSubmitButton().should('be.enabled');
diff --git a/frontend/src/components/MultiSelection.tsx b/frontend/src/components/MultiSelection.tsx
index 9cc8cb85fa..0f141bf77d 100644
--- a/frontend/src/components/MultiSelection.tsx
+++ b/frontend/src/components/MultiSelection.tsx
@@ -13,6 +13,8 @@ import {
   Button,
   HelperText,
   HelperTextItem,
+  SelectGroup,
+  Divider,
 } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
@@ -22,28 +24,94 @@ export type SelectionOptions = {
   selected?: boolean;
 };
 
+export type GroupSelectionOptions = {
+  id: number | string;
+  name: string;
+  values: SelectionOptions[];
+};
+
 type MultiSelectionProps = {
-  value: SelectionOptions[];
+  id?: string;
+  value?: SelectionOptions[];
+  groupedValues?: GroupSelectionOptions[];
   setValue: (itemSelection: SelectionOptions[]) => void;
+  toggleId?: string;
   ariaLabel: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  selectionRequired?: boolean;
+  noSelectedOptionsMessage?: string;
+  toggleTestId?: string;
 };
 
-export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue }) => {
+export const MultiSelection: React.FC<MultiSelectionProps> = ({
+  value = [],
+  groupedValues = [],
+  setValue,
+  placeholder,
+  isDisabled,
+  ariaLabel = 'Options menu',
+  id,
+  toggleId,
+  toggleTestId,
+  selectionRequired,
+  noSelectedOptionsMessage = 'One or more options must be selected',
+}) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState<string>('');
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
-  const selected = React.useMemo(() => value.filter((v) => v.selected), [value]);
+
+  const selectGroups = React.useMemo(() => {
+    let counter = 0;
+    return groupedValues
+      .map((g) => {
+        const values = g.values.filter(
+          (v) => !inputValue || v.name.toLowerCase().includes(inputValue.toLowerCase()),
+        );
+        return {
+          ...g,
+          values: values.map((v) => ({ ...v, index: counter++ })),
+        };
+      })
+      .filter((g) => g.values.length);
+  }, [inputValue, groupedValues]);
+
+  const setOpen = (open: boolean) => {
+    setIsOpen(open);
+    if (!open) {
+      setInputValue('');
+    }
+  };
+  const groupOptions = selectGroups.reduce<SelectionOptions[]>((acc, g) => {
+    acc.push(...g.values);
+    return acc;
+  }, []);
+
   const selectOptions = React.useMemo(
     () =>
-      value.filter((v) => !inputValue || v.name.toLowerCase().includes(inputValue.toLowerCase())),
-    [inputValue, value],
+      value
+        .filter((v) => !inputValue || v.name.toLowerCase().includes(inputValue.toLowerCase()))
+        .map((v, index) => ({ ...v, index: groupOptions.length + index })),
+    [groupOptions, inputValue, value],
   );
 
+  const allOptions = React.useMemo(() => {
+    const options = [];
+    groupedValues.forEach((group) => options.push(...group.values));
+    options.push(...value);
+
+    return options;
+  }, [groupedValues, value]);
+
+  const visibleOptions = [...groupOptions, ...selectOptions];
+
+  const selected = React.useMemo(() => allOptions.filter((v) => v.selected), [allOptions]);
+
   React.useEffect(() => {
     if (inputValue) {
-      setIsOpen(true);
+      setOpen(true);
     }
     setFocusedItemIndex(null);
     setActiveItem(null);
@@ -52,20 +120,23 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
   const handleMenuArrowKeys = (key: string) => {
     let indexToFocus;
     if (!isOpen) {
-      setIsOpen(true);
+      setOpen(true);
+      setFocusedItemIndex(0);
       return;
     }
 
+    const optionsLength = visibleOptions.length;
+
     if (key === 'ArrowUp') {
       if (focusedItemIndex === null || focusedItemIndex === 0) {
-        indexToFocus = selectOptions.length - 1;
+        indexToFocus = optionsLength - 1;
       } else {
         indexToFocus = focusedItemIndex - 1;
       }
     }
 
     if (key === 'ArrowDown') {
-      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+      if (focusedItemIndex === null || focusedItemIndex === optionsLength - 1) {
         indexToFocus = 0;
       } else {
         indexToFocus = focusedItemIndex + 1;
@@ -74,13 +145,13 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
 
     if (indexToFocus != null) {
       setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions[indexToFocus];
+      const focusedItem = visibleOptions[indexToFocus];
       setActiveItem(`select-multi-typeahead-${focusedItem.name.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+    const focusedItem = focusedItemIndex !== null ? visibleOptions[focusedItemIndex] : null;
     switch (event.key) {
       case 'Enter':
         if (isOpen && focusedItem) {
@@ -92,7 +163,7 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
         break;
       case 'Tab':
       case 'Escape':
-        setIsOpen(false);
+        setOpen(false);
         setActiveItem(null);
         break;
       case 'ArrowUp':
@@ -104,7 +175,7 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
   };
 
   const onToggleClick = () => {
-    setIsOpen(!isOpen);
+    setOpen(!isOpen);
     setTimeout(() => textInputRef.current?.focus(), 100);
   };
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, valueOfInput: string) => {
@@ -113,22 +184,26 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
   const onSelect = (menuItem?: SelectionOptions) => {
     if (menuItem) {
       setValue(
-        selected.includes(menuItem)
-          ? value.map((option) => (option === menuItem ? { ...option, selected: false } : option))
-          : value.map((option) => (option === menuItem ? { ...option, selected: true } : option)),
+        allOptions.map((option) =>
+          option.id === menuItem.id ? { ...option, selected: !option.selected } : option,
+        ),
       );
     }
     textInputRef.current?.focus();
   };
 
-  const noSelectedItems = value.filter((option) => option.selected).length === 0;
+  const noSelectedItems = allOptions.filter((option) => option.selected).length === 0;
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      id={toggleId}
+      data-testid={toggleTestId}
       variant="typeahead"
-      aria-label="Options menu"
+      status={selectionRequired && noSelectedItems ? 'danger' : undefined}
+      aria-label={ariaLabel}
       onClick={onToggleClick}
       innerRef={toggleRef}
+      isDisabled={isDisabled}
       isExpanded={isOpen}
       isFullWidth
     >
@@ -144,6 +219,7 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
           role="combobox"
           isExpanded={isOpen}
           aria-controls="select-multi-typeahead-listbox"
+          placeholder={placeholder}
         >
           <ChipGroup aria-label="Current selections">
             {selected.map((selection, index) => (
@@ -165,7 +241,7 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
               variant="plain"
               onClick={() => {
                 setInputValue('');
-                setValue(value.map((option) => ({ ...option, selected: false })));
+                setValue(allOptions.map((option) => ({ ...option, selected: false })));
                 textInputRef.current?.focus();
               }}
               aria-label="Clear input value"
@@ -181,34 +257,63 @@ export const MultiSelection: React.FC<MultiSelectionProps> = ({ value, setValue
   return (
     <>
       <Select
+        id={id}
         isOpen={isOpen}
         selected={selected}
-        onSelect={(ev, selection) => onSelect(value.find((option) => option.name === selection))}
-        onOpenChange={() => setIsOpen(false)}
+        onSelect={(ev, selection) => {
+          const selectedOption = allOptions.find((option) => option.id === selection);
+          onSelect(selectedOption);
+        }}
+        onOpenChange={() => setOpen(false)}
         toggle={toggle}
       >
-        <SelectList isAriaMultiselectable>
-          {selectOptions.length === 0 && inputValue ? (
+        {visibleOptions.length === 0 && inputValue ? (
+          <SelectList isAriaMultiselectable>
             <SelectOption isDisabled>No results found</SelectOption>
-          ) : (
-            selectOptions.map((option, index) => (
+          </SelectList>
+        ) : null}
+        {selectGroups.map((g, index) => (
+          <>
+            <SelectGroup label={g.name} key={g.id}>
+              <SelectList isAriaMultiselectable>
+                {g.values.map((option) => (
+                  <SelectOption
+                    key={option.name}
+                    isFocused={focusedItemIndex === option.index}
+                    id={`select-multi-typeahead-${option.name.replace(' ', '-')}`}
+                    value={option.id}
+                    ref={null}
+                    isSelected={option.selected}
+                  >
+                    {option.name}
+                  </SelectOption>
+                ))}
+              </SelectList>
+            </SelectGroup>
+            {index < selectGroups.length - 1 || selectOptions.length ? <Divider /> : null}
+          </>
+        ))}
+        {selectOptions.length ? (
+          <SelectList isAriaMultiselectable>
+            {selectOptions.map((option) => (
               <SelectOption
                 key={option.name}
-                isFocused={focusedItemIndex === index}
+                isFocused={focusedItemIndex === option.index}
                 id={`select-multi-typeahead-${option.name.replace(' ', '-')}`}
-                value={option.name}
+                value={option.id}
                 ref={null}
+                isSelected={option.selected}
               >
                 {option.name}
               </SelectOption>
-            ))
-          )}
-        </SelectList>
+            ))}
+          </SelectList>
+        ) : null}
       </Select>
-      {noSelectedItems && (
-        <HelperText>
+      {noSelectedItems && selectionRequired && (
+        <HelperText isLiveRegion>
           <HelperTextItem variant="error" hasIcon data-testid="group-selection-error-text">
-            One or more group must be selected
+            {noSelectedOptionsMessage}
           </HelperTextItem>
         </HelperText>
       )}
diff --git a/frontend/src/components/SimpleSelect.tsx b/frontend/src/components/SimpleSelect.tsx
index bea5843ec7..25904e3885 100644
--- a/frontend/src/components/SimpleSelect.tsx
+++ b/frontend/src/components/SimpleSelect.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
-import { Truncate, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import {
+  Truncate,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption,
+  SelectGroup,
+  Divider,
+} from '@patternfly/react-core';
 import { MenuToggleProps } from '@patternfly/react-core/src/components/MenuToggle/MenuToggle';
 
 import './SimpleSelect.scss';
@@ -13,8 +21,15 @@ export type SimpleSelectOption = {
   isDisabled?: boolean;
 };
 
-type SimpleSelectProps = {
+export type SimpleGroupSelectOption = {
+  key: string;
+  label: string;
   options: SimpleSelectOption[];
+};
+
+type SimpleSelectProps = {
+  options?: SimpleSelectOption[];
+  groupedOptions?: SimpleGroupSelectOption[];
   value?: string;
   toggleLabel?: React.ReactNode;
   placeholder?: string;
@@ -33,6 +48,7 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
   isDisabled,
   onChange,
   options,
+  groupedOptions,
   placeholder = 'Select...',
   value,
   toggleLabel,
@@ -43,7 +59,14 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
   ...props
 }) => {
   const [open, setOpen] = React.useState(false);
-  const selectedOption = options.find(({ key }) => key === value);
+
+  const findOptionForKey = (key: string) =>
+    options?.find((option) => option.key === key) ||
+    groupedOptions
+      ?.reduce<SimpleSelectOption[]>((acc, group) => [...acc, ...group.options], [])
+      .find((o) => o.key === key);
+
+  const selectedOption = value ? findOptionForKey(value) : undefined;
   const selectedLabel = selectedOption?.label ?? placeholder;
 
   return (
@@ -54,7 +77,7 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
       onSelect={(e, selectValue) => {
         onChange(
           String(selectValue),
-          options.find((o) => o.key === selectValue)?.isPlaceholder ?? false,
+          !!selectValue && (findOptionForKey(String(selectValue))?.isPlaceholder ?? false),
         );
         setOpen(false);
       }}
@@ -76,19 +99,44 @@ const SimpleSelect: React.FC<SimpleSelectProps> = ({
       )}
       shouldFocusToggleOnSelect
     >
-      <SelectList>
-        {options.map(({ key, label, dropdownLabel, description, isDisabled: optionDisabled }) => (
-          <SelectOption
-            key={key}
-            value={key}
-            description={description}
-            isDisabled={optionDisabled}
-            data-testid={key}
-          >
-            {dropdownLabel || label}
-          </SelectOption>
-        ))}
-      </SelectList>
+      {groupedOptions?.map((group, index) => (
+        <>
+          {index > 0 ? <Divider /> : null}
+          <SelectGroup key={group.key} label={group.label}>
+            <SelectList>
+              {group.options.map(
+                ({ key, label, dropdownLabel, description, isDisabled: optionDisabled }) => (
+                  <SelectOption
+                    key={key}
+                    value={key}
+                    description={description}
+                    isDisabled={optionDisabled}
+                    data-testid={key}
+                  >
+                    {dropdownLabel || label}
+                  </SelectOption>
+                ),
+              )}
+            </SelectList>
+          </SelectGroup>
+        </>
+      )) ?? null}
+      {options?.length ? (
+        <SelectList>
+          {groupedOptions?.length ? <Divider /> : null}
+          {options.map(({ key, label, dropdownLabel, description, isDisabled: optionDisabled }) => (
+            <SelectOption
+              key={key}
+              value={key}
+              description={description}
+              isDisabled={optionDisabled}
+              data-testid={key}
+            >
+              {dropdownLabel || label}
+            </SelectOption>
+          ))}
+        </SelectList>
+      ) : null}
     </Select>
   );
 };
diff --git a/frontend/src/components/TypeaheadSelect.tsx b/frontend/src/components/TypeaheadSelect.tsx
new file mode 100644
index 0000000000..55a4b493b5
--- /dev/null
+++ b/frontend/src/components/TypeaheadSelect.tsx
@@ -0,0 +1,420 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  MenuToggleProps,
+  SelectProps,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+
+export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content' | 'isSelected'> {
+  /** Content of the select option. */
+  content: string | number;
+  /** Value of the select option. */
+  value: string | number;
+  /** Indicator for option being selected */
+  isSelected?: boolean;
+}
+
+export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
+  /** Options of the select */
+  selectOptions: TypeaheadSelectOption[];
+  /** Callback triggered on selection. */
+  onSelect?: (
+    _event:
+      | React.MouseEvent<Element, MouseEvent>
+      | React.KeyboardEvent<HTMLInputElement>
+      | undefined,
+    selection: string | number,
+  ) => void;
+  /** Callback triggered when the select opens or closes. */
+  onToggle?: (nextIsOpen: boolean) => void;
+  /** Callback triggered when the text in the input field changes. */
+  onInputChange?: (newValue: string) => void;
+  /** Function to return items matching the current filter value */
+  filterFunction?: (
+    filterValue: string,
+    options: TypeaheadSelectOption[],
+  ) => TypeaheadSelectOption[];
+  /** Callback triggered when the clear button is selected */
+  onClearSelection?: () => void;
+  /** Placeholder text for the select input. */
+  placeholder?: string;
+  /** Flag to indicate if the typeahead select allows new items */
+  isCreatable?: boolean;
+  /** Flag to indicate if create option should be at top of typeahead */
+  isCreateOptionOnTop?: boolean;
+  /** Message to display to create a new option */
+  createOptionMessage?: string | ((newValue: string) => string);
+  /** Message to display when no options are available. */
+  noOptionsAvailableMessage?: string;
+  /** Message to display when no options match the filter. */
+  noOptionsFoundMessage?: string | ((filter: string) => string);
+  /** Flag indicating the select should be disabled. */
+  isDisabled?: boolean;
+  /** Width of the toggle. */
+  toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
+}
+
+const defaultNoOptionsFoundMessage = (filter: string) => `No results found for "${filter}"`;
+const defaultCreateOptionMessage = (newValue: string) => `Create "${newValue}"`;
+
+const defaultFilterFunction = (filterValue: string, options: TypeaheadSelectOption[]) =>
+  options.filter((o) => String(o.content).toLowerCase().includes(filterValue.toLowerCase()));
+
+const TypeaheadSelect: React.FunctionComponent<TypeaheadSelectProps> = ({
+  innerRef,
+  selectOptions,
+  onSelect,
+  onToggle,
+  onInputChange,
+  filterFunction = defaultFilterFunction,
+  onClearSelection,
+  placeholder = 'Select an option',
+  noOptionsAvailableMessage = 'No options are available',
+  noOptionsFoundMessage = defaultNoOptionsFoundMessage,
+  isCreatable = false,
+  isCreateOptionOnTop = false,
+  createOptionMessage = defaultCreateOptionMessage,
+  isDisabled,
+  toggleWidth,
+  toggleProps,
+  ...props
+}: TypeaheadSelectProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [filterValue, setFilterValue] = React.useState<string>('');
+  const [isFiltering, setIsFiltering] = React.useState<boolean>(false);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  const NO_RESULTS = 'no results';
+
+  const selected = React.useMemo(
+    () => selectOptions.find((option) => option.value === props.selected || option.isSelected),
+    [props.selected, selectOptions],
+  );
+
+  const filteredSelections = React.useMemo(() => {
+    let newSelectOptions: TypeaheadSelectOption[] = selectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (isFiltering && filterValue) {
+      newSelectOptions = filterFunction(filterValue, selectOptions);
+
+      if (
+        isCreatable &&
+        filterValue.trim() &&
+        !newSelectOptions.find((o) => String(o.content).toLowerCase() === filterValue.toLowerCase())
+      ) {
+        const createOption = {
+          content:
+            typeof createOptionMessage === 'string'
+              ? createOptionMessage
+              : createOptionMessage(filterValue),
+          value: filterValue,
+        };
+        newSelectOptions = isCreateOptionOnTop
+          ? [createOption, ...newSelectOptions]
+          : [...newSelectOptions, createOption];
+      }
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            isAriaDisabled: true,
+            content:
+              typeof noOptionsFoundMessage === 'string'
+                ? noOptionsFoundMessage
+                : noOptionsFoundMessage(filterValue),
+            value: NO_RESULTS,
+          },
+        ];
+      }
+    }
+
+    // When no options are  available,  display 'No options available'
+    if (!newSelectOptions.length) {
+      newSelectOptions = [
+        {
+          isAriaDisabled: true,
+          content: noOptionsAvailableMessage,
+          value: NO_RESULTS,
+        },
+      ];
+    }
+
+    return newSelectOptions;
+  }, [
+    isFiltering,
+    filterValue,
+    filterFunction,
+    selectOptions,
+    noOptionsFoundMessage,
+    isCreatable,
+    isCreateOptionOnTop,
+    createOptionMessage,
+    noOptionsAvailableMessage,
+  ]);
+
+  React.useEffect(() => {
+    if (isFiltering) {
+      openMenu();
+    }
+    // Don't update on openMenu changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFiltering]);
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(String(focusedItem.value));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const openMenu = () => {
+    if (!isOpen) {
+      if (onToggle) {
+        onToggle(true);
+      }
+      setIsOpen(true);
+    }
+  };
+
+  const closeMenu = () => {
+    if (onToggle) {
+      onToggle(false);
+    }
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+    setIsFiltering(false);
+    setFilterValue(String(selected?.content ?? ''));
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      openMenu();
+      setTimeout(() => {
+        textInputRef.current?.focus();
+      }, 100);
+    } else if (isFiltering) {
+      closeMenu();
+    }
+  };
+
+  const selectOption = (
+    _event:
+      | React.MouseEvent<Element, MouseEvent>
+      | React.KeyboardEvent<HTMLInputElement>
+      | undefined,
+    option: TypeaheadSelectOption,
+  ) => {
+    if (onSelect) {
+      onSelect(_event, option.value);
+    }
+    closeMenu();
+  };
+
+  const handleSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined,
+  ) => {
+    if (value && value !== NO_RESULTS) {
+      const optionToSelect = selectOptions.find((option) => option.value === value);
+      if (optionToSelect) {
+        selectOption(_event, optionToSelect);
+      } else if (isCreatable) {
+        selectOption(_event, { value, content: value });
+      }
+    }
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setFilterValue(value || '');
+    setIsFiltering(true);
+    if (onInputChange) {
+      onInputChange(value);
+    }
+
+    resetActiveAndFocusedItem();
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    openMenu();
+
+    if (filteredSelections.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = filteredSelections.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+
+      // Skip disabled options
+      while (filteredSelections[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = filteredSelections.length - 1;
+        }
+      }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === filteredSelections.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
+
+      // Skip disabled options
+      while (filteredSelections[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === filteredSelections.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? filteredSelections[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (
+          isOpen &&
+          focusedItem &&
+          focusedItem.value !== NO_RESULTS &&
+          !focusedItem.isAriaDisabled
+        ) {
+          selectOption(event, focusedItem);
+        }
+
+        openMenu();
+
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const onToggleClick = () => {
+    if (!isOpen) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
+    textInputRef.current?.focus();
+  };
+
+  const onClearButtonClick = () => {
+    if (selected && onSelect) {
+      onSelect(undefined, selected.value);
+    }
+    setFilterValue('');
+    if (onInputChange) {
+      onInputChange('');
+    }
+    setIsFiltering(false);
+    resetActiveAndFocusedItem();
+    textInputRef.current?.focus();
+    if (onClearSelection) {
+      onClearSelection();
+    }
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      isFullWidth
+      style={{ width: toggleWidth }}
+      {...toggleProps}
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={isFiltering ? filterValue : selected?.content ?? ''}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={placeholder}
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities
+          {...(!(isFiltering && filterValue) ? { style: { display: 'none' } } : {})}
+        >
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={handleSelect}
+      onOpenChange={(open) => !open && closeMenu()}
+      toggle={toggle}
+      ref={innerRef}
+      {...props}
+    >
+      <SelectList>
+        {filteredSelections.map((option, index) => {
+          const { content, value, ...optionProps } = option;
+          return (
+            <SelectOption
+              key={value}
+              value={value}
+              isFocused={focusedItemIndex === index}
+              {...optionProps}
+            >
+              {content}
+            </SelectOption>
+          );
+        })}
+      </SelectList>
+    </Select>
+  );
+};
+
+export default TypeaheadSelect;
diff --git a/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx b/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx
index f0bbe187a8..deb2a036be 100644
--- a/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx
+++ b/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons';
 import { PipelinesFilter } from '~/concepts/pipelines/types';
 import useDebounceCallback from '~/utilities/useDebounceCallback';
 import { PipelinesFilterOp } from '~/concepts/pipelines/kfTypes';
 import useExperiments from '~/concepts/pipelines/apiHooks/useExperiments';
+import TypeaheadSelect from '~/components/TypeaheadSelect';
 
 type Props = {
   onChange: (selected?: { label: string; value: string }) => void;
@@ -12,7 +12,6 @@ type Props = {
 };
 
 const ExperimentSearchInput: React.FC<Props> = ({ selected, onChange }) => {
-  const [open, setOpen] = React.useState(false);
   const [filterText, setFilterText] = React.useState('');
   const [filter, setFilter] = React.useState<PipelinesFilter>();
   const [{ items }, loaded] = useExperiments({ pageSize: filter ? 10 : 0, filter });
@@ -32,55 +31,41 @@ const ExperimentSearchInput: React.FC<Props> = ({ selected, onChange }) => {
     );
   }, [setDebouncedFilter, filterText]);
 
-  const children = loaded
-    ? experiments.map((experiment) => (
-        <SelectOption key={experiment.experiment_id} value={experiment.experiment_id}>
-          {experiment.display_name}
-        </SelectOption>
-      ))
-    : [];
-
-  const hasSelection = React.useMemo(
+  const selectOptions = React.useMemo(
     () =>
-      selected?.value
-        ? experiments.find((experiment) => experiment.experiment_id === selected.value)
-        : undefined,
-    [experiments, selected?.value],
+      loaded
+        ? experiments.map((experiment) => ({
+            value: experiment.experiment_id,
+            content: experiment.display_name,
+            selected: selected?.value === experiment.experiment_id,
+          }))
+        : [],
+    [experiments, loaded, selected?.value],
   );
 
   return (
-    <Select
-      toggleIcon={<SearchIcon />}
-      autoComplete="off"
-      isOpen={open}
-      variant={SelectVariant.typeahead}
-      onFilter={() => children}
-      onTypeaheadInputChanged={setFilterText}
-      onToggle={(e, isOpen) => setOpen(isOpen)}
-      selections={hasSelection ? selected?.value : undefined}
-      onSelect={(_, value) => {
+    <TypeaheadSelect
+      selectOptions={selectOptions}
+      selected={selected?.value}
+      onSelect={(_ev, value) => {
         if (typeof value === 'string') {
           const experiment = experiments.find((p) => p.experiment_id === value);
           if (experiment) {
             setFilterText(experiment.display_name);
             onChange({ value, label: experiment.display_name });
-            setOpen(false);
           }
         }
       }}
-      onClear={() => {
-        setFilterText('');
-        setFilter(undefined);
+      onInputChange={setFilterText}
+      placeholder="Search..."
+      noOptionsFoundMessage="No matching experiments"
+      noOptionsAvailableMessage="Search for an experiment name"
+      toggleProps={{
+        id: 'experiment-search-input',
+        icon: <SearchIcon style={{ marginLeft: 8 }} />,
       }}
-      placeholderText="Search..."
-      noResultsFoundText="Search for an experiment name"
-      loadingVariant={filter && !loaded ? 'spinner' : undefined}
-      isInputValuePersisted
-      toggleId="experiment-search-input"
       data-testid="experiment-search-select"
-    >
-      {children}
-    </Select>
+    />
   );
 };
 
diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx
index 33f1deeefa..029d82f39f 100644
--- a/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx
+++ b/frontend/src/concepts/roleBinding/RoleBindingPermissionsNameInput.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { RoleBindingSubject } from '~/k8sTypes';
 import { namespaceToProjectDisplayName } from '~/concepts/projects/utils';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
+import TypeaheadSelect from '~/components/TypeaheadSelect';
 import { RoleBindingPermissionsRBType } from './types';
 
 type RoleBindingPermissionsNameInputProps = {
@@ -26,7 +26,6 @@ const RoleBindingPermissionsNameInput: React.FC<RoleBindingPermissionsNameInputP
   isProjectSubject,
 }) => {
   const { projects } = React.useContext(ProjectsContext);
-  const [isOpen, setIsOpen] = React.useState(false);
 
   if (!typeAhead) {
     return (
@@ -48,33 +47,28 @@ const RoleBindingPermissionsNameInput: React.FC<RoleBindingPermissionsNameInputP
     );
   }
 
+  const selectOptions = typeAhead.map((option) => {
+    const displayName = isProjectSubject ? namespaceToProjectDisplayName(option, projects) : option;
+    return { value: displayName, content: displayName };
+  });
+
+  if (value && !typeAhead.includes(value)) {
+    selectOptions.push({ value, content: value });
+  }
+
   return (
-    <Select
-      variant={SelectVariant.typeahead}
-      typeAheadAriaLabel="Name selection"
-      selections={value}
-      onToggle={(e, isOpened) => {
-        setIsOpen(isOpened);
-      }}
-      onSelect={(e, selection) => {
-        if (typeof selection === 'string') {
-          onChange(selection);
-          setIsOpen(false);
+    <TypeaheadSelect
+      selectOptions={selectOptions}
+      selected={value}
+      isCreatable
+      onClearSelection={onClear}
+      onSelect={(_ev, selectedValue) => {
+        if (typeof selectedValue === 'string') {
+          onChange(selectedValue);
         }
       }}
-      onClear={onClear}
-      isOpen={isOpen}
-      isCreatable
-      aria-labelledby="name-selection"
-      placeholderText={placeholderText}
-    >
-      {typeAhead.map((option, index) => (
-        <SelectOption
-          key={index}
-          value={isProjectSubject ? namespaceToProjectDisplayName(option, projects) : option}
-        />
-      ))}
-    </Select>
+      placeholder={placeholderText}
+    />
   );
 };
 
diff --git a/frontend/src/pages/groupSettings/GroupSettings.tsx b/frontend/src/pages/groupSettings/GroupSettings.tsx
index 20d5ec9da8..48a1f45ea8 100644
--- a/frontend/src/pages/groupSettings/GroupSettings.tsx
+++ b/frontend/src/pages/groupSettings/GroupSettings.tsx
@@ -92,12 +92,15 @@ const GroupSettings: React.FC = () => {
           >
             <MultiSelection
               ariaLabel={adminDesc}
+              toggleTestId="group-setting-select"
               value={groupSettings.adminGroups.map((g) => ({
                 id: g.id,
                 name: g.name,
                 selected: g.enabled,
               }))}
               setValue={(newState) => handleMenuItemSelection(newState, GroupsConfigField.ADMIN)}
+              selectionRequired
+              noSelectedOptionsMessage="One or more group must be selected"
             />
             {groupSettings.errorAdmin ? (
               <Alert
@@ -129,12 +132,15 @@ const GroupSettings: React.FC = () => {
           >
             <MultiSelection
               ariaLabel={userDesc}
+              toggleTestId="group-setting-select"
               value={groupSettings.allowedGroups.map((g) => ({
                 id: g.id,
                 name: g.name,
                 selected: g.enabled,
               }))}
               setValue={(newState) => handleMenuItemSelection(newState, GroupsConfigField.USER)}
+              selectionRequired
+              noSelectedOptionsMessage="One or more group must be selected"
             />
             {groupSettings.errorUser ? (
               <Alert
diff --git a/frontend/src/pages/modelRegistry/screens/ModelRegistrySelector.tsx b/frontend/src/pages/modelRegistry/screens/ModelRegistrySelector.tsx
index 3591b97cff..8557334047 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelRegistrySelector.tsx
+++ b/frontend/src/pages/modelRegistry/screens/ModelRegistrySelector.tsx
@@ -1,10 +1,4 @@
 import * as React from 'react';
-import {
-  SelectVariant,
-  Select,
-  SelectGroup,
-  SelectOption,
-} from '@patternfly/react-core/deprecated';
 import {
   Bullseye,
   Button,
@@ -12,9 +6,15 @@ import {
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
+  Divider,
   Flex,
   FlexItem,
+  MenuToggle,
   Popover,
+  Select,
+  SelectGroup,
+  SelectList,
+  SelectOption,
   Tooltip,
 } from '@patternfly/react-core';
 import truncateStyles from '@patternfly/react-styles/css/components/Truncate/truncate';
@@ -83,27 +83,57 @@ const ModelRegistrySelector: React.FC<ModelRegistrySelectorProps> = ({
 
   const options = [
     <SelectGroup label="Select a model registry" key="all">
-      {modelRegistryServices.map((mr) => (
-        <SelectOption
-          id={mr.metadata.name}
-          key={mr.metadata.name}
-          value={getResourceNameFromK8sResource(mr)}
-          description={getMRSelectDescription(mr)}
-          isFavorite={favorites.includes(mr.metadata.name)}
-        >
-          {getDisplayNameFromK8sResource(mr)}
-        </SelectOption>
-      ))}
+      <SelectList>
+        {modelRegistryServices.map((mr) => (
+          <SelectOption
+            id={mr.metadata.name}
+            key={mr.metadata.name}
+            value={getResourceNameFromK8sResource(mr)}
+            description={getMRSelectDescription(mr)}
+            isFavorited={favorites.includes(mr.metadata.name)}
+          >
+            {getDisplayNameFromK8sResource(mr)}
+          </SelectOption>
+        ))}
+      </SelectList>
     </SelectGroup>,
   ];
 
+  const createFavorites = (favIds: string[]) => {
+    const favorite: JSX.Element[] = [];
+
+    options.forEach((item) => {
+      if (item.type === SelectList) {
+        item.props.children.filter(
+          (child: JSX.Element) => favIds.includes(child.props.value) && favorite.push(child),
+        );
+      } else if (item.type === SelectGroup) {
+        item.props.children.props.children.filter(
+          (child: JSX.Element) => favIds.includes(child.props.value) && favorite.push(child),
+        );
+      } else if (favIds.includes(item.props.value)) {
+        favorite.push(item);
+      }
+    });
+
+    return favorite;
+  };
+
   const selector = (
     <Select
-      data-testid="model-registry-selector-dropdown"
-      toggleId="model-registry-selector-dropdown"
-      variant={SelectVariant.single}
-      onToggle={() => setIsOpen(!isOpen)}
-      isDisabled={modelRegistryServices.length === 0}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          data-testid="model-registry-selector-dropdown"
+          aria-label="Model registry toggle"
+          id="download-steps-logs-toggle"
+          onClick={() => setIsOpen(!isOpen)}
+          isExpanded={isOpen}
+          isDisabled={modelRegistryServices.length === 0}
+        >
+          {toggleLabel}
+        </MenuToggle>
+      )}
       onSelect={(_e, value) => {
         setIsOpen(false);
         updatePreferredModelRegistry(
@@ -113,18 +143,29 @@ const ModelRegistrySelector: React.FC<ModelRegistrySelectorProps> = ({
           onSelection(value);
         }
       }}
-      selections={toggleLabel}
+      selected={toggleLabel}
+      onOpenChange={(open) => setIsOpen(open)}
       isOpen={isOpen}
-      isGrouped
-      onFavorite={(itemId, isFavorite) => {
-        if (isFavorite) {
-          setFavorites(favorites.filter((id) => id !== itemId));
-        } else {
-          setFavorites([...favorites, itemId]);
+      onActionClick={(event: React.MouseEvent, value: string, actionId: string) => {
+        event.stopPropagation();
+        if (actionId === 'fav') {
+          const isFavorited = favorites.includes(value);
+          if (isFavorited) {
+            setFavorites(favorites.filter((id) => id !== value));
+          } else {
+            setFavorites([...favorites, value]);
+          }
         }
       }}
-      favorites={favorites}
     >
+      {favorites.length > 0 && (
+        <React.Fragment key="favorites-group">
+          <SelectGroup label="Favorites">
+            <SelectList>{createFavorites(favorites)}</SelectList>
+          </SelectGroup>
+          <Divider />
+        </React.Fragment>
+      )}
       {options}
     </Select>
   );
diff --git a/frontend/src/pages/modelServing/screens/metrics/bias/BiasMetricConfigSelector.tsx b/frontend/src/pages/modelServing/screens/metrics/bias/BiasMetricConfigSelector.tsx
index f9196fa154..1327da0275 100644
--- a/frontend/src/pages/modelServing/screens/metrics/bias/BiasMetricConfigSelector.tsx
+++ b/frontend/src/pages/modelServing/screens/metrics/bias/BiasMetricConfigSelector.tsx
@@ -1,20 +1,8 @@
 import React from 'react';
-import {
-  Select,
-  SelectGroup,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core/deprecated';
 import { useModelBiasData } from '~/concepts/trustyai/context/useModelBiasData';
 import { BiasMetricConfig } from '~/concepts/trustyai/types';
 import { BiasMetricType } from '~/api';
-import {
-  byId,
-  byNotId,
-  createBiasSelectOption,
-  isBiasSelectOption,
-} from '~/pages/modelServing/screens/metrics/utils';
-import { BiasSelectOption } from '~/pages/modelServing/screens/metrics/types';
+import { MultiSelection, SelectionOptions } from '~/components/MultiSelection';
 
 type BiasMetricConfigSelectorProps = {
   onChange: (x: BiasMetricConfig[]) => void;
@@ -26,71 +14,70 @@ const BiasMetricConfigSelector: React.FC<BiasMetricConfigSelectorProps> = ({
   initialSelections,
 }) => {
   const { biasMetricConfigs, loaded } = useModelBiasData();
-
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const selected = React.useMemo(
-    () => initialSelections.map(createBiasSelectOption),
-    [initialSelections],
-  );
-
+  const [uiSelections, setUISelections] = React.useState<string>();
+  const [currentSelections, setCurrentSelections] = React.useState<string>();
   const elementId = React.useId();
 
-  const changeState = React.useCallback(
-    (options: BiasSelectOption[]) => {
-      onChange(options.map((x) => x.biasMetricConfig));
-    },
-    [onChange],
-  );
+  const spdConfigs = biasMetricConfigs.filter((x) => x.metricType === BiasMetricType.SPD);
+  const dirConfigs = biasMetricConfigs.filter((x) => x.metricType === BiasMetricType.DIR);
 
   return (
     <div style={{ maxWidth: '600px' }}>
       <span id={elementId} hidden>
         Select the metrics to display charts for
       </span>
-      <Select
-        variant={SelectVariant.typeaheadMulti}
-        typeAheadAriaLabel="Select a metric"
-        onToggle={(e, val) => setIsOpen(val)}
-        onSelect={(event, item) => {
-          if (isBiasSelectOption(item)) {
-            if (selected.find(byId(item))) {
-              // User has de-selected an item.
-              changeState(selected.filter(byNotId(item)));
-            } else {
-              // User has selected an item.
-              changeState([...selected, item]);
+      <div>ALL: {biasMetricConfigs.map((c) => c.name).join(', ')}</div>
+      <div>UI: {uiSelections}</div>
+      <div>current: {currentSelections}</div>
+      <div>initialSelections: {initialSelections.map((s) => s.name).join(', ')}</div>
+      <MultiSelection
+        ariaLabel="Select a metric"
+        groupedValues={[
+          {
+            id: 'SPD',
+            name: 'SPD',
+            values: spdConfigs.map((config) => ({
+              id: config.id,
+              name: config.name,
+              selected: !!initialSelections.find((s) => s.id === config.id),
+            })),
+          },
+          {
+            id: 'DIR',
+            name: 'DIR',
+            values: dirConfigs.map((config) => ({
+              id: config.id,
+              name: config.name,
+              selected: !!initialSelections.find((s) => s.id === config.id),
+            })),
+          },
+        ]}
+        setValue={(newState: SelectionOptions[]) => {
+          setUISelections(
+            newState
+              .filter((s) => s.selected)
+              .map((s) => s.name)
+              .join(', '),
+          );
+          const selections = newState.reduce<BiasMetricConfig[]>((acc, item) => {
+            if (item.selected) {
+              const selectedConfig = biasMetricConfigs.find((s) => s.id === item.id);
+              if (selectedConfig) {
+                acc.push(selectedConfig);
+              }
             }
-          }
-        }}
-        onClear={() => {
-          changeState([]);
-          setIsOpen(false);
+            return acc;
+          }, []);
+          setCurrentSelections(selections.map((s) => s.name).join(', '));
+          onChange(selections);
         }}
-        selections={selected}
-        isOpen={isOpen}
-        aria-labelledby={elementId}
-        placeholderText="Select a metric"
+        selectionRequired
+        noSelectedOptionsMessage="One or more groups must be seleted"
+        placeholder="Select a metric"
         isDisabled={!(loaded && biasMetricConfigs.length > 0)}
-        isGrouped
         id="bias-metric-config-selector"
         toggleId="bias-metric-config-selector"
-      >
-        <SelectGroup label="SPD" key="SPD">
-          {biasMetricConfigs
-            .filter((x) => x.metricType === BiasMetricType.SPD)
-            .map((x) => (
-              <SelectOption key={x.id} value={createBiasSelectOption(x)} />
-            ))}
-        </SelectGroup>
-        <SelectGroup label="DIR" key="DIR">
-          {biasMetricConfigs
-            .filter((x) => x.metricType === BiasMetricType.DIR)
-            .map((x) => (
-              <SelectOption key={x.id} value={createBiasSelectOption(x)} />
-            ))}
-        </SelectGroup>
-      </Select>
+      />
     </div>
   );
 };
diff --git a/frontend/src/pages/modelServing/screens/metrics/utils.tsx b/frontend/src/pages/modelServing/screens/metrics/utils.tsx
index 5aa4d8d290..b3da7e4e25 100644
--- a/frontend/src/pages/modelServing/screens/metrics/utils.tsx
+++ b/frontend/src/pages/modelServing/screens/metrics/utils.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ReactElement } from 'react';
 import * as _ from 'lodash-es';
 import { BreadcrumbItem } from '@patternfly/react-core';
-import { SelectOptionObject } from '@patternfly/react-core/deprecated';
 import { Link } from 'react-router-dom';
 import { TimeframeTitle } from '~/concepts/metrics/types';
 import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
@@ -272,9 +271,6 @@ export const createBiasSelectOption = (biasMetricConfig: BiasMetricConfig): Bias
     compareTo: byId(id),
   };
 };
-export const isBiasSelectOption = (obj: SelectOptionObject): obj is BiasSelectOption =>
-  'biasMetricConfig' in obj;
-
 export const convertInputType = (input: string): number | boolean | string => {
   if (input !== '' && !Number.isNaN(Number(input))) {
     return Number(input);
diff --git a/frontend/src/pages/projects/components/ExistingPVCField.tsx b/frontend/src/pages/projects/components/ExistingPVCField.tsx
deleted file mode 100644
index 6d3eb5a953..0000000000
--- a/frontend/src/pages/projects/components/ExistingPVCField.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { Alert, FormGroup } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
-import { PersistentVolumeClaimKind } from '~/k8sTypes';
-import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
-
-type ExistingPVCFieldProps = {
-  fieldId: string;
-  storages: PersistentVolumeClaimKind[];
-  loaded: boolean;
-  loadError?: Error;
-  selectedStorage?: string;
-  setStorage: (storage?: string) => void;
-  selectDirection?: 'up' | 'down';
-  menuAppendTo?: HTMLElement | 'parent';
-};
-
-const ExistingPVCField: React.FC<ExistingPVCFieldProps> = ({
-  fieldId,
-  storages,
-  loaded,
-  loadError,
-  selectedStorage,
-  setStorage,
-  selectDirection = 'down',
-  menuAppendTo = 'parent',
-}) => {
-  const [isOpen, setOpen] = React.useState(false);
-
-  if (loadError) {
-    return (
-      <Alert title="Error loading pvcs" variant="danger">
-        {loadError.message}
-      </Alert>
-    );
-  }
-
-  const empty = storages.length === 0;
-  let placeholderText: string;
-  if (!loaded) {
-    placeholderText = 'Loading storages...';
-  } else if (empty) {
-    placeholderText = 'No existing storages available';
-  } else {
-    placeholderText = 'Select a persistent storage';
-  }
-
-  return (
-    <FormGroup
-      isRequired
-      label="Persistent storage"
-      fieldId={fieldId}
-      data-testid="persistent-storage-group"
-    >
-      <Select
-        variant="typeahead"
-        aria-label="Persistent storage select"
-        selections={selectedStorage}
-        isOpen={isOpen}
-        onClear={() => {
-          setStorage(undefined);
-          setOpen(false);
-        }}
-        isDisabled={empty}
-        onSelect={(e, selection) => {
-          if (typeof selection === 'string') {
-            setStorage(selection);
-            setOpen(false);
-          }
-        }}
-        onToggle={(e, isExpanded) => setOpen(isExpanded)}
-        placeholderText={placeholderText}
-        direction={selectDirection}
-        menuAppendTo={menuAppendTo}
-      >
-        {storages.map((pvc) => (
-          <SelectOption key={pvc.metadata.name} value={pvc.metadata.name}>
-            {getDisplayNameFromK8sResource(pvc)}
-          </SelectOption>
-        ))}
-      </Select>
-    </FormGroup>
-  );
-};
-
-export default ExistingPVCField;
diff --git a/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx b/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx
index 3744594837..b799cc277f 100644
--- a/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx
+++ b/frontend/src/pages/projects/notebook/ConnectedNotebookField.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { SearchIcon } from '@patternfly/react-icons';
 import { NotebookKind } from '~/k8sTypes';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import { MultiSelection } from '~/components/MultiSelection';
+import TypeaheadSelect from '~/components/TypeaheadSelect';
 
 type SelectNotebookFieldProps = {
   loaded: boolean;
@@ -26,8 +28,6 @@ const ConnectedNotebookField: React.FC<SelectNotebookFieldProps> = ({
   isMultiSelect,
   placeholder = 'Select a workbench to connect',
 }) => {
-  const [notebookSelectOpen, setNotebookSelectOpen] = React.useState(false);
-
   const noNotebooks = notebooks.length === 0;
   const disabled = !!isDisabled || !loaded || noNotebooks;
 
@@ -40,46 +40,57 @@ const ConnectedNotebookField: React.FC<SelectNotebookFieldProps> = ({
     placeholderText = placeholder;
   }
 
+  const options = React.useMemo(
+    () =>
+      notebooks.map((notebook) => ({
+        value: notebook.metadata.name,
+        content: getDisplayNameFromK8sResource(notebook),
+      })),
+    [notebooks],
+  );
+
   return (
     <FormGroup
       label="Connected workbench"
       fieldId="connect-existing-workbench"
       data-testid="connect-existing-workbench-group"
     >
-      <Select
-        variant={isMultiSelect ? 'typeaheadmulti' : 'typeahead'}
-        selections={selections}
-        isOpen={notebookSelectOpen}
-        isDisabled={disabled}
-        aria-label="Notebook select"
-        onClear={() => {
-          onSelect([]);
-          setNotebookSelectOpen(false);
-        }}
-        onSelect={(e, selection) => {
-          if (typeof selection !== 'string') {
-            return;
-          }
-
-          if (selections.includes(selection)) {
-            onSelect(selections.filter((f) => f !== selection));
-          } else if (isMultiSelect) {
-            onSelect([...selections, selection]);
-          } else {
-            onSelect([selection]);
+      {isMultiSelect ? (
+        <MultiSelection
+          isDisabled={disabled}
+          ariaLabel="Notebook select"
+          value={notebooks.map((notebook) => ({
+            id: notebook.metadata.name,
+            name: getDisplayNameFromK8sResource(notebook),
+            selected: selections.includes(notebook.metadata.name),
+          }))}
+          setValue={(newState) =>
+            onSelect(newState.filter((n) => n.selected).map((n) => String(n.id)))
           }
-          setNotebookSelectOpen(false);
-        }}
-        onToggle={(e, isOpen) => setNotebookSelectOpen(isOpen)}
-        placeholderText={placeholderText}
-        menuAppendTo="parent"
-      >
-        {notebooks.map((notebook) => (
-          <SelectOption key={notebook.metadata.name} value={notebook.metadata.name}>
-            {getDisplayNameFromK8sResource(notebook)}
-          </SelectOption>
-        ))}
-      </Select>
+        />
+      ) : (
+        <TypeaheadSelect
+          isDisabled={disabled}
+          selectOptions={options}
+          selected={selections[0]}
+          onClearSelection={() => onSelect([])}
+          onSelect={(_ev, value) => {
+            if (typeof value === 'string') {
+              const notebook = notebooks.find((n) => n.metadata.name === value);
+              if (notebook) {
+                onSelect([value]);
+              }
+            }
+          }}
+          placeholder={placeholderText}
+          noOptionsFoundMessage="Search for a workbench name"
+          toggleProps={{
+            id: 'notebook-search-input',
+            icon: <SearchIcon style={{ marginLeft: 8 }} />,
+          }}
+          data-testid="notebook-search-select"
+        />
+      )}
       <FormHelperText>
         <HelperText>
           <HelperTextItem>{!noNotebooks && selectionHelperText}</HelperTextItem>
diff --git a/frontend/src/pages/projects/screens/spawner/dataConnection/ExistingDataConnectionField.tsx b/frontend/src/pages/projects/screens/spawner/dataConnection/ExistingDataConnectionField.tsx
index 65bad27099..183264cdca 100644
--- a/frontend/src/pages/projects/screens/spawner/dataConnection/ExistingDataConnectionField.tsx
+++ b/frontend/src/pages/projects/screens/spawner/dataConnection/ExistingDataConnectionField.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Alert, FormGroup } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { getDataConnectionDisplayName } from '~/pages/projects/screens/detail/data-connections/utils';
+import TypeaheadSelect from '~/components/TypeaheadSelect';
 
 type ExistingDataConnectionFieldProps = {
   fieldId: string;
@@ -15,11 +15,21 @@ const ExistingDataConnectionField: React.FC<ExistingDataConnectionFieldProps> =
   selectedDataConnection,
   setDataConnection,
 }) => {
-  const [isOpen, setOpen] = React.useState(false);
   const {
     dataConnections: { data: connections, loaded, error },
   } = React.useContext(ProjectDetailsContext);
 
+  const selectOptions = React.useMemo(
+    () =>
+      loaded
+        ? connections.map((connection) => ({
+            value: connection.data.metadata.name,
+            content: getDataConnectionDisplayName(connection),
+          }))
+        : [],
+    [connections, loaded],
+  );
+
   if (error) {
     return (
       <Alert title="Error loading data connections" variant="danger">
@@ -45,32 +55,15 @@ const ExistingDataConnectionField: React.FC<ExistingDataConnectionFieldProps> =
       fieldId={fieldId}
       data-testid="data-connection-group"
     >
-      <Select
-        variant="typeahead"
-        selections={selectedDataConnection}
-        isOpen={isOpen}
-        onClear={() => {
-          setDataConnection(undefined);
-          setOpen(false);
-        }}
-        isDisabled={empty}
-        onSelect={(e, selection) => {
-          if (typeof selection === 'string') {
-            setDataConnection(selection);
-            setOpen(false);
-          }
-        }}
-        onToggle={(e, isExpanded) => setOpen(isExpanded)}
-        placeholderText={placeholderText}
-        direction="up"
-        menuAppendTo="parent"
-      >
-        {connections.map((connection) => (
-          <SelectOption key={connection.data.metadata.name} value={connection.data.metadata.name}>
-            {getDataConnectionDisplayName(connection)}
-          </SelectOption>
-        ))}
-      </Select>
+      <TypeaheadSelect
+        selectOptions={selectOptions}
+        selected={selectedDataConnection}
+        onSelect={(_ev, selection) => setDataConnection(String(selection))}
+        onClearSelection={() => setDataConnection()}
+        placeholder={placeholderText}
+        noOptionsFoundMessage={(filter) => `No data connection was found for "${filter}"`}
+        isDisabled={!loaded || connections.length === 0}
+      />
     </FormGroup>
   );
 };
diff --git a/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx b/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx
index 124843832c..dfeb9b5df6 100644
--- a/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx
+++ b/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
+import { Alert, FormGroup } from '@patternfly/react-core';
 import { ExistingStorageObject } from '~/pages/projects/types';
-import ExistingPVCField from '~/pages/projects/components/ExistingPVCField';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
+import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import TypeaheadSelect from '~/components/TypeaheadSelect';
 import useAvailablePvcs from './useAvailablePvcs';
 
 type AddExistingStorageFieldProps = {
@@ -9,7 +11,7 @@ type AddExistingStorageFieldProps = {
   setData: (data: ExistingStorageObject) => void;
   editStorage?: string;
   selectDirection?: 'up' | 'down';
-  menuAppendTo?: HTMLElement | 'parent';
+  menuAppendTo?: HTMLElement;
 };
 
 const AddExistingStorageField: React.FC<AddExistingStorageFieldProps> = ({
@@ -23,23 +25,58 @@ const AddExistingStorageField: React.FC<AddExistingStorageFieldProps> = ({
     currentProject,
     notebooks: { data: allNotebooks },
   } = React.useContext(ProjectDetailsContext);
-  const [pvcs, loaded, loadError] = useAvailablePvcs(
+  const [storages, loaded, loadError] = useAvailablePvcs(
     currentProject.metadata.name,
     allNotebooks,
     editStorage,
   );
 
+  const selectOptions = React.useMemo(
+    () =>
+      loaded
+        ? storages.map((pvc) => ({
+            value: pvc.metadata.name,
+            content: getDisplayNameFromK8sResource(pvc),
+          }))
+        : [],
+    [loaded, storages],
+  );
+
+  if (loadError) {
+    return (
+      <Alert title="Error loading pvcs" variant="danger">
+        {loadError.message}
+      </Alert>
+    );
+  }
+
+  let placeholderText: string;
+
+  if (!loaded) {
+    placeholderText = 'Loading storages...';
+  } else if (storages.length === 0) {
+    placeholderText = 'No existing storages available';
+  } else {
+    placeholderText = 'Select a persistent storage';
+  }
+
   return (
-    <ExistingPVCField
+    <FormGroup
+      isRequired
+      label="Persistent storage"
       fieldId="add-existing-storage-pv-selection"
-      storages={pvcs}
-      loaded={loaded}
-      loadError={loadError}
-      selectedStorage={data.storage}
-      setStorage={(storage) => setData({ ...data, storage: storage || '' })}
-      selectDirection={selectDirection}
-      menuAppendTo={menuAppendTo}
-    />
+      data-testid="persistent-storage-group"
+    >
+      <TypeaheadSelect
+        selectOptions={selectOptions}
+        selected={data.storage}
+        onSelect={(_ev, storage) => setData({ ...data, storage: String(storage) || '' })}
+        placeholder={placeholderText}
+        noOptionsFoundMessage={(filter) => `No persistent storage was found for "${filter}"`}
+        popperProps={{ direction: selectDirection, appendTo: menuAppendTo }}
+        isDisabled={!loaded || storages.length === 0}
+      />
+    </FormGroup>
   );
 };