diff --git a/public/locale/en.json b/public/locale/en.json
index b3b7800d687..6680adb2352 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1873,6 +1873,7 @@
   "select_eligible_policy": "Select an Eligible Insurance Policy",
   "select_facility": "Select Facility",
   "select_facility_description": "Select the healthcare facility that will provide the requested resource.",
+  "select_facility_feature": "Select Facility Features",
   "select_facility_for_discharged_patients_warning": "Facility needs to be selected to view discharged patients.",
   "select_facility_type": "Select Facility Type",
   "select_for_administration": "Select for Administration",
diff --git a/src/components/Facility/FacilityForm.tsx b/src/components/Facility/FacilityForm.tsx
index 858842bcd41..45002d88bb2 100644
--- a/src/components/Facility/FacilityForm.tsx
+++ b/src/components/Facility/FacilityForm.tsx
@@ -19,6 +19,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { MultiSelect } from "@/components/ui/multi-select";
 import {
   Select,
   SelectContent,
@@ -29,7 +30,6 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 
 import { FacilityModel } from "@/components/Facility/models";
-import { MultiSelectFormField } from "@/components/Form/FormFields/SelectFormField";
 
 import { useStateAndDistrictFromPincode } from "@/hooks/useStateAndDistrictFromPincode";
 
@@ -112,7 +112,6 @@ export default function FacilityForm(props: FacilityProps) {
       onSubmitSuccess?.();
     },
   });
