diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index db070129..8503dc87 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -30,11 +30,6 @@
   width: 45px;
 }
 
-
-
-.app-brand-logo-border {
-  border: 1px solid #d5d5d5;
-}
 .app-brand-text {
   font-size: 1.75rem;
   letter-spacing: -0.5px;
@@ -165,10 +160,9 @@ thead tr {
 
 .app-brand-logo-login {
   max-width: 50px; /* default for mobile */
-  height: auto;    /* keep aspect ratio */
+  height: auto; /* keep aspect ratio */
 }
 
-
 /* Tablet and up (≥768px) */
 @media (min-width: 768px) {
   .app-brand-logo-login {
@@ -182,4 +176,3 @@ thead tr {
     max-width: 80px;
   }
 }
-
diff --git a/public/img/app/error in filter of expenses .png b/public/img/app/error in filter of expenses .png
new file mode 100644
index 00000000..ee2034bb
Binary files /dev/null and b/public/img/app/error in filter of expenses .png differ
diff --git a/public/img/app/should be expense category .png b/public/img/app/should be expense category .png
new file mode 100644
index 00000000..5e7e36e0
Binary files /dev/null and b/public/img/app/should be expense category .png differ
diff --git a/public/img/illustrations/02.png b/public/img/illustrations/02.png
new file mode 100644
index 00000000..dba19e98
Binary files /dev/null and b/public/img/illustrations/02.png differ
diff --git a/public/img/illustrations/03.png b/public/img/illustrations/03.png
new file mode 100644
index 00000000..45d19881
Binary files /dev/null and b/public/img/illustrations/03.png differ
diff --git a/public/img/illustrations/gap between grid header and message.png b/public/img/illustrations/gap between grid header and message.png
new file mode 100644
index 00000000..9461a532
Binary files /dev/null and b/public/img/illustrations/gap between grid header and message.png differ
diff --git a/public/img/illustrations/payment request.png b/public/img/illustrations/payment request.png
new file mode 100644
index 00000000..8d8a289b
Binary files /dev/null and b/public/img/illustrations/payment request.png differ
diff --git a/public/img/illustrations/prom-min.webp b/public/img/illustrations/prom-min.webp
new file mode 100644
index 00000000..0cccb84b
Binary files /dev/null and b/public/img/illustrations/prom-min.webp differ
diff --git a/src/components/common/DatePicker.jsx b/src/components/common/DatePicker.jsx
index d00b6329..9a3890fa 100644
--- a/src/components/common/DatePicker.jsx
+++ b/src/components/common/DatePicker.jsx
@@ -9,6 +9,7 @@ const DatePicker = ({
   allowText = false,
   maxDate,
   minDate,
+  disabled = false,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -64,6 +65,7 @@ const DatePicker = ({
         }}
         readOnly={!allowText}
         autoComplete="off"
+        disabled={disabled}
       />
 
       <span
diff --git a/src/components/common/InputSuggestion.jsx b/src/components/common/InputSuggestion.jsx
index de5579f4..5f6a8c52 100644
--- a/src/components/common/InputSuggestion.jsx
+++ b/src/components/common/InputSuggestion.jsx
@@ -5,6 +5,7 @@ const InputSuggestions = ({
   value,
   onChange,
   error,
+  disabled=false
 }) => {
   const [filteredList, setFilteredList] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
@@ -34,6 +35,7 @@ const InputSuggestions = ({
         onFocus={() => {
           if (value) setShowSuggestions(true);
         }}
+        disabled={disabled}
       />
       {showSuggestions && filteredList.length > 0 && (
         <ul
diff --git a/src/layouts/AuthLayout.jsx b/src/layouts/AuthLayout.jsx
index fd123428..346fdec6 100644
--- a/src/layouts/AuthLayout.jsx
+++ b/src/layouts/AuthLayout.jsx
@@ -17,20 +17,47 @@ export const queryClient = new QueryClient({
 const AuthLayout = () => {
   return (
     // <div className="login-box">
-    <div className="authentication-wrapper authentication-cover">
-      <Link
+    <div className="authentication-wrapper authentication-cover ">
+      <div
+        className="position-fixed "
+        style={{ background: "white", width: "65%", zIndex: "100" }}
+      >
+        {" "}
+        <nav
+          class="navbar navbar-light ms-10 w-auto justify-content-start"
+          style={{ opacity: "100%" }}
+        >
+          <a class="navbar-brand" href="/">
+            Home
+          </a>
+          <a class="navbar-brand" href="/#landingFeatures">
+            Features
+          </a>
+          <a class="navbar-brand" href="/#landingPricing">
+            Pricing
+          </a>
+          <a class="navbar-brand" href="/#landingFAQ">
+            FAQ
+          </a>
+          <a class="navbar-brand" href="/#sectionBlog">
+            Blogs
+          </a>
+          <a class="navbar-brand" href="/#landingCTA">
+            Contact Us
+          </a>
+        </nav>{" "}
+      </div>
+
+      {/* <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"
+        className="app-brand-link gap-2 position-fixed mt-10 ms-5"
       >
-        {/* <span className="app-brand-logo rounded-circle ">
-          <img
-            src="/img/brand/marco.png"
-            alt="marco-logo"
-            className="app-brand-logo-login"
-          />
-        </span> */}
-      </Link>
+        <h5>
+          {" "}
+          <i class="bx bx-left-arrow-circle"></i> Home
+        </h5>
+      </Link> */}
       <Outlet />
     </div>
     // </div>
diff --git a/src/pages/Home/LandingPage.css b/src/pages/Home/LandingPage.css
index b449465c..16c8dbbc 100644
--- a/src/pages/Home/LandingPage.css
+++ b/src/pages/Home/LandingPage.css
@@ -75,7 +75,7 @@ nav.layout-navbar .navbar.landing-navbar {
   --bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68);
   border: 2px solid var(--bs-front-navbar-border-color);
   background-color: var(--bs-front-navbar-bg);
-  margin-block-start: 1rem;
+  margin-block-start: 0rem;
   padding-block: 0.614rem;
   transform: unset;
   transition: all 0.2s ease-in-out;
diff --git a/src/pages/Home/SubscriptionPlans.jsx b/src/pages/Home/SubscriptionPlans.jsx
index 3310ed43..8e7a736a 100644
--- a/src/pages/Home/SubscriptionPlans.jsx
+++ b/src/pages/Home/SubscriptionPlans.jsx
@@ -58,7 +58,7 @@ const SubscriptionPlans = () => {
             <PlanCardSkeleton />
             <PlanCardSkeleton />
           </>
-        ) : data.length === 0 ? (
+        ) : data?.length === 0 ? (
           <div className="text-center">No plans found</div>
         ) : isError ? (
           <div className="text-start bg-light">
diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index 4431bf25..6934b2e7 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -87,10 +87,10 @@ const LoginPage = () => {
   }, []);
 
   return (
-    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
-      <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
+    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-top  p-4 p-sm-5 bg-gray-60">
+      <div className="w-100 mt-10" style={{ maxWidth: 420, margin: "0 auto" }}>
         <Link aria-label="Go to Home Page" to="/">
-          <span class="app-brand-logo rounded-circle app-brand-logo-border">
+          <span class="app-brand-logo rounded-circle">
             <img src="/img/brand/marco.png" width="70" />
           </span>
           <br />
diff --git a/src/pages/authentication/MainLogin.css b/src/pages/authentication/MainLogin.css
new file mode 100644
index 00000000..e5e51776
--- /dev/null
+++ b/src/pages/authentication/MainLogin.css
@@ -0,0 +1,95 @@
+.display-header {
+  padding: 0px;
+  margin: 0px;
+  font-family: "Poppins", sans-serif;
+  color: #00324c;
+  font-size: 35px;
+  font-weight: 300;
+  line-height: 45px;
+  padding-bottom: 20px;
+}
+
+.display-title {
+  padding: 0px;
+  margin: 0px;
+  font-family: "Poppins", sans-serif;
+  color: #00324c;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 45px;
+  padding-bottom: 20px;
+}
+
+.display-body {
+  font-size: larger;
+  padding: 0px;
+  margin: 0px;
+  font-family: "Poppins", sans-serif;
+  color: #687377;
+  font-size: 16px;
+  font-weight: 300;
+}
+ul {
+  font-size: 16px;
+  font-weight: 300;
+  list-style-type: disc;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  padding-inline-start: 40px;
+  unicode-bidi: isolate;
+}
+
+ul li {
+  padding: 10px 10px 10px 0;
+}
+
+li {
+  unicode-bidi: isolate;
+  margin: 0px;
+  display: list-item;
+}
+.ul.more-features-list {
+  max-width: 430px;
+  padding: 10px 0 0 0;
+  display: block;
+}
+ul.more-features-list {
+  display: block;
+
+  position: relative;
+  margin-left: 10px;
+}
+
+.list-item {
+  border-bottom: 1px #d6d7d7 solid;
+}
+
+.autoplay-progress {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: var(--swiper-theme-color);
+}
+
+.autoplay-progress svg {
+  --progress: 0;
+  position: absolute;
+  left: 0;
+  top: 0px;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  stroke-width: 4px;
+  stroke: var(--swiper-theme-color);
+  fill: none;
+  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
+  stroke-dasharray: 125.6;
+  transform: rotate(-90deg);
+}
diff --git a/src/pages/authentication/MainLogin.jsx b/src/pages/authentication/MainLogin.jsx
index 03575f40..271770dc 100644
--- a/src/pages/authentication/MainLogin.jsx
+++ b/src/pages/authentication/MainLogin.jsx
@@ -1,19 +1,249 @@
-import React from "react";
+import { React, useRef } from "react";
 import LoginPage from "./LoginPage";
+import "./MainLogin.css";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
 const MainLogin = () => {
+  const progressCircle = useRef(null);
+  const progressContent = useRef(null);
+  const onAutoplayTimeLeft = (s, time, progress) => {
+    progressCircle.current.style.setProperty("--progress", 1 - progress);
+    progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
+  };
   return (
     <>
       <div className="authentication-inner row m-0">
-        <div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
-          <div className="w-100 d-flex justify-content-center">
-            <img
-              src="/img/illustrations/worker_03.png"
-              className="img-fluid"
-              alt="Login image"
-              width="70%"
-              data-app-dark-img="illustrations/boy-with-rocket-dark.png"
-              data-app-light-img="illustrations/boy-with-rocket-light.png"
-            />
+        <div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
+          <div className="w-75 text-start" style={{ marginTop: "75px" }}>
+            <Swiper
+              spaceBetween={30}
+              centeredSlides={true}
+              rewind={true}
+              autoplay={{
+                delay: 3500,
+                disableOnInteraction: false,
+              }}
+              pagination={{
+                clickable: true,
+              }}
+              keyboard={{
+                enabled: true,
+              }}
+              navigation={false}
+              modules={[EffectFlip, Autoplay, Pagination, Navigation]}
+              className="mySwiper"
+              onSlideChange={() => {}}
+              onSwiper={(swiper) => {}}
+              onAutoplayTimeLeft={onAutoplayTimeLeft}
+            >
+              <div className="autoplay-progress" slot="container-end">
+                <svg viewBox="0 0 48 48" ref={progressCircle}>
+                  <circle cx="24" cy="24" r="20"></circle>
+                </svg>
+                <span ref={progressContent}></span>
+              </div>
+              <SwiperSlide>
+                <img src="/img/illustrations/03.png"></img>
+              </SwiperSlide>
+              <SwiperSlide>
+                <div className="text-start">
+                  <h1 className="display-header">
+                    Financial Management (Expense & Billing)
+                  </h1>
+                  <h4 className="display-title">
+                    Eliminate Paper Receipts. Take Control of Your Cash Flow.
+                  </h4>
+                  <p className="display-body">
+                    Managing field expenses is often messy, slow, and prone to
+                    errors. onfieldwork.com digitizes the entire process, giving
+                    you real-time financial visibility and control, whether your
+                    team is on a construction site or servicing a client's
+                    facility.
+                  </p>
+                  <ul className="more-features-list list-unstyled">
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Billing & Collection:</b> Generate accurate
+                          invoices based on logged project data and efficiently
+                          track the status of payments to speed up collection
+                          cycles.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Recurring Expenses:</b> Set up and manage
+                          automatic payments for predictable costs (like monthly
+                          equipment rentals or subscriptions) to ensure they are
+                          never missed.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Advance Payment Management:</b> A clear system for
+                          issuing and tracking advances given to field staff.
+                          Easily reconcile these advances against submitted
+                          expenses and salaries.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Petty Cash Management:</b> Maintain a secure,
+                          digital ledger for small, daily expenditures,
+                          replacing error-prone manual logbooks.
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide>
+                <div className="text-start">
+                  <h1 className="display-header">
+                    Flexible Project Approval/Review Workflow
+                  </h1>
+                  <h4 className="display-title">
+                    Streamline Decisions. Accelerate Project Completion.
+                  </h4>
+                  <p className="display-body">
+                    The speed of a project often hinges on the efficiency of the
+                    review and approval process. onfieldwork.com replaces
+                    bottlenecks and email chains with flexible, defined digital
+                    workflows that keep work moving forward.
+                  </p>
+                  <ul className="more-features-list list-unstyled">
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Customizable Approval Chains</b>
+                          <ul>
+                            <li>
+                              <b> Define Your Process:</b> Easily configure
+                              multi-step approval paths for any item: document
+                              submissions, expense reports, task completion
+                              sign-offs, or material requests.
+                            </li>
+                            <li>
+                              <b>Role-Based Routing:</b> Approvals are
+                              automatically routed to the correct individual
+                              based on their Role (e.g., Site Supervisor,
+                              Project Manager, Finance Admin) thanks to our
+                              Role-Based Access Control (RBAC).
+                            </li>
+                          </ul>{" "}
+                        </div>
+                      </div>
+                    </li>
+                    {/* <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Real-Time Notifications & Tracking</b>
+                          <ul>
+                            <li>
+                              <b>No More Delays:</b> Reviewers receive instant
+                              alerts via the Web and Mobile app when an item
+                              requires their attention.
+                            </li>
+                            <li>
+                              <b> Audit Trail:</b> Every action, comment,
+                              approval, or rejection is logged with a timestamp
+                              and user ID, providing a complete, non-repudiable
+                              history for every decision.
+                            </li>
+                          </ul>{" "}
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Seamless Task Handoff</b> Once a task or document
+                          is approved, the next action is immediately
+                          triggered—whether it's allocating a new work package
+                          to the team or initiating a purchase order.
+                        </div>
+                      </div>
+                    </li> */}
+                  </ul>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide>
+                <div className="text-start">
+                  <h1 className="display-header">Project Management</h1>
+                  <h4 className="display-title">
+                    End-to-End Project Lifecycle Management
+                  </h4>
+                  <p className="display-body">
+                    Stop using spreadsheets and start managing progress.
+                    onfieldwork.com is your single source of truth for all
+                    project activities.
+                  </p>
+                  <ul className="more-features-list list-unstyled">
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Create & Manage Multiple Projects:</b>Organize all
+                          current and upcoming work in a centralized dashboard.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Infrastructure Management:</b>Track and manage
+                          project resources, equipment, and key locations.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Team & Document Management:</b>Secure storage for
+                          drawings, contracts, and easy team setup.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Work Allocation & Tracking:</b>Implement
+                          customizable Approval/Review Workflows for tasks and
+                          documents.
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </SwiperSlide>
+            </Swiper>
           </div>
         </div>
         <LoginPage />