diff --git a/src/components/CenterSessionModal.tsx b/src/components/CenterSessionModal.tsx
index 185da134..7e77ee1a 100644
--- a/src/components/CenterSessionModal.tsx
+++ b/src/components/CenterSessionModal.tsx
@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import CircleIcon from '@mui/icons-material/Circle';
 import CloseIcon from '@mui/icons-material/Close';
 import { Divider } from '@mui/material';
 import Modal from '@mui/material/Modal';
@@ -15,6 +16,8 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
   handleClose,
   title,
   primary,
+  center,
+  date,
 }) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
@@ -27,6 +30,7 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
     bgcolor: theme?.palette?.warning['A400'],
     boxShadow: 24,
     borderRadius: '16px',
+    border: 'none',
     '@media (min-width: 600px)': {
       width: '450px',
     },
@@ -52,11 +56,42 @@ const CenterSessionModal: React.FC<SessionsModalProps> = ({
                   sx={{
                     color: theme?.palette?.warning['A200'],
                     fontSize: '14px',
+                    fontWeight: '500',
                   }}
                   component="h2"
                 >
                   {title}
                 </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                  <Typography
+                    variant="h2"
+                    sx={{
+                      color: theme?.palette?.warning['A200'],
+                      fontSize: '14px',
+                      fontWeight: '400',
+                    }}
+                    component="h2"
+                  >
+                    {center}
+                  </Typography>
+                  <CircleIcon
+                    sx={{
+                      fontSize: '6px',
+                      color: theme.palette.secondary.contrastText,
+                    }}
+                  />
+                  <Typography
+                    variant="h2"
+                    sx={{
+                      color: theme?.palette?.warning['A200'],
+                      fontSize: '14px',
+                      fontWeight: '400',
+                    }}
+                    component="h2"
+                  >
+                    {date}
+                  </Typography>
+                </Box>
               </Box>
               <CloseIcon
                 onClick={handleClose}
diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
index 53f3eeda..a728aa30 100644
--- a/src/components/SessionCardFooter.tsx
+++ b/src/components/SessionCardFooter.tsx
@@ -3,12 +3,15 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
+import CenterSessionModal from './CenterSessionModal';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
 import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
 import React from 'react';
+import SelectTopic from './SelectTopic';
 import { SessionCardFooterProps } from '../utils/Interfaces';
 import SubdirectoryArrowRightIcon from '@mui/icons-material/SubdirectoryArrowRight';
+import TopicDetails from './TopicDetails';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -16,80 +19,104 @@ import { useTranslation } from 'react-i18next';
 const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
   const theme = useTheme();
   const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
 
-  return item?.topic ? (
-    <Box
-      sx={{
-        background: theme.palette.background.default,
-        padding: '4px 16px',
-        borderRadius: '8px',
-      }}
-    >
-      <Accordion
-        //defaultExpanded
-        sx={{
-          boxShadow: 'none',
-          border: 'none',
-          background: 'none',
-        }}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
-          className="accordion-summary"
-          sx={{ px: 0, m: 0 }}
+  return (
+    <>
+      {item?.topic ? (
+        <Box
+          sx={{
+            background: theme.palette.background.default,
+            padding: '4px 16px',
+            borderRadius: '8px',
+          }}
         >
-          <Typography fontWeight="500" fontSize="14px" className="text-7C">
-            {t('COMMON.TO_BE_TAUGHT')}
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails sx={{ padding: '0px' }}>
-          <Box sx={{ display: 'flex', gap: '10px' }}>
-            <MenuBookIcon  sx={{ color: theme.palette.secondary.main }} />
-            <Typography color={theme.palette.secondary.main} variant="h5">
-              {item?.topic}
-            </Typography>
-          </Box>
-          <Box
+          <Accordion
+            //defaultExpanded
             sx={{
-              display: 'flex',
-              gap: '10px',
-              marginTop: '5px',
-              marginLeft: '10px',
+              boxShadow: 'none',
+              border: 'none',
+              background: 'none',
             }}
           >
-            <SubdirectoryArrowRightIcon />
-            <Typography color={theme.palette.secondary.main} variant="h5">
-              {item?.subtopic}
-            </Typography>
-          </Box>
-        </AccordionDetails>
-      </Accordion>
-    </Box>
-  ) : (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        background: theme.palette.background.default,
-        padding: '8px 16px',
-        borderRadius: '8px',
-      }}
-    >
-      <Box sx={{ display: 'flex', alignItems: 'center' }}>
-        <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1-content"
+              id="panel1-header"
+              className="accordion-summary"
+              sx={{ px: 0, m: 0 }}
+            >
+              <Typography fontWeight="500" fontSize="14px" className="text-7C">
+                {t('COMMON.TO_BE_TAUGHT')}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails sx={{ padding: '0px' }}>
+              <Box
+                onClick={handleOpen}
+                sx={{ display: 'flex', gap: '10px', cursor: 'pointer' }}
+              >
+                <MenuBookIcon sx={{ color: theme.palette.secondary.main }} />
+                <Typography color={theme.palette.secondary.main} variant="h5">
+                  {item?.topic}
+                </Typography>
+              </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  gap: '10px',
+                  marginTop: '5px',
+                  marginLeft: '10px',
+                  cursor: 'pointer',
+                }}
+                onClick={handleOpen}
+              >
+                <SubdirectoryArrowRightIcon />
+                <Typography color={theme.palette.secondary.main} variant="h5">
+                  {item?.subtopic}
+                </Typography>
+              </Box>
+            </AccordionDetails>
+          </Accordion>
+        </Box>
+      ) : (
         <Box
-          fontSize={'14px'}
-          fontWeight={500}
-          color={theme.palette.secondary.main}
-          ml={1}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            background: theme.palette.background.default,
+            padding: '8px 16px',
+            borderRadius: '8px',
+            cursor: 'pointer',
+          }}
+          onClick={handleOpen}
         >
