diff --git a/forms-flow-web/src/components/CustomComponents/Button.js b/forms-flow-web/src/components/CustomComponents/Button.js
deleted file mode 100644
index 4478d4ca2b..0000000000
--- a/forms-flow-web/src/components/CustomComponents/Button.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from "react";
-import { useRef, useEffect, useState } from "react";
-import Button from "react-bootstrap/Button";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import Dropdown from "react-bootstrap/Dropdown";
-import { ChevronIcon } from "@formsflow/components";
-
-const CustomButton = ({
-  variant,
-  size,
-  label,
-  onClick,
-  isDropdown,
-  dropdownItems,
-  disabled,
-  icon,
-  className,
-  dataTestid,
-  ariaLabel,
-  buttonLoading,
-}) => {
-  const buttonRef = useRef(null);
-  const toggleRef = useRef(null);
-  const [menuStyle, setMenuStyle] = useState({});
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  const updateMenuStyle = () => {
-    if (buttonRef.current && toggleRef.current) {
-      const buttonWidth = buttonRef.current.getBoundingClientRect().width;
-      const toggleWidth = toggleRef.current.getBoundingClientRect().width;
-      const totalWidth = buttonWidth + toggleWidth - 1;
-      setMenuStyle({
-        minWidth: `${totalWidth}px`,
-        borderTop: "none",
-        borderTopLeftRadius: "0",
-        borderTopRightRadius: "0",
-        padding: "0",
-      });
-    }
-  };
-
-  useEffect(() => {
-    updateMenuStyle();
-    window.addEventListener("resize", updateMenuStyle);
-    return () => window.removeEventListener("resize", updateMenuStyle);
-  }, []);
-
-  if (isDropdown) {
-    return (
-      <Dropdown
-        as={ButtonGroup}
-        className={className}
-        onToggle={(isOpen) => setDropdownOpen(isOpen)}
-      >
-        <Button
-          variant={variant}
-          size={size}
-          disabled={disabled}
-          ref={buttonRef}
-          data-testid={dataTestid}
-          aria-label={ariaLabel}
-        >
-          {label}
-        </Button>
-
-        <Dropdown.Toggle
-          ref={toggleRef}
-          split
-          variant={variant}
-          id="dropdown-split-basic"
-          className={`default-arrow ${dropdownOpen ? "collapsed" : ""}`}
-        >
-          <ChevronIcon color="white" />
-        </Dropdown.Toggle>
-
-        <Dropdown.Menu style={menuStyle}>
-          {dropdownItems.map((item, index) => (
-            <Dropdown.Item
-              key={index}
-              onClick={item.onClick}
-              data-testid={item.dataTestid}
-              aria-label={item.ariaLabel}
-            >
-              {item.label}
-            </Dropdown.Item>
-          ))}
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  }
-
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      onClick={onClick}
-      disabled={disabled || buttonLoading}
-      className={className}
-      data-testid={dataTestid}
-      aria-label={ariaLabel}
-    >
-      <div
-        className={`d-inline-flex align-items-center ${
-          buttonLoading ? "button-content" : ""
-        }`}
-      >
-        {icon && <span className="me-2">{icon}</span>}
-        {label}
-      </div>
-      {buttonLoading && <span className="dotted-spinner"></span>}
-    </Button>
-  );
-};
-
-export default CustomButton;
diff --git a/forms-flow-web/src/components/CustomComponents/SortableHeader.js b/forms-flow-web/src/components/CustomComponents/SortableHeader.js
new file mode 100644
index 0000000000..9bf8710f45
--- /dev/null
+++ b/forms-flow-web/src/components/CustomComponents/SortableHeader.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation  } from "react-i18next";
+
+const SortableHeader = ({ columnKey, title, currentSort, handleSort,className }) => {
+    const { t } = useTranslation();
+    const isSorted = currentSort.sortBy === columnKey;
+    const sortedOrder = isSorted ? currentSort.sortOrder : "asc";
+    const handleKeyDown = (event)=>{
+      if (event.key === 'Enter') {  
+        handleSort(columnKey);
+        }
+    };
+    return (
+      <div
+        className= {`d-flex align-items-center justify-content-between cursor-pointer ${className || ''}`}
+        onClick={() => handleSort(columnKey)}
+        onKeyDown={handleKeyDown} 
+        role="button"
+        tabIndex = "0"
+        aria-pressed={isSorted}
+      >
+        <span className="mt-1">{t(title)}</span>
+        <span>
+          {sortedOrder === "asc" ? (
+            <i
+            data-testid={`${columnKey}-asc-sort-icon`}
+            className="fa fa-arrow-up sort-icon fs-16 ms-2"
+            data-toggle="tooltip"
+            title={t("Ascending")}
+          ></i>
+          ) : (
+            <i
+            data-testid={`${columnKey}-desc-sort-icon`}
+            className="fa fa-arrow-down sort-icon fs-16 ms-2"
+            data-toggle="tooltip"
+            title={t("Descending")}
+          ></i>
+          )}
+        </span>
+      </div>
+    );
+  };
+  SortableHeader.propTypes = {
+    columnKey: PropTypes.string.isRequired,  
+    title: PropTypes.string.isRequired,      
+    currentSort: PropTypes.shape({
+      sortBy: PropTypes.string,
+      sortOrder: PropTypes.string
+    }).isRequired,                          
+    handleSort: PropTypes.func.isRequired,     
+    className: PropTypes.string              
+  };
+
+  SortableHeader.defaultProps = {
+    className: '',
+  };
+
+  export default SortableHeader ;
\ No newline at end of file
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
index cf04c8bff6..e79622ac3c 100644
--- a/forms-flow-web/src/components/Form/constants/FormTable.js
+++ b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import PropTypes from 'prop-types';
 import { Dropdown } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { push } from "connected-react-router";
