diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index a64818c9..1466edb0 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -76,7 +76,10 @@
     "CENTERS_ASSIGNED": "Centers Assigned",
     "MANAGE_CENTERS": "Manage Centers",
     "ASSIGN": "Assign",
-    "SEARCH_FACILITATORS": "Search Facilitators.."
+    "SEARCH_FACILITATORS": "Search Facilitators..",
+    "ADD_LEARNER":"Add Learners",
+    "DESELECT_ALL":"Deselect All",
+    "SELECT_ALL":"Select All"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
index 8a068060..a60104a9 100644
--- a/public/locales/hi/common.json
+++ b/public/locales/hi/common.json
@@ -76,7 +76,10 @@
     "CENTERS_ASSIGNED": "केंद्र निरुपित",
     "MANAGE_CENTERS": "केंद्र प्रबंधित करें",
     "ASSIGN": "निरुपण करें",
-    "SEARCH_FACILITATORS": "खोज सुविधा प्रदाता.."
+    "SEARCH_FACILITATORS": "खोज सुविधा प्रदाता..",
+    "ADD_LEARNER": "शिक्षार्थियों को जोड़ें",
+    "DESELECT_ALL": "सभी को अचयनित करें",
+    "SELECT_ALL": "सभी को चुनें"
   },
   "LOGIN_PAGE": {
     "USERNAME": "उपयोगकर्ता नाम",
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
index bb0cb4d7..0a6a1052 100644
--- a/public/locales/mr/common.json
+++ b/public/locales/mr/common.json
@@ -76,7 +76,10 @@
     "CENTERS_ASSIGNED": "केंद्र निरुपित",
     "MANAGE_CENTERS": "केंद्र प्रबंधित करा",
     "ASSIGN": "नियुक्त करा",
-    "SEARCH_FACILITATORS": "शोध सुविधा.."
+    "SEARCH_FACILITATORS": "शोध सुविधा..",
+    "ADD_LEARNER": "शिक्षार्थी जोडा",
+    "DESELECT_ALL": "सर्व निवड रद्द करा",
+    "SELECT_ALL": "सर्व निवडा"
   },
   "LOGIN_PAGE": {
     "USERNAME": "वापरकर्तानाव",
diff --git a/src/components/AddLeanerModal.tsx b/src/components/AddLeanerModal.tsx
new file mode 100644
index 00000000..dffb5999
--- /dev/null
+++ b/src/components/AddLeanerModal.tsx
@@ -0,0 +1,194 @@
+import * as React from 'react';
+
+import { Checkbox, Divider, InputAdornment, TextField } from '@mui/material';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import { Height } from '@mui/icons-material';
+import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
+import Modal from '@mui/material/Modal';
+import SearchIcon from '@mui/icons-material/Search';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+
+interface ManageUsersModalProps {
+  learnersName: string[];
+}
+
+const AddLeanerModal: React.FC<ManageUsersModalProps> = ({ learnersName }) => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '85%',
+    bgcolor: theme.palette.warning['A400'],
+    boxShadow: 24,
+    borderRadius: '16px',
+    height: '526px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+
+  return (
+    <div>
+      {/* <Button onClick={handleOpen}>Open modal</Button> */}
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Box
+            display={'flex'}
+            justifyContent={'space-between'}
+            sx={{ padding: '20px' }}
+          >
+            <Box marginBottom={'0px'}>
+              <Typography
+                variant="h2"
+                sx={{
+                  color: theme.palette.warning['A200'],
+                  fontSize: '16px',
+                }}
+                component="h2"
+              >
+                {t('COMMON.ADD_LEARNER')}
+              </Typography>
+            </Box>
+            <CloseIcon
+              sx={{
+                cursor: 'pointer',
+                color: theme.palette.warning['A200'],
+              }}
+              onClick={() => handleClose()}
+            />
+          </Box>
+          <Divider />
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: '20px' }}>
+            <TextField
+              className="input_search"
+              placeholder="Search Facilitators.."
+              color="secondary"
+              focused
+              sx={{
+                borderRadius: '100px',
+                height: '40px',
+              }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Box>
+          <Box mx={'20px'}>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                <Box
+                  sx={{
+                    fontSize: '14px',
+                    color: theme.palette.warning['A200'],
+                    fontWeight: '500',
+                  }}
+                >
+                  {t('COMMON.DESELECT_ALL')}
+                </Box>
+
+                <IndeterminateCheckBoxOutlinedIcon
+                  sx={{
+                    fontSize: '18px',
+                    color: theme.palette.warning['A200'],
+                    marginBottom: '2px',
+                  }}
+                />
+              </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  marginRight: '10px',
+                }}
+              >
+                <Box
+                  sx={{
+                    fontSize: '14px',
+                    color: theme.palette.warning['A200'],
+                    fontWeight: '500',
+                  }}
+                >
+                  {t('COMMON.SELECT_ALL')}
+                </Box>
+                <CheckBoxOutlinedIcon
+                  sx={{
+                    fontSize: '18px',
+                    color: theme.palette.warning['A200'],
+                    marginBottom: '2px',
+                  }}
+                />
+              </Box>
+            </Box>
+            <Box sx={{ height: '35vh', mt: '10px', overflowY: 'auto' }}>
+              {learnersName?.map((name, index) => {
+                return (
+                  <React.Fragment key={index}>
+                    <Box
+                      borderBottom={theme.palette.warning['A100']}
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          fontSize: '16px',
+                          color: theme.palette.warning['300'],
+                          pb: '20px',
+                        }}
+                      >
+                        {name}
+                      </Box>
+                      <Box>
+                        <Checkbox
+                          sx={{ pb: '20px' }}
+                          className="checkBox_svg"
+                        />
+                      </Box>
+                    </Box>
+                  </React.Fragment>
+                );
+              })}
+            </Box>
+          </Box>
+          <Divider />
+          <Box p={'20px'}>
+            <Button
+              className="w-100"
+              sx={{ boxShadow: 'none' }}
+              variant="contained"
+            >
+              {t('COMMON.ADD')}
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
+    </div>
+  );
+};
+
+export default AddLeanerModal;
diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
index e8918cb6..fe26ed37 100644
--- a/src/pages/centers/[cohortId].tsx
+++ b/src/pages/centers/[cohortId].tsx
@@ -1,21 +1,22 @@
 import { Button, Typography } from '@mui/material';
+import React, { useEffect } from 'react';
 
 import AddIcon from '@mui/icons-material/Add';
+import AddLeanerModal from '@/components/AddLeanerModal';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
+import CohortLearnerList from '@/components/CohortLearnerList';
+import { CustomField } from '@/utils/Interfaces';
+import { GetStaticPaths } from 'next';
 import Header from '@/components/Header';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import React, { useEffect } from 'react';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
+import { getCohortDetails } from '@/services/CohortServices';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useRouter } from 'next/router';
 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';
-import { getCohortDetails } from '@/services/CohortServices';
-import { CustomField } from '@/utils/Interfaces';
 
 const TeachingCenterDetails = () => {
   const [value, setValue] = React.useState(1);
@@ -152,6 +153,15 @@ const TeachingCenterDetails = () => {
             </Box>
           </>
         )}
+        <AddLeanerModal
+          learnersName={[
+            'Aanya Gupta',
+            'Aakash Sen',
+            'Aisha Bhatt',
+            'Ananya Umesh',
+            'Bhavana Gill',
+          ]}
+        />
       </Box>
     </>
   );