diff --git a/public/img/illustrations/girl-unlock-password-light.png b/public/img/illustrations/girl-unlock-password-light.png
new file mode 100644
index 00000000..18f4b274
Binary files /dev/null and b/public/img/illustrations/girl-unlock-password-light.png differ
diff --git a/public/img/illustrations/registration.jpg b/public/img/illustrations/registration.jpg
new file mode 100644
index 00000000..69cf7b8e
Binary files /dev/null and b/public/img/illustrations/registration.jpg differ
diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index b623ef0e..21ceea84 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -25,8 +25,9 @@ const CardViewDirectory = ({
       <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
           <div
-            className={`d-flex align-items-center ${IsActive && "cursor-pointer"
-              }`}
+            className={`d-flex align-items-center ${
+              IsActive && "cursor-pointer"
+            }`}
             onClick={() => {
               if (IsActive) {
                 setIsOpenModalNote(true);
@@ -89,10 +90,11 @@ const CardViewDirectory = ({
             )}
             {!IsActive && (
               <i
-                className={`bx  ${dirActions.action && dirActions.id === contact.id
+                className={`bx  ${
+                  dirActions.action && dirActions.id === contact.id
                     ? "bx-loader-alt bx-spin"
                     : "bx-recycle"
-                  } me-1 text-primary cursor-pointer`}
+                } me-1 text-primary cursor-pointer`}
                 title="Restore"
                 onClick={() => {
                   setDirActions({ action: false, id: contact.id });
@@ -113,8 +115,9 @@ const CardViewDirectory = ({
         </ul>
       </div>
       <div
-        className={`card-footer text-start px-9 py-1 ${IsActive && "cursor-pointer"
-          }`}
+        className={`card-footer text-start px-9 py-1 ${
+          IsActive && "cursor-pointer"
+        }`}
         onClick={() => {
           if (IsActive) {
             setIsOpenModalNote(true);
@@ -126,7 +129,7 @@ const CardViewDirectory = ({
         {contact.designation && (
           <ul className="list-unstyled my-1 d-flex align-items-start  ms-2">
             <li className="me-2">
-              <i class="fa-solid fa-id-badge ms-1"></i>
+              <i className="fa-solid fa-id-badge ms-1"></i>
             </li>
             <li className="flex-grow-1 text-break small">
               {contact.designation}
diff --git a/src/components/common/GlobalModal/CreateIssue.jsx b/src/components/common/GlobalModal/CreateIssue.jsx
index 9d090df8..faa13600 100644
--- a/src/components/common/GlobalModal/CreateIssue.jsx
+++ b/src/components/common/GlobalModal/CreateIssue.jsx
@@ -1,172 +1,179 @@
-import React,{useState} from "react";
+import React, { useState } from "react";
 import CommentEditor from "./CommentEditor";
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import "./CommentEditor.css";
 
 const jiraModules = {
-    toolbar: [
-      ["bold", "italic", "underline", "strike"],
-      ["link", "code"],
-      [{ list: "bullet" }],
-    ],
-  };
-  
-  const jiraFormats = [
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "link",
-    "code",
-    "list",
-  ];
-  
-const CreateIssue = () =>
-{
-    const [value, setValue] = useState("");
+  toolbar: [
+    ["bold", "italic", "underline", "strike"],
+    ["link", "code"],
+    [{ list: "bullet" }],
+  ],
+};
+
+const jiraFormats = [
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "link",
+  "code",
+  "list",
+];
+
+const CreateIssue = () => {
+  const [value, setValue] = useState("");
   return (
-    <from >
-        <div className="row">
-          <div className="col-12 col-md-8">
-            <div className="row">
-              <label for="defaultFormControlInput" class="form-label ">
-                Name
+    <from>
+      <div className="row">
+        <div className="col-12 col-md-8">
+          <div className="row">
+            <label for="defaultFormControlInput" className="form-label ">
+              Name
+            </label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              id="defaultFormControlInput"
+              placeholder="John Doe"
+              aria-describedby="defaultFormControlHelp"
+            />
+          </div>
+          <div className="row my-md-6 my-4 px-0">
+            <div className="col-6 ps-0">
+              <label for="defaultFormControlInput" className="form-label ">
+                Projec
               </label>
-              <input
-                type="text"
-                class="form-control form-control-sm"
-                id="defaultFormControlInput"
-                placeholder="John Doe"
-                aria-describedby="defaultFormControlHelp"
-              />
+              <select
+                name="DataTables_Table_0_length"
+                aria-controls="DataTables_Table_0"
+                className="form-select form-select-sm"
+                aria-label=""
+              >
+                <option>Project-2</option>
+                <option>Project-2</option>
+                <option>Project-3</option>
+              </select>
             </div>
-            <div className="row my-md-6 my-4 px-0">
-              <div className="col-6 ps-0">
-                <label for="defaultFormControlInput" class="form-label ">
-                  Projec
-                </label>
-                <select
-                  name="DataTables_Table_0_length"
-                  aria-controls="DataTables_Table_0"
-                  className="form-select form-select-sm"
-                  aria-label=""
+            <div className="col-6 pe-0">
+              <label for="defaultFormControlInput" className="form-label ">
+                Type
+              </label>
+              <select
+                name="DataTables_Table_0_length"
+                aria-controls="DataTables_Table_0"
+                className="form-select form-select-sm"
+                aria-label=""
+              >
+                <option>Project-2</option>
+                <option>Project-2</option>
+                <option>Project-3</option>
+              </select>
+            </div>
+          </div>
+          <div className="row my-md-6 my-4 px-0">
+            <div className="col-6 ps-0">
+              <label for="defaultFormControlInput" className="form-label ">
+                Status
+              </label>
+              <select
+                name="DataTables_Table_0_length"
+                aria-controls="DataTables_Table_0"
+                className="form-select form-select-sm"
+                aria-label=""
+              >
+                <option>Project-2</option>
+                <option>Project-2</option>
+                <option>Project-3</option>
+              </select>
+            </div>
+            <div className="col-6 pe-0">
+              <label for="defaultFormControlInput" className="form-label ">
+                Activity
+              </label>
+              <select
+                name="DataTables_Table_0_length"
+                aria-controls="DataTables_Table_0"
+                className="form-select form-select-sm"
+                aria-label=""
+              >
+                <option>Project-2</option>
+                <option>Project-2</option>
+                <option>Project-3</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="col-12 col-md-4">
+          <div className="row g-2">
+            <label for="defaultFormControlInput" className="form-label ">
+              Priority
+            </label>
+            <div className="col-md-4 mt-0">
+              <div className="form-check custom-option custom-option-icon p-2">
+                <label
+                  className="form-check-label custom-option-content"
+                  for="customRadioIcon1"
                 >
-                  <option>Project-2</option>
-                  <option>Project-2</option>
-                  <option>Project-3</option>
-                </select>
-              </div>
-              <div className="col-6 pe-0">
-                <label for="defaultFormControlInput" class="form-label ">
-                  Type
+                  <input
+                    name="customRadioIcon"
+                    className="form-check-input form-check-input-sm"
+                    type="radio"
+                    id="customRadioIcon1"
+                    checked
+                  />{" "}
+                  Low
                 </label>
-                <select
-                  name="DataTables_Table_0_length"
-                  aria-controls="DataTables_Table_0"
-                  className="form-select form-select-sm"
-                  aria-label=""
-                >
-                  <option>Project-2</option>
-                  <option>Project-2</option>
-                  <option>Project-3</option>
-                </select>
               </div>
             </div>
-            <div className="row my-md-6 my-4 px-0">
-              <div className="col-6 ps-0">
-                <label for="defaultFormControlInput" class="form-label ">
-                  Status
-                </label>
-                <select
-                  name="DataTables_Table_0_length"
-                  aria-controls="DataTables_Table_0"
-                  className="form-select form-select-sm"
-                  aria-label=""
+
+            <div className="col-md-4 mt-0">
+              <div className="form-check custom-option custom-option-icon p-2">
+                <label
+                  className="form-check-label custom-option-content"
+                  for="customRadioIcon2"
                 >
-                  <option>Project-2</option>
-                  <option>Project-2</option>
-                  <option>Project-3</option>
-                </select>
+                  <input
+                    name="customRadioIcon"
+                    className="form-check-input form-check-input-sm"
+                    type="radio"
+                    id="customRadioIcon2"
+                  />{" "}
+                  Medium
+                </label>
               </div>
-              <div className="col-6 pe-0">
-                <label for="defaultFormControlInput" class="form-label ">
-                  Activity
-                </label>
-                <select
-                  name="DataTables_Table_0_length"
-                  aria-controls="DataTables_Table_0"
-                  className="form-select form-select-sm"
-                  aria-label=""
+            </div>
+
+            <div className="col-md-4 mt-0">
+              <div className="form-check custom-option custom-option-icon p-2">
+                <label
+                  className="form-check-label custom-option-content"
+                  for="customRadioIcon3"
                 >
-                  <option>Project-2</option>
-                  <option>Project-2</option>
-                  <option>Project-3</option>
-                </select>
+                  <input
+                    name="customRadioIcon"
+                    className="form-check-input form-check-input-sm"
+                    type="radio"
+                    id="customRadioIcon3"
+                  />{" "}
+                  High
+                </label>
               </div>
             </div>
           </div>
-          <div className="col-12 col-md-4">
-                      <div class="row g-2"> 
-                      <label for="defaultFormControlInput" class="form-label ">
-                  Priority
-                </label>
-  <div class="col-md-4 mt-0">
-    <div class="form-check custom-option custom-option-icon p-2"> 
-      <label class="form-check-label custom-option-content" for="customRadioIcon1">
-        <input
-          name="customRadioIcon"
-          class="form-check-input form-check-input-sm"
-          type="radio"
-          id="customRadioIcon1"
-          checked
-        /> Low
-      </label>
-    </div>
-  </div>
-
-  <div class="col-md-4 mt-0">
-    <div class="form-check custom-option custom-option-icon p-2">
-      <label class="form-check-label custom-option-content" for="customRadioIcon2">
-        <input
-          name="customRadioIcon"
-          class="form-check-input form-check-input-sm"
-          type="radio"
-          id="customRadioIcon2"
-        /> Medium
-      </label>
-    </div>
-  </div>
-
-  <div class="col-md-4 mt-0">
-    <div class="form-check custom-option custom-option-icon p-2">
-      <label class="form-check-label custom-option-content" for="customRadioIcon3">
-        <input
-          name="customRadioIcon"
-          class="form-check-input form-check-input-sm"
-          type="radio"
-          id="customRadioIcon3"
-        /> High
-      </label>
-    </div>
-  </div>
-</div>
-
-
-                  </div>
-                  <div className="marco-quill-wrapper">
-      <ReactQuill
-        theme="snow"
-        value={value}
-        onChange={setValue}
-        placeholder="Add a comment..."
-        modules={jiraModules}
-        formats={jiraFormats}
-      />
-    </div>
-          </div>
-      
-           
+        </div>
+        <div className="marco-quill-wrapper">
+          <ReactQuill
+            theme="snow"
+            value={value}
+            onChange={setValue}
+            placeholder="Add a comment..."
+            modules={jiraModules}
+            formats={jiraFormats}
+          />
+        </div>
+      </div>
     </from>
   );
 };
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 14ca6c15..de2529d9 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -226,7 +226,6 @@ const CreateRole = ({ modalType, onClose }) => {
         {!masterFeatures && <p>Loading...</p>}
       </div>
 
-
       {masterFeatures && (
         <div className="col-12 text-center">
           <button type="submit" className="btn btn-sm btn-primary me-3">
diff --git a/src/layouts/AuthLayout.jsx b/src/layouts/AuthLayout.jsx
index b5a3fafe..c1cf679f 100644
--- a/src/layouts/AuthLayout.jsx
+++ b/src/layouts/AuthLayout.jsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { Link, Outlet } from "react-router-dom";
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient } from "@tanstack/react-query";
 import { AuthWrapper } from "../pages/authentication/AuthWrapper";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 5 * 60 * 1000,      // 5 min: data considered fresh
-      refetchOnWindowFocus: true,   // refresh on tab switch
-      refetchOnReconnect: true,     // re-fetch if network was lost
+      staleTime: 5 * 60 * 1000, // 5 min: data considered fresh
+      refetchOnWindowFocus: true, // refresh on tab switch
+      refetchOnReconnect: true, // re-fetch if network was lost
       retry: false,
     },
   },
@@ -17,14 +17,13 @@ export const queryClient = new QueryClient({
 const AuthLayout = () => {
   return (
     // <div className="login-box">
-    <div class="authentication-wrapper authentication-cover">
- 
+    <div className="authentication-wrapper authentication-cover">
       <Link
         aria-label="Go to Home Page"
         to="/"
         className="app-brand-link gap-2 position-fixed top-2 start-0 mx-2 mx-sm-4"
       >
-        <span className="app-brand-logo rounded-circle " >
+        <span className="app-brand-logo rounded-circle ">
           <img
             src="/img/brand/marco.png"
             alt="marco-logo"
@@ -38,4 +37,4 @@ const AuthLayout = () => {
   );
 };
 
-export default AuthLayout;
\ No newline at end of file
+export default AuthLayout;
diff --git a/src/pages/Gallary/ImagePop.jsx b/src/pages/Gallary/ImagePop.jsx
index 55a079df..52bee8cd 100644
--- a/src/pages/Gallary/ImagePop.jsx
+++ b/src/pages/Gallary/ImagePop.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import "./ImagePop.css";
 import { useModal } from "./ModalContext";
 import moment from "moment";
-import {formatUTCToLocalTime} from "../../utils/dateUtils";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
 
 const ImagePop = ({ batch, initialIndex = 0 }) => {
   const { closeModal } = useModal();
@@ -27,12 +27,12 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
     image.uploadedBy?.lastName || ""
   }`.trim();
   const date = formatUTCToLocalTime(image.uploadedAt);
-   
+
   // Location and category details from the 'batch' object (as previously corrected)
   const buildingName = batch.buildingName;
   const floorName = batch.floorName;
   const workAreaName = batch.workAreaName;
-  const activityName = batch.activityName;  
+  const activityName = batch.activityName;
   const batchComment = batch.comment;
 
   // Handler for navigating to the previous image
@@ -54,38 +54,58 @@ const ImagePop = ({ batch, initialIndex = 0 }) => {
   return (
     <div className="image-modal-overlay">
       <div className="image-modal-content">
-        
-        <i className='bx bx-x close-button' onClick={closeModal}></i>
+        <i className="bx bx-x close-button" onClick={closeModal}></i>
 
         {hasPrev && (
           <button className="nav-button prev-button" onClick={handlePrev}>
-            <i className='bx bx-chevron-left'></i>
+            <i className="bx bx-chevron-left"></i>
           </button>
         )}
 
-     <div className="image-container">
-         <img src={image.url} alt="Preview" className="modal-image" />
-     </div>
+        <div className="image-container">
+          <img src={image.url} alt="Preview" className="modal-image" />
+        </div>
 
         {hasNext && (
           <button className="nav-button next-button" onClick={handleNext}>
-            <i className='bx bx-chevron-right'></i>
+            <i className="bx bx-chevron-right"></i>
           </button>
         )}
 
         <div className="image-details">
-        
-          <div className="flex alig-items-center"> <i className='bx bxs-user'></i> <span className="text-muted">Uploaded By : </span>  <span className="text-secondary">{fullName}</span></div>
-            <div className="flex alig-items-center"> <i class='bx bxs-calendar' ></i> <span className="text-muted">Date : </span> <span className="text-secondary"> {date}</span></div>
-              <div className="flex alig-items-center"> <i class='bx bx-map' ></i> <span className="text-muted">Uploaded By : </span>  <span className="text-secondary">{buildingName} <i className='bx bx-chevron-right'></i> {floorName} <i className='bx bx-chevron-right'></i>
-            {workAreaName || "Unknown"} <i className='bx bx-chevron-right'></i> {activityName}</span></div>
-                <div className="flex alig-items-center"> <i className='bx bx-comment-dots'></i> <span className="text-muted">comment : </span>  <span className="text-secondary">{batchComment}</span></div>
-          
-       
+          <div className="flex alig-items-center">
+            {" "}
+            <i className="bx bxs-user"></i>{" "}
+            <span className="text-muted">Uploaded By : </span>{" "}
+            <span className="text-secondary">{fullName}</span>
+          </div>
+          <div className="flex alig-items-center">
+            {" "}
+            <i className="bx bxs-calendar"></i>{" "}
+            <span className="text-muted">Date : </span>{" "}
+            <span className="text-secondary"> {date}</span>
+          </div>
+          <div className="flex alig-items-center">
+            {" "}
+            <i className="bx bx-map"></i>{" "}
+            <span className="text-muted">Uploaded By : </span>{" "}
+            <span className="text-secondary">
+              {buildingName} <i className="bx bx-chevron-right"></i> {floorName}{" "}
+              <i className="bx bx-chevron-right"></i>
+              {workAreaName || "Unknown"}{" "}
+              <i className="bx bx-chevron-right"></i> {activityName}
+            </span>
+          </div>
+          <div className="flex alig-items-center">
+            {" "}
+            <i className="bx bx-comment-dots"></i>{" "}
+            <span className="text-muted">comment : </span>{" "}
+            <span className="text-secondary">{batchComment}</span>
+          </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default ImagePop;
\ No newline at end of file
+export default ImagePop;
diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx
index c29e2373..36e3f4da 100644
--- a/src/pages/Home/LandingPage.jsx
+++ b/src/pages/Home/LandingPage.jsx
@@ -1449,7 +1449,7 @@ const LandingPage = () => {
                   </span>
                   <span className="app-brand-text demo text-white fw-bold ms-2 ps-1">
                     <Link className="cta-title">
-                      <div class="app-brand-logo demo">
+                      <div className="app-brand-logo demo">
                         <img
                           className="rounded"
                           style={{
diff --git a/src/pages/authentication/MainForgetPage.jsx b/src/pages/authentication/MainForgetPage.jsx
index b5c26528..caae1016 100644
--- a/src/pages/authentication/MainForgetPage.jsx
+++ b/src/pages/authentication/MainForgetPage.jsx
@@ -1,20 +1,26 @@
-import React from "react"
+import React from "react";
 // import LoginPage from "./LoginPage";
 import ForgotPasswordPage from "./ForgotPasswordPage";
 
 const MainForgetPage = () => {
-    return (
-        <>
-
-            <div class="authentication-inner row m-0">
-                <div class="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
-                    <div class="w-75 h-75 d-flex justify-content-center">
-                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="object-fit-sm-contain " alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
-                    </div>
-                </div>
-                <ForgotPasswordPage />
-            </div>
-        </>
-    )
-}
-export default MainForgetPage;
\ No newline at end of file
+  return (
+    <>
+      <div className="authentication-inner row m-0">
+        <div className="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
+          <div className="w-75 h-75 d-flex justify-content-center">
+            <img
+              src="/img/illustrations/girl-unlock-password-light.png"
+              className="object-fit-sm-contain "
+              alt="Login image"
+              width="700"
+              data-app-dark-img="illustrations/girl-unlock-password-dark.png"
+              data-app-light-img="illustrations/girl-unlock-password-light.png"
+            />
+          </div>
+        </div>
+        <ForgotPasswordPage />
+      </div>
+    </>
+  );
+};
+export default MainForgetPage;
diff --git a/src/pages/authentication/MainRegisterPage.jsx b/src/pages/authentication/MainRegisterPage.jsx
index bf7c42a4..a2a1a5ca 100644
--- a/src/pages/authentication/MainRegisterPage.jsx
+++ b/src/pages/authentication/MainRegisterPage.jsx
@@ -1,19 +1,25 @@
-import React from "react"
+import React from "react";
 import RegisterPage from "./RegisterPage";
 
 const MainRegisterPage = () => {
-    return (
-        <>
-
-           <div class="authentication-inner row m-0">
-                <div class="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
-                    <div class="w-75 h-75 d-flex justify-content-center">
-                        <img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/illustrations/girl-unlock-password-light.png" class="object-fit-sm-contain " alt="Login image" width="700" data-app-dark-img="illustrations/girl-unlock-password-dark.png" data-app-light-img="illustrations/girl-unlock-password-light.png" />
-                    </div>
-                </div>
-                <RegisterPage />
-            </div>
-        </>
-    )
-}
-export default MainRegisterPage;
\ No newline at end of file
+  return (
+    <>
+      <div className="authentication-inner row m-0">
+        <div className="d-none d-lg-flex col-lg-7 col-xl-8 h-100 align-items-center p-3">
+          <div className="w-75 h-75 d-flex justify-content-center">
+            <img
+              src="/img/illustrations/registration.jpg"
+              className="object-fit-sm-contain "
+              alt="Login image"
+              width="700"
+              data-app-dark-img="illustrations/registration.jpg"
+              data-app-light-img="illustrations/registration.jpg"
+            />
+          </div>
+        </div>
+        <RegisterPage />
+      </div>
+    </>
+  );
+};
+export default MainRegisterPage;
diff --git a/src/pages/authentication/page-auth.css b/src/pages/authentication/page-auth.css
index 86ceb214..8492495b 100644
--- a/src/pages/authentication/page-auth.css
+++ b/src/pages/authentication/page-auth.css
@@ -18,6 +18,7 @@
 }
 .authentication-wrapper.authentication-cover .authentication-inner {
   height: 100vh;
+  background-color: #fff;
 }
 .authentication-wrapper.authentication-basic .authentication-inner {
   max-width: 400px;