diff --git a/src/components/CohortLearnerList.tsx b/src/components/CohortLearnerList.tsx
new file mode 100644
index 00000000..42111ec1
--- /dev/null
+++ b/src/components/CohortLearnerList.tsx
@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react';
+import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
+import {
+  capitalizeEachWord,
+  getFieldValue,
+  toPascalCase,
+} from '@/utils/Helper';
+import LearnersList from '@/components/LearnersList';
+import { limit } from '@/utils/app.constant';
+import { showToastMessage } from './Toastify';
+import { useTranslation } from 'next-i18next';
+
+const CohortLearnerList = () => {
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [userData, setUserData] = React.useState<{}[]>();
+  const { t } = useTranslation();
+  // const classId = localStorage.getItem('classId');
+  const classId = '18e800d0-11c4-4a8c-af97-8f9811976ed6'; // TODO: get userId as a prop or from localStorage dynamically
+
+  useEffect(() => {
+    const getCohortMemberList = async () => {
+      setLoading(true);
+      try {
+        if (classId) {
+          const page = 0;
+          const filters = { cohortId: classId };
+          const response = await getMyCohortMemberList({
+            limit,
+            page,
+            filters,
+          });
+          const resp = response?.result?.results?.userDetails;
+
+          if (resp) {
+            const userDetails = resp.map((user: any) => ({
+              name: toPascalCase(user.name),
+              userId: user.userId,
+              memberStatus: user.memberStatus,
+              cohortMembershipId: user.cohortMembershipId,
+              enrollmentNumber: capitalizeEachWord(
+                getFieldValue(user.customField, 'Enrollment Number')
+              ),
+            }));
+            console.log(`userDetails`, userDetails);
+            setUserData(userDetails);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching cohort list:', error);
+        showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
+        setLoading(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+    getCohortMemberList();
+  }, [classId]);
+
+  return (
+    <div>
+        {
+          userData?.map((userData: any) => {
+            return (
+              <LearnersList
+                key={userData.userId}
+                learnerName={userData.name}
+                enrollmentId={userData.enrollmentNumber}
+                isDropout={userData.memberStatus === 'dropout'}
+              />
+            );
+          })}
+    </div>
+  );
+};
+
+export default CohortLearnerList;
diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx
index 5b065a55..6af7f764 100644
--- a/src/components/LearnersList.tsx
+++ b/src/components/LearnersList.tsx
@@ -3,17 +3,18 @@ import { Box } from '@mui/material';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import DropOutModal from './DropOutModal';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+// import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import NoAccountsIcon from '@mui/icons-material/NoAccounts';
 import React from 'react';
-import Woman2Icon from '@mui/icons-material/Woman2';
+// import Woman2Icon from '@mui/icons-material/Woman2';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
+import { LearnerListProps } from '@/utils/Interfaces';
 
 type Anchor = 'bottom';
 
-const LearnersList = () => {
+const LearnersList: React.FC<LearnerListProps> = ({learnerName, isDropout, enrollmentId}) => {
   const [state, setState] = React.useState({
     bottom: false,
   });
@@ -43,7 +44,11 @@ const LearnersList = () => {
 
   return (
     <>
-      <Box px={'18px'} mt={2} sx={{ borderBottom: '1px solid #D0C5B4' }}>
+      <Box
+        px={'18px'}
+        mt={2}
+        sx={{ borderBottom: `1px solid ${theme.palette.warning['A100']}` }}
+      >
         <Box
           sx={{
             display: 'flex',
@@ -54,92 +59,31 @@ const LearnersList = () => {
           }}
         >
           <Box sx={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
-            <Box className="box_shadow_center">
+            {/* <Box className="box_shadow_center">
               <Woman2Icon
                 sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
               />
-            </Box>
+            </Box> */}
             <Box>
               <Box
-                sx={{ fontSize: '16px', color: theme.palette.warning['300'] }}
+                sx={{ fontSize: '16px', color: theme.palette.warning['300'], fontWeight: '600' }}
               >
-                Aanya Gupta
+                {learnerName}
               </Box>
               <Box
                 sx={{
                   display: 'flex',
                   gap: '10px',
                   alignItems: 'center',
-                  justifyContent: 'center',
+                  justifyContent: 'left',
                 }}
               >
-                <Box
-                  sx={{ fontSize: '12px', color: theme.palette.warning['400'] }}
-                >
-                  19 y/o
-                </Box>
-                <FiberManualRecordIcon
-                  sx={{
-                    fontSize: '9px',
-                    color: theme.palette.secondary.contrastText,
-                  }}
-                />
-                <Box
+                {/* <Box
                   sx={{ fontSize: '12px', color: theme.palette.warning['400'] }}
-                >
-                  1102929282
-                </Box>
-              </Box>
-            </Box>
-          </Box>
-          <MoreVertIcon
-            onClick={toggleDrawer('bottom', true)}
-            sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
-          />
-        </Box>
-      </Box>
-
-      <Box px={'18px'} mt={2} sx={{ borderBottom: '1px solid #D0C5B4' }}>
-        <Box
-          sx={{
-            display: 'flex',
-            gap: '20px',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            paddingBottom: '15px',
-          }}
-        >
-          <Box sx={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
-            <Box className="box_shadow_center">
-              <Woman2Icon
-                sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
-              />
-            </Box>
-            <Box>
-              <Box
-                sx={{ fontSize: '16px', color: theme.palette.warning['300'] }}
-              >
-                Aanya Gupta
-              </Box>
-              <Box
-                sx={{
-                  display: 'flex',
-                  gap: '10px',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <Box
-                  sx={{ fontSize: '12px', color: theme.palette.warning['300'] }}
                 >
                   19 y/o
-                </Box>
-                <FiberManualRecordIcon
-                  sx={{
-                    fontSize: '9px',
-                    color: theme.palette.secondary.contrastText,
-                  }}
-                />
+                </Box> */}
+                {isDropout ? (
                 <Box
                   sx={{
                     fontSize: '12px',
@@ -157,6 +101,22 @@ const LearnersList = () => {
                   <Box sx={{ marginTop: '1px' }}>Dropped Out</Box>
                   <ErrorOutlineIcon style={{ fontSize: '13px' }} />
                 </Box>
+                 ) : ( 
+                  <>
+                  
+                {/* <FiberManualRecordIcon
+                   sx={{
+                    fontSize: '9px',
+                    color: theme.palette.secondary.contrastText,
+                  }}
+                /> */}
+                <Box
+                  sx={{ fontSize: '14px', color: theme.palette.warning['400']}}
+                >
+                  {enrollmentId}
+                </Box>
+                </>
+                )} 
               </Box>
             </Box>
           </Box>
@@ -165,30 +125,30 @@ const LearnersList = () => {
             sx={{ fontSize: '24px', color: theme.palette.warning['300'] }}
           />
         </Box>
-        <BottomDrawer
-          toggleDrawer={toggleDrawer}
-          state={state}
-          listItemClick={listItemClick}
-          optionList={[
-            {
-              label: t('COMMON.MARK_DROP_OUT'),
-              icon: (
-                <NoAccountsIcon sx={{ color: theme.palette.warning['300'] }} />
-              ),
-              name: 'mark-drop-out',
-            },
-            {
-              label: t('COMMON.REMOVE_FROM_CENTER'),
-              icon: (
-                <DeleteOutlineIcon
-                  sx={{ color: theme.palette.warning['300'] }}
-                />
-              ),
-              name: 'remove-from-center',
-            },
-          ]}
-        />
       </Box>
+
+      <BottomDrawer
+        toggleDrawer={toggleDrawer}
+        state={state}
+        listItemClick={listItemClick}
+        optionList={[
+          {
+            label: t('COMMON.MARK_DROP_OUT'),
+            icon: (
+              <NoAccountsIcon sx={{ color: theme.palette.warning['300'] }} />
+            ),
+            name: 'mark-drop-out',
+          },
+          {
+            label: t('COMMON.REMOVE_FROM_CENTER'),
+            icon: (
+              <DeleteOutlineIcon sx={{ color: theme.palette.warning['300'] }} />
+            ),
+            name: 'remove-from-center',
+          },
+        ]}
+      />
+
       <DropOutModal open={showModal} onClose={() => setShowModal(false)} />
     </>
   );
diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
index e3682fba..5c1dd9c5 100644
--- a/src/pages/centers/[cohortId].tsx
+++ b/src/pages/centers/[cohortId].tsx
@@ -5,7 +5,6 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
 import Header from '@/components/Header';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import LearnersList from '@/components/LearnersList';
 import React from 'react';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
@@ -14,6 +13,7 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { GetStaticPaths } from 'next';
+import CohortLearnerList from '@/components/CohortLearnerList';
 
 const TeachingCenterDetails = () => {
   const [value, setValue] = React.useState(1);
@@ -128,7 +128,7 @@ const TeachingCenterDetails = () => {
               />
             </Box>
             <Box>
-              <LearnersList />
+              <CohortLearnerList/>
             </Box>
           </>
         )}
diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
index dae94e3f..9c524d17 100644
--- a/src/utils/Interfaces.ts
+++ b/src/utils/Interfaces.ts
@@ -229,3 +229,9 @@ export interface updateCohortMemberStatusParams {
   memberStatus: string;
   statusReason?: string;
 }
+
+export interface LearnerListProps {
+  isDropout: boolean;
+  enrollmentId?: string | number;
+  learnerName: string;
+}
\ No newline at end of file