diff --git a/forms-flow-web/src/actions/actionConstants.js b/forms-flow-web/src/actions/actionConstants.js
index b0ff77d88..34c15b4d6 100644
--- a/forms-flow-web/src/actions/actionConstants.js
+++ b/forms-flow-web/src/actions/actionConstants.js
@@ -109,6 +109,8 @@ const ACTION_CONSTANTS = {
   IS_APPLICATION_LOADING:"IS_APPLICATION_LOADING",
   APPLICATION_LIST_SEARCH_PARAMS:"APPLICATION_LIST_SEARCH_PARAMS",
   //BPM TASKS
+  BPM_SORT: "BPM_SORT",
+  DMN_SORT: "DMN_SORT",
   BPM_LIST_TASKS: "BPM_LIST_TASKS",
   BPM_PROCESS_LIST: "BPM_PROCESS_LIST",
   BPM_USER_LIST: "BPM_USER_LIST",
diff --git a/forms-flow-web/src/actions/processActions.js b/forms-flow-web/src/actions/processActions.js
index 7dd12ca41..c59dd14e7 100644
--- a/forms-flow-web/src/actions/processActions.js
+++ b/forms-flow-web/src/actions/processActions.js
@@ -202,3 +202,16 @@ export const setTotalDmnCount = (data) => (dispatch) => {
     payload: data,
     }); 
 };
+
+export const setBpmSort = (data) => (dispatch) => {
+  dispatch({
+    type: ACTION_CONSTANTS.BPM_SORT,
+    payload: data,
+    });
+};
+export const setDmnSort = (data) => (dispatch) => {
+  dispatch({
+    type: ACTION_CONSTANTS.DMN_SORT,
+    payload: data,
+    });
+};
\ No newline at end of file
diff --git a/forms-flow-web/src/components/CustomComponents/FilterSortActions.js b/forms-flow-web/src/components/CustomComponents/FilterSortActions.js
new file mode 100644
index 000000000..de6b4c8a6
--- /dev/null
+++ b/forms-flow-web/src/components/CustomComponents/FilterSortActions.js
@@ -0,0 +1,61 @@
+import React from "react";
+import { FilterIcon, RefreshIcon, SortModal } from "@formsflow/components";
+import PropTypes from "prop-types";
+import { useTranslation  } from "react-i18next";
+
+const FilterSortActions = ({
+  showSortModal,
+  handleFilterIconClick,
+  handleRefresh,
+  handleSortModalClose,
+  handleSortApply,
+  defaultSortOption,
+  defaultSortOrder,
+  optionSortBy,  // Accept optionSortBy as a prop
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <FilterIcon onClick={handleFilterIconClick} />
+      <RefreshIcon onClick={handleRefresh} />
+      {showSortModal && (
+        <SortModal
+          firstItemLabel={t("Sort By")}
+          secondItemLabel={t("In a")}
+          showSortModal={showSortModal}
+          onClose={handleSortModalClose}
+          primaryBtnAction={handleSortApply}
+          modalHeader={t("Sort")}
+          primaryBtnLabel={t("Sort Results")}
+          secondaryBtnLabel={t("Cancel")}
+          optionSortBy={optionSortBy}
+          optionSortOrder={[
+            { value: "asc", label: t("Ascending") },
+            { value: "desc", label: t("Descending") },
+          ]}
+          defaultSortOption={defaultSortOption}
+          defaultSortOrder={defaultSortOrder}
+        />
+      )}
+    </>
+  );
+};
+
+// Add propTypes to validate props
+FilterSortActions.propTypes = {
+  showSortModal: PropTypes.bool.isRequired,
+  handleFilterIconClick: PropTypes.func.isRequired,
+  handleRefresh: PropTypes.func.isRequired,
+  handleSortModalClose: PropTypes.func.isRequired,
+  handleSortApply: PropTypes.func.isRequired,
+  defaultSortOption: PropTypes.string.isRequired,
+  defaultSortOrder: PropTypes.string.isRequired,
+  optionSortBy: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default FilterSortActions;
diff --git a/forms-flow-web/src/components/Form/List.js b/forms-flow-web/src/components/Form/List.js
index 8c1638e95..88739516d 100644
--- a/forms-flow-web/src/components/Form/List.js
+++ b/forms-flow-web/src/components/Form/List.js
@@ -1,43 +1,54 @@
 import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
 import { connect, useSelector, useDispatch } from "react-redux";
 import CreateFormModal from "../Modals/CreateFormModal.js";
 import { toast } from "react-toastify";
 import { addTenantkey } from "../../helper/helper";
-import { selectRoot, selectError, Errors, deleteForm } from "@aot-technologies/formio-react";
-import Loading from "../../containers/Loading";
 import {
-  MULTITENANCY_ENABLED,
-} from "../../constants/constants";
+  selectRoot,
+  selectError,
+  Errors,
+  deleteForm,
+} from "@aot-technologies/formio-react";
+import Loading from "../../containers/Loading";
+import { MULTITENANCY_ENABLED } from "../../constants/constants";
 import "../Form/List.scss";
 import {
   setBPMFormListLoading,
   setFormDeleteStatus,
   setBpmFormSearch,
   setBPMFormListPage,
+  setBpmFormSort
 } from "../../actions/formActions";
