diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5293f591..f4c083b9 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -289,10 +289,33 @@
     "REQUEST_TO_DELETE": "Request to Delete",
     "RENAME": "Rename",
     "CENTER_RENAMED": "Center Renamed Successfully!",
-    "SEND_REQUEST":"Send Request",
+    "SEND_REQUEST": "Send Request",
     "REQUEST_TO_DELETE_HAS_BEEN_SENT": "Request to Delete has been sent",
     "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "You are sending a request to the State Admin to delete this Center"
   },
+  "CENTER_SESSION": {
+    "THIS_SESSION": "This session",
+    "FOLLOWING_SESSIONS": "This and following sessions",
+    "MODE_OF_SESSION": "Mode of Session",
+    "OFFLINE": "Offline",
+    "ONLINE": "Online",
+    "SUBJECT": "Subject",
+    "MEETING_LINK": "Meeting Link",
+    "MEETING_PASSCODE": "Meeting Passcode (if applicable)",
+    "START_TIME": "Start Time",
+    "END_TIME": "End Time",
+    "START_DATE": "Start Date",
+    "END_DATE": "End Date",
+    "REMOVE_THIS_SESSION": "Remove this session",
+    "PLANNED_SESSION": "Planned Session",
+    "FIXES_SUBJECTS": "For fixed subjects in the timetable",
+    "EXTRA_SESSION": "Extra Session",
+    "DOUBT_CLEARING": "For doubt clearing, webinars, etc",
+    "TOPIC": "Topic",
+    "SUBTOPIC": "Sub Topic",
+    "FACILITATORS": " Facilitators Pre-requisites",
+    "TITLE": "Title"
+  },
   "MANAGE_USERS": {
     "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully"
   }
diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
index 11216f45..865862cf 100644
--- a/public/locales/hi/common.json
+++ b/public/locales/hi/common.json
@@ -268,8 +268,31 @@
     "REQUEST_TO_DELETE": "हटाने का अनुरोध",
     "RENAME": "नाम बदलें",
     "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!",
-    "SEND_REQUEST":"अनुरोध भेजें",
+    "SEND_REQUEST": "अनुरोध भेजें",
     "REQUEST_TO_DELETE_HAS_BEEN_SENT": " हटाने का अनुरोध भेजा गया है",
     "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आप राज्य प्रशासन को इस केंद्र को हटाने का अनुरोध भेज रहे हैं"
+  },
+  "CENTER_SESSION": {
+    "THIS_SESSION": "यह सत्र",
+    "FOLLOWING_SESSIONS": "यह और आने वाले सत्र",
+    "MODE_OF_SESSION": "सत्र का मोड",
+    "OFFLINE": "ऑफलाइन",
+    "ONLINE": "ऑनलाइन",
+    "SUBJECT": "विषय",
+    "MEETING_LINK": "बैठक लिंक",
+    "MEETING_PASSCODE": "बैठक पासकोड (यदि लागू हो)",
+    "START_TIME": "प्रारंभ समय",
+    "END_TIME": "समाप्ति समय",
+    "START_DATE": "प्रारंभ तिथि",
+    "END_DATE": "समाप्ति तिथि",
+    "REMOVE_THIS_SESSION": "इस सत्र को हटाएं",
+    "PLANNED_SESSION": "नियोजित सत्र",
+    "FIXES_SUBJECTS": "समय सारिणी में निश्चित विषयों के लिए",
+    "EXTRA_SESSION": "अतिरिक्त सत्र",
+    "DOUBT_CLEARING": "शंका समाधान, वेबिनार आदि के लिए",
+    "TOPIC": "विषय",
+    "SUBTOPIC": "उप विषय",
+    "FACILITATORS": "सुविधादाताओं की पूर्व आवश्यकताएँ",
+    "TITLE": "शीर्षक"
   }
 }
diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
index 176870db..908dbf09 100644
--- a/public/locales/mr/common.json
+++ b/public/locales/mr/common.json
@@ -269,8 +269,31 @@
     "REQUEST_TO_DELETE": "हटवण्याची विनंती",
     "RENAME": "नाव बदला",
     "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!",
-    "SEND_REQUEST":"विनंती पाठवा",
+    "SEND_REQUEST": "विनंती पाठवा",
     "REQUEST_TO_DELETE_HAS_BEEN_SENT": "हटवण्याची विनंती पाठवली आहे",
     "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आपण या केंद्राला हटविण्याचे विनंती राज्य प्रशासनाला पाठवत आहात"
