diff --git a/src/components/AttendanceStatus.tsx b/src/components/AttendanceStatus.tsx
index 49a0f817..af353240 100644
--- a/src/components/AttendanceStatus.tsx
+++ b/src/components/AttendanceStatus.tsx
@@ -1,12 +1,14 @@
 import { Box, Button, Grid, Typography } from '@mui/material';
-import { CreateOutlined } from '@mui/icons-material';
-import { useTranslation } from 'next-i18next';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-import { shortDateFormat } from '@/utils/Helper';
-import { useTheme } from '@mui/material/styles';
+import { formatToShowDateMonth, shortDateFormat } from '@/utils/Helper';
+
+import { CreateOutlined } from '@mui/icons-material';
 import useDeterminePathColor from '../hooks/useDeterminePathColor';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 
 interface AttendanceStatusProps {
+  date: Date;
   formattedAttendanceData: FormattedAttendanceData;
   onDateSelection: Date;
   onUpdate?: () => void;
@@ -23,6 +25,7 @@ type FormattedAttendanceData = {
 };
 
 function AttendanceStatus({
+  date,
   formattedAttendanceData,
   onDateSelection,
   onUpdate,
@@ -56,7 +59,18 @@ function AttendanceStatus({
         justifyContent="space-between"
         alignItems={'center'}
       >
-        <Grid item xs={8} display={'flex'}>
+        <Grid item xs={8}>
+          <Box display={'flex'} width={'100%'}>
+            <Typography
+              marginBottom={'0px'}
+              ml={1}
+              fontSize={'14px'}
+              fontWeight={'500'}
+              color={'black'}
+            >
+              {formatToShowDateMonth(date)}
+            </Typography>
+          </Box>
           <Box display={'flex'}>
             {attendanceStatus !== 'notMarked' &&
               attendanceStatus !== 'futureDate' && (
diff --git a/src/components/AttendanceStatusListView.tsx b/src/components/AttendanceStatusListView.tsx
index 9e319a0f..2bd5c2b0 100644
--- a/src/components/AttendanceStatusListView.tsx
+++ b/src/components/AttendanceStatusListView.tsx
@@ -2,6 +2,7 @@ import { Box, Typography } from '@mui/material';
 
 import { ATTENDANCE_ENUM } from '../utils/Helper';
 import { AttendanceStatusListViewProps } from '../utils/Interfaces';
+import { BorderBottom } from '@mui/icons-material';
 import CancelIcon from '@mui/icons-material/Cancel'; //absent
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'; //present
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
@@ -22,14 +23,17 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
 
   const boxStyling = {
     display: 'flex',
-    height: '56px',
+    height: isBulkAction ? '56px' : '',
     // width: '100%',
     // borderBottom: `0.5px solid ${theme.palette.warning[400]}`,
     padding: '8px',
     alignItems: 'center',
     borderRadius: isBulkAction ? '8px' : 0,
-    marginBottom: '12px',
+    // marginBottom: '12px',
     backgroundColor: isBulkAction ? theme.palette.warning[800] : 'none',
+    // position: isBulkAction ? 'fixed' : 'none',
+    // width: isBulkAction ? '89%' : '100%',
+    borderBottom: isBulkAction ? 'none' : '1px solid #D0C5B4',
   };
 
   const handleClickAction = (
@@ -42,73 +46,78 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
     }
   };
   return (
-    <Box sx={boxStyling}>
-      <Typography
-        variant="body1"
-        marginRight="auto"
-        marginY="auto"
-        sx={{ color: theme.palette.warning['300'], textAlign:'left'}}
-      >
-        {isBulkAction ? t('ATTENDANCE.MARK_ALL') : userData?.name}
-      </Typography>
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        className="icon_holder"
-        p={2}
-        onClick={() =>
-          handleClickAction(
-            isBulkAction,
-            ATTENDANCE_ENUM.PRESENT,
-            isBulkAction ? '' : userData?.userId
-          )
-        }
-      >
-        {[userData?.attendance, bulkAttendanceStatus].includes(
-          ATTENDANCE_ENUM.PRESENT
-        ) ? (
-          <CheckCircleIcon sx={{ color: () => theme.palette.warning[400] }} />
-        ) : (
-          <CheckCircleOutlineIcon
-            sx={{ color: () => theme.palette.warning[400] }}
-          />
-        )}
+    <Box>
+      <Box sx={boxStyling}>
         <Typography
-          variant="h6"
-          marginTop={1}
-          sx={{ color: () => theme.palette.warning[400] }}
+          variant="body1"
+          marginRight="auto"
+          marginY="auto"
+          sx={{
+            color: theme.palette.warning['300'],
+            textAlign: 'left',
+          }}
         >
-          {t('ATTENDANCE.PRESENT')}
+          {isBulkAction ? t('ATTENDANCE.MARK_ALL') : userData?.name}
         </Typography>
-      </Box>
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        p={2}
-        onClick={() =>
-          handleClickAction(
-            isBulkAction,
-            ATTENDANCE_ENUM.ABSENT,
-            isBulkAction ? '' : userData?.userId
-          )
-        }
-      >
-        {[userData?.attendance, bulkAttendanceStatus].includes(
-          ATTENDANCE_ENUM.ABSENT
-        ) ? (
-          <CancelIcon sx={{ color: () => theme.palette.warning[400] }} />
-        ) : (
-          <HighlightOffIcon />
-        )}
-        <Typography
-          variant="h6"
-          marginTop={1}
-          sx={{ color: () => theme.palette.warning[400] }}
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          className="icon_holder"
+          p={2}
+          onClick={() =>
+            handleClickAction(
+              isBulkAction,
+              ATTENDANCE_ENUM.PRESENT,
+              isBulkAction ? '' : userData?.userId
+            )
+          }
         >
-          {t('ATTENDANCE.ABSENT')}
-        </Typography>
+          {[userData?.attendance, bulkAttendanceStatus].includes(
+            ATTENDANCE_ENUM.PRESENT
+          ) ? (
+            <CheckCircleIcon sx={{ color: () => theme.palette.warning[400] }} />
+          ) : (
+            <CheckCircleOutlineIcon
+              sx={{ color: () => theme.palette.warning[400] }}
+            />
+          )}
+          <Typography
+            variant="h6"
+            marginTop={1}
+            sx={{ color: () => theme.palette.warning[400] }}
+          >
+            {t('ATTENDANCE.PRESENT')}
+          </Typography>
+        </Box>
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          p={2}
+          onClick={() =>
+            handleClickAction(
+              isBulkAction,
+              ATTENDANCE_ENUM.ABSENT,
+              isBulkAction ? '' : userData?.userId
+            )
+          }
+        >
+          {[userData?.attendance, bulkAttendanceStatus].includes(
+            ATTENDANCE_ENUM.ABSENT
+          ) ? (
+            <CancelIcon sx={{ color: () => theme.palette.warning[400] }} />
+          ) : (
+            <HighlightOffIcon />
+          )}
+          <Typography
+            variant="h6"
+            marginTop={1}
+            sx={{ color: () => theme.palette.warning[400] }}
+          >
+            {t('ATTENDANCE.ABSENT')}
+          </Typography>
+        </Box>
       </Box>
     </Box>
   );
diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
index 5b5bc89a..0fa50b01 100644
--- a/src/components/MarkBulkAttendance.tsx
+++ b/src/components/MarkBulkAttendance.tsx
@@ -1,19 +1,20 @@
 import { Box, Button, Fade, Modal, Typography } from '@mui/material';
 import React, { useEffect } from 'react';
-import Loader from './Loader';
-import AttendanceStatusListView from './AttendanceStatusListView';
-import { useTranslation } from 'next-i18next';
-import { shortDateFormat } from '../utils/Helper';
-import CloseIcon from '@mui/icons-material/Close';
-import { useTheme } from '@mui/material/styles';
-import Backdrop from '@mui/material/Backdrop';
-import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
+import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
 import {
   attendanceStatusList,
   bulkAttendance,
 } from '@/services/AttendanceService';
-import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
+
 import { AttendanceStatusListProps } from '../utils/Interfaces';
+import AttendanceStatusListView from './AttendanceStatusListView';
+import Backdrop from '@mui/material/Backdrop';
+import CloseIcon from '@mui/icons-material/Close';
+import Loader from './Loader';
+import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
+import { shortDateFormat } from '../utils/Helper';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 
 interface State extends SnackbarOrigin {
   openModal: boolean;
@@ -277,6 +278,7 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
             timeout: 500,
           },
         }}
+        className="modal_mark"
       >
         <Fade in={open}>
           <Box
@@ -289,7 +291,11 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
             height={'80%'}
           >
             <Box height={'100%'} width={'100%'}>
-              <Box display={'flex'} justifyContent={'space-between'}>
+              <Box
+                display={'flex'}
+                justifyContent={'space-between'}
+                sx={{ padding: '0 10px' }}
+              >
                 <Box marginBottom={'0px'}>
                   <Typography
                     variant="h2"
@@ -332,6 +338,7 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
                   marginTop: '10px',
                   fontSize: '12px',
                   color: theme.palette.warning['A200'],
+                  padding: '0 10px',
                 }}
               >
                 {t('ATTENDANCE.TOTAL_STUDENTS', {
@@ -340,10 +347,14 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
               </Typography>
               {cohortMemberList && cohortMemberList?.length != 0 ? (
                 <Box
-                  height={'58%'}
-                  sx={{ overflowY: 'scroll', marginTop: '10px' }}
+                  height={'100%'}
+                  sx={{
+                    overflowY: 'scroll',
+                    marginTop: '10px',
+                    padding: '0 10px',
+                  }}
                 >
-                  <Box>
+                  <Box className="modalBulk">
                     <AttendanceStatusListView
                       isEdit={true}
                       isBulkAction={true}
@@ -371,13 +382,13 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
                   </Box>
                   <Box
                     position={'absolute'}
-                    bottom="10px"
+                    bottom="0"
                     display={'flex'}
                     gap={'20px'}
                     flexDirection={'row'}
                     justifyContent={'space-evenly'}
                     marginBottom={0}
-                    sx={{ background: '#fff', padding: '15px 0 0 0' }}
+                    sx={{ background: '#fff', padding: '15px 0 15px 0' }}
                   >
                     <Button
                       variant="outlined"
diff --git a/src/pages/attendance-history.tsx b/src/pages/attendance-history.tsx
index 62c7268b..97e94ef1 100644
--- a/src/pages/attendance-history.tsx
+++ b/src/pages/attendance-history.tsx
@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import {
+  AttendanceParams,
+  AttendancePercentageProps,
+  AttendanceStatusListProps,
+  cohort,
+} from '../utils/Interfaces';
 import {
   Box,
   Button,
@@ -13,39 +18,36 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import SearchIcon from '@mui/icons-material/Search';
-import ClearIcon from '@mui/icons-material/Clear';
-import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
-import Header from '../components/Header';
-import { useTheme } from '@mui/material/styles';
-import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import React, { useEffect, useState } from 'react';
 import {
   attendanceInPercentageStatusList,
   attendanceStatusList,
-  // markAttendance,
 } from '../services/AttendanceService';
-import {
-  AttendancePercentageProps,
-  AttendanceParams,
-  cohort,
-  AttendanceStatusListProps,
-} from '../utils/Interfaces';
-import { useTranslation } from 'next-i18next';
-import Loader from '../components/Loader';
-import MonthCalender from '@/components/MonthCalender';
-import { useRouter } from 'next/router';
 import {
   debounce,
-  getTodayDate,
   formatToShowDateMonth,
+  getTodayDate,
   shortDateFormat,
 } from '@/utils/Helper';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { cohortList } from '@/services/CohortServices';
-import SortingModal from '../components/SortingModal';
+
+import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
+import AttendanceStatus from '@/components/AttendanceStatus';
 import AttendanceStatusListView from '@/components/AttendanceStatusListView';
+import ClearIcon from '@mui/icons-material/Clear';
+import Header from '../components/Header';
+import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined';
+import Loader from '../components/Loader';
+import MarkBulkAttendance from '@/components/MarkBulkAttendance';
+import MonthCalender from '@/components/MonthCalender';
+import SearchIcon from '@mui/icons-material/Search';
+import SortingModal from '../components/SortingModal';
+import { cohortList } from '@/services/CohortServices';
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/router';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 
 interface user {
   userId: string;
@@ -53,8 +55,6 @@ interface user {
   attendance?: string;
   key?: string;
 }
-import AttendanceStatus from '@/components/AttendanceStatus';
-import MarkBulkAttendance from '@/components/MarkBulkAttendance';
 
 const UserAttendanceHistory = () => {
   const theme = useTheme<any>();
@@ -601,21 +601,15 @@ const UserAttendanceHistory = () => {
               top: 0,
               zIndex: 1000,
               backgroundColor: 'white',
+              // boxShadow: '0px 1px 3px 0px #0000004D',
+              boxShadow: '0px 4px 8px 3px #00000026',
+              border: '1px solid #DED8E1',
             }}
+            py={'5px'}
           >
-            <Box display={'flex'} width={'100%'}>
-              <Typography
-                marginBottom={'0px'}
-                ml={1}
-                fontSize={'14px'}
-                fontWeight={'500'}
-                color={'black'}
-              >
-                {formatToShowDateMonth(selectedDate)}
-              </Typography>
-            </Box>
             <Box>
               <AttendanceStatus
+                date={selectedDate}
                 formattedAttendanceData={percentageAttendance}
                 onDateSelection={selectedDate}
                 onUpdate={handleOpen}
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 4f9763ad..44915e7f 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -52,10 +52,11 @@ import WeekDays from '@/components/WeekDays';
 import { cohortList } from '../services/CohortServices';
 import { getMyCohortMemberList } from '../services/MyClassDetailsService';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import useDeterminePathColor from '../hooks/useDeterminePathColor';
 import { useRouter } from 'next/navigation';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import useDeterminePathColor from '../hooks/useDeterminePathColor';
+
 interface State extends SnackbarOrigin {
   openModal: boolean;
 }
@@ -654,6 +655,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                       timeout: 500,
                     },
                   }}
+                  className="modal_mark"
                 >
                   <Fade in={open}>
                     <Box
@@ -722,7 +724,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                         </Typography>
                         {cohortMemberList && cohortMemberList?.length != 0 ? (
                           <Box
-                            height={'58%'}
+                            height={'100%'}
                             sx={{ overflowY: 'scroll', marginTop: '10px' }}
                           >
                             <Box>
@@ -756,13 +758,16 @@ const Dashboard: React.FC<DashboardProps> = () => {
                             </Box>
                             <Box
                               position={'absolute'}
-                              bottom="10px"
+                              bottom="0px"
                               display={'flex'}
                               gap={'20px'}
                               flexDirection={'row'}
                               justifyContent={'space-evenly'}
                               marginBottom={0}
-                              sx={{ background: '#fff', padding: '15px 0 0 0' }}
+                              sx={{
+                                background: '#fff',
+                                padding: '15px 0 15px 0',
+                              }}
                             >
                               <Button
                                 variant="outlined"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e205a215..8fc012f7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -491,3 +491,6 @@ main {
   cursor: default;
   opacity: 0;
 }
+.modal_mark .css-rsi8of {
+  overflow: hidden;
+}