diff --git a/src/pages/Home/LandingPage.css b/src/pages/Home/LandingPage.css
index 26522e7d..09d0a51c 100644
--- a/src/pages/Home/LandingPage.css
+++ b/src/pages/Home/LandingPage.css
@@ -1,4 +1,10 @@
 /* Custom Styles */
+.custom-navbar {
+  background: #efefef;
+  transition: all 0.3s ease;
+  padding: 1rem 0;
+}
+
 .carousel-item {
   height: 100vh;
   min-height: 500px;
diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx
index d8eec31b..26dec7e1 100644
--- a/src/pages/Home/LandingPage.jsx
+++ b/src/pages/Home/LandingPage.jsx
@@ -1,6 +1,7 @@
 import "swiper/css";
 import "./LandingPage.css";
 
+import React, { useEffect } from "react";
 import DashboardImage from "/img/hero/bg-01.jpg";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
@@ -9,13 +10,10 @@ import SwaperSlideImages from "./SwaperSlideImages";
 const LandingPage = () => {
   return (
     <>
-      <nav
-        className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top"
-        style={{ background: "#efefef !important" }}
-      >
+      <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar">
         <div className="container-fluid px-5 w-100">
           <div className="row w-100">
-            <div className="col-md-auto">
+            <div className="col-md-auto d-flex justify-content-between align-items-center">
               <a className="navbar-brand fw-bold text-primary" href="#">
                 <span className="text-blue">OnField</span>
                 <span>Work</span>
@@ -26,19 +24,19 @@ const LandingPage = () => {
                 type="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#navbarNav"
+                aria-controls="navbarNav"
+                aria-expanded="false"
+                aria-label="Toggle navigation"
               >
                 <span className="navbar-toggler-icon"></span>
               </button>
             </div>
 
-            {/* <div className=" col-6 collapse navbar-collapse justify-content-center">
-              <ul className="navbar-nav"></ul>
-            </div> */}
             <div
-              className="d-flex collapse navbar-collapse justify-content-end  col-md-auto"
+              className="collapse navbar-collapse justify-content-end col-md-auto "
               id="navbarNav"
             >
-              <ul className="navbar-nav align-items-center ">
+              <ul className="navbar-nav">
                 <li className="nav-item">
                   <a className="nav-link" href="#">
                     Home
@@ -669,51 +667,54 @@ const LandingPage = () => {
       {/* <!-- Contact Section --> */}
       <section
         id="contact"
-        class="section-py  pt-5"
+        className="section-py  pt-5"
         style={{ background: "#49bf3c" }}
       >
         <div className="contact-section ">
-          <div class="row align-items-center">
-            <div class="col-lg-6 contact-img">
+          <div className="row align-items-center">
+            <div className="col-lg-6 contact-img">
               <img
                 src="/img/illustrations/contact-us.png"
                 alt="Contact Illustration"
               />
             </div>
-            <div class="col-lg-6 contact-text">
+            <div className="col-lg-6 contact-text">
               <h2>
-                Contact <span class="text-success">Us</span>
+                Contact <span className="text-success">Us</span>
               </h2>
               <p>
                 We’d love to hear from you! Whether you have a question about
                 features, pricing, or anything else — our team is ready to
                 answer all your queries.
               </p>
-              <div class="row g-4 ">
-                <div class="col-md-6 col-lg-12 col-xl-6">
-                  <div class="d-flex align-items-center">
-                    <div class="badge bg-label-primary rounded p-1_5 me-3">
-                      <i class="bx bx-envelope bx-lg"></i>
+              <div className="row g-4 ">
+                <div className="col-md-6 col-lg-12 col-xl-6">
+                  <div className="d-flex align-items-center">
+                    <div className="badge bg-label-primary rounded p-1_5 me-3">
+                      <i className="bx bx-envelope bx-lg"></i>
                     </div>
                     <div>
-                      <p class="mb-0 text-start">Email</p>
-                      <h6 class="mb-0 text-start">
-                        <a href="mailto:example@gmail.com" class="text-heading">
+                      <p className="mb-0 text-start">Email</p>
+                      <h6 className="mb-0 text-start">
+                        <a
+                          href="mailto:example@gmail.com"
+                          className="text-heading"
+                        >
                           sales@marcoaiot.com
                         </a>
                       </h6>
                     </div>
                   </div>
                 </div>
-                <div class="col-md-6 col-lg-12 col-xl-6">
-                  <div class="d-flex align-items-center">
-                    <div class="badge bg-label-success rounded p-1_5 me-3">
-                      <i class="bx bx-phone-call bx-lg"></i>
+                <div className="col-md-6 col-lg-12 col-xl-6">
+                  <div className="d-flex align-items-center">
+                    <div className="badge bg-label-success rounded p-1_5 me-3">
+                      <i className="bx bx-phone-call bx-lg"></i>
                     </div>
                     <div className="">
-                      <p class="mb-0 text-start">Phone</p>
-                      <h6 class="mb-0 text-start">
-                        <a href="tel:+1234-568-963" class="text-heading">
+                      <p className="mb-0 text-start">Phone</p>
+                      <h6 className="mb-0 text-start">
+                        <a href="tel:+1234-568-963" className="text-heading">
                           +91 70288 83755
                         </a>
                       </h6>
@@ -722,7 +723,7 @@ const LandingPage = () => {
                 </div>
               </div>
               <div className="mt-5 pt-5">
-                <a href="#" class="btn-green">
+                <a href="#" className="btn-green">
                   Know More
                 </a>
               </div>