diff --git a/forms-flow-web/src/components/CustomComponents/TableComponents.js b/forms-flow-web/src/components/CustomComponents/TableComponents.js
deleted file mode 100644
index 2d21c058cd..0000000000
--- a/forms-flow-web/src/components/CustomComponents/TableComponents.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import Pagination from "react-js-pagination";
-import { Dropdown } from "react-bootstrap";
-import { HelperServices } from "@formsflow/service";
-import { CustomButton, DownArrowIcon } from "@formsflow/components";
-import PropTypes from "prop-types";
-
-export const ReusableTableRow = ({ item, gotoEdit, buttonLabel }) => {
-  const { t } = useTranslation();
-  return (
-    <tr>
-      <td className="w-25">
-        <span className="ms-4">{item.name}</span>
-      </td>
-      <td className="w-20">
-        <span>{item.parentProcessKey}</span>
-      </td>
-      <td className="w-15">{HelperServices?.getLocaldate(item.modified)}</td>
-      <td className="w-15">
-        <span
-          data-testid={`sub-flow-status-${item._id}`}
-          className="d-flex align-items-center"
-        >
-          <span
-            className={
-              item.status === "active" ? "status-live" : "status-draft"
-            }
-          ></span>
-          {item.status === "active" ? t("Live") : t("Draft")}
-        </span>
-      </td>
-      <td className="w-25">
-        <span className="d-flex justify-content-end">
-          <CustomButton
-            variant="secondary"
-            size="sm"
-            label={t("Edit")}
-            ariaLabel={`Edit ${buttonLabel} Button`}
-            onClick={() => gotoEdit(item)}
-            dataTestid={`Edit ${buttonLabel} Button`}
-          />
-        </span>
-      </td>
-    </tr>
-  );
-};
-ReusableTableRow.propTypes = {
-  item: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    parentProcessKey: PropTypes.string,
-    modified: PropTypes.string,
-    status: PropTypes.string,
-    _id: PropTypes.string.isRequired,
-  }).isRequired,
-  gotoEdit: PropTypes.func.isRequired,
-  buttonLabel: PropTypes.string.isRequired,
-};
-export const TableFooter = ({
-  limit,
-  activePage,
-  totalCount,
-  handlePageChange,
-  onLimitChange,
-  pageOptions,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <tr>
-      <td colSpan={3}>
-        <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
-          <span className="ms-2">
-            {t("Showing")} {(limit * activePage) - (limit - 1)} {t("to")}&nbsp;
-            {Math.min(limit * activePage, totalCount)} {t("of")}&nbsp;
-            {totalCount} {t("results")}
-          </span>
-        </div>
-      </td>
-      <td colSpan={3}>
-        <div className="d-flex align-items-center justify-content-around">
-          <Pagination
-            activePage={activePage}
-            itemsCountPerPage={limit}
-            totalItemsCount={totalCount}
-            pageRangeDisplayed={5}
-            itemClass="page-item"
-            linkClass="page-link"
-            onChange={handlePageChange}
-          />
-        </div>
-      </td>
-      <td colSpan={3}>
-        <div className="d-flex align-items-center justify-content-end">
-          <span className="pagination-text">{t("Rows per page")}</span>
-          <div className="pagination-dropdown">
-            <Dropdown data-testid="page-limit-dropdown">
-              <Dropdown.Toggle
-                variant="light"
-                id="dropdown-basic"
-                data-testid="page-limit-dropdown-toggle"
-              >
-                {limit}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                {pageOptions.map((option) => (
-                  <Dropdown.Item
-                    key={option.value}
-                    type="button"
-                    data-testid={`page-limit-dropdown-item-${option.value}`}
-                    onClick={() => onLimitChange(option.value)}
-                  >
-                    {option.text}
-                  </Dropdown.Item>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
-            <DownArrowIcon />
-          </div>
-        </div>
-      </td>
-    </tr>
-  );
-};
-TableFooter.propTypes = {
-  limit: PropTypes.number.isRequired,
-  activePage: PropTypes.number.isRequired,
-  totalCount: PropTypes.number.isRequired,
-  handlePageChange: PropTypes.func.isRequired,
-  onLimitChange: PropTypes.func.isRequired,
-  pageOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.number.isRequired,
-      text: PropTypes.string.isRequired,
-    })
-  ).isRequired,
-};
diff --git a/forms-flow-web/src/components/Modeler/DecisionTable.js b/forms-flow-web/src/components/Modeler/DecisionTable.js
index 66a06a3718..9b82a0a090 100644
--- a/forms-flow-web/src/components/Modeler/DecisionTable.js
+++ b/forms-flow-web/src/components/Modeler/DecisionTable.js
@@ -1,13 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { CustomButton, CustomSearch } from "@formsflow/components";
+import { CustomButton, CustomSearch ,ReusableProcessTableRow ,TableFooter} from "@formsflow/components";
 import LoadingOverlay from "react-loading-overlay-ts";
 import { useTranslation } from "react-i18next";
 import SortableHeader from "../CustomComponents/SortableHeader";
-import {
-  ReusableTableRow,
-  TableFooter,
-} from "../CustomComponents/TableComponents";
 import { fetchAllProcesses } from "../../apiManager/services/processServices";
 import { MULTITENANCY_ENABLED } from "../../constants/constants";
 import { push } from "connected-react-router";
@@ -169,7 +165,7 @@ const DecisionTable = React.memo(() => {
               </thead>
               <tbody>
                 {dmn.map((dmnItem) => (
-                  <ReusableTableRow
+                  <ReusableProcessTableRow
                     key={dmnItem.id}
                     item={dmnItem}
                     gotoEdit={gotoEdit}
diff --git a/forms-flow-web/src/components/Modeler/SubFlowTable.js b/forms-flow-web/src/components/Modeler/SubFlowTable.js
index e3408b5097..843d3f071c 100644
--- a/forms-flow-web/src/components/Modeler/SubFlowTable.js
+++ b/forms-flow-web/src/components/Modeler/SubFlowTable.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { CustomButton, CustomSearch } from "@formsflow/components";
+import { CustomButton, CustomSearch ,TableFooter ,ReusableProcessTableRow} from "@formsflow/components";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 
@@ -12,10 +12,7 @@ import {
 import { push } from "connected-react-router";
 import { MULTITENANCY_ENABLED } from "../../constants/constants";
 import SortableHeader from "../CustomComponents/SortableHeader";
-import {
-  ReusableTableRow,
-  TableFooter,
-} from "../CustomComponents/TableComponents";
+
 
 const SubFlow = React.memo(() => {
   const searchText = useSelector((state) => state.process.bpmnSearchText);
@@ -185,7 +182,7 @@ const SubFlow = React.memo(() => {
               </thead>
               <tbody>
                 {process.map((processItem) => (
-                  <ReusableTableRow
+                  <ReusableProcessTableRow
                     key={processItem.id}
                     item={processItem}
                     gotoEdit={gotoEdit}