diff --git a/src/App.css b/src/App.css
index 396a1902..c591bb07 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,6 +5,14 @@
   font-family: "Montserrat", sans-serif;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 .placeholder-text {
   @apply bg-primaryGreen rounded-2xl p-3 text-xs placeholder:text-[#4C4949];
 }
+
+.mb-0{
+  margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/src/components/AboutUs-section/AboutUs-section.css b/src/components/AboutUs-section/AboutUs-section.css
index 54707c5a..da76aa1e 100644
--- a/src/components/AboutUs-section/AboutUs-section.css
+++ b/src/components/AboutUs-section/AboutUs-section.css
@@ -28,6 +28,10 @@
   line-height: 28.38px;
 }
 
+#AboutUs {
+margin-bottom: 5rem;
+}
+
 @media (max-width:768px) {
   .aboutUs-section .row .paragraph {
     max-width: 550px;
diff --git a/src/components/AboutUs-section/AboutUs.jsx b/src/components/AboutUs-section/AboutUs.jsx
index 459775ac..0143fe28 100644
--- a/src/components/AboutUs-section/AboutUs.jsx
+++ b/src/components/AboutUs-section/AboutUs.jsx
@@ -2,7 +2,8 @@ import rentBoardImg from "../.././assets/Images/rent-board.png";
 import "./AboutUs-section.css";
 const AboutUs = () => {
   return (
-    <div id="AboutUs" className="aboutUs-section">
+    <div className="aboutUs-section">
+      <div id="AboutUs"></div>
       <span className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center pt-10">About Us</span>
       <div className=" row flex flex-col justify-center items-center md:flex-row">
         <img
diff --git a/src/components/Contact-section/Contact-section.css b/src/components/Contact-section/Contact-section.css
new file mode 100644
index 00000000..3ccddbfb
--- /dev/null
+++ b/src/components/Contact-section/Contact-section.css
@@ -0,0 +1,3 @@
+#ContactUs {
+    margin-bottom: 5rem;
+}
\ No newline at end of file
diff --git a/src/components/Contact-section/Contact.jsx b/src/components/Contact-section/Contact.jsx
index 6d23f857..fe28bff2 100644
--- a/src/components/Contact-section/Contact.jsx
+++ b/src/components/Contact-section/Contact.jsx
@@ -1,10 +1,12 @@
 import ContactForm from "./ContactForm";
 import GoogleMap from './GoogleMap';
+import "./Contact-section.css";
 
 const Contact = () => {
   return (
     <>
-      <header id="ContactUs" className="flex justify-center align-middle my-20">
+    <div id="ContactUs"></div>
+      <header className="flex justify-center align-middle my-20 mt-0">
         <h1 className="text-5xl font-bold tracking-wider text-text-black font-monsterrat">
           Contact Us
         </h1>
diff --git a/src/components/Header-section/Header-section.css b/src/components/Header-section/Header-section.css
index 0606aaaa..bcb37624 100644
--- a/src/components/Header-section/Header-section.css
+++ b/src/components/Header-section/Header-section.css
@@ -6,6 +6,7 @@
   background-color: #262626;
   background-size: cover;
   position: relative;
+  margin-bottom: 0;
 }
 
 .header-section li {
diff --git a/src/components/Header-section/Header.jsx b/src/components/Header-section/Header.jsx
index 399dc784..e91e01f2 100644
--- a/src/components/Header-section/Header.jsx
+++ b/src/components/Header-section/Header.jsx
@@ -6,6 +6,7 @@ const Header = () => {
         <>
             <div className="header-section mb-[80px]">
                 <Navbar />
+                <div id='home'></div>
                 <div className="header-text">
                     <h1>Welcome to <span>Rentalog</span></h1>
                     <p>Rentalog is the ultimate solution for landlords looking to simplify their rent management process. Keep track of your renters personal details, their payment history, and much more with ease.</p>
diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
index c176017a..1b5b4e98 100644
--- a/src/components/Header-section/Navbar.jsx
+++ b/src/components/Header-section/Navbar.jsx
@@ -56,10 +56,10 @@ const Navbar = () => {
             <div className="mt-4 h-[2px] w-600 bg-textWhite rounded-full"></div>
 
             <div className="flex flex-col gap-8 justify-center items-center mt-10">
-              <a href="/" aria-current="page"><div className="text-textWhite" onClick={() => { setShowMenu('')}}>HOME</div></a>
+              <a href="#home" aria-current="page"><div className="text-textWhite" onClick={() => { setShowMenu('')}}>HOME</div></a>
+              <a href="#Service" aria-current="page"><div className="text-textWhite" onClick={() => { setShowMenu('')}}>RENTALS</div></a>
               <a href="#AboutUs" aria-current="page"><div className="text-textWhite" onClick={() => { setShowMenu('')}}>ABOUT</div></a>
               <a href="#ContactUs" aria-current="page"><div className="text-textWhite" onClick={() => { setShowMenu('')}}>CONTACT</div></a>
-              <a href="#Service" aria-current="page"><div className="text-textWhite" onClick={() => { setShowMenu('')}}>RENTALS</div></a>
               <div className="text-gray-dark">
                 <Link to="/login">
                   <button
@@ -135,10 +135,15 @@ const Navbar = () => {
           >
             <ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
               <li>
-                <a href="/" aria-current="page" className="hover:text-xl hover:shadow-lg transition duration-300">
+                <a href="#home" aria-current="page" className="hover:text-xl hover:shadow-lg transition duration-300">
                   HOME
                 </a>
               </li>
+              <li>
+                <a href="#Service" aria-current="page" className="hover:text-xl hover:shadow-md transition duration-300">
+                  RENTALS
+                </a>
+              </li>
               <li>
                 <a href="#AboutUs" aria-current="page" className="hover:text-xl hover:shadow-md transition duration-300">
                   ABOUT
@@ -149,11 +154,6 @@ const Navbar = () => {
                   CONTACT
                 </a>
               </li>
-              <li>
-                <a href="#Service" aria-current="page" className="hover:text-xl hover:shadow-md transition duration-300">
-                  RENTALS
-                </a>
-              </li>
             </ul>
           </div>
 
diff --git a/src/components/Services-section/Services-section.css b/src/components/Services-section/Services-section.css
new file mode 100644
index 00000000..cff44e37
--- /dev/null
+++ b/src/components/Services-section/Services-section.css
@@ -0,0 +1,3 @@
+#Service {
+    margin-bottom: 80px;
+}
\ No newline at end of file
diff --git a/src/components/Services-section/Services-section.jsx b/src/components/Services-section/Services-section.jsx
index b8de4ca4..fdcfd3fa 100644
--- a/src/components/Services-section/Services-section.jsx
+++ b/src/components/Services-section/Services-section.jsx
@@ -2,10 +2,13 @@ import ServicesCard from "./ServicesCard";
 import ourServices from "./services";
 import ServicesAvailableIn from "./ServicesAvailableIn";
 import placeName from "./placeName";
+import './Services-section.css'
+
 const Services = () => {
   return (
     <>
-      <h1 id="Service" className=" text-4xl md:text-5xl font-semibold text-[#312F2F] text-center pt-10">
+    <div id="Service"></div>
+      <h1 className=" text-4xl md:text-5xl font-semibold text-[#312F2F] text-center pt-10">
         Our Services Includes
       </h1>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-10 my-10 md:mx-36 sm:mx-24 mx-16">
@@ -15,7 +18,7 @@ const Services = () => {
           })
         }
       </div>
-      <div className="bg-[#D1F2EB] my-20 ">
+      <div className="bg-[#D1F2EB] my-20 mb-0">
         <h1 className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center py-10">
           Our Services are available in
         </h1>