diff --git a/forms-flow-web/src/components/Dashboard/StatusChart.js b/forms-flow-web/src/components/Dashboard/StatusChart.js
index f3011213c0..e3a2f66304 100644
--- a/forms-flow-web/src/components/Dashboard/StatusChart.js
+++ b/forms-flow-web/src/components/Dashboard/StatusChart.js
@@ -71,7 +71,7 @@ const ChartForm = React.memo((props) => {
         spinner
         text={t("Loading...")}
       >
-          <div className="white-box status-container flex-row d-md-flex align-items-center">
+          <div className="white-box status-container flex-row d-md-flex flex-wrap align-items-center">
             <div className="chart text-center">
               <PieChart width={400} height={400}>
                 <Pie
diff --git a/forms-flow-web/src/components/ServiceFlow/list/sort/CreateNewFilter.js b/forms-flow-web/src/components/ServiceFlow/list/sort/CreateNewFilter.js
index c2a11b2174..f72399f8ee 100644
--- a/forms-flow-web/src/components/ServiceFlow/list/sort/CreateNewFilter.js
+++ b/forms-flow-web/src/components/ServiceFlow/list/sort/CreateNewFilter.js
@@ -43,7 +43,22 @@ import {
   MULTITENANCY_ENABLED,
 } from "../../../../constants/constants";
 import { fetchAllForms } from "../../../../apiManager/services/bpmFormServices";
-import { getFormProcesses, resetFormProcessData } from "../../../../apiManager/services/processServices";
+import {
+  getFormProcesses,
+  resetFormProcessData,
+} from "../../../../apiManager/services/processServices";
+
+const initialValueOfTaskAttribute  = {
+  applicationId: true,
+  assignee: true,
+  taskTitle: true,
+  createdDate: true,
+  dueDate: true,
+  followUp: true,
+  priority: true,
+  groups: true,
+};
+
 export default function CreateNewFilterDrawer({
   selectedFilterData,
   openFilterDrawer,
@@ -87,9 +102,10 @@ export default function CreateNewFilterDrawer({
   const filterList = useSelector((state) => state.bpmTasks.filterList);
 
   const [variables, setVariables] = useState([]);
-   const [forms, setForms] = useState({ data: [], isLoading: true });
+  const [forms, setForms] = useState({ data: [], isLoading: true });
   const [selectedForm, setSelectedForm] = useState(null);
   const [taskVariablesKeys, setTaskVariablesKeys] = useState({});
+  const [processLoading, setProcessLoading] = useState(false);
 
   const [overlayGroupShow, setOverlayGroupShow] = useState(false);
   const [overlayUserShow, setOverlayUserShow] = useState(false);
@@ -98,19 +114,7 @@ export default function CreateNewFilterDrawer({
 
   const { t } = useTranslation();
   const [modalShow, setModalShow] = useState(false);
-  const [checkboxes, setCheckboxes] = useState({
-    applicationId: true,
-    assignee: true,
-    taskTitle: true,
-    createdDate: true,
-    dueDate: true,
-    followUp: true,
-    priority: true,
-    groups: true,
-  });
-  const taskAttributesCount = Object.values(checkboxes).filter(
-    (value) => value === true
-  ).length;
+  const [checkboxes, setCheckboxes] = useState(initialValueOfTaskAttribute);
 
   const fetchTasks = (resData) => {
     const reqParamData = {
@@ -143,6 +147,17 @@ export default function CreateNewFilterDrawer({
     return inputString;
   };
 
+  const setTaskVariablesAndItsKeys = (variables = []) => {
+    setVariables(variables);
+    // taking variable names to check it is already exist or not
+    setTaskVariablesKeys(
+      variables.reduce((i, variable) => {
+        i[variable.name] = variable.name;
+        return i;
+      }, {})
+    );
+  };
+
   useEffect(() => {
     if (selectedFilterData) {
       setFilterName(selectedFilterData?.name);
@@ -165,17 +180,17 @@ export default function CreateNewFilterDrawer({
       setShowUndefinedVariable(
         selectedFilterData?.properties?.showUndefinedVariable
       );
-     
-      setSelectedForm(selectedFilterData?.properties?.formId || null);
-      setVariables(selectedFilterData.variables || []);
-      if(selectedFilterData.variables){
-        // taking variable names to check it is already exist or not 
-        setTaskVariablesKeys(selectedFilterData.variables.reduce((i,variable)=>{
-          i[variable.name] = variable.name;
-          return i;
-        },{}));
+
+      if (selectedFilterData?.properties?.formId) {
+        setSelectedForm(selectedFilterData?.properties?.formId || null);
+        setProcessLoading(true);
+        dispatch(getFormProcesses(selectedFilterData?.properties?.formId,()=>{
+          setProcessLoading(false);
+        }));
       }
 
+      setTaskVariablesAndItsKeys(selectedFilterData.variables);
+
       if (
         !selectedFilterData?.users?.length &&
         !selectedFilterData?.roles?.length
@@ -204,9 +219,10 @@ export default function CreateNewFilterDrawer({
       }
 
       // if the user has this role then we will check the condition else it will always true
-      if(userRoles.includes(FORMSFLOW_ADMIN)){
-        setIsTasksForCurrentUserGroupsEnabled(selectedFilterData?.criteria?.
-          candidateGroupsExpression ? true : false);
+      if (userRoles.includes(FORMSFLOW_ADMIN)) {
+        setIsTasksForCurrentUserGroupsEnabled(
+          selectedFilterData?.criteria?.candidateGroupsExpression ? true : false
+        );
       }
 
       setCheckboxes({
@@ -249,43 +265,32 @@ export default function CreateNewFilterDrawer({
     }
   }, [openFilterDrawer]);
 
-  //if a form selected then need fetch it's task variable
-  useEffect(() => {
-    if (selectedForm) {
-      dispatch(getFormProcesses(selectedForm));
-    }else{
-      dispatch(resetFormProcessData());
-    }
-  }, [selectedForm]);
-
-
-
-  /**
-   * Handles changing the selected task variables.
-   *
-   * When a variable is checked, adds it to the variables array.
-   * When a variable is unchecked, removes it from the variables array.
-   * Also updates the taskVariablesKeys object with the checked state.
-   */
-  const handleChangeTaskVariables = (e, variable) => {
-    const { checked } = e.target;
-    if (checked) {
-      setVariables((prev) => [
-        ...prev,
-        { name: variable.key, label: variable.label },
-      ]);
+  const resetVariables = () => {
+    setVariables([]);
+    setTaskVariablesKeys({
+      applicationId: "applicationId",
+      formName: "formName",
+    });
+  };
+
+  const onChangeSelectForm = (e) => {
+    if (e?.value) {
+      setProcessLoading(true);
+      dispatch(getFormProcesses(e.value,()=>{
+        setProcessLoading(false);
+      }));
+      if (e?.value === selectedFilterData?.properties?.formId) {
+        setTaskVariablesAndItsKeys(selectedFilterData?.variables);
+      } else {
+        resetVariables();
+      }
     } else {
-      setVariables((prev) => prev.filter((i) => i.name !== variable.key));
+      resetVariables();
+      dispatch(resetFormProcessData());
     }
-    setTaskVariablesKeys((prev) => ({
-      ...prev,
-      [variable.key]: checked ? variable.key : null,
-    }));
+    setSelectedForm(e?.value);
   };
 
-
- 
-
   const successCallBack = (resData) => {
     dispatch(
       fetchFilterList((err, data) => {
@@ -339,7 +344,8 @@ export default function CreateNewFilterDrawer({
     setIsMyTasksEnabled(false);
     setSelectedForm(null);
     dispatch(resetFormProcessData());
-    setForms({data:[], isLoading:true});
+    setCheckboxes(initialValueOfTaskAttribute);
+    setForms({ data: [], isLoading: true });
   };
 
   const handleSubmit = () => {
@@ -374,7 +380,7 @@ export default function CreateNewFilterDrawer({
 
     const data = {
       name: filterName,
-       criteria: {
+      criteria: {
         processDefinitionNameLike: definitionKeyId && `%${definitionKeyId}%`,
         candidateGroup:
           MULTITENANCY_ENABLED && candidateGroup
@@ -523,39 +529,45 @@ export default function CreateNewFilterDrawer({
     setCandidateGroup(data);
   };
 
-
+  const onSaveTaskAttribute = (
+    taskVariablesKeys,
+    variables,
+    checkboxes,
+    showUndefinedVariable
+  ) => {
+    setVariables(variables);
+    setTaskVariablesKeys(taskVariablesKeys);
+    setCheckboxes(checkboxes);
+    setShowUndefinedVariable(showUndefinedVariable);
+  };
 
   const list = () => (
-    <div className="filter-list" role="presentation">
+    <div role="presentation">
       <List>
         <div className="p-0 d-flex align-items-center justify-content-between ">
           <h5 className="fw-bold fs-16">
             <Translation>{(t) => t("Create new filter")}</Translation>
           </h5>
-          <span
-            className="cursor-pointer truncate-size"
-            onClick={() => {
-              toggleDrawer();
-            }}
-          >
+          <button className="btn btn-link text-dark" onClick={toggleDrawer}>
             <Translation>{(t) => t("Close")}</Translation>
-          </span>
+          </button>
         </div>
       </List>
       <List>
-        <h5 className="fw-bold fs-18">
-          <Translation>{(t) => t("Filter Name")}</Translation>
-        </h5>
-        <input
-          type="text"
-          placeholder={t("Enter your text here")}
-          className="filter-name-textfeild"
-          value={filterName}
-          onChange={(e) => setFilterName(e.target.value)}
-          title={t("Add fliter name")}
-        />
+        <div className="form-group">
+          <label htmlFor="filterName">{t("Filter Name")}</label>
+          <input
+            type="text"
+            className="form-control"
+            id="filterName"
+            placeholder={t("Enter your text here")}
+            value={filterName}
+            onChange={(e) => setFilterName(e.target.value)}
+            title={t("Add fliter name")}
+          />
+        </div>
       </List>
-      <Divider />
+
       <List>
         <h5 className="fw-bold fs-18">
           <Translation>{(t) => t("Criteria")}</Translation>{" "}
@@ -609,8 +621,6 @@ export default function CreateNewFilterDrawer({
           </>
         )}
 
-     
-
         <h5 className="mt-2 fs-18">
           <Translation>{(t) => t("Definition Key")}</Translation>
         </h5>
@@ -725,8 +735,22 @@ export default function CreateNewFilterDrawer({
             </h5>
           </div>
         ) : null}
-        <Divider />
+
         <div className="my-3">
+          <Divider />
+          <div className="my-3">
+            <h5 className="fw-bold ">
+              <Translation>{(t) => t("Select Form")}</Translation>
+            </h5>
+            <Select
+              onChange={onChangeSelectForm}
+              value={forms?.data.find((form) => form.value === selectedForm)}
+              isClearable
+              placeholder={t("select...")}
+              options={forms?.data}
+              isLoading={forms.isLoading}
+            />
+          </div>
           <h5 className="fw-bold ">
             <Translation>{(t) => t("Task Attributes")}</Translation>
             <i
@@ -736,26 +760,13 @@ export default function CreateNewFilterDrawer({
               className="fa fa-info-circle ms-2 filter-tooltip-icon"
             ></i>
           </h5>
-          <div className="my-2">
-          <Select
-            onChange={(e)=>{setSelectedForm(e?.value);}}
-            value={
-              forms?.data.find(
-                (form) => form.value === selectedForm
-              )
-            }
-            isClearable
-            placeholder={t("select a form")}
-            options={forms?.data}
-            isLoading={forms.isLoading}
-          />
-        </div>
-            <button className="btn btn-outline-primary w-100" onClick={toggleModal}>{
-              taskAttributesCount === 0
-                ? t("Select Elements")
-                : taskAttributesCount + t(" Task Attributes Selected")
-            }</button>
-          
+
+          <button
+            className="btn btn-outline-primary w-100"
+            onClick={toggleModal}
+          >
+            {t("Click here to select attributes")}
+          </button>
         </div>
         <Divider />
         <div className="child-container-two pt-2">
@@ -913,8 +924,7 @@ export default function CreateNewFilterDrawer({
             </div>
           ) : null}
         </div>
-        
-       
+
         <Divider />
       </List>
 
@@ -976,14 +986,14 @@ export default function CreateNewFilterDrawer({
           <div>
             <TaskAttributeComponent
               show={modalShow}
+              processLoading={processLoading}
               selectedForm={selectedForm}
               onHide={toggleModal}
-              checkboxes={checkboxes}
-              selectedTaskVariables={taskVariablesKeys}
-              handleChangeTaskVariables={handleChangeTaskVariables}
-              setCheckboxes={setCheckboxes} 
+              selectedTaskAttrbutes={checkboxes}
+              selectedTaskVariablesKeys={taskVariablesKeys}
+              selectedTaskVariables={variables}
+              onSaveTaskAttribute={onSaveTaskAttribute}
               showUndefinedVariable={showUndefinedVariable}
-              setShowUndefinedVariable={setShowUndefinedVariable}
             />
           </div>
         )}
@@ -1007,7 +1017,7 @@ export default function CreateNewFilterDrawer({
             width: 100,
           }}
         >
-          {list("le ft")}
+          {list()}
         </Drawer>
       </React.Fragment>
     </div>
diff --git a/forms-flow-web/src/components/ServiceFlow/list/sort/TaskAttributeComponent.js b/forms-flow-web/src/components/ServiceFlow/list/sort/TaskAttributeComponent.js
index 17c1874418..b3b679366f 100644
--- a/forms-flow-web/src/components/ServiceFlow/list/sort/TaskAttributeComponent.js
+++ b/forms-flow-web/src/components/ServiceFlow/list/sort/TaskAttributeComponent.js
@@ -1,50 +1,114 @@
-import React from "react";
+import React, { useState } from "react";
 import { Row, Col } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import Form from "react-bootstrap/Form";
-import {Translation, useTranslation } from "react-i18next";
+import { Translation, useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
 function TaskAttributeComponent({
   show,
+  selectedForm,
   onHide,
-  setCheckboxes,
-  checkboxes,
-  showUndefinedVariable,
-  setShowUndefinedVariable,
-  handleChangeTaskVariables,
+  selectedTaskAttrbutes,
+  selectedTaskVariablesKeys,
   selectedTaskVariables,
-  selectedForm
+  onSaveTaskAttribute,
+  processLoading,
+  // showUndefinedVariable,
 }) {
-
-  const taskVariables = useSelector(state => state.process?.formProcessList?.taskVariable || []);
+  const taskVariables = useSelector(
+    (state) => state.process?.formProcessList?.taskVariable || []
+  );
   const { t } = useTranslation();
+
+  const [variables, setVariables] = useState(selectedTaskVariables);
+  const [taskVariablesKeys, setTaskVariablesKeys] = useState(
+    selectedTaskVariablesKeys
+  );
+  const [checkboxes, setCheckboxes] = useState(selectedTaskAttrbutes);
+  // const [selectUndefinedVariable, setSelectUndefinedVariable] = useState(
+  //   showUndefinedVariable
+  // );
+
+  // const UndefinedVaribaleCheckboxChange = (e) => {
+  //   setSelectUndefinedVariable(e.target.checked);
+  // };
+
   const handleCheckboxChange = (event) => {
     const { name, checked } = event.target;
     setCheckboxes({ ...checkboxes, [name]: checked });
   };
- 
-  
-  const UndefinedVaribaleCheckboxChange = (e) => {
-    setShowUndefinedVariable(e.target.checked);
+
+  /**
+   * Handles changing the selected task variables.
+   *
+   * When a variable is checked, adds it to the variables array.
+   * When a variable is unchecked, removes it from the variables array.
+   * Also updates the taskVariablesKeys object with the checked state.
+   */
+  const handleChangeTaskVariables = (e, variable) => {
+    const { checked } = e.target;
+    if (checked) {
+      setVariables((prev) => [
+        ...prev,
+        { name: variable.key, label: variable.label },
+      ]);
+    } else {
+      setVariables((prev) => prev.filter((i) => i.name !== variable.key));
+    }
+    /**
+     * Updates the taskVariablesKeys object with the checked state
+     * of the variable. If checked is true, adds the variable key.
+     * If checked is false, removes the variable key.
+     */
+    setTaskVariablesKeys((prev) => ({
+      ...prev,
+      [variable.key]: checked ? variable.key : null,
+    }));
+  };
+
+  const handleSave = () => {
+    onSaveTaskAttribute(
+      taskVariablesKeys,
+      variables,
+      checkboxes,
+      // selectUndefinedVariable
+    );
+    onHide();
   };
+
   return (
     <Modal
       show={show}
       onHide={onHide}
-      disableEnforceFocus={true}
+      disableenforcefocus={"true"}
       className="modal-overlay"
       keyboard={false}
       size="lg"
       backdrop="static"
     >
       <Modal.Header className="bg-light">
-        <ModalTitle as={"h3"}><Translation>{(t) => t("Task Attribute")}</Translation></ModalTitle>
-        <button type="button" className="btn-close" aria-label="Close" onClick={onHide}></button>
+        <ModalTitle as={"h3"}>
+          <Translation>{(t) => t("Task Attribute")}</Translation>
+        </ModalTitle>
+        <button
+          type="button"
+          className="btn-close"
+          aria-label="Close"
+          onClick={onHide}
+        ></button>
       </Modal.Header>
       <Modal.Body className="p-4">
-        <p><Translation>{(t) => t("Only selected task attributes will be available on task list view")}</Translation> </p>
+        <p>
+          <Translation>
+            {(t) =>
+              t(
+                "Select the predefined attributes and custom task variables created as part of form submission you wish to display in the task list"
+              )
+            }
+          </Translation>{" "}
+        </p>
 
         <Form>
           <Row>
@@ -120,42 +184,67 @@ function TaskAttributeComponent({
         </Form>
         <hr />
         <Form className="mt-2 ps-1">
-          <h5 className="fw-bold fs-18"
-          >
+          <h5 className="fw-bold fs-18">
             <Translation>{(t) => t("Task variables")}</Translation>
-            <i title={t("You can define variables shown in the list")} className="ms-1 fa fa-info-circle text-primary"></i>
+            <i
+              title={t("You can define variables shown in the list")}
+              className="ms-1 fa fa-info-circle text-primary"
+            ></i>
           </h5>
-          <Form.Check
-              type="checkbox"
-              label={ t("Show undefined variables")}
-              checked={showUndefinedVariable}
-              onChange={UndefinedVaribaleCheckboxChange}
-            />
-          <Row  className="mt-3">
-          {selectedForm ? 
-            taskVariables.map(variable=>(
-              variable.key !== 'applicationId' ?
-              <Col xs={6} key={variable.key}>
-            <Form.Check
-              type="checkbox"
-              label={variable.label}
-              name={variable.key}
-              checked={selectedTaskVariables[variable.key] == variable.key}
-              onChange={(e)=>{handleChangeTaskVariables(e,variable);}}
-            />
-            </Col> : null
-            )) : <div className="alert alert-primary text-center w-100" role="alert">
-           {t("To display task variables, select a form as part of the filter")}
+          {/* <Form.Check
+            type="checkbox"
+            label={t("Show undefined variables")}
+            checked={showUndefinedVariable}
+            onChange={UndefinedVaribaleCheckboxChange}
+          /> */}
+          <div className="d-flex mt-3 px-2 flex-wrap">
+            {selectedForm ? (
+              taskVariables?.length > 0 ? (
+                taskVariables.map((variable) =>
+                  variable.key !== "applicationId" ? (
+                    <Col xs={12} md={6} key={variable.key}>
+                      <Form.Check
+                        type="checkbox"
+                        label={variable.label}
+                        name={variable.key}
+                        checked={
+                          taskVariablesKeys[variable.key] == variable.key
+                        }
+                        onChange={(e) => {
+                          handleChangeTaskVariables(e, variable);
+                        }}
+                      />
+                    </Col>
+                  ) : null
+                )
+              ) : (
+                !processLoading && (
+                  <div
+                    className="alert alert-primary text-center w-100"
+                    role="alert"
+                  >
+                    {t("No task variables found")}
+                  </div>
+                )
+              )
+            ) : (
+              <div
+                className="alert alert-primary text-center w-100"
+                role="alert"
+              >
+                {t(
+                  "To display task variables, select a form as part of the filter"
+                )}
+              </div>
+            )}
           </div>
-          }
-          </Row>
         </Form>
       </Modal.Body>
       <Modal.Footer>
-        <button className="btn btn-secondary" onClick={onHide}>
+        <button className="btn btn-link text-dark " onClick={onHide}>
           {t("Cancel")}
         </button>
-        <button className="btn btn-primary" onClick={onHide}>
+        <button className="btn btn-primary" onClick={handleSave}>
           {t("Save")}
         </button>
       </Modal.Footer>