diff --git a/client/src/components/report-center-modal/test.jsx b/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
similarity index 82%
rename from client/src/components/report-center-modal/test.jsx
rename to client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
index 3b1d1e678..ce8f06990 100644
--- a/client/src/components/report-center-modal/test.jsx
+++ b/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
@@ -4,12 +4,12 @@ import {fetchFilterData} from "../../utils/RenderTemplate";
 import {DeleteFilled} from "@ant-design/icons";
 import {useTranslation} from "react-i18next";
 
-export default function Test({form}) {
+export default function ReportCenterModalFiltersSortersComponent({form}) {
     return (
         <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
             {() => {
                 const key = form.getFieldValue("key");
-                return <RenderFilters templateId={key}/>;
+                return <RenderFilters form={form} templateId={key}/>;
             }}
         </Form.Item>
     );
@@ -17,16 +17,20 @@ export default function Test({form}) {
 
 function RenderFilters({templateId}) {
     const [state, setState] = useState(null);
+
     console.log("state", state);
     const {t} = useTranslation();
+
     useEffect(() => {
         const fetch = async () => {
             const data = await fetchFilterData({name: templateId});
-            console.log("🚀 ~ fetch ~ data:", data);
-            setState(data.data);
+            if (data?.success) {
+                setState(data.data);
+            } else {
+                setState(null);
+            }
         };
 
-        console.log("🚀 ~ useEffect ~ templateId:", templateId);
         if (templateId) {
             fetch();
         }
@@ -76,6 +80,7 @@ function RenderFilters({templateId}) {
                                                 key={`${index}operator`}
                                                 label="operator"
                                                 name={[field.name, "operator"]}
+                                                dependencies={[['filters', field.name, "field"]]}
                                                 rules={[
                                                     {
                                                         required: true,
@@ -83,20 +88,28 @@ function RenderFilters({templateId}) {
                                                     },
                                                 ]}
                                             >
-                                                <Select
-                                                    options={[
-                                                        {value: "_eq", label: "Equals"},
-                                                        {value: "_ne", label: "Not Equals"},
-                                                        {value: "_gt", label: "Greater Than"},
-                                                        {value: "_lt", label: "Less Than"},
-                                                        {value: "_gte", label: "Greater Than or Equal To"},
-                                                        {value: "_lte", label: "Less Than or Equal To"},
-                                                        {value: "_in", label: "In"},
-                                                        {value: "_nin", label: "Not In"},
-                                                        {value: "_contains", label: "Contains"},
-                                                        {value: "_ncontains", label: "Does Not Contain"},
-                                                    ]}
-                                                />
+                                                {
+                                                    () => {
+                                                        console.log('Dependencies fired')
+                                                        if (true) {
+                                                            return <Select
+                                                                options={[
+                                                                    {value: "_eq", label: "Equals"},
+                                                                    {value: "_ne", label: "Not Equals"},
+                                                                    {value: "_gt", label: "Greater Than"},
+                                                                    {value: "_lt", label: "Less Than"},
+                                                                    {value: "_gte", label: "Greater Than or Equal To"},
+                                                                    {value: "_lte", label: "Less Than or Equal To"},
+                                                                    {value: "_in", label: "In"},
+                                                                    {value: "_nin", label: "Not In"},
+                                                                    {value: "_contains", label: "Contains"},
+                                                                    {value: "_ncontains", label: "Does Not Contain"},
+                                                                ]}
+                                                            />
+
+                                                        }
+                                                    }
+                                                }
                                             </Form.Item>
                                         </Col>
                                         <Col span={6}>
diff --git a/client/src/components/report-center-modal/report-center-modal.component.jsx b/client/src/components/report-center-modal/report-center-modal.component.jsx
index c4caf5e11..bf2025dca 100644
--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal.component.jsx
@@ -15,7 +15,7 @@ import {TemplateList} from "../../utils/TemplateConstants";
 import EmployeeSearchSelect from "../employee-search-select/employee-search-select.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import "./report-center-modal.styles.scss";
-import Test from "./test";
+import ReportCenterModalFiltersSortersComponent from "./report-center-modal-filters-sorters-component";
 
 const mapStateToProps = createStructuredSelector({
     reportCenterModal: selectReportCenter,
@@ -182,7 +182,7 @@ export function ReportCenterModalComponent({reportCenterModal}) {
                         );
                     }}
                 </Form.Item>
-                <Test form={form} />
+                <ReportCenterModalFiltersSortersComponent form={form} />
                 <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
                     {() => {
                         const key = form.getFieldValue("key");
diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js
index 72645bdac..be7ddd8db 100644
--- a/client/src/utils/RenderTemplate.js
+++ b/client/src/utils/RenderTemplate.js
@@ -309,6 +309,7 @@ export const GenerateDocuments = async (templates) => {
 };
 
 export const fetchFilterData = async ({name}) => {
+try {
     const bodyshop = store.getState().user.bodyshop;
     const jsrAuth = (await axios.post("/utils/jsr")).data;
     jsreport.headers["FirebaseAuthorization"] =
@@ -346,8 +347,17 @@ export const fetchFilterData = async ({name}) => {
         useShopSpecificTemplate = false;
         if (generalTemplate) parsedFilterData = atob(generalTemplate.content);
     }
-
-    return {data: JSON.parse(parsedFilterData), useShopSpecificTemplate};
+    const data = JSON.parse(parsedFilterData);
+    return {
+        data,
+        useShopSpecificTemplate,
+        success: true,
+    }
+} catch {
+    return {
+        success: false,
+    }
+}
 };
 
 const fetchContextData = async (templateObject, jsrAuth) => {
diff --git a/client/src/utils/graphQLmodifier.js b/client/src/utils/graphQLmodifier.js
index 99e7014fe..55a59302d 100644
--- a/client/src/utils/graphQLmodifier.js
+++ b/client/src/utils/graphQLmodifier.js
@@ -1,5 +1,34 @@
 import {Kind, visit, parse, print} from "graphql";
 
+export const numberOperators = [
+    {value: "_eq", label: "Equals"},
+    {value: "_ne", label: "Not Equals"},
+    {value: "_gt", label: "Greater Than"},
+    {value: "_lt", label: "Less Than"},
+    {value: "_gte", label: "Greater Than or Equal To"},
+    {value: "_lte", label: "Less Than or Equal To"},
+];
+
+export const stringOperators = [
+    {value: "_eq", label: "Equals", type: 'string'},
+    {value: "_ne", label: "Not Equals", type: 'string'},
+    {value: "_in", label: "In", type: 'string'},
+    {value: "_nin", label: "Not In", type: 'string'},
+    {value: "_contains", label: "Contains", type: 'string'},
+    {value: "_ncontains", label: "Does Not Contain", type: 'string'},
+];
+
+export const numberSorters = [
+    {value: "asc", label: "Ascending"},
+    {value: "desc", label: "Descending"},
+];
+
+export const stringSorters = [
+    {value: "asc", label: "Alphabetically Ascending"},
+    {value: "desc", label: "Alphabetically Descending"},
+];
+
+
 /* eslint-disable no-loop-func */
 
 /**