diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..250032a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,6 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5501,
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 462a6b9..43b85cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "ionicons": "^7.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.26.1",
+        "react-router-dom": "^6.26.2",
         "react-scripts": "^5.0.1",
         "react-typing-effect": "^2.0.5",
         "web-vitals": "^2.1.4"
@@ -18502,7 +18502,6 @@
       "version": "6.26.2",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
       "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
-      "license": "MIT",
       "dependencies": {
         "@remix-run/router": "1.19.2",
         "react-router": "6.26.2"
diff --git a/package.json b/package.json
index 392acb7..4f40661 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "ionicons": "^7.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "^5.0.1",
     "react-typing-effect": "^2.0.5",
     "web-vitals": "^2.1.4"
diff --git a/src/App.js b/src/App.js
index eaf1cec..c7329a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,24 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Navbar from "./Navbar";
 import Home from './Home';
 import ScrollIndicator from './ScrollIndicator';
-import PreloaderContainer from './PreloaderContainer.js'; // For Preloader
+import PreloaderContainer from './PreloaderContainer'; // For Preloader
 import './style.css';
-import './script.js';
-import './preloader.js';
-import './TopBar.js';
-
 
 function App() {
   return (
-    <div className="App">
-      <ScrollIndicator />
-      <PreloaderContainer>
-        <Home />
-      </PreloaderContainer>
-    </div>
+    <Router>
+      <div className="App">
+        <ScrollIndicator />
+        <PreloaderContainer>
+          <Navbar />
+          <Routes>
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </PreloaderContainer>
+      </div>
+    </Router>
   );
 }
 
diff --git a/src/Home.js b/src/Home.js
index 8448c07..b9348ee 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,15 +1,23 @@
 import React from "react";
 import ReactTypingEffect from "react-typing-effect";
 import Navbar from "./Navbar";
+
 const Home = () => {
   return (
     <div>
       <Navbar />
       <main>
         <article>
-          <section className="hero text-center" aria-label="home" id="home">
+          <section
+            className="hero text-center"
+            aria-label="home"
+            id="home"
+          >
             <ul className="hero-slider" data-hero-slider>
-              <li className="slider-item active" data-hero-slider-item>
+              <li
+                className="slider-item active"
+                data-hero-slider-item
+              >
                 <div className="container">
                   <div className="slider-bg">
                     <img
@@ -27,14 +35,6 @@ const Home = () => {
                   >
                     Classic Elegance
                   </p>
-                  {/* <h1
-                    className="display-1 hero-title slider-reveal "
-                    style={{ fontFamily: "sans-mono", fontWeight: "lighter" }}
-                  >
-                    Create Your Space <br />
-                    that breathe creativity
-                  </h1> */}
-
                   <h1 className="hero-title typing-effect">
                     <ReactTypingEffect
                       text={[
@@ -51,9 +51,15 @@ const Home = () => {
                   <p className="body-2 hero-text slider-reveal">
                     Best working environment that suits your business needs.
                   </p>
-                  <a href="#" className="btn btn-primary slider-reveal">
+                  <a
+                    href="#"
+                    className="btn btn-primary slider-reveal"
+                  >
                     <span className="text text-1">Make Your Space</span>
-                    <span className="text text-2" aria-hidden="true">
+                    <span
+                      className="text text-2"
+                      aria-hidden="true"
+                    >
                       Make Your Space
                     </span>
                   </a>
@@ -80,9 +86,15 @@ const Home = () => {
                   Spaces that are occupied by Corporates and Start ups, designed
                   with your business in mind
                 </p>
-                <a href="#" className="btn btn-primary slider-reveal">
+                <a
+                  href="#"
+                  className="btn btn-primary slider-reveal"
+                >
                   <span className="text text-1">Make Your Space</span>
-                  <span className="text text-2" aria-hidden="true">
+                  <span
+                    className="text text-2"
+                    aria-hidden="true"
+                  >
                     Make Your Space
                   </span>
                 </a>
@@ -108,9 +120,15 @@ const Home = () => {
                   Come with your team & experience the joy of inspiring office
                   design.
                 </p>
-                <a href="#" className="btn btn-primary slider-reveal">
+                <a
+                  href="#"
+                  className="btn btn-primary slider-reveal"
+                >
                   <span className="text text-1">Make Your Space</span>
-                  <span className="text text-2" aria-hidden="true">
+                  <span
+                    className="text text-2"
+                    aria-hidden="true"
+                  >
                     Make Your Space
                   </span>
                 </a>
@@ -130,7 +148,10 @@ const Home = () => {
             >
               <ion-icon name="chevron-forward"></ion-icon>
             </button>
-            <a href="indexLayout.html" className="hero-btn has-after">
+            <a
+              href="indexLayout.html"
+              className="hero-btn has-after"
+            >
               <img
                 src="./images/hero-icon.png"
                 width="48"
@@ -214,7 +235,7 @@ const Home = () => {
                   <div className="service-card">
                     <a href="#" className="has-before hover:shine">
                       <figure
-                        className="card-banner img-holder"
+                        className="card -banner img-holder"
                         style={{ "--width": 285, "--height": 336 }}
                       >
                         <img
@@ -247,7 +268,10 @@ const Home = () => {
           >
             <div className="container">
               <div className="about-content">
-                <p className="label-2 section-subtitle" id="about-label">
+                <p
+                  className="label-2 section-subtitle"
+                  id="about-label"
+                >
                   Our Story
                 </p>
                 <h2 className="headline-1 section-title">
@@ -271,7 +295,10 @@ const Home = () => {
                 </a>
                 <a href="#" className="btn btn-primary">
                   <span className="text text-1">Read More</span>
-                  <span className="text text-2" aria-hidden="true">
+                  <span
+                    className="text text-2"
+                    aria-hidden="true"
+                  >
                     Read More
                   </span>
                 </a>
@@ -328,7 +355,10 @@ const Home = () => {
               <div className="glass-box">
                 <p
                   className="headline-2 testi-text"
-                  style={{ color: "rgb(255, 255, 255)", fontSize: "30px" }}
+                  style={{
+                    color: "rgb(255, 255, 255)",
+                    fontSize: "30px",
+                  }}
                 >
                   Creativity flows freely at 603 The Coworking Space. As a
                   content creator, I find the ambiance truly inspiring. Being
@@ -355,9 +385,14 @@ const Home = () => {
               </div>
             </div>
           </section>
-          <section className="section event bg-black-10" aria-label="event">
+          <section
+            className="section event bg-black-10"
+            aria-label="event"
+          >
             <div className="container">
-              <p className="section-subtitle label-2 text-center">
+              <p
+                className="section-subtitle label-2 text-center"
+              >
                 Recent Updates
               </p>
               <h2 className="section-title headline-1 text-center">
@@ -387,10 +422,14 @@ const Home = () => {
                       </time>
                     </div>
                     <div className="card-content">
-                      <p className="card-subtitle label-2 text-center">
+                      <p
+                        className="card-subtitle label-2 text-center"
+                      >
                         Main Office
                       </p>
-                      <h3 className="card-title title-2 text-center">
+                      <h3
+                        className="card-title title-2 text-center"
+                      >
                         The Main Office is the Place Which has to be designed to
                         its best.
                       </h3>
@@ -420,10 +459,14 @@ const Home = () => {
                       </time>
                     </div>
                     <div className="card-content">
-                      <p className="card-subtitle label-2 text-center">
+                      <p
+                        className="card-subtitle label-2 text-center"
+                      >
                         Main Cabinete
                       </p>
-                      <h3 className="card-title title-2 text-center">
+                      <h3
+                        className="card-title title-2 text-center"
+                      >
                         Cabinait is the place for best productive work.
                       </h3>
                     </div>
@@ -452,10 +495,14 @@ const Home = () => {
                       </time>
                     </div>
                     <div className="card-content">
-                      <p className="card-subtitle label-2 text-center">
+                      <p
+                        className="card-subtitle label-2 text-center"
+                      >
                         Main Centre
                       </p>
-                      <h3 className="card-title title-2 text-center">
+                      <h3
+                        className="card-title title-2 text-center"
+                      >
                         Main Center is the place for best productive work.
                       </h3>
                     </div>
@@ -465,7 +512,10 @@ const Home = () => {
 
               <a href="#" className="btn btn-primary">
                 <span className="text text-1">Check Out BOQ</span>
-                <span className="text text-2" aria-hidden="true">
+                <span
+                  className="text text-2"
+                  aria-hidden="true"
+                >
                   Check Out BOQ
                 </span>
               </a>
@@ -514,7 +564,10 @@ const Home = () => {
                 >
                   booking@grilli.com
                 </a>
-                <a href="tel:+88123123456" className="body-4 contact-link">
+                <a
+                  href="tel:+88123123456"
+                  className="body-4 contact-link"
+                >
                   Booking Request : +88-123-123456
                 </a>
                 <p className="body-4">Open : 09:00 am - 01:00 pm</p>
@@ -538,9 +591,15 @@ const Home = () => {
                       className="input-field"
                     />
                   </div>
-                  <button type="submit" className="btn btn-secondary">
+                  <button
+                    type="submit"
+                    className="btn btn-secondary"
+                  >
                     <span className="text text-1">Subscribe</span>
-                    <span className="text text-2" aria-hidden="true">
+                    <span
+                      className="text text-2"
+                      aria-hidden="true"
+                    >
                       Subscribe
                     </span>
                   </button>
@@ -548,54 +607,84 @@ const Home = () => {
               </div>
               <ul className="footer-list">
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Home
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Menus
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     About Us
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Our Chefs
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Contact
                   </a>
                 </li>
               </ul>
               <ul className="footer-list">
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Facebook
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Instagram
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Twitter
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  < a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Youtube
                   </a>
                 </li>
                 <li>
-                  <a href="#" className="label-2 footer-link hover-underline">
+                  <a
+                    href="#"
+                    className="label-2 footer-link hover-underline"
+                  >
                     Google Map
                   </a>
                 </li>
@@ -648,4 +737,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/Navbar.js b/src/Navbar.js
index 5cfcce6..f2c10e5 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 
 function Navbar() {
   const [prevScrollPos, setPrevScrollPos] = useState(window.scrollY);
@@ -6,6 +7,8 @@ function Navbar() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  const navigate = useNavigate(); // Initialize useNavigate hook
+
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollPos = window.scrollY;
@@ -33,7 +36,6 @@ function Navbar() {
       className={`header ${hidden ? "hide" : ""} ${
         isScrolled ? "navbar-scrolled" : "navbar-transparent"
       }`}
-      data-header
     >
       <div className="top_navbar_style">
         <p>
@@ -61,7 +63,7 @@ function Navbar() {
             className="logohover"
           />
         </a>
-        <nav className={`navbar ${isMenuOpen ? 'active' : ''}`} data-navbar>
+        <nav className={`navbar ${isMenuOpen ? 'active' : ''}`}>
           <button
             className="close-btn"
             aria-label="close menu"
@@ -98,7 +100,7 @@ function Navbar() {
             </li>
             <li className="navbar-item">
               <a href="#" className="navbar-link hover-underline">
-                <div className="separator"></div>
+                <div className="separator "></div>
                 <span className="span">Images</span>
               </a>
             </li>
@@ -147,8 +149,6 @@ function Navbar() {
         <div 
           className={`overlay ${isMenuOpen ? 'active' : ''}`} 
           onClick={toggleMenu}
-          data-nav-toggler 
-          data-overlay
         ></div>
       </div>
     </header>