diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
index e0dbb82fea..96d96c4502 100644
--- a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
+++ b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
@@ -21,6 +21,7 @@ export interface IFilterDateItemProps {
     onChipClose?: () => void;
     state: FilterItemParams | null | undefined;
     operators: [string, ...string[]];
+    initMode?: 'auto-open' | 'manual';
 }
 
 export const FilterDateItem: FC<IFilterDateItemProps> = ({
@@ -31,6 +32,7 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
     onChipClose,
     state,
     operators,
+    initMode = 'auto-open',
 }) => {
     const ref = useRef<HTMLDivElement>(null);
     const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
@@ -41,7 +43,7 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
     };
 
     useEffect(() => {
-        if (!state) {
+        if (!state && initMode === 'auto-open') {
             open();
         }
     }, []);
diff --git a/frontend/src/component/filter/FilterItem/FilterItem.tsx b/frontend/src/component/filter/FilterItem/FilterItem.tsx
index 0b79ea6552..3cf31790b0 100644
--- a/frontend/src/component/filter/FilterItem/FilterItem.tsx
+++ b/frontend/src/component/filter/FilterItem/FilterItem.tsx
@@ -15,10 +15,11 @@ export interface IFilterItemProps {
     label: ReactNode;
     options: Array<{ label: string; value: string }>;
     onChange: (value: FilterItemParams) => void;
-    onChipClose: () => void;
+    onChipClose?: () => void;
     state: FilterItemParams | null | undefined;
     singularOperators: [string, ...string[]];
     pluralOperators: [string, ...string[]];
+    initMode?: 'auto-open' | 'manual';
 }
 
 export type FilterItemParams = {
@@ -80,6 +81,7 @@ export const FilterItem: FC<IFilterItemProps> = ({
     state,
     singularOperators,
     pluralOperators,
+    initMode = 'auto-open',
 }) => {
     const ref = useRef<HTMLDivElement>(null);
     const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>();
@@ -93,7 +95,7 @@ export const FilterItem: FC<IFilterItemProps> = ({
     };
 
     useEffect(() => {
-        if (!state) {
+        if (!state && initMode === 'auto-open') {
             open();
         }
     }, []);
@@ -108,11 +110,13 @@ export const FilterItem: FC<IFilterItemProps> = ({
         .filter((label): label is string => label !== undefined);
     const currentOperator = state ? state.operator : currentOperators[0];
 
-    const onDelete = () => {
-        onChange({ operator: singularOperators[0], values: [] });
-        onClose();
-        onChipClose();
-    };
+    const onDelete = onChipClose
+        ? () => {
+              onChange({ operator: singularOperators[0], values: [] });
+              onClose();
+              onChipClose();
+          }
+        : undefined;
 
     const filteredOptions = options.filter((option) =>
         option.label.toLowerCase().includes(searchText.toLowerCase()),
diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx
index 71dc3935f2..6241f6c041 100644
--- a/frontend/src/component/filter/Filters/Filters.tsx
+++ b/frontend/src/component/filter/Filters/Filters.tsx
@@ -35,6 +35,7 @@ type IBaseFilterItem = {
         value: string;
     }[];
     filterKey: string;
+    persistent?: boolean;
 };
 
 type ITextFilterItem = IBaseFilterItem & {
@@ -46,7 +47,6 @@ export type IDateFilterItem = IBaseFilterItem & {
     dateOperators: [string, ...string[]];
     fromFilterKey?: string;
     toFilterKey?: string;
-    persistent?: boolean;
 };
 
 export type IFilterItem = ITextFilterItem | IDateFilterItem;
@@ -64,10 +64,116 @@ const StyledIcon = styled(Icon)(({ theme }) => ({
     },
 }));
 
-export const Filters: FC<IFilterProps> = ({
+type RangeChangeHandler = (filter: IDateFilterItem) =>
+    | ((value: {
+          from: FilterItemParams;
+          to: FilterItemParams;
+      }) => void)
+    | undefined;
+
+type RenderFilterProps = {
+    onChipClose?: (label: string) => void;
+    state: FilterItemParams | null | undefined;
+    onChange: (value: FilterItemParamHolder) => void;
+    filter: ITextFilterItem | IDateFilterItem;
+    rangeChangeHandler: RangeChangeHandler;
+    initMode?: 'auto-open' | 'manual';
+};
+
+const RenderFilter: FC<RenderFilterProps> = ({
+    filter,
+    onChipClose,
+    onChange,
+    state,
+    rangeChangeHandler,
+    initMode,
+}) => {
+    const label = (
+        <>
+            <StyledCategoryIconWrapper>
+                <StyledIcon>{filter.icon}</StyledIcon>
+            </StyledCategoryIconWrapper>
+            {filter.label}
+        </>
+    );
+
+    if ('dateOperators' in filter) {
+        return (
+            <FilterDateItem
+                key={filter.label}
+                initMode={initMode}
+                label={label}
+                name={filter.label}
+                state={state}
+                onChange={(value) => {
+                    onChange({ [filter.filterKey]: value });
+                }}
+                onRangeChange={rangeChangeHandler?.(filter)}
+                operators={filter.dateOperators}
+                onChipClose={
+                    filter.persistent
+                        ? undefined
+                        : () => onChipClose?.(filter.label)
+                }
+            />
+        );
+    }
+
+    return (
+        <FilterItem
+            initMode={initMode}
+            key={filter.label}
+            label={label}
+            name={filter.label}
+            state={state}
+            options={filter.options}
+            onChange={(value) => onChange({ [filter.filterKey]: value })}
+            singularOperators={filter.singularOperators}
+            pluralOperators={filter.pluralOperators}
+            onChipClose={
+                filter.persistent
+                    ? undefined
+                    : () => onChipClose?.(filter.label)
+            }
+        />
+    );
+};
+
+type SingleFilterProps = Omit<IFilterProps, 'availableFilters'> & {
+    filter: IFilterItem;
+    rangeChangeHandler: RangeChangeHandler;
+};
+
+const SingleFilter: FC<SingleFilterProps> = ({
+    state,
+    onChange,
+    className,
+    filter,
+    rangeChangeHandler,
+}) => {
+    return (
+        <StyledBox className={className}>
+            <RenderFilter
+                filter={filter}
+                state={state[filter.filterKey]}
+                onChange={onChange}
+                rangeChangeHandler={rangeChangeHandler}
+                onChipClose={undefined}
+                initMode='manual'
+            />
+        </StyledBox>
+    );
+};
+
+type MultiFilterProps = IFilterProps & {
+    rangeChangeHandler: RangeChangeHandler;
+};
+
+const MultiFilter: FC<MultiFilterProps> = ({
     state,
     onChange,
     availableFilters,
+    rangeChangeHandler,
     className,
 }) => {
     const [unselectedFilters, setUnselectedFilters] = useState<string[]>([]);
@@ -123,21 +229,6 @@ export const Filters: FC<IFilterProps> = ({
 
     const hasAvailableFilters = unselectedFilters.length > 0;
 
-    const rangeChangeHandler = (filter: IDateFilterItem) => {
-        const fromKey = filter.fromFilterKey;
-        const toKey = filter.toFilterKey;
-        if (fromKey && toKey) {
-            return (value: {
-                from: FilterItemParams;
-                to: FilterItemParams;
-            }) => {
-                onChange({ [fromKey]: value.from });
-                onChange({ [toKey]: value.to });
-            };
-        }
-        return undefined;
-    };
-
     return (
         <StyledBox className={className}>
             {selectedFilters.map((selectedFilter) => {
@@ -149,48 +240,13 @@ export const Filters: FC<IFilterProps> = ({
                     return null;
                 }
 
-                const label = (
-                    <>
-                        <StyledCategoryIconWrapper>
-                            <StyledIcon>{filter.icon}</StyledIcon>
-                        </StyledCategoryIconWrapper>
-                        {filter.label}
-                    </>
-                );
-
-                if ('dateOperators' in filter) {
-                    return (
-                        <FilterDateItem
-                            key={filter.label}
-                            label={label}
-                            name={filter.label}
-                            state={state[filter.filterKey]}
-                            onChange={(value) => {
-                                onChange({ [filter.filterKey]: value });
-                            }}
-                            onRangeChange={rangeChangeHandler(filter)}
-                            operators={filter.dateOperators}
-                            onChipClose={
-                                filter.persistent
-                                    ? undefined
-                                    : () => deselectFilter(filter.label)
-                            }
-                        />
-                    );
-                }
-
                 return (
-                    <FilterItem
-                        key={filter.label}
-                        label={label}
-                        name={filter.label}
+                    <RenderFilter
+                        key={filter.filterKey}
+                        filter={filter}
                         state={state[filter.filterKey]}
-                        options={filter.options}
-                        onChange={(value) =>
-                            onChange({ [filter.filterKey]: value })
-                        }
-                        singularOperators={filter.singularOperators}
-                        pluralOperators={filter.pluralOperators}
+                        onChange={onChange}
+                        rangeChangeHandler={rangeChangeHandler}
                         onChipClose={() => deselectFilter(filter.label)}
                     />
                 );
@@ -211,3 +267,33 @@ export const Filters: FC<IFilterProps> = ({
         </StyledBox>
     );
 };
+
+export const Filters: FC<IFilterProps> = (props) => {
+    const rangeChangeHandler = (filter: IDateFilterItem) => {
+        const fromKey = filter.fromFilterKey;
+        const toKey = filter.toFilterKey;
+        if (fromKey && toKey) {
+            return (value: {
+                from: FilterItemParams;
+                to: FilterItemParams;
+            }) => {
+                props.onChange({ [fromKey]: value.from });
+                props.onChange({ [toKey]: value.to });
+            };
+        }
+        return undefined;
+    };
+
+    if (props.availableFilters.length === 1) {
+        const filter = props.availableFilters[0];
+        return (
+            <SingleFilter
+                rangeChangeHandler={rangeChangeHandler}
+                filter={filter}
+                {...props}
+            />
+        );
+    }
+
+    return <MultiFilter rangeChangeHandler={rangeChangeHandler} {...props} />;
+};