diff --git a/src/components/MarkAttendance.tsx b/src/components/MarkAttendance.tsx
index dfcaa8a6..dfc6a68a 100644
--- a/src/components/MarkAttendance.tsx
+++ b/src/components/MarkAttendance.tsx
@@ -50,6 +50,7 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
   const { t } = useTranslation();
 
   const [updatedStatus, setUpdatedStatus] = React.useState(currentStatus);
+
   useEffect(() => {
     if (isOpen) {
       setUpdatedStatus(currentStatus);
@@ -73,7 +74,6 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
   const { vertical, horizontal, openModal } = modal;
 
   const submitUpdateAttendance = async () => {
-    console.log(updatedStatus);
     try {
       const learnerId = localStorage.getItem('learnerId');
       const classId = localStorage.getItem('classId');
@@ -100,42 +100,10 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
     setModal({ ...newState, openModal: true });
   };
 
-  // const submitClearAttendance = () => {
-  // setStatus(ATTENDANCE_ENUM.NOT_MARKED);
-  // handleClose();
-  // handleMarkClearAttendanceModal();
-  // };
-
-  // const submitAttendance = (newState: SnackbarOrigin) => () => {
-  //   handleSubmit(date, status);
-  //   //  setOpenMarkUpdateAttendance(!openMarkUpdateAttendance);
-  //   setModal({ ...newState, openModal: true });
-  //   setTimeout(() => {
-  //     handleSnackbarClose();
-  //   }, SNACKBAR_AUTO_HIDE_DURATION);
-  // };
-
-  // const submitConfirmAttendance = (newState: SnackbarOrigin) => () => {
-  //   // setOpenMarkClearAttendance(!openMarkClearAttendance);
-  //   handleMarkUpdateAttendanceModal();
-  //   handleSubmit(date, status);
-
-  //   setModal({ ...newState, openModal: true });
-  //   setTimeout(() => {
-  //     handleSnackbarClose();
-  //   }, SNACKBAR_AUTO_HIDE_DURATION);
-  // };
-
   const handleSnackbarClose = () => {
     setModal({ ...modal, openModal: false });
   };
 
-  // const handleClear = () => {
-  //   if (status !== ATTENDANCE_ENUM.NOT_MARKED) {
-  //     setStatus(ATTENDANCE_ENUM.NOT_MARKED);
-  //   }
-  // };
-
   const getButtonComponent = (
     value: string,
     icon1: IconType,
@@ -143,7 +111,6 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
     text: string
   ) => {
     // setStatus(currentStatus);
-
     return (
       <Box
         display="flex"
@@ -251,16 +218,7 @@ const MarkAttendance: React.FC<MarkAttendanceProps> = ({
           <Button
             variant="contained"
             onClick={() => {
-              // if (currentStatus === ATTENDANCE_ENUM.NOT_MARKED) {
-              //   {
-              //     submitAttendance({
-              //       vertical: 'bottom',
-              //       horizontal: 'center',
-              //     })();
-              //   }
-              // } else {
               submitUpdateAttendance();
-              // }
             }}
             disabled={
               updatedStatus === ATTENDANCE_ENUM.NOT_MARKED ||
diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
index 62f9c1ed..31ac61f7 100644
--- a/src/components/MarkBulkAttendance.tsx
+++ b/src/components/MarkBulkAttendance.tsx
@@ -121,7 +121,6 @@ const MarkBulkAttendance: React.FC<MarkBulkAttendanceProps> = ({
             filters,
           });
           const resp = response?.result?.results?.userDetails;
-
           if (resp) {
             const nameUserIdArray = resp?.map((entry: any) => ({
               userId: entry.userId,
diff --git a/src/components/MonthCalender.tsx b/src/components/MonthCalender.tsx
index 7a852785..97dd9c8c 100644
--- a/src/components/MonthCalender.tsx
+++ b/src/components/MonthCalender.tsx
@@ -6,7 +6,7 @@ import {
   CheckCircleOutlineOutlined,
 } from '@mui/icons-material';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import Value from 'react-calendar';
 import { shortDateFormat } from '@/utils/Helper';
@@ -59,11 +59,78 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
     [Date | null, Date | null] | null
   >(null);
   const determinePathColor = useDeterminePathColor();
+  //  useEffect(() => {
+  //   const currentDate = new Date();
+  //   localStorage.setItem('activeStartDate', currentDate.toDateString());
+  // }, []);
 
   useEffect(() => {
-    const currentDate = new Date();
-    localStorage.setItem('activeStartDate', currentDate.toDateString());
-  }, []);
+    const handleTouchStart = (event: TouchEvent) => {
+      if (selectionType === 'range') {
+        setDate(null);
+        const touch = event.touches[0];
+        const startDate = getDateFromTouch(touch);
+        console.log('startDate', startDate);
+        if (startDate) {
+          setSelectedDates([startDate, startDate]);
+          onDateChange([startDate, startDate]);
+        }
+      }
+    };
+
+    const handleTouchMove = (event: TouchEvent) => {
+      if (selectionType === 'range') {
+        const touch = event.touches[0];
+        const moveDate = getDateFromTouch(touch);
+        console.log('moveDate', moveDate);
+
+        if (moveDate && selectedDates) {
+          const [startDate] = selectedDates;
+          setSelectedDates([startDate, moveDate]);
+          onDateChange([startDate, moveDate]);
+        }
+      }
+    };
+
+    const handleTouchEnd = (event: TouchEvent) => {
+      if (selectionType === 'range') {
+        const touch = event.changedTouches[0];
+        const endDate = getDateFromTouch(touch);
+        console.log('endDate', endDate);
+        if (endDate && selectedDates) {
+          const [startDate] = selectedDates;
+          setSelectedDates([startDate, endDate]);
+          onDateChange([startDate, endDate]);
+        }
+      }
+    };
+    const getDateFromTouch = (touch: Touch) => {
+      const element = document.elementFromPoint(touch.clientX, touch.clientY);
+      if (element) {
+        const tile = element.closest('.react-calendar__tile');
+        if (tile) {
+          const abbr = tile.querySelector('abbr');
+          if (abbr) {
+            const dateString = abbr.getAttribute('aria-label');
+            if (dateString) {
+              return new Date(dateString);
+            }
+          }
+        }
+      }
+      return null;
+    };
+
+    document.addEventListener('touchstart', handleTouchStart);
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+
+    return () => {
+      document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [selectedDates, onDateChange]);
 
   function tileContent({
     date,
@@ -147,6 +214,8 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
 
         if (currentDate > startDate && currentDate < endDate) {
           classes.push('selected-range');
+        } else if (currentDate === startDate || currentDate === endDate) {
+          classes.push('selected-start-end');
         }
       }
     }
@@ -182,6 +251,9 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
       const day = String(date.getDate()).padStart(2, '0');
       return `${year}-${month}-${day}`;
     };
+    setDate(newDate);
+    setSelectedDates(Array.isArray(newDate) ? newDate : [newDate, newDate]);
+    onDateChange(newDate);
 
     if (newDate === null) {
       setDate(null);
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3c7d35a3..c92b55ae 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -719,13 +719,14 @@ main {
 .selected-range {
   background-color: var(--mui-palette-Skeleton-bg) !important;
 }
-
 .flex-center {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
 }
-
 .text4D {
   color: #4d4639 !important;
 }
+.selected-start-end {
+  background-color: var(--mui-palette-primary-main) !important;
+}