diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
index 2d7ec1795..6d92efabe 100644
--- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
+++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -14,6 +14,7 @@ import {
   ToolbarChip,
   ToolbarFilter,
 } from "@patternfly/react-core";
+import { CaretDownIcon, CaretRightIcon } from "@patternfly/react-icons";
 import { IFilterControlProps } from "./FilterControl";
 import {
   FilterSelectOptionProps,
@@ -229,6 +230,24 @@ export const MultiselectFilterControl = <TItem,>({
   const withGroupPrefix = (group: string) =>
     group === category.title ? group : `${category.title}/${group}`;
 
+  const groups = Array.from(
+    new Set(
+      filteredOptions
+        .filter((item) => item && item.groupLabel)
+        .map((item) => item.groupLabel)
+    )
+  );
+
+  const [openGroups, setOpenGroups] = React.useState<string[]>([]);
+
+  const toggleGroup = (groupLabel: string) => {
+    setOpenGroups((prev) =>
+      prev.includes(groupLabel)
+        ? prev.filter((label) => label !== groupLabel)
+        : [...prev, groupLabel]
+    );
+  };
+
   return (
     <>
       {
@@ -250,35 +269,80 @@ export const MultiselectFilterControl = <TItem,>({
             onSelect={(_, selection) => onSelect(selection as string)}
             isOpen={isFilterDropdownOpen}
           >
-            <SelectList id={withPrefix("select-typeahead-listbox")}>
-              {filteredOptions.map(
-                ({ groupLabel, label, value, optionProps = {} }, index) => (
+            {groups && groups.length > 0 && (
+              <SelectList id={withPrefix("select-typeahead-listbox")}>
+                {groups.map((groupLabel) => (
+                  <React.Fragment key={groupLabel}>
+                    <div
+                      onClick={(event) => {
+                        toggleGroup(groupLabel!);
+                      }}
+                    >
+                      <SelectOption
+                        isDisabled
+                        hasCheckbox={false}
+                      >
+                        {openGroups.includes(groupLabel!) ? (
+                          <CaretDownIcon />
+                        ) : (
+                          <CaretRightIcon />
+                        )}
+                        <strong>{groupLabel}</strong>
+                      </SelectOption>
+                    </div>
+                    {openGroups.includes(groupLabel!) &&
+                      filteredOptions
+                        .filter((option) => option.groupLabel === groupLabel)
+                        .map(({ label, value, optionProps = {} }, index) => (
+                          <SelectOption
+                            {...optionProps}
+                            {...(!optionProps.isDisabled && {
+                              hasCheckbox: true,
+                            })}
+                            key={value}
+                            id={withPrefix(`option-${index}`)}
+                            value={value}
+                            isFocused={focusedItemIndex === index}
+                            isSelected={filterValue?.includes(value)}
+                          >
+                            {label ?? value}
+                          </SelectOption>
+                        ))}
+                  </React.Fragment>
+                ))}
+              </SelectList>
+            )}
+            {(!groups || groups.length == 0) && (
+              <SelectList id={withPrefix("select-typeahead-listbox")}>
+                {filteredOptions.map(
+                  ({ groupLabel, label, value, optionProps = {} }, index) => (
+                    <SelectOption
+                      {...optionProps}
+                      {...(!optionProps.isDisabled && { hasCheckbox: true })}
+                      key={value}
+                      id={withPrefix(`option-${index}`)}
+                      value={value}
+                      isFocused={focusedItemIndex === index}
+                      isSelected={filterValue?.includes(value)}
+                    >
+                      {!!groupLabel && <Label>{groupLabel}</Label>}{" "}
+                      {label ?? value}
+                    </SelectOption>
+                  )
+                )}
+                {filteredOptions.length === 0 && (
                   <SelectOption
-                    {...optionProps}
-                    {...(!optionProps.isDisabled && { hasCheckbox: true })}
-                    key={value}
-                    id={withPrefix(`option-${index}`)}
-                    value={value}
-                    isFocused={focusedItemIndex === index}
-                    isSelected={filterValue?.includes(value)}
+                    isDisabled
+                    hasCheckbox={false}
+                    key={NO_RESULTS}
+                    value={NO_RESULTS}
+                    isSelected={false}
                   >
-                    {!!groupLabel && <Label>{groupLabel}</Label>}{" "}
-                    {label ?? value}
+                    {`No results found for "${inputValue}"`}
                   </SelectOption>
-                )
-              )}
-              {filteredOptions.length === 0 && (
-                <SelectOption
-                  isDisabled
-                  hasCheckbox={false}
-                  key={NO_RESULTS}
-                  value={NO_RESULTS}
-                  isSelected={false}
-                >
-                  {`No results found for "${inputValue}"`}
-                </SelectOption>
-              )}
-            </SelectList>
+                )}
+              </SelectList>
+            )}
           </Select>
         </ToolbarFilter>
       }