-import {
-  fetchBPMFormList
-} from "../../apiManager/services/bpmFormServices";
+import { fetchBPMFormList } from "../../apiManager/services/bpmFormServices";
 import {
   setFormCheckList,
-  setFormSearchLoading
+  setFormSearchLoading,
 } from "../../actions/checkListActions";
 import { useTranslation, Translation } from "react-i18next";
-import {
-  unPublishForm,
-} from "../../apiManager/services/processServices";
+import { unPublishForm } from "../../apiManager/services/processServices";
 import FormTable from "./constants/FormTable";
 import ClientTable from "./constants/ClientTable";
 import _ from "lodash";
 import _camelCase from "lodash/camelCase";
-import { formCreate, formImport, validateFormName } from "../../apiManager/services/FormServices";
+import {
+  formCreate,
+  formImport,
+  validateFormName,
+} from "../../apiManager/services/FormServices";
 import { setFormSuccessData } from "../../actions/formActions";
 import userRoles from "../../constants/permissions.js";
 import FileService from "../../services/FileService";
-import { FormBuilderModal, ImportModal, CustomSearch, CustomButton } from "@formsflow/components";
+import {
+  FormBuilderModal,
+  ImportModal,
+  CustomSearch,
+  CustomButton,
+} from "@formsflow/components";
 import { useMutation } from "react-query";
 import { addHiddenApplicationComponent } from "../../constants/applicationComponent";
 import { navigateToDesignFormEdit } from "../../helper/routerHelper.js";
