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 0272552db..c4caf5e11 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
@@ -150,7 +150,7 @@ export function ReportCenterModalComponent({reportCenterModal}) {
                                         <Typography.Title level={4}>
                                             {t(`reportcenter.labels.groups.${key}`)}
                                         </Typography.Title>
-                                        <ul style={{columns: "2 auto"}}>
+                                        <ul style={{  listStyleType: 'none', columns: "2 auto"}}>
                                             {grouped[key].map((item) => (
                                                 <li key={item.key}>
                                                     <Radio key={item.key} value={item.key}>
diff --git a/client/src/components/report-center-modal/test.jsx b/client/src/components/report-center-modal/test.jsx
index d1a5e3aff..3b1d1e678 100644
--- a/client/src/components/report-center-modal/test.jsx
+++ b/client/src/components/report-center-modal/test.jsx
@@ -1,220 +1,224 @@
-import { Button, Col, Form, Input, Row, Select } from "antd";
-import React, { useEffect, useState } from "react";
-import { fetchFilterData } from "../../utils/RenderTemplate";
-import { DeleteFilled } from "@ant-design/icons";
-import { useTranslation } from "react-i18next";
+import {Button, Col, Form, Input, Row, Select} from "antd";
+import React, {useEffect, useState} from "react";
+import {fetchFilterData} from "../../utils/RenderTemplate";
+import {DeleteFilled} from "@ant-design/icons";
+import {useTranslation} from "react-i18next";
 
-export default function Test({ form }) {
-  return (
-    <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
-      {() => {
-        const key = form.getFieldValue("key");
-        return <RenderFilters templateId={key} />;
-      }}
-    </Form.Item>
-  );
+export default function Test({form}) {
+    return (
+        <Form.Item style={{margin: 0, padding: 0}} dependencies={["key"]}>
+            {() => {
+                const key = form.getFieldValue("key");
+                return <RenderFilters templateId={key}/>;
+            }}
+        </Form.Item>
+    );
 }
 
-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);
-    };
+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);
+        };
 
-    console.log("🚀 ~ useEffect ~ templateId:", templateId);
-    if (templateId) {
-      fetch();
-    }
-  }, [templateId]);
+        console.log("🚀 ~ useEffect ~ templateId:", templateId);
+        if (templateId) {
+            fetch();
+        }
+    }, [templateId]);
 