+  },
+  "CENTER_SESSION": {
+    "THIS_SESSION": "हे सत्र",
+    "FOLLOWING_SESSIONS": "हे आणि पुढील सत्र",
+    "MODE_OF_SESSION": "सत्राचा प्रकार",
+    "OFFLINE": "ऑफलाइन",
+    "ONLINE": "ऑनलाइन",
+    "SUBJECT": "विषय",
+    "MEETING_LINK": "बैठक लिंक",
+    "MEETING_PASSCODE": "बैठक पासकोड (जर लागू असेल तर)",
+    "START_TIME": "सुरवातीचा वेळ",
+    "END_TIME": "समाप्तीचा वेळ",
+    "START_DATE": "सुरवात तारीख",
+    "END_DATE": "समाप्ती तारीख",
+    "REMOVE_THIS_SESSION": "हे सत्र काढून टाका",
+    "PLANNED_SESSION": "नियोजित सत्र",
+    "FIXES_SUBJECTS": "वेळापत्रकात निश्चित विषयांसाठी",
+    "EXTRA_SESSION": "अतिरिक्त सत्र",
+    "DOUBT_CLEARING": "शंका निरसन, वेबिनार इत्यादीसाठी",
+    "TOPIC": "विषय",
+    "SUBTOPIC": "उपविषय",
+    "FACILITATORS": "सुविधादात्यांची पूर्व आवश्यकताएं",
+    "TITLE": "शीर्षक"
   }
 }
