diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 55ad8250..fa9d22c5 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -223,7 +223,19 @@
     "MY_MAIN_SUBJECTS": "Main subjects",
     "NUMBER_OF_CLUSTERS_I_TEACH": "Number of cluster",
     "DESIGNATION": "Designation",
-    "NOTE_THIS_WILL_BE_CENTER_NAME": "Note : This Will Be Center Name"
+    "NOTE_THIS_WILL_BE_CENTER_NAME": "Note : This Will Be Center Name",
+    "STATE":"State",
+    "DISTRICT":"District",
+    "BLOCK":"Block",
+    "ACTION":"Actions",
+    "STATUS":"Status",
+    "NAME":"Name",
+    "MOBILE_NUMBER":"Mobile Number",
+    "CENTER":"Center"
+
+  
+  
+ 
   },
   "FORM_ERROR_MESSAGES": {
     "INVALID_INPUT": "Invalid Input.",
diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
index a411243d..966e899c 100644
--- a/src/components/KaTableComponent.tsx
+++ b/src/components/KaTableComponent.tsx
@@ -81,13 +81,13 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
       <div className="ka-table-wrapper">
         <Table
           {...tableProps}
-          paging={{
-            enabled: paginationEnable,
-            pageIndex: offset,
-            pageSize: limit,
-            pageSizes: pageSizes,
-            position: PagingPosition.Bottom,
-          }}
+          // paging={{
+          //   enabled: paginationEnable,
+          //   pageIndex: offset,
+          //   pageSize: limit,
+          //   pageSizes: pageSizes,
+          //   position: PagingPosition.Bottom,
+          // }}
           childComponents={{
             pagingSizes: {
               content: (props) => <PageSizeSelector {...props} />,
diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
index a7846a69..1856edeb 100644
--- a/src/components/UserTable.tsx
+++ b/src/components/UserTable.tsx
@@ -26,6 +26,9 @@ import { Role } from "@/utils/app.constant";
 import { getFormRead } from "@/services/CreateUserService";
 import { showToastMessage } from "./Toastify";
 import { capitalizeFirstLetterOfEachWordInArray } from "../utils/Helper";
+import { getUserTableColumns,getTLTableColumns } from "@/data/tableColumns";
+import { useMediaQuery } from '@mui/material';
+import { Theme } from '@mui/system';
 
 type UserDetails = {
   userId: any;
@@ -60,98 +63,17 @@ interface UserTableProps {
   userType: string;
   searchPlaceholder: string;
   handleAddUserClick: any;
+  parentState?:boolean
 }
 
-const columns = [
-  // {
-  //   key: "userId",
-  //   title: "ID",
-  //   dataType: DataType.String,
-  // },
-  // {
-  //   key: "selection-cell",
-  //   width: 50,
-  // },
-  {
-    key: "name",
-    title: "Name",
-    dataType: DataType.String,
-    sortDirection: SortDirection.Ascend,
- //  width: isMobile?160:10
-  },
-  {
-    key: "status",
-    title: "Status",
-    dataType: DataType.String,
-    sortDirection: SortDirection.Ascend,
-   //width: isMobile?160:null,
-  },
- 
-  // {
-  //   key: "programs",
-  //   title: "Programs",
-  //   dataType: DataType.String,
-  // },
-  {
-    key: "age",
-    title: "Age",
-    dataType: DataType.String,
-  //  width: 160,
-  },
-  {
-    key: "gender",
-    title: "Gender",
-    dataType: DataType.String,
-  //  width: 160,
-  },
-  {
-    key: "mobile",
-    title: "Mobile Number",
-    dataType: DataType.String,
-   // width: 160,
-  },
-  {
-    key: "state",
-    title: "State",
-    dataType: DataType.String,
-    sortDirection: SortDirection.Ascend,
-   // width: 160,
-  },
-  {
-    key: "district",
-    title: "District",
-    dataType: DataType.String,
-    sortDirection: SortDirection.Ascend,
-  //  width: 160,
-  },
-
-  {
-    key: "blocks",
-    title: "Blocks",
-    dataType: DataType.String,
-    sortDirection: SortDirection.Ascend,
-  //  width: 160,
-  },
-  {
-    key: "centers",
-    title: "Centers",
-    dataType: DataType.String,
-    sortDirection: SortDirection.Ascend,
-   // width: 160,
-  },
-  {
-    key: "actions",
-    title: "Actions",
-    dataType: DataType.String,
-   // width: 160,
-  },
-];
+
 
 const UserTable: React.FC<UserTableProps> = ({
   role,
   userType,
   searchPlaceholder,
   handleAddUserClick,
+  parentState
 }) => {
   const [selectedState, setSelectedState] = React.useState<string[]>([]);
   const [selectedStateCode, setSelectedStateCode] = useState("");
@@ -173,6 +95,10 @@ const UserTable: React.FC<UserTableProps> = ({
   const [selectedUserId, setSelectedUserId] = useState("");
   const [selectedReason, setSelectedReason] = useState("");
   const [otherReason, setOtherReason] = useState("");
+  // const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+
+
   const [confirmButtonDisable, setConfirmButtonDisable] = useState(false);
   const [pagination, setPagination] = useState(true);
   const [selectedFilter, setSelectedFilter] = useState("All");
@@ -578,7 +504,7 @@ const handleCloseAddTeamLeaderModal = () => {
       }
     };
     fetchUserList();
-  }, [pageOffset, pageLimit, sortBy, filters, openAddFacilitatorModal, openAddLearnerModal, openAddTeamLeaderModal]);
+  }, [pageOffset, pageLimit, sortBy, filters, openAddFacilitatorModal, openAddLearnerModal, openAddTeamLeaderModal, parentState]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -669,7 +595,7 @@ const handleCloseAddTeamLeaderModal = () => {
         <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
       ) : data.length !== 0 && loading === false ? (
         <KaTableComponent
-          columns={columns}
+          columns= {role==="Team Leader" ? getTLTableColumns(t): getUserTableColumns(t, isMobile)}
           data={data}
           limit={pageLimit}
           offset={pageOffset}
diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts
new file mode 100644
index 00000000..6f71f0e4
--- /dev/null
+++ b/src/data/tableColumns.ts
@@ -0,0 +1,142 @@
+import { DataType, SortDirection } from "ka-table";
+
+export const getUserTableColumns = (t: any, isMobile: any) => {
+
+    return [
+        {
+          key: "name",
+          title: t("FORM.NAME"),
+          dataType: DataType.String,
+          sortDirection: SortDirection.Ascend,
+          width: isMobile?160:null,
+
+        },
+        {
+          key: "status",
+          title: t("FORM.STATUS"),
+          dataType: DataType.String,
+          sortDirection: SortDirection.Ascend,
+        width: isMobile?160:null,
+        },
+       
+      
+        {
+          key: "age",
+          title: t("FORM.AGE"),
+          dataType: DataType.String,
+          width: isMobile?160:null,
+        },
+        {
+          key: "gender",
+          title: t("FORM.GENDER"),
+          dataType: DataType.String,
+          width: isMobile?160:null,
+        },
+        {
+          key: "mobile",
+          title: t("FORM.MOBILE_NUMBER"),
+          dataType: DataType.String,
+          width: isMobile?160:null,
+        },
+        {
+          key: "state",
+          title: t("FORM.STATE"),
+          dataType: DataType.String,
+          sortDirection: SortDirection.Ascend,
+          width: isMobile?160:null,
+        },
+        {
+          key: "district",
+          title:t("FORM.DISTRICT"),
+          dataType: DataType.String,
+          sortDirection: SortDirection.Ascend,
+          width: isMobile?160:null,
+        },
+      
+        {
+          key: "blocks",
+          title: t("FORM.BLOCK"),
+          dataType: DataType.String,
+          sortDirection: SortDirection.Ascend,
+          width: isMobile?160:null,
+        },
+        {
+          key: "centers",
+          title:  t("FORM.CENTER"),
+          dataType: DataType.String,
+          sortDirection: SortDirection.Ascend,
+          width: isMobile?160:null,
+        },
+        {
+          key: "actions",
+          title: t("FORM.ACTION"),
+          dataType: DataType.String,
+          width: isMobile?160:null,
+        },
+      ];
+}
+
+
+export const getTLTableColumns = (t: any) => {
+    return[
+       
+        {
+            key: "name",
+            title: t("FORM.NAME"),
+            dataType: DataType.String,
+            sortDirection: SortDirection.Ascend,
+          },
+          {
+            key: "status",
+            title: t("FORM.STATUS"),
+            dataType: DataType.String,
+            sortDirection: SortDirection.Ascend,
+           //width: isMobile?160:null,
+          },
+         
+        
+          {
+            key: "age",
+            title: t("FORM.AGE"),
+            dataType: DataType.String,
+          //  width: 160,
+          },
+          {
+            key: "gender",
+            title: t("FORM.GENDER"),
+            dataType: DataType.String,
+          //  width: 160,
+          },
+        
+          {
+            key: "state",
+            title: t("FORM.STATE"),
+            dataType: DataType.String,
+            sortDirection: SortDirection.Ascend,
+           // width: 160,
+          },
+          {
+            key: "district",
+            title:t("FORM.DISTRICT"),
+            dataType: DataType.String,
+            sortDirection: SortDirection.Ascend,
+          //  width: 160,
+          },
+        
+          {
+            key: "blocks",
+            title: t("FORM.BLOCK"),
+            dataType: DataType.String,
+            sortDirection: SortDirection.Ascend,
+          //  width: 160,
+          },
+       
+          {
+            key: "actions",
+            title: t("FORM.ACTION"),
+            dataType: DataType.String,
+           // width: 160,
+          },
+      ];
+}
+
diff --git a/src/pages/faciliator.tsx b/src/pages/faciliator.tsx
index 234e87c9..c0f59656 100644
--- a/src/pages/faciliator.tsx
+++ b/src/pages/faciliator.tsx
@@ -20,7 +20,7 @@ const handleCloseAddFacilitatorModal = () => {
   };
   return (
     <>
-      <UserTable role={Role.TEACHER} userType= {t("SIDEBAR.FACILITATORS")} searchPlaceholder={ t("FACILITATORS.SEARCHBAR_PLACEHOLDER")}handleAddUserClick={handleAddFaciliatorClick}/>
+      <UserTable role={Role.TEACHER} userType= {t("SIDEBAR.FACILITATORS")} searchPlaceholder={ t("FACILITATORS.SEARCHBAR_PLACEHOLDER")}handleAddUserClick={handleAddFaciliatorClick} parentState={openAddFacilitatorModal}/>
       <AddFacilitatorModal
               open={openAddFacilitatorModal}
               onClose={handleCloseAddFacilitatorModal}
diff --git a/src/pages/learners.tsx b/src/pages/learners.tsx
index 99f40a16..c2d210b6 100644
--- a/src/pages/learners.tsx
+++ b/src/pages/learners.tsx
@@ -20,7 +20,7 @@ const handleCloseAddLearnerModal = () => {
   };
   return (
     <>
-      <UserTable role={Role.STUDENT} userType={t("SIDEBAR.LEARNERS")} searchPlaceholder={t("LEARNERS.SEARCHBAR_PLACEHOLDER")} handleAddUserClick={handleAddLearnerClick}/>
+      <UserTable role={Role.STUDENT} userType={t("SIDEBAR.LEARNERS")} searchPlaceholder={t("LEARNERS.SEARCHBAR_PLACEHOLDER")} handleAddUserClick={handleAddLearnerClick} parentState={openAddLearnerModal}/>
       <AddLearnerModal
               open={openAddLearnerModal}
               onClose={handleCloseAddLearnerModal}
diff --git a/src/pages/teamLeader.tsx b/src/pages/teamLeader.tsx
index d37bd4b8..954e494c 100644
--- a/src/pages/teamLeader.tsx
+++ b/src/pages/teamLeader.tsx
@@ -21,7 +21,7 @@ const handleCloseAddLearnerModal = () => {
  
   return (
     <>
-      <UserTable role={Role.TEAM_LEADER} searchPlaceholder={ t("TEAM_LEADERS.SEARCHBAR_PLACEHOLDER")} userType={t("SIDEBAR.TEAM_LEADERS")} handleAddUserClick={handleAddTeamLeaderClick}/>
+      <UserTable role={Role.TEAM_LEADER} searchPlaceholder={ t("TEAM_LEADERS.SEARCHBAR_PLACEHOLDER")} userType={t("SIDEBAR.TEAM_LEADERS")} handleAddUserClick={handleAddTeamLeaderClick} parentState={openAddLearnerModal}/>
       <AddTeamLeaderModal
               open={openAddLearnerModal}
               onClose={handleCloseAddLearnerModal}