-  if (!templateId || !state) return null;
-  return (
-    <div>
-      <Form.List name={["filters"]}>
-        {(fields, { add, remove, move }) => {
-          return (
-            <div>
-              Filters
-              {fields.map((field, index) => (
-                <Form.Item key={field.key}>
-                  <Row gutter={[16, 16]}>
-                    <Col span={10}>
-                      <Form.Item
-                        key={`${index}field`}
-                        label="field"
-                        name={[field.name, "field"]}
-                        rules={[
-                          {
-                            required: true,
-                            //message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Select
-                          options={
-                            state.filters
-                              ? state.filters.map((f) => ({
-                                  value: f.name,
-                                  label: t(f.translation),
-                                }))
-                              : []
-                          }
-                        />
-                      </Form.Item>
-                    </Col>
-                    <Col span={6}>
-                      <Form.Item
-                        key={`${index}operator`}
-                        label="operator"
-                        name={[field.name, "operator"]}
-                        rules={[
-                          {
-                            required: true,
-                            //message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                          <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}>
-                      <Form.Item
-                        key={`${index}value`}
-                        label="value"
-                        name={[field.name, "value"]}
-                        rules={[
-                          {
-                            required: true,
-                            //message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                    </Col>
-                    <Col span={2}>
-                      <DeleteFilled
-                        style={{ margin: "1rem" }}
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
-                    </Col>
-                  </Row>
-                </Form.Item>
-              ))}
-              <Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add();
-                  }}
-                  style={{ width: "100%" }}
-                >
-                  {t("general.actions.add")}
-                </Button>
-              </Form.Item>
-            </div>
-          );
-        }}
-      </Form.List>
-      <Form.List name={["sorters"]}>
-        {(fields, { add, remove, move }) => {
-          return (
-            <div>
-              Sorters
-              {fields.map((field, index) => (
-                <Form.Item key={field.key}>
-                  <Row gutter={[16, 16]}>
-                    <Col span={11}>
-                      <Form.Item
-                        key={`${index}field`}
-                        label="field"
-                        name={[field.name, "field"]}
-                        rules={[
-                          {
-                            required: true,
-                            //message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Select
-                          options={
-                            state.sorters
-                              ? state.sorters.map((f) => ({
-                                  value: f.name,
-                                  label: t(f.name),
-                                }))
-                              : []
-                          }
-                        />
-                      </Form.Item>
-                    </Col>
-                    <Col span={11}>
-                      <Form.Item
-                        key={`${index}direction`}
-                        label="direction"
-                        name={[field.name, "direction"]}
-                        rules={[
-                          {
-                            required: true,
-                            //message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Select
-                          options={[
-                            { value: "desc", label: "Descending" },
-                            { value: "asc", label: "Ascending" },
-                          ]}
-                        />
-                      </Form.Item>
-                    </Col>
+    if (!templateId || !state) return null;
+    return (
+        <div>
+            <Form.List name={["filters"]}>
+                {(fields, {add, remove, move}) => {
+                    return (
+                        <div>
+                            Filters
+                            {fields.map((field, index) => (
+                                <Form.Item key={field.key}>
+                                    <Row gutter={[16, 16]}>
+                                        <Col span={10}>
+                                            <Form.Item
+                                                key={`${index}field`}
+                                                label="field"
+                                                name={[field.name, "field"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Select
+                                                    options={
+                                                        state.filters
+                                                            ? state.filters.map((f) => {
+                                                                console.log('filter added');
+                                                                console.dir(f);
+                                                                return {
+                                                                    value: f.name,
+                                                                    label: f?.translation ? t(f.translation) : f.label,
+                                                                }
+                                                            })
+                                                            : []
+                                                    }
+                                                />
+                                            </Form.Item>
+                                        </Col>
+                                        <Col span={6}>
+                                            <Form.Item
+                                                key={`${index}operator`}
+                                                label="operator"
+                                                name={[field.name, "operator"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <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}>
+                                            <Form.Item
+                                                key={`${index}value`}
+                                                label="value"
+                                                name={[field.name, "value"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Input/>
+                                            </Form.Item>
+                                        </Col>
+                                        <Col span={2}>
+                                            <DeleteFilled
+                                                style={{margin: "1rem"}}
+                                                onClick={() => {
+                                                    remove(field.name);
+                                                }}
+                                            />
+                                        </Col>
+                                    </Row>
+                                </Form.Item>
+                            ))}
+                            <Form.Item>
+                                <Button
+                                    type="dashed"
+                                    onClick={() => {
+                                        add();
+                                    }}
+                                    style={{width: "100%"}}
+                                >
+                                    {t("general.actions.add")}
+                                </Button>
+                            </Form.Item>
+                        </div>
+                    );
+                }}
+            </Form.List>
+            <Form.List name={["sorters"]}>
+                {(fields, {add, remove, move}) => {
+                    return (
+                        <div>
+                            Sorters
+                            {fields.map((field, index) => (
+                                <Form.Item key={field.key}>
+                                    <Row gutter={[16, 16]}>
+                                        <Col span={11}>
+                                            <Form.Item
+                                                key={`${index}field`}
+                                                label="field"
+                                                name={[field.name, "field"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Select
+                                                    options={
+                                                        state.sorters
+                                                            ? state.sorters.map((f) => ({
+                                                                value: f.name,
+                                                                label: t(f.translation),
+                                                            }))
+                                                            : []
+                                                    }
+                                                />
+                                            </Form.Item>
+                                        </Col>
+                                        <Col span={11}>
+                                            <Form.Item
+                                                key={`${index}direction`}
+                                                label="direction"
+                                                name={[field.name, "direction"]}
+                                                rules={[
+                                                    {
+                                                        required: true,
+                                                        //message: t("general.validation.required"),
+                                                    },
+                                                ]}
+                                            >
+                                                <Select
+                                                    options={[
+                                                        {value: "desc", label: "Descending"},
+                                                        {value: "asc", label: "Ascending"},
+                                                    ]}
+                                                />
+                                            </Form.Item>
+                                        </Col>
 
-                    <Col span={2}>
-                      <DeleteFilled
-                        style={{ margin: "1rem" }}
-                        onClick={() => {
-                          remove(field.name);
-                        }}
-                      />
-                    </Col>
-                  </Row>
-                </Form.Item>
-              ))}
-              <Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add();
-                  }}
-                  style={{ width: "100%" }}
-                >
-                  {t("general.actions.add")}
-                </Button>
-              </Form.Item>
-            </div>
-          );
-        }}
-      </Form.List>
-    </div>
-  );
+                                        <Col span={2}>
+                                            <DeleteFilled
+                                                style={{margin: "1rem"}}
+                                                onClick={() => {
+                                                    remove(field.name);
+                                                }}
+                                            />
+                                        </Col>
+                                    </Row>
+                                </Form.Item>
+                            ))}
+                            <Form.Item>
+                                <Button
+                                    type="dashed"
+                                    onClick={() => {
+                                        add();
+                                    }}
+                                    style={{width: "100%"}}
+                                >
+                                    {t("general.actions.add")}
+                                </Button>
+                            </Form.Item>
+                        </div>
+                    );
+                }}
+            </Form.List>
+        </div>
+    );
 }