diff --git a/src/assets/images/decorationBg.png b/src/assets/images/decorationBg.png
index 4a12fdd8..44373c05 100644
Binary files a/src/assets/images/decorationBg.png and b/src/assets/images/decorationBg.png differ
diff --git a/src/components/PlannedSession.tsx b/src/components/PlannedSession.tsx
index 6b488353..1aec6cb4 100644
--- a/src/components/PlannedSession.tsx
+++ b/src/components/PlannedSession.tsx
@@ -20,8 +20,6 @@ import dayjs, { Dayjs } from 'dayjs';
 
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import AddIcon from '@mui/icons-material/Add';
-import CenterSessionModal from './CenterSessionModal';
-import DeleteCenterModal from './center/DeleteCenterModal';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
@@ -35,10 +33,6 @@ type mode = (typeof sessionMode)[keyof typeof sessionMode];
 
 const PlannedSession = () => {
   const [mode, setMode] = useState<mode>(sessionMode.OFFLINE);
-  const [open, setOpen] = React.useState(false);
-
-  const handleClose = () => setOpen(false);
-  const handleOpen = () => setOpen(true);
 
   const handleSessionModeChange = (event: ChangeEvent<HTMLInputElement>) => {
     setMode(event.target.value as mode);
@@ -248,7 +242,6 @@ const PlannedSession = () => {
               color: theme?.palette?.secondary.main,
               fontWeight: '500',
             }}
-            onClick={handleOpen}
           >
             {t('CENTER_SESSION.REMOVE_THIS_SESSION')}
           </Box>
@@ -257,20 +250,6 @@ const PlannedSession = () => {
           />
         </Box>
 
-        <CenterSessionModal
-          open={open}
-          handleClose={handleClose}
-          title={'Delete Session'}
-          date={'25 May, 2024'}
-        >
-          <DeleteCenterModal
-            open={false}
-            handleClose={function (): void {
-              throw new Error('Function not implemented.');
-            }}
-          />
-        </CenterSessionModal>
-
         <Box sx={{ mt: 2 }}>
           <Divider />
         </Box>
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
index fac18d37..5f3e25a0 100644
--- a/src/components/SessionCard.tsx
+++ b/src/components/SessionCard.tsx
@@ -1,12 +1,17 @@
 import { Box, Typography } from '@mui/material';
 import { Session, SessionsCardProps } from '@/utils/Interfaces';
 
+import CenterSessionModal from './CenterSessionModal';
 import EditOutlined from '@mui/icons-material/EditOutlined';
+import PlannedSession from './PlannedSession';
 import React from 'react';
 import { useTheme } from '@mui/material/styles';
 
 const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
   const theme = useTheme<any>();
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
   return (
     <Box
       sx={{
@@ -39,8 +44,17 @@ const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
             {data?.teacherName}
           </Typography>
         </Box>
-        <EditOutlined />
+        <EditOutlined onClick={handleOpen} sx={{ cursor: 'pointer' }} />
       </Box>
+      <CenterSessionModal
+        open={open}
+        handleClose={handleClose}
+        title={'Home Science'}
+        primary={'Schedule'}
+      >
+        <PlannedSession />
+      </CenterSessionModal>
+
       <Box>{children}</Box>
     </Box>
   );
diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
index cbe6bbe1..c3ed65a6 100644
--- a/src/components/SessionCardFooter.tsx
+++ b/src/components/SessionCardFooter.tsx
@@ -17,7 +17,7 @@ import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
-  const theme = useTheme();
+  const theme = useTheme<any>();
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
@@ -29,7 +29,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
         <Box
           sx={{
             background: theme.palette.background.default,
-            padding: '4px 16px',
+            padding: '1px 16px',
             borderRadius: '8px',
           }}
         >
@@ -42,11 +42,21 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
             }}
           >
             <AccordionSummary
-              expandIcon={<ExpandMoreIcon />}
+              expandIcon={
+                <ExpandMoreIcon
+                  sx={{ color: theme?.palette?.warning['300'] }}
+                />
+              }
               aria-controls="panel1-content"
               id="panel1-header"
               className="accordion-summary"
-              sx={{ px: 0, m: 0 }}
+              sx={{
+                px: 0,
+                m: 0,
+                '&.Mui-expanded': {
+                  minHeight: '35px',
+                },
+              }}
             >
               <Typography fontWeight="500" fontSize="14px" className="text-7C">
                 {t('COMMON.TO_BE_TAUGHT')}
@@ -57,7 +67,9 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
                 onClick={handleOpen}
                 sx={{ display: 'flex', gap: '10px', cursor: 'pointer' }}
               >
-                <MenuBookIcon sx={{ color: theme.palette.secondary.main }} />
+                <MenuBookIcon
+                  sx={{ color: theme.palette.secondary.main, fontSize: '18px' }}
+                />
                 <Typography color={theme.palette.secondary.main} variant="h5">
                   {item?.topic}
                 </Typography>
@@ -72,7 +84,14 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
                 }}
                 onClick={handleOpen}
               >
