diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index 3d51ae9b..aa1825f3 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -33,7 +33,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
-  const [currentEmployee, setCurrentEmployee] = useState();
+  const [currentEmployee, setCurrentEmployee] = useState(null);
   const [currentAddressLength, setCurrentAddressLength] = useState(0);
   const [permanentAddressLength, setPermanentAddressLength] = useState(0);
 
@@ -157,22 +157,30 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     mode: "onChange",
   });
 
-  const AadharNumberValue = watch("AadharNumber") || "";
+  const AadharNumberValue = watch("aadharNumber") || "";
 
   const onSubmit = (data) => {
     setLoading(true);
-
-  console.log(data);
+    if (data.email == "") {
+      data.email = null;
+    }
     EmployeeRepository.manageEmployee(data)
       .then((response) => {
-        showToast("Employee details updated successfully.", "success");
+        showToast(
+          `Employee details ${
+            data.id == null ? "created" : "updated"
+          } successfully.`,
+          "success"
+        );
         clearCacheKey("employeeListByProject");
         clearCacheKey("allEmployeeList");
+        clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
 
         setLoading(false);
         reset();
-        navigation("/employees");
+        // navigation("/employees");
+        onClosed();
       })
       .catch((error) => {
         const message =
@@ -232,7 +240,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                 className="cursor-pointer fs-6"
                 onClick={() => onClosed()}
               >
-                <i className='bx bx-x'></i>
+                <i className="bx bx-x"></i>
               </span>
             </div>
             <div className="card-body">
@@ -250,15 +258,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       name="FirstName"
                       {...register("firstName")}
                       className="form-control form-control-sm"
-                      id="FirstName"
+                      id="firstName"
                       placeholder="First Name"
                     />
-                    {errors.FirstName && (
+                    {errors.firstName && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.FirstName.message}
+                        {errors.firstName.message}
                       </div>
                     )}
                   </div>{" "}
@@ -269,15 +277,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("middleName")}
                       className="form-control form-control-sm"
-                      id="MiddleName"
+                      id="middleName"
                       placeholder="Middle Name"
                     />
-                    {errors.MiddleName && (
+                    {errors.middleName && (
                       <div
                         className="danger-text text-start "
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.MiddleName.message}
+                        {errors.middleName.message}
                       </div>
                     )}
                   </div>
@@ -287,15 +295,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("lastName")}
                       className="form-control form-control-sm"
-                      id="LastName"
+                      id="lastName"
                       placeholder="Last Name"
                     />
-                    {errors.LastName && (
+                    {errors.lastName && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.LastName.message}
+                        {errors.lastName.message}
                       </div>
                     )}
                   </div>
@@ -305,7 +313,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     <div className="form-text text-start">Email</div>
                     <input
                       type="email"
-                      id="Email"
+                      id="email"
                       {...register("email")}
                       className="form-control form-control-sm"
                       placeholder="example@domain.com"
@@ -313,12 +321,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       aria-describedby="Email"
                       disabled={!!currentEmployee?.email}
                     />
-                    {errors.Email && (
+                    {errors.email && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.Email.message}
+                        {errors.email.message}
                       </div>
                     )}
                   </div>
@@ -327,19 +335,19 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     <input
                       type="text"
                       keyboardType="numeric"
-                      id="PhoneNumber"
+                      id="phoneNumber"
                       {...register("phoneNumber")}
                       className="form-control form-control-sm"
                       placeholder="Phone Number"
                       inputMode="numeric"
                       maxLength={10}
                     />
-                    {errors.PhoneNumber && (
+                    {errors.phoneNumber && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.PhoneNumber.message}
+                        {errors.phoneNumber.message}
                       </div>
                     )}
                   </div>
@@ -353,7 +361,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       <select
                         className="form-select form-select-sm "
                         {...register("gender")}
-                        id="Gender"
+                        id="gender"
                         aria-label=""
                       >
                         <option disabled value="">
@@ -364,12 +372,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         <option value="Other">Other</option>
                       </select>
                     </div>
-                    {errors.Gender && (
+                    {errors.gender && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.Gender.message}
+                        {errors.gender.message}
                       </div>
                     )}
                   </div>
@@ -381,15 +389,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         className="form-control form-control-sm"
                         type="date"
                         {...register("birthDate")}
-                        id="BirthDate"
+                        id="birthDate"
                       />
                     </div>
-                    {errors.BirthDate && (
+                    {errors.birthDate && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.BirthDate.message}
+                        {errors.birthDate.message}
                       </div>
                     )}
                   </div>
@@ -401,15 +409,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         className="form-control form-control-sm"
                         type="date"
                         {...register("joiningDate")}
-                        id="JoiningDate"
+                        id="joiningDate"
                       />
                     </div>
-                    {errors.JoiningDate && (
+                    {errors.joiningDate && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.JoiningDate.message}
+                        {errors.joiningDate.message}
                       </div>
                     )}
                   </div>
@@ -419,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     <div className="form-text text-start">Current Address</div>
 
                     <textarea
-                      id="CurrentAddress"
+                      id="currentAddress"
                       className="form-control form-control-sm"
                       placeholder="Current Address"
                       aria-label="Current Address"
@@ -429,7 +437,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       onChange={(e) => {
                         setCurrentAddressLength(e.target.value.length);
                         // let react-hook-form still handle it
-                        register("CurrentAddress").onChange(e);
+                        register("currentAddress").onChange(e);
                       }}
                     ></textarea>
                     <div className="text-end muted">
@@ -438,12 +446,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         {500 - currentAddressLength} characters left
                       </small>
                     </div>
-                    {errors.CurrentAddress && (
+                    {errors.currentAddress && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.CurrentAddress.message}
+                        {errors.currentAddress.message}
                       </div>
                     )}
                   </div>
@@ -453,7 +461,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     </div>
 
                     <textarea
-                      id="PermanentAddress"
+                      id="permanentAddress"
                       className="form-control form-control-sm"
                       placeholder="Permanent Address"
                       aria-label="Permanent Address"
@@ -462,7 +470,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       maxLength={500}
                       onChange={(e) => {
                         setPermanentAddressLength(e.target.value.length);
-                        register("PermanentAddress").onChange(e);
+                        register("permanentAddress").onChange(e);
                       }}
                     ></textarea>
                     <div className="text-end muted">
@@ -470,12 +478,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         {500 - permanentAddressLength} characters left
                       </small>
                     </div>
-                    {errors.PermanentAddress && (
+                    {errors.permanentAddress && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.PermanentAddress.message}
+                        {errors.permanentAddress.message}
                       </div>
                     )}
                   </div>
@@ -493,7 +501,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       <select
                         className="form-select form-select-sm"
                         {...register("jobRoleId")}
-                        id="JobRoleId"
+                        id="jobRoleId"
                         aria-label=""
                       >
                         <option disabled value="">
@@ -506,12 +514,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         ))}
                       </select>
                     </div>