+import FilterSortActions from "../CustomComponents/FilterSortActions.js";
 
 const List = React.memo((props) => {
   const { createDesigns, createSubmissions, viewDesigns } = userRoles();
@@ -49,50 +60,71 @@ const List = React.memo((props) => {
   const [importFormModal, setImportFormModal] = useState(false);
   const [importError, setImportError] = useState("");
   const [importLoader, setImportLoader] = useState(false);
+  const [showSortModal, setShowSortModal] = useState(false);
+
+
+  const handleFilterIconClick = () => {
+    setShowSortModal(true); // Open the SortModal
+  };
+
+  const handleSortModalClose = () => {
+    setShowSortModal(false); // Close the SortModal
+  };
+
+  const handleSortApply = (selectedSortOption, selectedSortOrder) => {
+    dispatch(
+      setBpmFormSort({
+        ...formSort,
+        activeKey: selectedSortOption,
+        [selectedSortOption]: { sortOrder: selectedSortOrder },
+      })
+    );
+    setShowSortModal(false);
+  };
+
   const ActionType = {
     BUILD: "BUILD",
-    IMPORT: "IMPORT"
+    IMPORT: "IMPORT",
   };
 
   const UploadActionType = {
     IMPORT: "import",
-    VALIDATE: "validate"
+    VALIDATE: "validate",
   };
 
   // const [formDescription, setFormDescription] = useState("");
   const [nameError, setNameError] = useState("");
   const dispatch = useDispatch();
-  const submissionAccess = useSelector((state) => state.user?.submissionAccess || []);
+  const submissionAccess = useSelector(
+    (state) => state.user?.submissionAccess || []
+  );
 
   const [formSubmitted, setFormSubmitted] = useState(false);
 
-    /* --------- validate form title exist or not --------- */
-    const {
-      mutate: validateFormTitle, // this function will trigger the API call
-      isLoading: validationLoading,
-      // isError: error,
-    } = useMutation(
-      ({ title }) =>
-        validateFormName(title) ,
-      {
-        onSuccess:({data},
-          {createButtonClicked,...variables})=>{
-        if (data && data.code === "FORM_EXISTS") {
-          setNameError(data.message);  // Set exact error message
-        } else {
-          setNameError("");
-          // if the modal clicked createButton, need to call handleBuild
-          if (createButtonClicked) {
-            handleBuild(variables);
-          }
+  /* --------- validate form title exist or not --------- */
+  const {
+    mutate: validateFormTitle, // this function will trigger the API call
+    isLoading: validationLoading,
+    // isError: error,
+  } = useMutation(({ title }) => validateFormName(title), {
+    onSuccess: ({ data }, { createButtonClicked, ...variables }) => {
+      if (data && data.code === "FORM_EXISTS") {
+        setNameError(data.message); // Set exact error message
+      } else {
+        setNameError("");
+        // if the modal clicked createButton, need to call handleBuild
+        if (createButtonClicked) {
+          handleBuild(variables);
         }
-      },
-      onError: (error) => {
-        const errorMessage = error?.response?.data?.message || "An error occurred while validating the form name.";
-        setNameError(errorMessage);  // Set the error message from the server
-      },
-    }
-  );
+      }
+    },
+    onError: (error) => {
+      const errorMessage =
+        error?.response?.data?.message ||
+        "An error occurred while validating the form name.";
+      setNameError(errorMessage); // Set the error message from the server
+    },
+  });
 
   useEffect(() => {
     setSearch(searchText);
@@ -111,11 +143,7 @@ const List = React.memo((props) => {
     setSearch("");
     dispatch(setBpmFormSearch(""));
   };
-  const {
-    forms,
-    getFormsInit,
-    errors,
-  } = props;
+  const { forms, getFormsInit, errors } = props;
   const isBPMFormListLoading = useSelector((state) => state.bpmForms.isActive);
   const designerFormLoading = useSelector(
     (state) => state.formCheckList.designerFormLoading
@@ -131,6 +159,12 @@ const List = React.memo((props) => {
   const [newFormModal, setNewFormModal] = useState(false);
   const [description, setUploadFormDescription] = useState("");
   const [formTitle, setFormTitle] = useState("");
+  const  optionSortBy = [
+    { value: "formName", label: t("Form Name") },
+    { value: "visibility", label: t("Visibility") },
+    { value: "status", label: t("Status") },
+    { value: "modified", label: t("Last Edited") },
+  ];
   useEffect(() => {
     dispatch(setFormCheckList([]));
   }, [dispatch]);
@@ -169,11 +203,11 @@ const List = React.memo((props) => {
   };
 
   const handleImport = async (fileContent, actionType) => {
-
-
-    let data; 
-    if ([UploadActionType.VALIDATE, UploadActionType.IMPORT].includes(actionType)) {
-         data = { importType: "new", action: actionType };
+    let data;
+    if (
+      [UploadActionType.VALIDATE, UploadActionType.IMPORT].includes(actionType)
+    ) {
+      data = { importType: "new", action: actionType };
     } else {
       console.error("Invalid UploadActionType provided");
       return;
@@ -189,21 +223,21 @@ const List = React.memo((props) => {
       const res = await formImport(fileContent, dataString);
       const { data: responseData } = res;
       const formId = responseData.mapper?.formId;
-  
+
       setImportLoader(false);
       setFormSubmitted(false);
-  
-      if (actionType === UploadActionType.VALIDATE ) {
-      
+
+      if (actionType === UploadActionType.VALIDATE) {
         const formExtracted = await FileService.extractFileDetails(fileContent);
-  
-        if (Array.isArray(formExtracted?.forms)) {  
-            setFormTitle(formExtracted?.forms[0]?.formTitle || ""); 
-            setUploadFormDescription(formExtracted?.forms[0]?.formDescription || "");
-          }
-        
+
+        if (Array.isArray(formExtracted?.forms)) {
+          setFormTitle(formExtracted?.forms[0]?.formTitle || "");
+          setUploadFormDescription(
+            formExtracted?.forms[0]?.formDescription || ""
+          );
+        }
       } else if (formId) {
-        navigateToDesignFormEdit(dispatch,tenantKey,formId);
+        navigateToDesignFormEdit(dispatch, tenantKey, formId);
       }
     } catch (err) {
       setImportLoader(false);
@@ -211,7 +245,6 @@ const List = React.memo((props) => {
       setImportError(err?.response?.data?.message);
     }
   };
-  
 
   useEffect(() => {
     fetchForms();
@@ -232,15 +265,15 @@ const List = React.memo((props) => {
     return null;
   };
 
-  const validateFormNameOnBlur = ({title,...rest}) => {
-    //the reset variable contain title, description, display  also sign for clicked in create button 
-    const error = validateForm({title});
+  const validateFormNameOnBlur = ({ title, ...rest }) => {
+    //the reset variable contain title, description, display  also sign for clicked in create button
+    const error = validateForm({ title });
 
     if (error) {
       setNameError(error);
       return;
     }
-    validateFormTitle({title, ...rest});
+    validateFormTitle({ title, ...rest });
   };
 
   const handleBuild = ({ description, display, title }) => {
@@ -271,28 +304,46 @@ const List = React.memo((props) => {
       newForm.path = addTenantkey(newForm.path, tenantKey);
       newForm.name = addTenantkey(newForm.name, tenantKey);
     }
-    formCreate(newForm).then((res) => {
-      const form = res.data;
-      dispatch(setFormSuccessData("form", form));
-      navigateToDesignFormEdit(dispatch,tenantKey,form._id);
-    }).catch((err) => {
-      let error;
-      if (err.response?.data) {
-        error = err.response.data;
-        console.log(error);
-        setNameError(error?.errors?.name?.message);
-      } else {
-        error = err.message;
-        setNameError(error?.errors?.name?.message);
-      }
-    }).finally(() => {
-      setFormSubmitted(false);
-    });
+    formCreate(newForm)
+      .then((res) => {
+        const form = res.data;
+        dispatch(setFormSuccessData("form", form));
+        navigateToDesignFormEdit(dispatch, tenantKey, form._id);
+      })
+      .catch((err) => {
+        let error;
+        if (err.response?.data) {
+          error = err.response.data;
+          console.log(error);
+          setNameError(error?.errors?.name?.message);
+        } else {
+          error = err.message;
+          setNameError(error?.errors?.name?.message);
+        }
+      })
+      .finally(() => {
+        setFormSubmitted(false);
+      });
+  };
+
+  const handleRefresh = () => {
+  fetchForms();
   };
+  const renderTable = () => {
+    if (createDesigns || viewDesigns) {
+      return <FormTable />;
+    }
+    if (createSubmissions) {
+      return <ClientTable />;
+    }
+    return null;
+  };
+  
+  
   return (
     <>
       {(forms.isActive || designerFormLoading || isBPMFormListLoading) &&
-        !searchFormLoading ? (
+      !searchFormLoading ? (
         <div data-testid="Form-list-component-loader">
           <Loading />
         </div>
@@ -314,7 +365,18 @@ const List = React.memo((props) => {
                     dataTestId="form-search-input"
                   />
                 </div>
-                <div className="d-md-flex justify-content-end align-items-center">
+                <div className="d-md-flex justify-content-end align-items-center button-align">
+                  <FilterSortActions
+                    showSortModal={showSortModal}
+                    handleFilterIconClick={handleFilterIconClick}
+                    handleRefresh={handleRefresh}
+                    handleSortModalClose={handleSortModalClose}
+                    handleSortApply={handleSortApply}
+                    optionSortBy={optionSortBy}
+                    defaultSortOption={formSort.activeKey}
+                    defaultSortOrder={formSort[formSort.activeKey]?.sortOrder || "asc"}
+                  />
+
                   {createDesigns && (
                     <CustomButton
                       variant="primary"
@@ -347,34 +409,37 @@ const List = React.memo((props) => {
                     nameError={nameError}
                     buildForm={true}
                   />
-                  { importFormModal && <ImportModal
-                    importLoader={importLoader}
-                    importError={importError}
-                    showModal={importFormModal}
-                    uploadActionType={UploadActionType}
-                    formName={formTitle}
-                    formSubmitted={formSubmitted}
-                    description={description}
-                    onClose={onCloseimportModal}
-                    handleImport={handleImport}
-                    headerText={t("Import New Form")}
-                    primaryButtonText={t("Confirm and Edit form")}
-                    fileType=".json"
-                  /> }
+                  {importFormModal && (
+                    <ImportModal
+                      importLoader={importLoader}
+                      importError={importError}
+                      showModal={importFormModal}
+                      uploadActionType={UploadActionType}
+                      formName={formTitle}
+                      formSubmitted={formSubmitted}
+                      description={description}
+                      onClose={onCloseimportModal}
+                      handleImport={handleImport}
+                      headerText={t("Import New Form")}
+                      primaryButtonText={t("Confirm and Edit form")}
+                      fileType=".json"
+                    />
+                  )}
                 </div>
               </div>
-
             </>
           )}
-
-          {createDesigns || viewDesigns ? <FormTable /> :
-            createSubmissions ? <ClientTable /> : null}
+         {renderTable()}
         </div>
       )}
     </>
   );
 });
-
+List.propTypes = {
+  forms: PropTypes.object.isRequired,
+  getFormsInit: PropTypes.bool.isRequired,
+  errors: PropTypes.object.isRequired,
+};
 const mapStateToProps = (state) => {
   return {
     forms: selectRoot("forms", state),
@@ -410,13 +475,25 @@ const mapDispatchToProps = (dispatch, ownProps) => {
             if (err) {
               toast.error(
                 <Translation>
-                  {(t) => t(`${_.capitalize(formProcessData?.formType)} deletion unsuccessful`)}
+                  {(t) =>
+                    t(
+                      `${_.capitalize(
+                        formProcessData?.formType
+                      )} deletion unsuccessful`
+                    )
+                  }
                 </Translation>
               );
             } else {
               toast.success(
                 <Translation>
-                  {(t) => t(`${_.capitalize(formProcessData?.formType)} deleted successfully`)}
+                  {(t) =>
+                    t(
+                      `${_.capitalize(
+                        formProcessData?.formType
+                      )} deleted successfully`
+                    )
+                  }
                 </Translation>
               );
               const newFormCheckList = formCheckList.filter(
diff --git a/forms-flow-web/src/components/Form/constants/ClientTable.js b/forms-flow-web/src/components/Form/constants/ClientTable.js
index 5ed9af3e9..0ed435510 100644
--- a/forms-flow-web/src/components/Form/constants/ClientTable.js
+++ b/forms-flow-web/src/components/Form/constants/ClientTable.js
@@ -27,10 +27,8 @@ function ClientTable() {
   const pageNo = useSelector((state) => state.bpmForms.page);
   const limit = useSelector((state) => state.bpmForms.limit);
   const totalForms = useSelector((state) => state.bpmForms.totalForms);
-  const [currentFormSort ,setCurrentFormSort] = useState({
-  activeKey: "formName",
-  formName: { sortOrder: "asc" },
-  });
+  const formsort = useSelector((state) => state.bpmForms.sort);
+
   const searchFormLoading = useSelector(
     (state) => state.formCheckList.searchFormLoading
   );
@@ -50,14 +48,12 @@ function ClientTable() {
   ];
 
   const handleSort = (key) => {
-    setCurrentFormSort((prevSort) => {
-      const newSortOrder = prevSort[key].sortOrder === "asc" ? "desc" : "asc";
-      return {
-        ...prevSort,
-        activeKey: key,
-        [key]: { sortOrder: newSortOrder },
-      };
-    });
+    const newSortOrder = formsort[key].sortOrder === "asc" ? "desc" : "asc";
+   dispatch(setBpmFormSort({
+    ...formsort,
+    activeKey: key,
+    [key]: { sortOrder: newSortOrder },
+  }));
   };
 
   useEffect(() => {
@@ -88,9 +84,6 @@ function ClientTable() {
     dispatch(setBPMFormLimit(newLimit));
     dispatch(setBPMFormListPage(1));
   };
-  useEffect(() => {
-    dispatch(setBpmFormSort(currentFormSort));
-  },[currentFormSort,dispatch]);
 
   const noDataFound = () => {
     return (
@@ -135,7 +128,7 @@ function ClientTable() {
                   <SortableHeader
                    columnKey="formName"
                    title="Form Name"
-                   currentSort={currentFormSort}
+                   currentSort={formsort}
                    handleSort={handleSort}
                    className="d-flex justify-content-start"
                   />
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
index d76d469be..deaaf5ad3 100644
--- a/forms-flow-web/src/components/Form/constants/FormTable.js
+++ b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, {  useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { push } from "connected-react-router";
 import {
   setBPMFormLimit,
   setBPMFormListPage,
-                   
+
   setBpmFormSort,
 } from "../../../actions/formActions";
 import LoadingOverlay from "react-loading-overlay-ts";
@@ -38,7 +38,6 @@ function FormTable() {
   const isApplicationCountLoading = useSelector((state) => state.process.isApplicationCountLoading);
   const { createDesigns, viewDesigns } = userRoles();
   const [expandedRowIndex, setExpandedRowIndex] = useState(null);
-  const [currentFormSort ,setCurrentFormSort] = useState(formsort);  
 
   const pageOptions = [
     {
@@ -65,20 +64,14 @@ function FormTable() {
 
 
   const handleSort = (key) => {
-    setCurrentFormSort((prevSort) => {
-      const newSortOrder = prevSort[key].sortOrder === "asc" ? "desc" : "asc";
-      return {
-        ...prevSort,
-        activeKey: key,
-        [key]: { sortOrder: newSortOrder },
-      };
-    });
+    const newSortOrder = formsort[key].sortOrder === "asc" ? "desc" : "asc";
+   dispatch(setBpmFormSort({
+    ...formsort,
+    activeKey: key,
+    [key]: { sortOrder: newSortOrder },
+  }));
   };
 
-  useEffect(() => {
-    dispatch(setBpmFormSort(currentFormSort));
-  },[currentFormSort,dispatch]);
-  
   const viewOrEditForm = (formId, path) => {
     dispatch(resetFormProcessData());
     dispatch(push(`${redirectUrl}formflow/${formId}/${path}`));
@@ -115,35 +108,35 @@ function FormTable() {
                   <SortableHeader
                    columnKey="formName"
                    title="Form Name"
-                   currentSort={currentFormSort}
+                   currentSort={formsort}
                    handleSort={handleSort}
                    className="gap-2"
                   />
                   </th>
                   <th className="w-30" scope="col">{t("Description")}</th>
                   <th className="w-13" scope="col">
-                  <SortableHeader 
+                  <SortableHeader
                   columnKey="modified"
                   title="Last Edited"
-                  currentSort={currentFormSort}
+                  currentSort={formsort}
                   handleSort={handleSort}
                   className="gap-2"
                   />
                   </th>
                   <th className="w-13" scope="col">
-                  <SortableHeader 
+                  <SortableHeader
                     columnKey="visibility"
                     title="Visibility"
-                    currentSort={currentFormSort}
-                    handleSort={handleSort} 
-                    className="gap-2"/>                
+                    currentSort={formsort}
+                    handleSort={handleSort}
+                    className="gap-2"/>
                   </th>
                   <th className="w-12" scope="col" colSpan="4">
-                    <SortableHeader 
+                    <SortableHeader
                     columnKey="status"
                     title="Status"
-                    currentSort={currentFormSort}
-                    handleSort={handleSort} 
+                    currentSort={formsort}
+                    handleSort={handleSort}
                     className="gap-2"/>
                   </th>
                   <th className="w-12" colSpan="4" aria-label="Search Forms by form title"></th>
diff --git a/forms-flow-web/src/components/Modeler/ProcessTable.js b/forms-flow-web/src/components/Modeler/ProcessTable.js
index 76b8d9dfd..e3c96939b 100644
--- a/forms-flow-web/src/components/Modeler/ProcessTable.js
+++ b/forms-flow-web/src/components/Modeler/ProcessTable.js
@@ -8,6 +8,7 @@ import {
   NoDataFound,
   BuildModal,
 } from "@formsflow/components";
+import FilterSortActions from "../CustomComponents/FilterSortActions";
 import LoadingOverlay from "react-loading-overlay-ts";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
@@ -20,6 +21,8 @@ import {
   setBpmnSearchText,
   setDmnSearchText,
   setIsPublicDiagram,
+  setBpmSort,
+  setDmnSort
 } from "../../actions/processActions";
 
 const ProcessTable = React.memo(() => {
@@ -47,25 +50,19 @@ const ProcessTable = React.memo(() => {
     isBPMN ? state.process.totalBpmnCount : state.process.totalDmnCount
   );
   const tenantKey = useSelector((state) => state.tenants?.tenantId);
-
-  const initialSortConfig = {
-    activeKey: "name",
-    name: { sortOrder: "asc" },
-    processKey: { sortOrder: "asc" },
-    modified: { sortOrder: "asc" },
-    status: { sortOrder: "asc" },
-  };
-
+  const sortConfig = useSelector((state) =>
+    isBPMN ? state.process.bpmsort : state.process.dmnSort
+  );
   const [bpmnState, setBpmnState] = useState({
     activePage: 1,
     limit: 5,
-    sortConfig: initialSortConfig,
+    sortConfig: sortConfig,
   });
 
   const [dmnState, setDmnState] = useState({
     activePage: 1,
     limit: 5,
-    sortConfig: initialSortConfig,
+    sortConfig: sortConfig,
   });
   const [searchDMN, setSearchDMN] = useState(searchTextDMN || "");
   const [searchBPMN, setSearchBPMN] = useState(searchTextBPMN || "");
@@ -80,20 +77,25 @@ const ProcessTable = React.memo(() => {
   const setCurrentState = isBPMN ? setBpmnState : setDmnState;
 
   const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
-
-   //fetching bpmn or dmn
-   useEffect(() => {
+  const [showSortModal, setShowSortModal] = useState(false);
+  const optionSortBy = [
+    { value: "name", label: t("Name") },
+    { value: "processKey", label: t("Id") },
+    { value: "status", label: t("Status") },
+    { value: "modified", label: t("Last Edited") },
+  ];
+  const fetchProcesses = () => {
     setIsLoading(true);
     dispatch(
       fetchAllProcesses(
         {
-            pageNo: currentState.activePage,
-            tenant_key: tenantKey,
-            processType: ProcessContents.processType,
-            limit: currentState.limit,
-            searchKey: search,
-            sortBy: currentState.sortConfig.activeKey,
-            sortOrder: currentState.sortConfig[currentState.sortConfig.activeKey].sortOrder,
+          pageNo: currentState.activePage,
+          tenant_key: tenantKey,
+          processType: ProcessContents.processType,
+          limit: currentState.limit,
+          searchKey: search,
+          sortBy: sortConfig.activeKey,
+          sortOrder: sortConfig[sortConfig.activeKey].sortOrder,
         },
         () => {
           setIsLoading(false);
@@ -101,7 +103,37 @@ const ProcessTable = React.memo(() => {
         }
       )
     );
-  }, [dispatch, currentState, tenantKey,searchTextBPMN,searchTextDMN, isBPMN]);
+  };
+  
+  const handleFilterIconClick = () => {
+    setShowSortModal(true); 
+  };
+
+  const handleSortModalClose = () => {
+    setShowSortModal(false);
+  };
+  const handleSortApply = (selectedSortOption, selectedSortOrder) => {
+    setIsLoading(true);
+    const action = isBPMN ? setBpmSort : setDmnSort;
+    dispatch(action({
+      ...sortConfig,
+      activeKey: selectedSortOption,
+      [selectedSortOption]: { sortOrder: selectedSortOrder },
+    }));
+
+    setIsLoading(false);
+    setShowSortModal(false);
+  };
+  
+  
+  const handleRefresh = () => {
+    fetchProcesses();
+  };
+
+   //fetching bpmn or dmn
+   useEffect(() => {
+    fetchProcesses();
+  }, [dispatch, currentState, tenantKey,searchTextBPMN,searchTextDMN, isBPMN,sortConfig]);
  
   //Update api call when search field is empty
   useEffect(() => {
@@ -111,18 +143,21 @@ const ProcessTable = React.memo(() => {
   }, [search, dispatch, isBPMN]);
 
   const handleSort = (key) => {
-    setCurrentState((prevState) => ({
-      ...prevState,
-      sortConfig: {
-        ...prevState.sortConfig,
-        activeKey: key,
-        [key]: {
-          sortOrder: prevState.sortConfig[key]?.sortOrder === "asc" ? "desc" : "asc",
-        },
+    const newSortConfig = {
+      ...sortConfig,
+      activeKey: key,
+      [key]: {
+        sortOrder: sortConfig[key]?.sortOrder === "asc" ? "desc" : "asc",
       },
-    }));
+    };
+  
+    if (isBPMN) {
+      dispatch(setBpmSort(newSortConfig));
+    } else {
+      dispatch(setDmnSort(newSortConfig)); 
+    }
   };
-
+  
   const handleSearch = () => {
     setSearchLoading(true);
     if (isBPMN) {
@@ -214,7 +249,17 @@ const ProcessTable = React.memo(() => {
             dataTestId={`${ProcessContents.processType}-search-input`}
           />
         </div>
-        <div className="d-md-flex justify-content-end align-items-center">
+        <div className="d-md-flex justify-content-end align-items-center button-align">
+          <FilterSortActions
+            showSortModal={showSortModal}
+            handleFilterIconClick={handleFilterIconClick}
+            handleRefresh={handleRefresh}
+            handleSortModalClose={handleSortModalClose}
+            handleSortApply={handleSortApply}
+            optionSortBy={optionSortBy}
+            defaultSortOption={sortConfig.activeKey}
+            defaultSortOrder={sortConfig[sortConfig.activeKey]?.sortOrder}
+          />
           <CustomButton
             variant="primary"
             size="sm"
@@ -235,7 +280,7 @@ const ProcessTable = React.memo(() => {
                     <SortableHeader
                       columnKey="name"
                       title="Name"
-                      currentSort={currentState.sortConfig}
+                      currentSort={sortConfig}
                       handleSort={handleSort}
                       className="gap-2"
                     />
@@ -244,7 +289,7 @@ const ProcessTable = React.memo(() => {
                     <SortableHeader
                       columnKey="processKey"
                       title="ID"
-                      currentSort={currentState.sortConfig}
+                      currentSort={sortConfig}
                       handleSort={handleSort}
                       className="gap-2"
                     />
@@ -253,7 +298,7 @@ const ProcessTable = React.memo(() => {
                     <SortableHeader
                       columnKey="modified"
                       title="Last Edited"
-                      currentSort={currentState.sortConfig}
+                      currentSort={sortConfig}
                       handleSort={handleSort}
                       className="gap-2"
                     />
@@ -262,12 +307,16 @@ const ProcessTable = React.memo(() => {
                     <SortableHeader
                       columnKey="status"
                       title="Status"
-                      currentSort={currentState.sortConfig}
+                      currentSort={sortConfig}
                       handleSort={handleSort}
                       className="gap-2"
                     />
                   </th>
-                  <th className="w-25" colSpan="4" aria-label="edit-button"></th>
+                  <th
+                    className="w-25"
+                    colSpan="4"
+                    aria-label="edit-button"
+                  ></th>
                 </tr>
               </thead>
               {processList.length ? (
@@ -296,7 +345,9 @@ const ProcessTable = React.memo(() => {
                     ]}
                   />
                 </tbody>
-              ) : !isLoading && <NoDataFound />}
+              ) : (
+                !isLoading && <NoDataFound />
+              )}
             </table>
           </div>
         </div>
diff --git a/forms-flow-web/src/modules/processReducer.js b/forms-flow-web/src/modules/processReducer.js
index ca1d3d195..4a8d5dcd2 100644
--- a/forms-flow-web/src/modules/processReducer.js
+++ b/forms-flow-web/src/modules/processReducer.js
@@ -32,7 +32,20 @@ const initialState = {
   totalDmnCount:0,
   defaultProcessXmlData:createNewProcess().defaultWorkflow.xml,
   defaultDmnXmlData:createNewDecision().defaultWorkflow.xml,
-
+  bpmsort: {
+    activeKey: "name",
+    name: { sortOrder: "asc" },
+    processKey: { sortOrder: "asc" },
+    modified: { sortOrder: "asc" },
+    status: { sortOrder: "asc" },
+  },
+ dmnSort: {
+  activeKey: "name",
+  name: { sortOrder: "asc" },
+  processKey: { sortOrder: "asc" },
+  modified: { sortOrder: "asc" },
+  status: { sortOrder: "asc" },
+},
 };
 
 const process = (state = initialState, action) => {
@@ -118,6 +131,10 @@ const process = (state = initialState, action) => {
         return { ...state, totalBpmnCount: action.payload };
     case ACTION_CONSTANTS.SET_TOTAL_DMN_COUNT:
         return { ...state, totalDmnCount: action.payload };
+    case ACTION_CONSTANTS.BPM_SORT:
+        return { ...state, bpmsort: action.payload };
+    case ACTION_CONSTANTS.DMN_SORT:
+        return { ...state, dmnSort: action.payload };
     default:
       return state;
   }