-
   const { mutate: updateFacility, isPending: isUpdatePending } = useMutation({
     mutationFn: mutate(routes.updateFacility, {
       pathParams: { id: facilityId || "" },
@@ -148,8 +147,8 @@ export default function FacilityForm(props: FacilityProps) {
     }
   };
 
-  const handleFeatureChange = (value: any) => {
-    const { value: features }: { value: Array<number> } = value;
+  const handleFeatureChange = (value: string[]) => {
+    const features = value.map((val) => Number(val));
     form.setValue("features", features);
   };
 
@@ -273,7 +272,6 @@ export default function FacilityForm(props: FacilityProps) {
               )}
             />
           </div>
-
           <FormField
             control={form.control}
             name="description"
@@ -291,29 +289,30 @@ export default function FacilityForm(props: FacilityProps) {
               </FormItem>
             )}
           />
-
           <FormField
             control={form.control}
             name="features"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Features</FormLabel>
-                <FormControl>
-                  <MultiSelectFormField
-                    name={field.name}
-                    value={field.value}
-                    placeholder="Select facility features"
-                    options={FACILITY_FEATURE_TYPES}
-                    optionLabel={(o) => o.name}
-                    optionValue={(o) => o.id}
-                    onChange={handleFeatureChange}
-                    error={form.formState.errors.features?.message}
-                    id="facility-features"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
+            render={({ field }) => {
+              return (
+                <FormItem>
+                  <FormLabel>{t("features")}</FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={FACILITY_FEATURE_TYPES.map((obj) => ({
+                        value: obj.id.toString(),
+                        label: obj.name,
+                        icon: obj.icon,
+                      }))}
+                      onValueChange={handleFeatureChange}
+                      value={field.value.map((val) => val.toString())}
+                      placeholder={t("select_facility_feature")}
+                      id="facility-features"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
           />
         </div>
 
@@ -519,6 +518,7 @@ export default function FacilityForm(props: FacilityProps) {
         <Button
           type="submit"
           className="w-full"
+          variant="primary"
           disabled={facilityId ? isUpdatePending : isPending}
           data-cy={facilityId ? "update-facility" : "submit-facility"}
         >
diff --git a/src/components/Form/FormFields/SelectFormField.tsx b/src/components/Form/FormFields/SelectFormField.tsx
index aa712dc16a1..6b95550299f 100644
--- a/src/components/Form/FormFields/SelectFormField.tsx
+++ b/src/components/Form/FormFields/SelectFormField.tsx
@@ -3,7 +3,6 @@ import {
   FormFieldBaseProps,
   useFormFieldPropsResolver,
 } from "@/components/Form/FormFields/Utils";
-import MultiSelectMenuV2 from "@/components/Form/MultiSelectMenuV2";
 import SelectMenuV2 from "@/components/Form/SelectMenuV2";
 
 type OptionCallback<T, R> = (option: T) => R;
@@ -49,41 +48,3 @@ export const SelectFormField = <T, V>(props: SelectFormFieldProps<T, V>) => {
     </FormField>
   );
 };
-
-type MultiSelectFormFieldProps<T, V = T> = FormFieldBaseProps<V[]> & {
-  placeholder?: React.ReactNode;
-  options: readonly T[];
-  optionLabel: OptionCallback<T, React.ReactNode>;
-  optionSelectedLabel?: OptionCallback<T, React.ReactNode>;
-  optionDescription?: OptionCallback<T, React.ReactNode>;
-  optionIcon?: OptionCallback<T, React.ReactNode>;
-  optionValue?: OptionCallback<T, V>;
-  optionDisabled?: OptionCallback<T, boolean>;
-};
-
-/**
- * @deprecated
- */
-export const MultiSelectFormField = <T, V>(
-  props: MultiSelectFormFieldProps<T, V>,
-) => {
-  const field = useFormFieldPropsResolver(props);
-  return (
-    <FormField field={field}>
-      <MultiSelectMenuV2
-        id={field.id}
-        disabled={field.disabled}
-        value={field.value}
-        onChange={(value: any) => field.handleChange(value)}
-        options={props.options}
-        placeholder={props.placeholder}
-        optionLabel={props.optionLabel}
-        optionSelectedLabel={props.optionSelectedLabel}
-        optionDescription={props.optionDescription}
-        optionIcon={props.optionIcon}
-        optionDisabled={props.optionDisabled}
-        optionValue={props.optionValue}
-      />
-    </FormField>
-  );
-};
diff --git a/src/components/Form/MultiSelectMenuV2.tsx b/src/components/Form/MultiSelectMenuV2.tsx
index 302b4132230..b67da3656f4 100644
--- a/src/components/Form/MultiSelectMenuV2.tsx
+++ b/src/components/Form/MultiSelectMenuV2.tsx
@@ -1,195 +1,9 @@
-import {
-  Label,
-  Listbox,
-  ListboxButton,
-  ListboxOption,
-  ListboxOptions,
-} from "@headlessui/react";
-import { ReactNode, useRef } from "react";
+import { ReactNode } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { classNames } from "@/Utils/utils";
 
-type OptionCallback<T, R = void> = (option: T) => R;
-
-type Props<T, V = T> = {
-  id?: string;
-  options: readonly T[];
-  value: V[] | undefined;
-  placeholder?: ReactNode;
-  optionLabel: OptionCallback<T, ReactNode>;
-  optionSelectedLabel?: OptionCallback<T, ReactNode>;
-  optionDescription?: OptionCallback<T, ReactNode>;
-  optionIcon?: OptionCallback<T, ReactNode>;
-  optionValue?: OptionCallback<T, V>;
-  optionDisabled?: OptionCallback<T, boolean>;
-  className?: string;
-  disabled?: boolean;
-  renderSelectedOptions?: OptionCallback<T[], ReactNode>;
-  onChange: OptionCallback<V[]>;
-};
-
-/**
- * Avoid using this component directly. Use `MultiSelectFormField` instead as
- * its API is easier to use and compliant with `FormField` based components.
- *
- * Use this only when you want to hack into the design and get more
- * customizability.
- */
-const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
-  const options = props.options.map((option) => {
-    const label = props.optionLabel(option);
-    const selectedLabel = props.optionSelectedLabel
-      ? props.optionSelectedLabel(option)
-      : label;
-
-    const value = props.optionValue ? props.optionValue(option) : option;
-
-    return {
-      option,
-      label,
-      selectedLabel,
-      description: props.optionDescription?.(option),
-      icon: props.optionIcon?.(option),
-      value,
-      disabled: props.optionDisabled?.(option),
-      isSelected: props.value?.includes(value as any) ?? false,
-      displayChip: (
-        <div className="rounded-full border border-secondary-400 bg-secondary-100 px-2 text-xs text-secondary-900">
-          {selectedLabel}
-        </div>
-      ),
-    };
-  });
-
-  const placeholder = props.placeholder ?? "Select";
-  const selectedOptions = options.filter((o) => o.isSelected);
-
-  const Placeholder: () => any = () => {
-    if (selectedOptions.length === 0) return placeholder;
-    if (props.renderSelectedOptions)
-      return props.renderSelectedOptions(selectedOptions.map((o) => o.option));
-  };
-
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const handleSingleSelect = (o: any) => {
-    if (
-      o.option?.isSingleSelect === true &&
-      !selectedOptions.includes(o) &&
-      buttonRef.current
-    ) {
-      buttonRef.current.click();
-    }
-  };
-
-  return (
-    <div className={props.className} id={props.id}>
-      <Listbox
-        disabled={props.disabled}
-        value={selectedOptions}
-        onChange={(opts: typeof options) =>
-          props.onChange(opts.map((o) => o.value) as any)
-        }
-        multiple
-      >
-        <>
-          <Label className="sr-only !relative">{props.placeholder}</Label>
-          <div className="relative">
-            <div>
-              <ListboxButton
-                className="cui-input-base flex w-full rounded"
-                ref={buttonRef}
-              >
-                <div className="relative z-0 flex w-full items-center">
-                  <div className="relative flex flex-1 items-center pr-4 focus:z-10">
-                    <p className="ml-2.5 text-sm font-normal text-secondary-600">
-                      <Placeholder />
-                    </p>
-
-                    {selectedOptions.length !== 0 && (
-                      <div className="flex flex-wrap gap-2">
-                        {selectedOptions.map((option, index) => (
-                          <MultiSelectOptionChip
-                            key={index}
-                            label={option.selectedLabel}
-                            onRemove={() => {
-                              const updatedOptions = selectedOptions.filter(
-                                (selectedOption) =>
-                                  selectedOption.value !== option.value,
-                              );
-                              props.onChange(
-                                updatedOptions.map((o) => o.value) as any,
-                              );
-                            }}
-                          />
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <CareIcon
-                    id="dropdown-toggle"
-                    icon="l-angle-down"
-                    className="-mb-0.5 text-lg text-secondary-900"
-                  />
-                </div>
-              </ListboxButton>
-            </div>
-            <ListboxOptions
-              modal={false}
-              as="ul"
-              className="cui-dropdown-base absolute top-full"
-            >
-              {options.map((option, index) => (
-                <ListboxOption
-                  as="li"
-                  id={`${props.id}-option-${index}`}
-                  key={index}
-                  className={dropdownOptionClassNames}
-                  value={option}
-                  onClick={() => handleSingleSelect(option)}
-                  disabled={option.disabled}
-                >
-                  {({ focus }) => (
-                    <div className="flex flex-col gap-2">
-                      <div className="flex justify-between">
-                        {option.label}
-                        {(option.icon || option.isSelected) &&
-                          (option.isSelected ? (
-                            <CareIcon icon="l-check" className="text-lg" />
-                          ) : (
-                            option.icon
-                          ))}
-                      </div>
-                      {option.description && (
-                        <p
-                          className={classNames(
-                            "text-sm font-normal",
-                            option.disabled
-                              ? "text-secondary-500"
-                              : focus
-                                ? "text-primary-200"
-                                : "text-secondary-500",
-                          )}
-                        >
-                          {option.description}
-                        </p>
-                      )}
-                    </div>
-                  )}
-                </ListboxOption>
-              ))}
-            </ListboxOptions>
-          </div>
-        </>
-      </Listbox>
-    </div>
-  );
-};
-
-export default MultiSelectMenuV2;
-
 interface MultiSelectOptionChipProps {
   label: ReactNode;
   onRemove?: () => void;
diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
new file mode 100644
index 00000000000..35368fca1dd
--- /dev/null
+++ b/src/components/ui/multi-select.tsx
@@ -0,0 +1,235 @@
+import { ChevronDown, XCircle, XIcon } from "lucide-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
+
+import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options: {
+    label: string;
+    value: string;
+    icon?: IconName;
+  }[];
+  onValueChange: (value: string[]) => void;
+  value: string[];
+  placeholder: string;
+  modalPopover?: boolean;
+  asChild?: boolean;
+  className?: string;
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options,
+      onValueChange,
+      value = [],
+      placeholder,
+      modalPopover = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [selectedValues, setSelectedValues] = React.useState<string[]>(value);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    React.useEffect(() => {
+      setSelectedValues(value);
+    }, [value]);
+
+    const { t } = useTranslation();
+
+    const toggleOption = (option: string) => {
+      const newSelectedValues = selectedValues.includes(option)
+        ? selectedValues.filter((value) => value !== option)
+        : [...selectedValues, option];
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    const handleClear = () => {
+      setSelectedValues([]);
+      onValueChange([]);
+    };
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        onValueChange(allValues);
+      }
+    };
+
+    return (
+      <div className="w-full">
+        <Popover
+          open={isPopoverOpen}
+          onOpenChange={setIsPopoverOpen}
+          modal={modalPopover}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              ref={ref}
+              {...props}
+              onClick={handleTogglePopover}
+              className={cn(
+                "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto",
+                className,
+              )}
+            >
+              {selectedValues.length > 0 ? (
+                <div className="flex justify-between items-center w-full">
+                  <div className="flex flex-wrap items-center">
+                    {selectedValues.map((value) => {
+                      const option = options.find((o) => o.value === value);
+                      return (
+                        <Badge
+                          key={value}
+                          className="m-1 border-foreground/10 bg-secondary text-black hover:bg-secondary/80"
+                        >
+                          {option?.icon && (
+                            <CareIcon
+                              icon={option.icon}
+                              className="h-4 w-4 mr-2"
+                            />
+                          )}
+                          {option?.label}
+                          <XCircle
+                            className="ml-2 h-4 w-4 cursor-pointer"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              toggleOption(value);
+                            }}
+                          />
+                        </Badge>
+                      );
+                    })}
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <XIcon
+                      className="h-4 mx-2 cursor-pointer text-black"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }}
+                    />
+                    <ChevronDown
+                      id="dropdown-toggle"
+                      className="h-4 mx-2 cursor-pointer text-black"
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between w-full mx-auto">
+                  <span className="text-sm text-black mx-3">{placeholder}</span>
+                  <ChevronDown
+                    id="dropdown-toggle"
+                    className="h-4 mx-2 cursor-pointer text-black"
+                  />
+                </div>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-full"
+            align="center"
+            onEscapeKeyDown={() => setIsPopoverOpen(false)}
+            onWheel={(e) => e.stopPropagation()}
+          >
+            <Command>
+              <CommandList>
+                <CommandGroup>
+                  <CommandItem
+                    key="all"
+                    onSelect={toggleAll}
+                    className="cursor-pointer"
+                  >
+                    <Checkbox
+                      checked={selectedValues.length === options.length}
+                    />
+                    <span>{t("select_all")}</span>
+                  </CommandItem>
+                  {options.map((option) => {
+                    const isSelected = selectedValues.includes(option.value);
+                    return (
+                      <CommandItem
+                        key={option.value}
+                        onSelect={() => toggleOption(option.value)}
+                        className="cursor-pointer"
+                      >
+                        <Checkbox checked={isSelected} />
+                        {option?.icon && (
+                          <CareIcon
+                            icon={option.icon}
+                            className="mr-2 h-4 w-4"
+                          />
+                        )}
+                        <span>{option.label}</span>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+                <CommandSeparator />
+                <CommandGroup>
+                  <div className="flex items-center justify-between">
+                    {selectedValues.length > 0 && (
+                      <>
+                        <CommandItem
+                          onSelect={handleClear}
+                          className="flex-1 justify-center cursor-pointer"
+                        >
+                          {t("clear")}
+                        </CommandItem>
+                        <Separator
+                          orientation="vertical"
+                          className="flex min-h-6 h-full"
+                        />
+                      </>
+                    )}
+                    <CommandItem
+                      onSelect={() => setIsPopoverOpen(false)}
+                      className="flex-1 justify-center cursor-pointer max-w-full"
+                    >
+                      {t("close")}
+                    </CommandItem>
+                  </div>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+    );
+  },
+);
+
+MultiSelect.displayName = "MultiSelect";