diff --git a/sample.txt b/sample.txt
new file mode 100644
index 00000000..d64a3d96
--- /dev/null
+++ b/sample.txt
@@ -0,0 +1 @@
+sample
diff --git a/src/assets/images/decorationBg.png b/src/assets/images/decorationBg.png
new file mode 100644
index 00000000..4a12fdd8
Binary files /dev/null and b/src/assets/images/decorationBg.png differ
diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
new file mode 100644
index 00000000..185da134
--- /dev/null
+++ b/src/components/CenterSessionModal.tsx
@@ -0,0 +1,97 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CloseIcon from '@mui/icons-material/Close';
+import { Divider } from '@mui/material';
+import Modal from '@mui/material/Modal';
+import React from 'react';
+import { SessionsModalProps } from '@/utils/Interfaces';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const CenterSessionModal: React.FC<SessionsModalProps> = ({
+  children,
+  open,
+  handleClose,
+  title,
+  primary,
+}) => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '75%',
+    bgcolor: theme?.palette?.warning['A400'],
+    boxShadow: 24,
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+  return (
+    <>
+      <div>
+        <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: '18px 16px' }}
+            >
+              <Box marginBottom={0}>
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color: theme?.palette?.warning['A200'],
+                    fontSize: '14px',
+                  }}
+                  component="h2"
+                >
+                  {title}
+                </Typography>
+              </Box>
+              <CloseIcon
+                onClick={handleClose}
+                sx={{
+                  cursor: 'pointer',
+                  color: theme?.palette?.warning['A200'],
+                }}
+              />
+            </Box>
+            <Divider />
+            {children}
+            <Divider />
+            <Box sx={{ padding: '20px 16px' }}>
+              <Button
+                variant="contained"
+                color="primary"
+                sx={{
+                  '&.Mui-disabled': {
+                    backgroundColor: theme?.palette?.primary?.main,
+                  },
+                  minWidth: '84px',
+                  height: '2.5rem',
+                  padding: theme.spacing(1),
+                  fontWeight: '500',
+                  width: '100%',
+                }}
+              >
+                {primary}
+              </Button>
+            </Box>
+          </Box>
+        </Modal>
+      </div>
+    </>
+  );
+};
+
+export default CenterSessionModal;
diff --git a/src/components/DeleteSession.tsx b/src/components/DeleteSession.tsx
new file mode 100644
index 00000000..8d3973c7
--- /dev/null
+++ b/src/components/DeleteSession.tsx
@@ -0,0 +1,47 @@
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
+
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const DeleteSession = () => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  return (
+    <>
+      <Box sx={{ padding: '8px 16px' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mt: 2,
+          }}
+        >
+          <Box>{t('CENTER_SESSION.THIS_SESSION')}</Box>
+          <Radio style={{ color: theme?.palette?.warning['300'] }} />
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            my: 2,
+          }}
+        >
+          <Box>{t('CENTER_SESSION.FOLLOWING_SESSIONS')}</Box>
+          <Radio style={{ color: theme?.palette?.warning['300'] }} />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default DeleteSession;
diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx
new file mode 100644
index 00000000..d58fd42d
--- /dev/null
+++ b/src/components/PlannedSession.tsx
@@ -0,0 +1,252 @@
+import {
+  Box,
+  Button,
+  Divider,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Radio,
+  RadioGroup,
+  Select,
+} from '@mui/material';
+import { ChangeEvent, useState } from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { sessionModeConstant } from '@/utils/app.constant';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+
+type SessionMode =
+  (typeof sessionModeConstant)[keyof typeof sessionModeConstant];
+
+const PlannedSession = () => {
+  const [sessionMode, setSessionMode] = useState<SessionMode>(
+    sessionModeConstant.OFFLINE
+  );
+
+  const handleSessionModeChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSessionMode(event.target.value as SessionMode);
+  };
+
+  const { t } = useTranslation();
+  const theme = useTheme<any>();
+
+  return (
+    <>
+      <Box sx={{ padding: '10px 16px' }}>
+        <Box>
+          <FormControl>
+            <FormLabel
+              id="demo-row-radio-buttons-group-label"
+              style={{ color: theme?.palette?.warning['300'] }}
+            >
+              {t('CENTER_SESSION.MODE_OF_SESSION')}
+            </FormLabel>
+            <RadioGroup
+              row
+              aria-labelledby="demo-row-radio-buttons-group-label"
+              name="row-radio-buttons-group"
+              value={sessionMode}
+              onChange={handleSessionModeChange}
+            >
+              <FormControlLabel
+                value={sessionModeConstant.OFFLINE}
+                control={
+                  <Radio style={{ color: theme?.palette?.warning['300'] }} />
+                }
+                label={
+                  <span style={{ color: theme?.palette?.warning['300'] }}>
+                    {t('CENTER_SESSION.OFFLINE')}
+                  </span>
+                }
+              />
+              <FormControlLabel
+                value={sessionModeConstant.ONLINE}
+                control={
+                  <Radio style={{ color: theme?.palette?.warning['300'] }} />
+                }
+                label={
+                  <span style={{ color: theme?.palette?.warning['300'] }}>
+                    {t('CENTER_SESSION.ONLINE')}
+                  </span>
+                }
+              />
+            </RadioGroup>
+          </FormControl>
+        </Box>
+
+        <Box sx={{ mt: 2 }}>
+          <FormControl fullWidth>
+            <InputLabel id="demo-simple-select-label">
+              {t('CENTER_SESSION.SUBJECT')}
+            </InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              label="Subject"
+            >
+              {/* <MenuItem value={'Mathematics'}>Mathematics</MenuItem> */}
+            </Select>
+          </FormControl>
+        </Box>
+
+        {sessionMode === sessionModeConstant.ONLINE && (
+          <>
+            <Box sx={{ mt: 2 }}>
+              <FormControl fullWidth>
+                <InputLabel id="demo-simple-select-label">
+                  {t('CENTER_SESSION.MEETING_LINK')}
+                </InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  label="Meeting Link"
+                >
+                  {/* <MenuItem value={'Link1'}>Link 1</MenuItem> */}
+                </Select>
+              </FormControl>
+            </Box>
+            <Box sx={{ mt: 2 }}>
+              <FormControl fullWidth>
+                <InputLabel id="demo-simple-select-label">
+                  {t('CENTER_SESSION.MEETING_PASSCODE')}
+                </InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  label="Meeting Passcode"
+                >
+                  {/* <MenuItem value={'Passcode1'}>Passcode 1</MenuItem> */}
+                </Select>
+              </FormControl>
+            </Box>
+          </>
+        )}
+
+        <Box sx={{ mt: 2 }}>
+          <Grid container spacing={2}>
+            <Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
+              <Box sx={{ mt: 2 }}>
+                <FormControl fullWidth>
+                  <InputLabel id="demo-simple-select-label">
+                    {t('CENTER_SESSION.START_TIME')}
+                  </InputLabel>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    label="Start Time"
+                  >
+                    {/* <MenuItem value={'Time1'}>Time 1</MenuItem> */}
+                  </Select>
+                </FormControl>
+              </Box>
+            </Grid>
+            <Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
+              <Box sx={{ my: 2 }}>
+                <FormControl fullWidth>
+                  <InputLabel id="demo-simple-select-label">
+                    {t('CENTER_SESSION.END_TIME')}
+                  </InputLabel>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    label="End Time"
+                  >
+                    {/* <MenuItem value={'Time2'}>Time 2</MenuItem> */}
+                  </Select>
+                </FormControl>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box sx={{ mt: 2 }}>
+          <Grid container spacing={2}>
+            <Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
+              <Box>
+                <FormControl fullWidth>
+                  <InputLabel id="demo-simple-select-label">
+                    {t('CENTER_SESSION.START_DATE')}
+                  </InputLabel>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    label="Start Date"
+                  >
+                    {/* <MenuItem value={'Date1'}>Date 1</MenuItem> */}
+                  </Select>
+                </FormControl>
+              </Box>
+            </Grid>
+            <Grid sx={{ paddingTop: '0px !important' }} item xs={6}>
+              <Box>
+                <FormControl fullWidth>
+                  <InputLabel id="demo-simple-select-label">
+                    {t('CENTER_SESSION.END_DATE')}
+                  </InputLabel>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    label="End Date"
+                  >
+                    {/* <MenuItem value={'Date2'}>Date 2</MenuItem> */}
+                  </Select>
+                </FormControl>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '5px',
+            mt: 2,
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            sx={{
+              fontSize: '14px',
+              color: theme?.palette?.secondary.main,
+              fontWeight: '500',
+            }}
+          >
+            {t('CENTER_SESSION.REMOVE_THIS_SESSION')}
+          </Box>
+          <DeleteOutlineIcon
+            sx={{ fontSize: '18px', color: theme?.palette?.error.main }}
+          />
+        </Box>
+
+        <Box sx={{ mt: 2 }}>
+          <Divider />
+        </Box>
+
+        <Divider />
+
+        <Box mt={2.5} mb={2}>
+          <Button
+            sx={{
+              border: `1px solid ${theme.palette.error.contrastText}`,
+              borderRadius: '100px',
+              height: '40px',
+              width: '163px',
+              color: theme.palette.error.contrastText,
+            }}
+            className="text-1E"
+            endIcon={<AddIcon />}
+          >
+            {t('COMMON.SCHEDULE_NEW')}
+          </Button>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default PlannedSession;
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
new file mode 100644
index 00000000..7a0f92bc
--- /dev/null
+++ b/src/components/Schedule.tsx
@@ -0,0 +1,55 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const Schedule = () => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  return (
+    <>
+      <Box sx={{ padding: '10px 16px' }}>
+        <Box
+          sx={{
+            border: `2px solid ${theme.palette.primary.main}`,
+            borderRadius: '8px',
+            padding: '15px',
+            mb: 2,
+          }}
+        >
+          <Box
+            sx={{
+              fontSize: '16px',
+              fontWeight: '400',
+              color: theme?.palette?.warning['300'],
+            }}
+          >
+            {t('CENTER_SESSION.PLANNED_SESSION')}
+          </Box>
+          <Box>{t('CENTER_SESSION.FIXES_SUBJECTS')}</Box>
+        </Box>
+        <Box
+          sx={{
+            border: `2px solid ${theme.palette.primary.main}`,
+            borderRadius: '8px',
+            padding: '15px',
+            mb: 2,
+          }}
+        >
+          <Box
+            sx={{
+              fontSize: '16px',
+              fontWeight: '400',
+              color: theme?.palette?.warning['300'],
+            }}
+          >
+            {t('CENTER_SESSION.EXTRA_SESSION')}
+          </Box>
+          <Box>{t('CENTER_SESSION.DOUBT_CLEARING')}</Box>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default Schedule;
diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
index 05cf3a54..53f3eeda 100644
--- a/src/components/SessionCardFooter.tsx
+++ b/src/components/SessionCardFooter.tsx
@@ -26,7 +26,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
       }}
     >
       <Accordion