@@ -22,6 +21,8 @@ import {
 import { HelperServices } from "@formsflow/service";
 import { CustomButton, DownArrowIcon } from "@formsflow/components";
 import userRoles from "../../../constants/permissions";
+import SortableHeader from '../../CustomComponents/SortableHeader';
+
 function FormTable() {
   const tenantKey = useSelector((state) => state.tenants?.tenantId);
   const dispatch = useDispatch();
@@ -119,52 +120,7 @@ function FormTable() {
       </tbody>
     );
   };
-  const SortableHeader = ({ columnKey, title, currentFormSort, handleSort,className }) => {
-    const isSorted = currentFormSort.sortBy === columnKey;
-    const sortedOrder = isSorted ? currentFormSort.sortOrder : "asc";
-    const handleKeyDown = (event)=>{
-      if (event.key === 'Enter') {  
-        handleSort(columnKey);
-        }
-    };
-    return (
-      <div
-        className= {`d-flex align-items-center justify-content-between cursor-pointer ${className}`}
-        onClick={() => handleSort(columnKey)}
-        onKeyDown={handleKeyDown} 
-        role="button"
-      >
-        <span className="mt-1">{t(title)}</span>
-        <span>
-          {sortedOrder === "asc" ? (
-            <i
-            data-testid={`${columnKey}-asc-sort-icon`}
-            className="fa fa-arrow-up sort-icon fs-16 ms-2"
-            data-toggle="tooltip"
-            title={t("Ascending")}
-          ></i>
-          ) : (
-            <i
-            data-testid={`${columnKey}-desc-sort-icon`}
-            className="fa fa-arrow-down sort-icon fs-16 ms-2"
-            data-toggle="tooltip"
-            title={t("Descending")}
-          ></i>
-          )}
-        </span>
-      </div>
-    );
-  };
-  SortableHeader.propTypes = {
-    columnKey: PropTypes.string.isRequired,  
-    title: PropTypes.string.isRequired,      
-    currentFormSort: PropTypes.shape({
-      sortBy: PropTypes.string,
-      sortOrder: PropTypes.string
-    }).isRequired,                          
-    handleSort: PropTypes.func.isRequired,     
-    className: PropTypes.string              
-  };
+
   return (
     <>
       <LoadingOverlay active={searchFormLoading || isApplicationCountLoading} spinner text={t("Loading...")}>
@@ -177,7 +133,7 @@ function FormTable() {
                   <SortableHeader
                    columnKey="formName"
                    title="Form Name"
-                   currentFormSort={currentFormSort}
+                   currentSort={currentFormSort}
                    handleSort={handleSort}
                    className="ms-4"
                   />
@@ -187,7 +143,7 @@ function FormTable() {
                   <SortableHeader 
                   columnKey="modified"
                   title="Last Edited"
-                  currentFormSort={currentFormSort}
+                  currentSort={currentFormSort}
                   handleSort={handleSort}
                   />
                   </th>
@@ -195,14 +151,14 @@ function FormTable() {
                   <SortableHeader 
                     columnKey="visibility"
                     title="Visibility"
-                    currentFormSort={currentFormSort}
+                    currentSort={currentFormSort}
                     handleSort={handleSort} />
                   </th>
                   <th className="w-12" scope="col" colSpan="4">
                     <SortableHeader 
                     columnKey="status"
                     title="Status"
-                    currentFormSort={currentFormSort}
+                    currentSort={currentFormSort}
                     handleSort={handleSort} />
                   </th>
                   <th className="w-12" colSpan="4" aria-label="Search Forms by form title"></th>
diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
index 0fedcc60b8..ca80670d4b 100644
--- a/forms-flow-web/src/components/Modeler/SubFlowTable.js
+++ b/forms-flow-web/src/components/Modeler/SubFlowTable.js
@@ -17,13 +17,13 @@ import {
 } from "../../actions/processActions";
 import { push } from "connected-react-router";
 import { MULTITENANCY_ENABLED } from "../../constants/constants";
+import SortableHeader from '../CustomComponents/SortableHeader';
 
 const SubFlow = React.memo(() => {
   const searchText = useSelector((state) => state.process.bpmnSearchText);
   const tenantKey = useSelector((state) => state.tenants?.tenantId);
   const redirectUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantKey}/` : "/";
   const [limit, setLimit] = useState(5);
-  // const [totalProcess, setTotalProcess] = useState(0);
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const [activePage, setActivePage] = useState(1);
@@ -31,7 +31,7 @@ const SubFlow = React.memo(() => {
   const process = useSelector((state) => state.process.processList);
   const totalSubflowCount = useSelector((state) => state.process.totalCount);
   const [search, setSearch] = useState(searchText || "");
-  const [sort, setSort] = useState({ name: "asc" });
+  const [currentBPMNsort, setSort] = useState({ sortBy:"name",sortOrder: "asc" });
   const [searchSubflowLoading, setSearchSubflowLoading] = useState(false);
   useEffect(() => {
     setIsLoading(true);
@@ -44,8 +44,8 @@ const SubFlow = React.memo(() => {
           processType: "BPMN",
           limit: limit,
           searchKey: search,
-          sortBy: Object.keys(sort),
-          sortOrder: Object.values(sort),
+          sortBy: currentBPMNsort.sortBy,
+          sortOrder: currentBPMNsort.sortOrder,
         },
         () => {
           setIsLoading(false);
@@ -53,10 +53,22 @@ const SubFlow = React.memo(() => {
         }
       )
     );
-  }, [dispatch, activePage, limit, searchText, sort]);
+  }, [dispatch, activePage, limit, searchText, currentBPMNsort]);
 
-  // const handleSort = (key,value)=> setSort(prev => ({...prev,[key]:value}));
-  const handleSort = (key, value) => setSort({ [key]: value });
+
+  const handleSort = (key) => {
+    setSort((prevSort) => {
+      let newSortOrder = "asc";
+
+      if (prevSort.sortBy === key) {
+        newSortOrder = prevSort.sortOrder === "asc" ? "desc" : "asc";
+      }
+      return {
+        sortBy: key,
+        sortOrder: newSortOrder,
+      };
+    });
+  };
   const pageOptions = [
     {
       text: "5",
@@ -97,7 +109,6 @@ const SubFlow = React.memo(() => {
     if (MULTITENANCY_ENABLED) {
       dispatch(setIsPublicDiagram(data.tenantId ? true : false));
     }
-    //  dispatch(push(`${redirectUrl}process/${data.parentProcessKey}`));
     dispatch(
       push(`${redirectUrl}processes/bpmn/${data.parentProcessKey}/edit`)
     );
@@ -134,121 +145,37 @@ const SubFlow = React.memo(() => {
               <thead className="table-header">
                 <tr>
                   <th className="w-25" scope="col">
-                    <div
-                      className="ms-4 d-flex align-items-center justify-content-between"
-                      onClick={() => {
-                        handleSort(
-                          "name",
-                          sort["name"] == "asc" ? "desc" : "asc"
-                        );
-                      }}
-                    >
-                      <span className="mt-1">{t("Name")}</span>
-                      <span>
-                        {sort["name"] == "asc" ? (
-                          <i
-                            data-testid="name-desc-sort-icon"
-                            className="fa fa-arrow-up sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Ascending")}
-                          ></i>
-                        ) : (
-                          <i
-                            data-testid="name-asc-sort-icon"
-                            className="fa fa-arrow-down sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Descending")}
-                          ></i>
-                        )}
-                      </span>
-                    </div>{" "}
+                    <SortableHeader 
+                    columnKey="name"
+                    title="Name"
+                    currentSort={currentBPMNsort}
+                    handleSort={handleSort}
+                     />
+
                   </th>
                   <th className="w-20" scope="col">
-                    <div
-                      className="d-flex align-items-center justify-content-between"
-                      onClick={() => {
-                        handleSort("id", sort["id"] == "asc" ? "desc" : "asc");
-                      }}
-                    >
-                      <span className="mt-1">{t("id")}</span>
-                      <span>
-                        {sort["id"] == "asc" ? (
-                          <i
-                            data-testid="id-desc-sort-icon"
-                            className="fa fa-arrow-up sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Ascending")}
-                          ></i>
-                        ) : (
-                          <i
-                            data-testid="id-asc-sort-icon"
-                            className="fa fa-arrow-down sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Descending")}
-                          ></i>
-                        )}
-                      </span>
-                    </div>
+                  <SortableHeader 
+                    columnKey="id"
+                    title="id"
+                    currentSort={currentBPMNsort}
+                    handleSort={handleSort}
+                  />
                   </th>
                   <th className="w-15" scope="col">
-                    <div
-                      className="d-flex align-items-center justify-content-between"
-                      onClick={() => {
-                        handleSort(
-                          "modified",
-                          sort["modified"] == "asc" ? "desc" : "asc"
-                        );
-                      }}
-                    >
-                      <span className="mt-1">{t("Last Edited")}</span>
-                      <span>
-                        {sort["modified"] == "asc" ? (
-                          <i
-                            data-testid="modified-desc-sort-icon"
-                            className="fa fa-arrow-up sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Ascending")}
-                          ></i>
-                        ) : (
-                          <i
-                            data-testid="modified-asc-sort-icon"
-                            className="fa fa-arrow-down sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Descending")}
-                          ></i>
-                        )}
-                      </span>
-                    </div>
+                  <SortableHeader 
+                    columnKey="modified"
+                    title="Last Edited"
+                    currentSort={currentBPMNsort}
+                    handleSort={handleSort}
+                  />
                   </th>
                   <th className="w-15" scope="col">
-                    <div
-                      className="d-flex align-items-center justify-content-between"
-                      onClick={() => {
-                        handleSort(
-                          "status",
-                          sort["status"] == "asc" ? "desc" : "asc"
-                        );
-                      }}
-                    >
-                      <span className="mt-1">{t("Status")}</span>
-                      <span>
-                        {sort["status"] == "asc" ? (
-                          <i
-                            data-testid="status-desc-sort-icon"
-                            className="fa fa-arrow-up sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Ascending")}
-                          ></i>
-                        ) : (
-                          <i
-                            data-testid="status-asc-sort-icon"
-                            className="fa fa-arrow-down sort-icon cursor-pointer fs-16 ms-2"
-                            data-toggle="tooltip"
-                            title={t("Descending")}
-                          ></i>
-                        )}
-                      </span>
-                    </div>
+                  <SortableHeader 
+                    columnKey="status"
+                    title="Status"
+                    currentSort={currentBPMNsort}
+                    handleSort={handleSort}
+                  />
                   </th>
                   <th
                     className="w-25"