-                <SubdirectoryArrowRightIcon />
+                <SubdirectoryArrowRightIcon
+                  sx={{
+                    color: theme.palette.secondary.main,
+                    fontSize: '18px',
+                    marginTop: '-4px',
+                    marginLeft: '-5px',
+                  }}
+                />
                 <Typography color={theme.palette.secondary.main} variant="h5">
                   {item?.subtopic}
                 </Typography>
@@ -89,11 +108,14 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
             padding: '8px 16px',
             borderRadius: '8px',
             cursor: 'pointer',
+            alignItems: 'center',
           }}
           onClick={handleOpen}
         >
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
+            <PriorityHighIcon
+              sx={{ color: theme.palette.error.main, fontSize: '18px' }}
+            />
             <Box
               fontSize={'14px'}
               fontWeight={500}
@@ -103,7 +125,9 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
               {t('COMMON.SELECT_TOPIC')}
             </Box>
           </Box>
-          <ArrowForwardIcon sx={{ color: theme.palette.secondary.main }} />
+          <ArrowForwardIcon
+            sx={{ color: theme.palette.secondary.main, fontSize: '18px' }}
+          />
         </Box>
       )}
       <CenterSessionModal
diff --git a/src/components/TopicDetails.tsx b/src/components/TopicDetails.tsx
index 730be612..bab2ea23 100644
--- a/src/components/TopicDetails.tsx
+++ b/src/components/TopicDetails.tsx
@@ -80,90 +80,95 @@ const TopicDetails = () => {
         </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"
+      <Box sx={{ mb: 1.5 }}>
+        <Accordion
+          // defaultExpanded
           sx={{
-            m: 0,
-            background: theme?.palette?.background.paper,
-            px: '16px',
-            height: '10px !important',
-            '&.Mui-expanded': {
-              minHeight: '48px',
-            },
+            boxShadow: 'none !important',
+            border: 'none !important',
+            mt: 1.5,
+            background: theme?.palette?.action?.selected,
           }}
         >
-          <Typography
-            fontWeight="500"
-            fontSize="14px"
-            sx={{ color: theme?.palette?.warning['300'] }}
+          <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?.action?.selected,
+              px: '16px',
+              height: '10px !important',
+              '&.Mui-expanded': {
+                minHeight: '48px',
+              },
+            }}
           >
-            {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
-                  sx={{
-                    fontSize: '16px',
-                    fontWeight: '500',
-                    color: theme?.palette?.warning['A400'],
-                  }}
-                >
-                  {t('CENTER_SESSION.TITLE')}
-                </Box>
-                <Box
-                  sx={{
-                    fontSize: '11px',
-                    fontWeight: '500',
-                    color: theme?.palette?.warning['A400'],
-                  }}
-                >
-                  Video {/*   will came from API */}
-                </Box>
-              </Box>
-            </Grid>
-            <Grid item xs={6} sx={{ mt: 2 }}>
-              <Box className="facilitator-bg">
-                <Box
-                  sx={{
-                    fontSize: '16px',
-                    fontWeight: '500',
-                    color: theme?.palette?.warning['A400'],
-                  }}
-                >
-                  {t('CENTER_SESSION.TITLE')}
+            <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
+                    sx={{
+                      fontSize: '16px',
+                      fontWeight: '500',
+                      color: theme?.palette?.warning['A400'],
+                    }}
+                  >
+                    {t('CENTER_SESSION.TITLE')}
+                  </Box>
+                  <Box
+                    sx={{
+                      fontSize: '11px',
+                      fontWeight: '500',
+                      color: theme?.palette?.warning['A400'],
+                    }}
+                  >
+                    Video {/*   will came from API */}
+                  </Box>
                 </Box>
-                <Box
-                  sx={{
-                    fontSize: '11px',
-                    fontWeight: '500',
-                    color: theme?.palette?.warning['A400'],
-                  }}
-                >
-                  Game {/*   will came from API */}
+              </Grid>
+              <Grid item xs={6} sx={{ mt: 2 }}>
+                <Box className="facilitator-bg">
+                  <Box
+                    sx={{
+                      fontSize: '16px',
+                      fontWeight: '500',
+                      color: theme?.palette?.warning['A400'],
+                    }}
+                  >
+                    {t('CENTER_SESSION.TITLE')}
+                  </Box>
+                  <Box
+                    sx={{
+                      fontSize: '11px',
+                      fontWeight: '500',
+                      color: theme?.palette?.warning['A400'],
+                    }}
+                  >
+                    Game {/*   will came from API */}
+                  </Box>
                 </Box>
-              </Box>
+              </Grid>
             </Grid>
-          </Grid>
-        </AccordionDetails>
-      </Accordion>
+          </AccordionDetails>
+        </Accordion>
+      </Box>
     </>
   );
 };