-        defaultExpanded
+        //defaultExpanded
         sx={{
           boxShadow: 'none',
           border: 'none',
@@ -46,7 +46,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
         </AccordionSummary>
         <AccordionDetails sx={{ padding: '0px' }}>
           <Box sx={{ display: 'flex', gap: '10px' }}>
-            <MenuBookIcon />
+            <MenuBookIcon  sx={{ color: theme.palette.secondary.main }} />
             <Typography color={theme.palette.secondary.main} variant="h5">
               {item?.topic}
             </Typography>
@@ -88,7 +88,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
           {t('COMMON.SELECT_TOPIC')}
         </Box>
       </Box>
-      <ArrowForwardIcon />
+      <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
     </Box>
   );
 };
diff --git a/src/components/TopicDetails.tsx b/src/components/TopicDetails.tsx
new file mode 100644
index 00000000..a18ceb14
--- /dev/null
+++ b/src/components/TopicDetails.tsx
@@ -0,0 +1,114 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Grid,
+  Typography,
+} from '@mui/material';
+
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import EditIcon from '@mui/icons-material/Edit';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+
+const TopicDetails = () => {
+  const { t } = useTranslation();
+  const theme = useTheme<any>();
+  return (
+    <>
+      <Box sx={{ padding: '8px 16px' }}>
+        <Box
+          sx={{
+            background: theme?.palette?.action?.selected,
+            borderRadius: '16px',
+            padding: '16px',
+          }}
+        >
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Box>
+              <Box>{t('CENTER_SESSION.TOPIC')}</Box>
+              {/* <Box>Real Numbers</Box> */}
+            </Box>
+            <EditIcon />
+          </Box>
+
+          <Box>{t('CENTER_SESSION.SUBTOPIC')}</Box>
+          {/* <Box>Revisiting Irrational Numbers</Box> */}
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '5px',
+            mt: 2,
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            sx={{
+              fontSize: '14px',
+              color: theme?.palette?.secondary.main,
+              fontWeight: '500',
+            }}
+          >
+            {t('CENTER_SESSION.REMOVE_THIS_SESSION')}
+          </Box>
+          <DeleteOutlineIcon
+            sx={{ fontSize: '18px', color: theme?.palette?.error.main }}
+          />
+        </Box>
+      </Box>
+
+      <Accordion
+        // defaultExpanded
+        sx={{
+          boxShadow: 'none !important',
+          border: 'none !important',
+          mt: 1.5,
+        }}
+      >
+        <AccordionSummary
+          expandIcon={
+            <ArrowDropDownIcon sx={{ color: theme?.palette?.warning['300'] }} />
+          }
+          aria-controls="panel1-content"
+          id="panel1-header"
+          className="accordion-summary"
+          sx={{
+            m: 0,
+            background: theme?.palette?.background.paper,
+            px: '16px',
+          }}
+        >
+          <Typography
+            fontWeight="500"
+            fontSize="14px"
+            sx={{ color: theme?.palette?.warning['300'] }}
+          >
+            {t('CENTER_SESSION.FACILITATORS')}
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails
+          sx={{ padding: '0px', background: theme?.palette?.warning['A400'] }}
+        >
+          <Grid container spacing={2} sx={{ px: '16px !important' }}>
+            <Grid item xs={6} sx={{ mt: 2 }}>
+              <Box className="facilitator-bg">
+                <Box> {t('CENTER_SESSION.TITLE')}</Box>
+              </Box>
+            </Grid>
+            <Grid item xs={6} sx={{ mt: 2 }}>
+              <Box className="facilitator-bg">
+                <Box> {t('CENTER_SESSION.TITLE')}</Box>
+              </Box>
+            </Grid>
+          </Grid>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+};
+
+export default TopicDetails;
diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
index 7d68146c..df4785c6 100644
--- a/src/pages/centers/[cohortId].tsx
+++ b/src/pages/centers/[cohortId].tsx
@@ -9,25 +9,25 @@ import {
 import React, { useEffect, useState } from 'react';
 import { formatSelectedDate, getTodayDate, toPascalCase } from '@/utils/Helper';
 
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
 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 CenterSessionModal from '@/components/CenterSessionModal';
 import CohortLearnerList from '@/components/CohortLearnerList';
 import { CustomField } from '@/utils/Interfaces';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DeleteCenterModal from '@/components/center/DeleteCenterModal';
+import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import { GetStaticPaths } from 'next';
 import Header from '@/components/Header';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
-import MenuBookIcon from '@mui/icons-material/MenuBook';
-import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
+import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import RenameCenterModal from '@/components/center/RenameCenterModal';
+import Schedule from './../../components/Schedule';
 import { Session } from '../../utils/Interfaces';
 import SessionCard from '@/components/SessionCard';
 import SessionCardFooter from '@/components/SessionCardFooter';
-import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import WeekCalender from '@/components/WeekCalender';
@@ -37,11 +37,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import RenameCenterModal from '@/components/center/RenameCenterModal';
-import DeleteCenterModal from '@/components/center/DeleteCenterModal';
 
 const TeachingCenterDetails = () => {
   const [value, setValue] = React.useState(1);
@@ -50,6 +45,7 @@ const TeachingCenterDetails = () => {
   const router = useRouter();
   const { cohortId }: any = router.query;
   const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
   const theme = useTheme<any>();
   const [selectedDate, setSelectedDate] =
     React.useState<string>(getTodayDate());
@@ -61,9 +57,12 @@ const TeachingCenterDetails = () => {
     React.useState<any>(null);
   const [openRenameCenterModal, setOpenRenameCenterModal] =
     React.useState(false);
-    const [openDeleteCenterModal, setOpenDeleteCenterModal] =
+  const [openDeleteCenterModal, setOpenDeleteCenterModal] =
     React.useState(false);
 
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
   useEffect(() => {
     const getCohortData = async () => {
       const response = await getCohortDetails(cohortId);
@@ -193,13 +192,23 @@ const TeachingCenterDetails = () => {
             open={Boolean(anchorEl)}
             onClose={handleMenuClose}
           >
-            <MenuItem onClick={() => { setOpenRenameCenterModal(true); handleMenuClose(); }}>
-              <ListItemIcon  sx={{ color: theme.palette.warning['A200'] }}>
+            <MenuItem
+              onClick={() => {
+                setOpenRenameCenterModal(true);
+                handleMenuClose();
+              }}
+            >
+              <ListItemIcon sx={{ color: theme.palette.warning['A200'] }}>
                 <ModeEditOutlineOutlinedIcon fontSize="small" />
               </ListItemIcon>
               {t('CENTERS.RENAME_CENTER')}
             </MenuItem>
-            <MenuItem onClick={() => {setOpenDeleteCenterModal(true); handleMenuClose(); }}>
+            <MenuItem
+              onClick={() => {
+                setOpenDeleteCenterModal(true);
+                handleMenuClose();
+              }}
+            >
               <ListItemIcon sx={{ color: theme.palette.warning['A200'] }}>
                 <DeleteOutlineOutlinedIcon fontSize="small" />
               </ListItemIcon>
@@ -210,7 +219,7 @@ const TeachingCenterDetails = () => {
             open={openRenameCenterModal}
             handleClose={handleRenameCenterClose}
           />
-            <DeleteCenterModal
+          <DeleteCenterModal
             open={openDeleteCenterModal}
             handleClose={handleDeleteCenterClose}
           />
@@ -261,12 +270,21 @@ const TeachingCenterDetails = () => {
                 width: '163px',
                 color: theme.palette.error.contrastText,
               }}
+              onClick={handleOpen}
               className="text-1E"
               endIcon={<AddIcon />}
             >
               {t('COMMON.SCHEDULE_NEW')}
             </Button>
           </Box>
+          <CenterSessionModal
+            open={open}
+            handleClose={handleClose}
+            title={'Schedule'}
+            primary={'Next'}
+          >
+            <Schedule />
+          </CenterSessionModal>
           <Box mt={3} px={'18px'}>
             <Box
               className="fs-14 fw-500"
@@ -281,7 +299,7 @@ const TeachingCenterDetails = () => {
               {t('COMMON.NO_SESSIONS_SCHEDULED')}
             </Box>
           </Box>
-          <Box>
+          <Box sx={{ padding: '10px 16px' }}>
             <WeekCalender
               showDetailsHandle={showDetailsHandle}
               data={percentageAttendanceData}
diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
index a31f451e..7fc73711 100644
--- a/src/utils/Interfaces.ts
+++ b/src/utils/Interfaces.ts
@@ -129,6 +129,13 @@ export interface SessionsCardProps {
   data: Session;
   children?: React.ReactNode;
 }
+export interface SessionsModalProps {
+  children?: React.ReactNode;
+  open: boolean;
+  handleClose: () => void;
+  title: string;
+  primary: string;
+}
 export interface AttendanceStatusListProps {
   limit: number;
   page: number;
diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
index f450d756..147174ee 100644
--- a/src/utils/app.constant.ts
+++ b/src/utils/app.constant.ts
@@ -27,3 +27,8 @@ export enum cohortHierarchy {
   BLOCK = 'BLOCK',
   COHORT = 'COHORT',
 }
+
+export enum sessionModeConstant {
+  ONLINE = 'online',
+  OFFLINE = 'offline',
+}