diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index 154e862a7..3d82dae7c 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -10,7 +10,7 @@ import SubFilterItem from '../SubFilterItem';
 interface Props {
     filterIndex: number;
     filter: any; // event/filter
-    onUpdate: (filter) => void;
+    onUpdate: (filter: any) => void;
     onRemoveFilter: () => void;
     isFilter?: boolean;
     saveRequestPayloads?: boolean;
@@ -20,26 +20,26 @@ function FilterItem(props: Props) {
     const canShowValues = !(filter.operator === 'isAny' || filter.operator === 'onAny' || filter.operator === 'isUndefined');
     const isSubFilter = filter.type === FilterType.SUB_FILTERS;
 
-    const replaceFilter = (filter) => {
+    const replaceFilter = (filter: any) => {
         props.onUpdate({
             ...filter,
             value: [''],
-            filters: filter.filters ? filter.filters.map((i) => ({ ...i, value: [''] })) : [],
+            filters: filter.filters ? filter.filters.map((i: any) => ({ ...i, value: [''] })) : [],
         });
     };
 
-    const onOperatorChange = (e, { name, value }) => {
+    const onOperatorChange = (e: any, { name, value }: any) => {
         props.onUpdate({ ...filter, operator: value.value });
     };
 
-    const onSourceOperatorChange = (e, { name, value }) => {
+    const onSourceOperatorChange = (e: any, { name, value }: any) => {
         props.onUpdate({ ...filter, sourceOperator: value.value });
     };
 
-    const onUpdateSubFilter = (subFilter, subFilterIndex) => {
+    const onUpdateSubFilter = (subFilter: any, subFilterIndex: any) => {
         props.onUpdate({
             ...filter,
-            filters: filter.filters.map((i, index) => {
+            filters: filter.filters.map((i: any, index: any) => {
                 if (index === subFilterIndex) {
                     return subFilter;
                 }
@@ -90,8 +90,8 @@ function FilterItem(props: Props) {
                 {isSubFilter && (
                     <div className="grid grid-col ml-3 w-full">
                         {filter.filters
-                            .filter((i) => (i.key !== FilterKey.FETCH_REQUEST_BODY && i.key !== FilterKey.FETCH_RESPONSE_BODY) || saveRequestPayloads)
-                            .map((subFilter, subFilterIndex) => (
+                            .filter((i: any) => (i.key !== FilterKey.FETCH_REQUEST_BODY && i.key !== FilterKey.FETCH_RESPONSE_BODY) || saveRequestPayloads)
+                            .map((subFilter: any, subFilterIndex: any) => (
                                 <SubFilterItem
                                     filterIndex={subFilterIndex}
                                     filter={subFilter}
diff --git a/frontend/app/components/shared/Filters/FilterSource/FilterSource.module.css b/frontend/app/components/shared/Filters/FilterSource/FilterSource.module.css
index 6eb6c6a5b..7cc48ff1f 100644
--- a/frontend/app/components/shared/Filters/FilterSource/FilterSource.module.css
+++ b/frontend/app/components/shared/Filters/FilterSource/FilterSource.module.css
@@ -1,6 +1,6 @@
 .inputField {
   display: inline-block;
-  margin-right: 10px;
+  /* margin-right: 10px; */
   border: solid thin $gray-light;
   border-radius: 3px;
   height: 26px;
diff --git a/frontend/app/components/shared/Filters/FilterSource/FilterSource.tsx b/frontend/app/components/shared/Filters/FilterSource/FilterSource.tsx
index 0459a510b..0975f7335 100644
--- a/frontend/app/components/shared/Filters/FilterSource/FilterSource.tsx
+++ b/frontend/app/components/shared/Filters/FilterSource/FilterSource.tsx
@@ -2,15 +2,16 @@ import { FilterType } from 'App/types/filter/filterType';
 import React, { useState, useEffect } from 'react';
 import stl from './FilterSource.module.css';
 import { debounce } from 'App/utils';
+import cn from 'classnames';
 
 interface Props {
     filter: any;
-    onUpdate: (filter) => void;
+    onUpdate: (filter: any) => void;
 }
 function FilterSource(props: Props) {
     const { filter } = props;
     const [value, setValue] = useState(filter.source[0] || '');
-    const debounceUpdate: any = React.useCallback(debounce(props.onUpdate, 1000), []);
+    const debounceUpdate: any = React.useCallback(debounce(props.onUpdate, 1000), [props.onUpdate]);
 
     useEffect(() => {
         setValue(filter.source[0] || '');
@@ -25,7 +26,12 @@ function FilterSource(props: Props) {
     const renderFiled = () => {
         switch (filter.sourceType) {
             case FilterType.NUMBER:
-                return <input name="source" className={stl.inputField} value={value} onBlur={write} onChange={write} type="number" />;
+                return (
+                    <div className="relative">
+                        <input name="source" className={cn(stl.inputField, "rounded-l px-1 block")} value={value} onBlur={write} onChange={write} type="number" />
+                        <div className="absolute right-0 top-0 bottom-0 bg-gray-lightest rounded-r px-1 border-l border-color-gray-light flex items-center" style={{ margin: '1px', minWidth: '24px'}}>{filter.sourceUnit}</div>
+                    </div>
+                );
         }
     };
 
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index 29dce323d..5638f9a1d 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -6,6 +6,7 @@ import FilterValueDropdown from '../FilterValueDropdown';
 import FilterDuration from '../FilterDuration';
 import { debounce } from 'App/utils';
 import { assist as assistRoute, isRoute } from 'App/routes';
+import cn from 'classnames';
 
 const ASSIST_ROUTE = assistRoute();
 
@@ -172,7 +173,8 @@ function FilterValue(props: Props) {
     };
 
     return (
-        <div className="grid grid-cols-3 gap-3 w-full">
+        // 
+        <div className={cn("grid gap-3 w-full", { 'grid-cols-2': filter.hasSource, 'grid-cols-3' : !filter.hasSource })}>
             {filter.type === FilterType.DURATION
                 ? renderValueFiled(filter.value, 0)
                 : filter.value &&
diff --git a/frontend/app/types/filter/newFilter.js b/frontend/app/types/filter/newFilter.js
index 9034eba6f..9a87da2c6 100644
--- a/frontend/app/types/filter/newFilter.js
+++ b/frontend/app/types/filter/newFilter.js
@@ -44,11 +44,11 @@ export const filters = [
   { key: FilterKey.USERANONYMOUSID, type: FilterType.MULTIPLE, category: FilterCategory.USER, label: 'User AnonymousId', operator: 'is', operatorOptions: filterOptions.stringOperators, icon: 'filters/userid' },
   
     // PERFORMANCE
-  { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
-  { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/lcpt', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
-  { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/ttfb', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
-  { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/cpu-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
-  { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/memory-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
+  { key: FilterKey.DOM_COMPLETE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'DOM Complete', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/dom-complete', isEvent: true, hasSource: true, sourceOperator: '>=', sourceUnit: 'ms', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
+  { key: FilterKey.LARGEST_CONTENTFUL_PAINT_TIME, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Largest Contentful Paint', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/lcpt', isEvent: true, hasSource: true, sourceOperator: '>=', sourceUnit: 'ms', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
+  { key: FilterKey.TTFB, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Time to First Byte', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/ttfb', isEvent: true, hasSource: true, sourceOperator: '>=', sourceUnit: 'ms', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
+  { key: FilterKey.AVG_CPU_LOAD, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg CPU Load', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/cpu-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceUnit: '%', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
+  { key: FilterKey.AVG_MEMORY_USAGE, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Avg Memory Usage', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, source: [], icon: 'filters/memory-load', isEvent: true, hasSource: true, sourceOperator: '>=', sourceUnit: 'mb', sourceType: FilterType.NUMBER, sourceOperatorOptions: filterOptions.customOperators },
   { key: FilterKey.FETCH_FAILED, type: FilterType.MULTIPLE, category: FilterCategory.PERFORMANCE, label: 'Failed Request', operator: 'isAny', operatorOptions: filterOptions.stringOperatorsPerformance, icon: 'filters/fetch-failed', isEvent: true },
   { key: FilterKey.ISSUE, type: FilterType.ISSUE, category: FilterCategory.JAVASCRIPT, label: 'Issue', operator: 'is', operatorOptions: filterOptions.getOperatorsByKeys(['is', 'isAny', 'isNot']), icon: 'filters/click', options: filterOptions.issueOptions },
 ];
@@ -142,6 +142,7 @@ export default Record({
   source: [""],
   sourceType: '',
   sourceOperator: '=',
+  sourceUnit: '',
   sourceOperatorOptions: [],
 
   operator: '',