-                    {errors.JobRoleId && (
+                    {errors.jobRoleId && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.JobRoleId.message}
+                        {errors.jobRoleId.message}
                       </div>
                     )}
                   </div>
@@ -523,16 +531,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("emergencyContactPerson")}
                       className="form-control form-control-sm"
-                      id="EmergencyContactPerson"
+                      id="emergencyContactPerson"
                       maxLength={50}
                       placeholder="Contact Person"
                     />
-                    {errors.EmergencyContactPerson && (
+                    {errors.emergencyContactPerson && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.EmergencyContactPerson.message}
+                        {errors.emergencyContactPerson.message}
                       </div>
                     )}
                   </div>
@@ -544,17 +552,17 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("emergencyPhoneNumber")}
                       className="form-control form-control-sm phone-mask"
-                      id="EmergencyPhoneNumber"
+                      id="emergencyPhoneNumber"
                       placeholder="Phone Number"
                       inputMode="numeric"
                       maxLength={10}
                     />
-                    {errors.EmergencyPhoneNumber && (
+                    {errors.emergencyPhoneNumber && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.EmergencyPhoneNumber.message}
+                        {errors.emergencyPhoneNumber.message}
                       </div>
                     )}
                   </div>
@@ -567,14 +575,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("aadharNumber")}
                       className="form-control form-control-sm"
-                      id="AadharNumber"
+                      id="aadharNumber"
                       placeholder="AADHAR Number"
                       maxLength={12}
                       inputMode="numeric"
                     />
-                    {errors.AadharNumber && (
+                    {errors.aadharNumber && (
                       <div className="danger-text text-start">
-                        {errors.AadharNumber.message}
+                        {errors.aadharNumber.message}
                       </div>
                     )}
                   </div>
@@ -585,16 +593,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("panNumber")}
                       className="form-control form-control-sm"
-                      id="PanNumber"
+                      id="panNumber"
                       placeholder="PAN Number"
                       maxLength={10}
                     />
-                    {errors.PanNumber && (
+                    {errors.panNumber && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.PanNumber.message}
+                        {errors.panNumber.message}
                       </div>
                     )}
                   </div>
diff --git a/src/hooks/useEmployees.js b/src/hooks/useEmployees.js
index 5aec3cf2..7a70c365 100644
--- a/src/hooks/useEmployees.js
+++ b/src/hooks/useEmployees.js
@@ -209,9 +209,15 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
 export const useEmployeeProfile = (employeeId) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState();
-  const [employee, setEmployees] = useState();
+  const [employee, setEmployees] = useState(null);
 
   const fetchData = async () => {
+    if (!employeeId) {
+        // Reset the state if no employeeId (e.g., opening for 'add' mode)
+        setEmployees(null);
+        setLoading(false);
+        return;
+      }
     const Employee_cache = getCachedData("employeeProfile");
     if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
       EmployeeRepository.getEmployeeProfile(employeeId)
@@ -231,9 +237,7 @@ export const useEmployeeProfile = (employeeId) => {
   };
 
   useEffect(() => {
-    if (employeeId) {
-      fetchData(employeeId);
-    }
+      fetchData();
   }, [employeeId]);
 
   return { employee, loading, error };
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index c0b75275..f31cff37 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -43,7 +43,7 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [selectedEmployeeId, setSelecedEmployeeId] = useState();
+  const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [employeeLodaing, setemployeeLodaing] = useState(false);
@@ -111,6 +111,8 @@ const EmployeeList = () => {
       document.querySelector(".modal-backdrop").remove();
     }
     setShowModal(false);
+    clearCacheKey("employeeProfile");
+    recallEmployeeData(showInactive);
   };
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -193,7 +195,7 @@ const EmployeeList = () => {
       {isCreateModalOpen && (
         <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
       )}
-      <div
+      {showModal && (<div
         className={`modal fade ${showModal ? "show" : ""} `}
         tabIndex="-1"
         role="dialog"
@@ -211,7 +213,7 @@ const EmployeeList = () => {
             />
           </div>
         </div>
-      </div>
+      </div>)}
 
       {IsDeleteModalOpen && (
         <div