diff --git a/src/components/Employee/EmpAttendance.jsx b/src/components/Employee/EmpAttendance.jsx
index b8ff8b83..26ae9531 100644
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@@ -126,7 +126,7 @@ const EmpAttendance = ({ employee }) => {
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
         >
-          <div className="col-md-3 my-0 ">
+          <div className="col-md-4 my-0 ">
             <DateRangePicker
               DateDifference="30"
               onRangeChange={setDateRange}
diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index 9b7505fe..2dce634b 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -46,6 +46,12 @@ const DateRangePicker = ({
     };
   }, [onRangeChange, DateDifference, endDateMode]);
 
+  const handleIconClick = () => {
+    if (inputRef.current) {
+      inputRef.current._flatpickr.open(); // directly opens flatpickr
+    }
+  };
+
   return (
     <div className={`col-${sm} col-sm-${md} px-1`}>
       <input
@@ -57,7 +63,7 @@ const DateRangePicker = ({
       />
 
       <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50  translate-middle-y "
+        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50  translate-middle-y " onClick={handleIconClick}
         style={{ right: "22px", bottom: "-8px" }}
       ></i>
     </div>
@@ -77,7 +83,7 @@ export const DateRangePicker1 = ({
   className = "",
   allowText = false,
   resetSignal,
-  defaultRange = true, 
+  defaultRange = true,
   ...rest
 }) => {
   const inputRef = useRef(null);