-          {t('COMMON.SELECT_TOPIC')}
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
+            <Box
+              fontSize={'14px'}
+              fontWeight={500}
+              color={theme.palette.secondary.main}
+              ml={1}
+            >
+              {t('COMMON.SELECT_TOPIC')}
+            </Box>
+          </Box>
+          <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
         </Box>
-      </Box>
-      <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
-    </Box>
+      )}
+      <CenterSessionModal
+        open={open}
+        handleClose={handleClose}
+        title={item.subject}
+        center={'Khapari Dharmu'}
+        date={'25 May, 2024'}
+        primary={'save'}
+      >
+        {item?.topic ? <TopicDetails /> : <SelectTopic />}
+      </CenterSessionModal>
+    </>
   );
 };
 
diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
index beb70fd0..e54314b8 100644
--- a/src/pages/centers/[cohortId].tsx
+++ b/src/pages/centers/[cohortId].tsx
@@ -12,6 +12,7 @@ import AddIcon from '@mui/icons-material/Add';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Box from '@mui/material/Box';
 import CenterSessionModal from '@/components/CenterSessionModal';
+import CohortFacilitatorList from '@/components/CohortFacilitatorList';
 import CohortLearnerList from '@/components/CohortLearnerList';
 import { CustomField } from '@/utils/Interfaces';
 import DeleteCenterModal from '@/components/center/DeleteCenterModal';
@@ -21,16 +22,13 @@ import Header from '@/components/Header';
 import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
 import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import PlannedSession from '@/components/PlannedSession';
 import RenameCenterModal from '@/components/center/RenameCenterModal';
 import Schedule from './../../components/Schedule';
-import SelectTopic from '@/components/SelectTopic';
 import { Session } from '../../utils/Interfaces';
 import SessionCard from '@/components/SessionCard';
 import SessionCardFooter from '@/components/SessionCardFooter';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
-import TopicDetails from '@/components/TopicDetails';
 import WeekCalender from '@/components/WeekCalender';
 import { getCohortDetails } from '@/services/CohortServices';
 import { getSessions } from '@/services/Sessionservice';
@@ -296,7 +294,7 @@ const TeachingCenterDetails = () => {
             title={'Schedule'}
             primary={'Next'}
           >
-            <SelectTopic />
+            <Schedule />
           </CenterSessionModal>
           <Box mt={3} px={'18px'}>
             <Box
diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
index 4f35e77b..0e033788 100644
--- a/src/utils/Interfaces.ts
+++ b/src/utils/Interfaces.ts
@@ -134,7 +134,9 @@ export interface SessionsModalProps {
   open: boolean;
   handleClose: () => void;
   title: string;
-  primary: string;
+  primary?: string;
+  center?: string;
+  date?: string;
 }
 export interface AttendanceStatusListProps {
   limit: number;
@@ -159,7 +161,6 @@ export interface AttendancePercentageProps {
   facets: Array<string>;
 }
 
-
 export interface OverallAttendancePercentageProps {
   limit: number;
   page: number;
@@ -170,7 +171,6 @@ export interface OverallAttendancePercentageProps {
   facets: Array<string>;
 }
 
-
 export interface LearnerAttendanceProps {
   limit: number;
   page: number;
@@ -326,7 +326,6 @@ export interface SessionCardFooterProps {
   item: Session;
 }
 
-
 export interface FieldOption {
   label: string;
   value: string;