diff --git a/css/index.css b/css/index.css
deleted file mode 100644
index 0b615ce..0000000
--- a/css/index.css
+++ /dev/null
@@ -1,634 +0,0 @@
-/*
-* Prefixed by https://autoprefixer.github.io
-* PostCSS: v8.4.14,
-* Autoprefixer: v10.4.7
-* Browsers: last 4 version
-*/
-
-body{
-    top: 0;
-    margin: 0;
-    position: relative;
-    /* overflow: hidden; */
-}
-header{
-    background-color:#ff5200;
-    width: 100%;
-    height:50% !important;
-    color: white;
-    text-decoration: none;
-    margin: 0%;
-    padding: auto;
-}
-.nav-bar{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-        justify-content: space-around;
-    -webkit-box-align: right !important;
-        -ms-flex-align: right !important;
-            align-items: right !important;
-    width: 100%;
-    height: 20% !important;
-    /* padding: 10px; */
-    
-}
-.top-bar{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    -webkit-box-align: right;
-        -ms-flex-align: right;
-            align-items: right;
-    /* margin: 15px; */
-    margin-top: 30px;
-   
-}
-a{
-    text-decoration: none !important;
-    color: white;
-}
-.logo a img{
-    width: 90%;
-    height: 40%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    text-decoration: none;
-}
-.nav-options{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: right;
-        -ms-flex-pack: right;
-            justify-content: right;
-    right: 0;
-    gap: 30px;
-}
-.get-app{
-    height: 60px;
-    width: 150px;
-    text-align: center;
-    border: 1px solid rgb(255, 255, 255);
-    border-radius: 10px ;
-
-}
-.sign-in{
-    height: 59px;
-    width: 120px;
-    text-align: center;
-    background-color: black;
-    /* border: 1px solid rgb(255, 255, 255); */
-    border-radius: 10px ;
-}
-.section-1{
-    background-color: #ff5200;
-    color: white;
-    height: 700px;
-}
-.nav-down{
-    width: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.left-image .image{
-    width: 80%;
-    height: 50%;
-    left: 0;
-    margin-top: -30px;
-    /* position: relative; */  
-}
-.top-text-center h1{
-    margin-top: 2rem;
-    text-align: center;
-    width: 85%;
-    margin-top: -25%;
-    font-size: 50px;
-    /* font-family: Gilroy_Bold; */
-    font-weight: 700;
-    letter-spacing: -0.3px;
-    line-height: 56px;
-    top: 0;
-}
-.center-text-wrap{
-    display: flexbox;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    /* flex-wrap: nowrap; */
-}
-.image{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: right;
-        -ms-flex-pack: right;
-            justify-content: right;
-
-}
-.right-image .img{
-    width: 250px;
-    right:0;
-    margin-top: -35%;
-}
-
-.search-bar .input-location i {
-    font-size: 1.5rem;
-    margin-right: 0.5rem;
-}
-.search-bar{
-    margin: 2rem 0;
-    width: 100%;
-    height: 100%;
-    color: white;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    /* justify-content: space-around; */
-    text-align: center;
-    padding: 5px;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-.input-location input{
-    height: 54px;
-    width: 320px;
-    background-color: white;
-    border-radius: 10px;
-    border: none;
-    font-size: 20px;
-    padding: 10px;
-}
-.input-menu input{
-    height: 54px;
-    width: 450px;
-    background-color: white;
-    border-radius: 10px;
-    border: none;
-    font-size: 20px;
-    padding: 10px;
-}
-.menu-boxes{
-    margin-top:-80px;
-}
-.boxes{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    gap: 30px;
-
-}
-.specific a img{
-    height: 280px;
-    width: 250px;
-    background-color: rgb(255, 255, 255);
-    border-radius: 15%;
-    color: gray;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    -webkit-backface-visibility: visible;
-            backface-visibility: visible;
-    -ms-flex-wrap: nowrap;
-        flex-wrap: nowrap;
-    overflow: scroll;
-}
-.section-2{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-        justify-content: space-around;
-    height: 600px;
-    width: 100%;
-}
-.container{
-    height: 100%;
-    width: 100%;
-    display: flex !important;
-    justify-content: space-around;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-.dishes{
-    height: 100%;
-    width: 90%;
-    display: flex !important;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: center;
-    /* overflow-x:scroll; */
-    overflow-y: hidden;
-    scroll-behavior: smooth;
-    
-}
- .menu-dishes{
-    height: 45%;
-    width: 80%;
-    display: flex;
-    /* overflow-x:scroll; */
-    overflow-y: hidden;
-    scroll-behavior: smooth;  
-}
- .menu-dishes img{
-    height: 190px;
-    width: 190px;
-} 
-.dishes-wrap h1{
-    text-align: center;
-    font-size: 30px;
-    padding: 15px;
-}
-.section-3{
-    margin: 30px;
-}
-.section-3 img{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-        justify-content: space-around;
-    height: 100%;
-    width: 100%;
-}
-.instamart{
-    height: 100%;
-    width: 90%;
-    display: flex !important;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 10px;
-    align-items: center;
-    /* overflow-x:scroll; */
-    overflow-y: hidden;
-    scroll-behavior: smooth;
-}
-.menu-instamart{
-    height: 45%;
-    width: 80%;
-    display: flex;
-    gap: 15px;
-    overflow-x:scroll;
-    overflow-y: hidden;
-    scroll-behavior: smooth;  
-}
-.menu-instamart img {
-    color: black;
-    height: 190px;
-    width: 190px;
-}
-.instamart-wrap h1{
-    text-align: center;
-    font-size: 30px;
-    padding: 15px;
-}
-.section-5 img{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-pack: distribute;
-        justify-content: space-around;
-    height: 100%;
-    width: 100%;
-}
-.insamart-text{
-    color: #000;
-}
-
-footer {
-    background-color: #ffffff;
-    padding: 40px 20px;
-    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
-  }
-  .footer-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  .footer-column {
-    flex: 1 1 200px;
-    margin: 10px;
-  }
-  .footer-column img{
-    background-color: #ff5200;
-    padding: 20px;
-    border: 2px solid orangered;
-    border-radius: 10px;
-  }
-  .footer-column h4 {
-    margin-bottom: 15px;
-    font-size: 16px;
-    color: #333;
-  }
-  .footer-column ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  .footer-column ul li {
-    margin-bottom: 10px;
-  }
-  .footer-column ul li a {
-    text-decoration: none;
-    color: #666;
-    font-size: 14px;
-  }
-  .footer-column ul li a:hover {
-    color: #ff5722;
-  }
-  .footer-social {
-    display: flex;
-    gap: 10px;
-    margin-top: 20px;
-  }
-  .footer-social a {
-    text-decoration: none;
-    font-size: 20px;
-    color: #666;
-  }
-  .footer-social a:hover {
-    color: #ff5722;
-  }
-  .footer-legal {
-    text-align: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: #999;
-  }
-  @media (max-width: 768px) {
-    .footer-column {
-      flex: 1 1 100%;
-      text-align: center;
-    }
-  }
-
-
-/* General Reset */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-  
-  body {
-    font-family: Arial, sans-serif;
-  }
-  
-  /* Navbar Styling */
-  .navbar {
-    background-color: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 15px 20px;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    width: 100%;
-  }
-  
-  .navbar-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  /* Left Section Styling */
-  .navbar-left {
-    display: flex;
-    align-items: center;
-  }
-  
-  .logo {
-    height: 40px;
-    margin-right: 20px;
-    border-radius: 20px;
-  }
-  
-  .dropdown {
-    position: relative;
-    font-size: 14px;
-    color: #333;
-    cursor: pointer;
-  }
-  
-  .dropdown span {
-    display: flex;
-    align-items: center;
-  }
-  
-  .dropdown i {
-    margin-left: 5px;
-  }
-  
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background-color: white;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 10px 0;
-    border-radius: 4px;
-    min-width: 150px;
-    z-index: 10;
-  }
-  
-  .dropdown-content a {
-    display: block;
-    padding: 10px 15px;
-    color: #333;
-    text-decoration: none;
-    font-size: 14px;
-  }
-  
-  .dropdown-content a:hover {
-    background-color: #f5f5f5;
-  }
-  
-  .dropdown:hover .dropdown-content {
-    display: block;
-  }
-  
-  /* Right Section Styling */
-  .navbar-right {
-    display: flex;
-    gap: 20px;
-    align-items: center;
-  }
-  
-  .navbar-link {
-    color: #333;
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 500;
-    margin-left: 20px;
-    display: flex;
-    align-items: center;
-    transition: all 0.3s ease;
-  }
-  
-  .navbar-link i {
-    margin-right: 5px;
-    font-size: 16px;
-  }
-  
-  .navbar-link:hover {
-    color: #fc8019;
-  }
-  
-  .new-badge {
-    background-color: #fc8019;
-    color: white;
-    font-size: 10px;
-    padding: 2px 6px;
-    border-radius: 12px;
-    margin-left: 5px;
-  }
-  
-  .cart {
-    position: relative;
-  }
-  
-  .cart-count {
-    position: absolute;
-    top: -3px;
-    right: -22px;
-    background-color: #fc8019;
-    color: white;
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 50%;
-  }
-  
-  /* Responsive Design */
-  @media (max-width: 768px) {
-    .navbar-container {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  
-    .navbar-right {
-      flex-wrap: wrap;
-      margin-top: 10px;
-    }
-  
-    .navbar-link {
-      margin-left: 0;
-      margin-right: 15px;
-      margin-bottom: 10px;
-    }
-  
-    .dropdown-content {
-      min-width: 100%;
-    }
-  }
-  
-  .collection-cards {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    justify-content: center;
-    padding: 20px;
-}
-
-.collection-cards .card {
-    background-color: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s, box-shadow 0.3s;
-    width: 300px;
-    height: 400px; /* Set a fixed height for the card */
-    padding: 0; /* Remove padding to ensure consistent dimensions */
-    overflow: hidden; /* Ensure content doesn't overflow */
-    text-align: center;
-}
-
-.collection-cards .card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.collection-cards .card h3 {
-    color: #ff5200;
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-.collection-cards .card p {
-    color: #333333;
-    font-size: 16px;
-    margin-bottom: 20px;
-}
-
-.collection-cards .card a {
-    color: #ffffff;
-    background-color: #ff5200;
-    padding: 10px 20px;
-    border-radius: 5px;
-    text-decoration: none;
-    transition: background-color 0.3s;
-}
-
-.collection-cards .card a:hover {
-    background-color: #e64a00;
-}
-
-.collection-cards .card img {
-    width: 100%;
-    height: 200px; /* Set a fixed height for the image */
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    object-fit: cover;
-}
-
-.collection-cards .card .card-content {
-    padding: 20px; /* Add padding to the card content */
-    height: calc(100% - 200px); /* Adjust height to fit within the card */
-    box-sizing: border-box; /* Ensure padding doesn't affect overall dimensions */
-}
-.collections {
-    text-align: center;
-    padding: 20px;
-}
-
-.collections h3 {
-    font-size: 32px;
-    color: #333333;
-    margin-bottom: 10px;
-}
-
-.collections p {
-    font-size: 18px;
-    color: #666666;
-    margin-bottom: 20px;
-}
-
diff --git a/css/instamart.css b/css/instamart.css
deleted file mode 100644
index a718fc4..0000000
--- a/css/instamart.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.top_menu{
-    width: 100%;
-    height: 15%;
-}
-body{
-    background-color: black;
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5bf25c6..8752423 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "license": "ISC",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@vercel/speed-insights": "^1.1.0",
         "bootstrap": "^5.3.3",
         "cra-template": "1.2.0",
@@ -19,7 +21,7 @@
         "react-dom": "^19.0.0",
         "react-fontawesome": "^1.7.1",
         "react-icons": "^5.4.0",
-        "react-router-dom": "^7.0.2",
+        "react-router-dom": "^7.1.1",
         "react-scripts": "^5.0.1",
         "web-vitals": "^4.2.4",
         "webpack": "^5.97.1"
@@ -2464,6 +2466,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-free": {
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
@@ -2473,6 +2484,44 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
diff --git a/package.json b/package.json
index aaa4375..b42496c 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@vercel/speed-insights": "^1.1.0",
     "bootstrap": "^5.3.3",
     "cra-template": "1.2.0",
@@ -13,7 +15,7 @@
     "react-dom": "^19.0.0",
     "react-fontawesome": "^1.7.1",
     "react-icons": "^5.4.0",
-    "react-router-dom": "^7.0.2",
+    "react-router-dom": "^7.1.1",
     "react-scripts": "^5.0.1",
     "web-vitals": "^4.2.4",
     "webpack": "^5.97.1"
diff --git a/src/App.js b/src/App.js
index f1e2119..dcabb44 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,43 +1,65 @@
 // src/App.js
 import './index.css';
 import React from 'react';
-import Header from './components/Header'; // Ensure these paths are correct
+import { Route, Routes } from 'react-router-dom'; // Import Router components
+import Header from './components/Header';
 import MainSection1 from './components/MainSection1';
 import MainSection2 from './components/MainSection2';
 import MainSection3 from './components/MainSection3';
 import MainSection4 from './components/MainSection4';
 import MainSection5 from './components/MainSection5';
 import BestPlacesSection from './components/BestPlacesSection';
-import  BottomNavbar  from './components/BottomNavbar';
-import  MobileNavbar  from './components/MobileNavbar';
-import  ContactUs  from './components/ContactUs';
-import  Login  from './components/Login';
-import Instamart  from './components/Instamart';
-// import Index from './components/Index';
-import {Footer } from './components/Footer';
-
-
-import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap once in your entry point
+import BottomNavbar from './components/BottomNavbar';
+import MobileNavbar from './components/MobileNavbar';
+import ContactUs from './components/ContactUs';
+import Login from './components/Login';
+import Instamart from './components/Instamart';
+import SignUp from './components/SignUp';
+import { Footer } from './components/Footer';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
-    <div>
-      
+    <>
+      {/* Header visible on all pages */}
       <Header />
-      <MainSection1 />
-      <MainSection2 />
-      <MainSection3 />
-      <MainSection4 />
-      <Instamart/>
-      <Login/>
-      <BottomNavbar/>
-      <BestPlacesSection />
-      <ContactUs/>
-      <MobileNavbar/>
-      <MainSection5 />
-      {/* <Index/> */}
-      <Footer/>
-    </div>
+
+      {/* Routes to different pages */}
+      <Routes>
+        {/* Homepage route, renders all sections */}
+        <Route path="/" element={
+          <>
+            <MainSection1 />
+            <MainSection2 />
+            <MainSection3 />
+            <MainSection4 />
+            <MainSection5 />
+          </>
+        } />
+        
+        {/* Other pages */}
+        <Route path="/login" element={<Login />} />
+        <Route path="/instamart" element={<Instamart />} />
+        <Route path="/contact" element={<ContactUs />} />
+        <Route path="/best-places" element={<BestPlacesSection />} />
+
+        {/* SignUp page will replace other content when navigated */}
+        <Route path="/SignUp" element={<SignUp />} />
+      </Routes>
+
+      {/* Bottom Navbar, Mobile Navbar, and Footer always visible except on /SignUp */}
+      <Routes>
+        <Route path="/SignUp" element={null} />  {/* Prevent navbar/footer on SignUp page */}
+        
+        <Route path="/" element={
+          <>
+            <BottomNavbar />
+            <MobileNavbar />
+            <Footer />
+          </>
+        } />
+      </Routes>
+    </>
   );
 }
 
diff --git a/src/components/BestGrocery.js b/src/components/BestGrocery.js
new file mode 100644
index 0000000..5a5b980
--- /dev/null
+++ b/src/components/BestGrocery.js
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import './BestPlacesSection.css';
+
+const BestGroceries = () => {
+  const cities = [
+    "Order grocery in Bangalore",
+    "Order grocery in Gurgaon",
+    "Order grocery in Hyderabad",
+    "Order grocery in Delhi",
+    " Order grocery in Mumbai",
+    "Order grocery in Pune",
+    " Order grocery in Kolkata",
+    " Order grocery in Chennai",
+    " Order grocery in Ahmedabad",
+    "Order groceryin Chandigarh",
+    " Order grocery in Jaipur",
+    " Order grocery in Kochi",
+    " Order grocery in Coimbatore",
+    "Order grocery in Lucknow",
+    " Order grocery in Nagpur",
+    "Order groceryin Vadodara",
+    "Order grocery in Indore",
+    "Order grocery in Vizag",
+    " Order grocery in Surat",
+    " Order grocery in Dehradun",
+    "Order grocery in Noida",
+    "Order grocery in Vijayawada"
+  ];
+
+  const [visibleCount, setVisibleCount] = useState(9);
+
+  const handleShow_more = () => {
+    setVisibleCount((prevCount) => prevCount + 4);
+  };
+
+  return (
+    <div>
+      <h2>Cities with groceries delivery</h2>
+      <div className='button-grid'>
+        {cities.slice(0, visibleCount).map((item, index) =>
+          <button key={index} className='city-button'>{item}</button>
+        )}
+        <button onClick={handleShow_more}>Show more</button>
+      </div>
+    </div>
+  );
+};
+
+export default BestGroceries;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index dd72fa5..290ee7f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { ArrowUpRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import './Header.css'; // Make sure to create a corresponding CSS file
 
-function Header() {
+const Header = () => {
   return (
     <header>
       <div className="nav-bar clearfix">
@@ -21,7 +22,9 @@ function Header() {
               </a>
             </div>
             <div className="sign-in">
+            <Link to="/signup">
               <a href="/signup">Sign in</a>
+              </Link>
             </div>
           </div>
         </div>
diff --git a/src/components/Index.js b/src/components/Index.js
index 2078678..2bf5a0d 100644
--- a/src/components/Index.js
+++ b/src/components/Index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import "./Index.css"; // Add your navbar-specific CSS
-
+import { Link } from 'react-router-dom';
 const Navbar = () => {
   return (
     <header className="navbar">
diff --git a/src/components/Instamart.js b/src/components/Instamart.js
index 991869c..ffd580b 100644
--- a/src/components/Instamart.js
+++ b/src/components/Instamart.js
@@ -1,8 +1,9 @@
 import React from "react";
 import "./Instamart.css"; // Add your CSS file
 import "@fortawesome/fontawesome-free/css/all.min.css";
+import { Link } from 'react-router-dom';
 
-const categories = [
+const categories = () => [
   { img: "../../images/image/frui2.avif", title: "Fresh Fruit" },
   { img: "../../images/image/veg.avif", title: "Fresh Vegetables" },
   { img: "../../images/image/fruit4.avif", title: "Atta, Rice, and Dals" },
diff --git a/src/components/Login.js b/src/components/Login.js
index 0e61af5..21f1b49 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,6 +1,7 @@
 // src/components/login.js
 import React, { useState } from 'react';
 import './Login.css'; 
+import { Link } from 'react-router-dom';
 
 const Login = () => {
     const [username, setUsername] = useState('');
diff --git a/src/components/MainSection1.js b/src/components/MainSection1.js
index 6fa546a..0c60721 100644
--- a/src/components/MainSection1.js
+++ b/src/components/MainSection1.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection1.css';
+import { Link } from 'react-router-dom';
 
-function MainSection1() {
+const MainSection1= () => {
   return (
     <section className="section-1">
       <div className="nav-down">
diff --git a/src/components/MainSection2.js b/src/components/MainSection2.js
index 7b83fed..7ad6b71 100644
--- a/src/components/MainSection2.js
+++ b/src/components/MainSection2.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection2.css'; // Make sure to create a corresponding CSS file
+import { Link } from 'react-router-dom';
 
-function MainSection2() {
+const MainSection2 = () => {
   return (
     <section className="section-2 clearfix ">
       <div className="menu-boxes ">
diff --git a/src/components/MainSection3.js b/src/components/MainSection3.js
index 4d6134f..ed74996 100644
--- a/src/components/MainSection3.js
+++ b/src/components/MainSection3.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection3.css';
+import { Link } from 'react-router-dom';
 
-function MainSection3() {
+const MainSection3= () => {
   return (
     <section className="section-3">
       <div className="container">
diff --git a/src/components/MainSection4.js b/src/components/MainSection4.js
index b18cd3d..29b9178 100644
--- a/src/components/MainSection4.js
+++ b/src/components/MainSection4.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './MainSection4.css';
+import { Link } from 'react-router-dom';
 
 const items = [
   { id: 1, src: '/images/frui2.avif', alt: 'Basket of fresh apples' },
@@ -8,7 +9,7 @@ const items = [
   { id: 4, src: '/images/frui9.avif', alt: 'Fresh berries' },
 ];
 
-function MainSection4() {
+const MainSection4 = () => {
   return (
     <section className="section-4">
       <div className="container">
diff --git a/src/components/MainSection5.js b/src/components/MainSection5.js
index 0acb989..79b2aba 100644
--- a/src/components/MainSection5.js
+++ b/src/components/MainSection5.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import './MainSection5.css'; // Make sure to create a corresponding CSS file
+// import { Link } from 'react-router-dom';
 
-function MainSection5() {
+const MainSection5 = () => {
   return (
     <section className="section-5">
       <img src="/images/App_download_banner.avif" alt="Download Banner" />
diff --git a/src/components/MobileNavbar.js b/src/components/MobileNavbar.js
index a455099..2c44897 100644
--- a/src/components/MobileNavbar.js
+++ b/src/components/MobileNavbar.js
@@ -1,5 +1,6 @@
 import React from "react";
 import "./MobileNavbar.css";
+import { Link } from "react-router-dom";
 
 
 const MobileNavbar = () => {
@@ -7,7 +8,9 @@ const MobileNavbar = () => {
     <nav className="bottom-navbar">
       <div className="nav-item">
         <i className="fas fa-home"></i>
+        <Link to ="./Header./MainSection1./MainSection3./MainSection4./MainSection5">
         <span>Home</span>
+        </Link>
       </div>
       <div className="nav-item">
         <i className="fas fa-th-large"></i>
@@ -18,8 +21,10 @@ const MobileNavbar = () => {
         <span>Cart</span>
       </div>
       <div className="nav-item">
-        <i className="fas fa-user"></i>
+      <i className="fas fa-user"></i>
+      <Link to ="./Login">
         <span>Account</span>
+        </Link>
       </div>
     </nav>
   );
diff --git a/src/components/signup.css b/src/components/signup.css
index e69de29..c7ce3a2 100644
--- a/src/components/signup.css
+++ b/src/components/signup.css
@@ -0,0 +1,259 @@
+/* src/components/SignInSignUp.css */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+:root {
+    --mainColor: #FC4A1A;
+    --whiteColor: #ffffff;
+    --titleColor: #FC4A1A;
+    --labelColor: #FC4A1Af;
+}
+
+/* html {
+    font-size: 62.5%;
+    scroll-behavior: smooth;
+} */
+
+/* body {
+    background: linear-gradient(to right, #FC4A1A, var(--mainColor));
+    font-weight: 400;
+    min-height: 100vh;
+    display: grid;
+    place-content: center;
+    overflow: hidden;
+} */
+
+.wrapper {
+    position: relative;
+    width: 35rem;
+    height: 50rem;
+}
+
+@media(min-width: 540px) {
+    .wrapper {
+        width: 40rem;
+    }
+}
+
+.wrapper .form-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: var(--whiteColor);
+    border-radius: .5rem;
+    box-shadow: 0 0 1rem 0 rgba(0 0 0 / .2);
+}
+
+.wrapper .form-container form h2 {
+    font-size: 3rem;
+    text-align: center;
+    text-transform: capitalize;
+    color: var(--titleColor);
+}
+
+.wrapper .form-container form .form-group {
+    position: relative;
+    width: 32rem;
+    margin: 3rem 0;
+}
+
+.wrapper .form-container form .form-group i,
+.wrapper .form-container form .form-group label {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.6rem;
+    text-transform: capitalize;
+    color: var(--labelColor);
+    padding: 0 .5rem;
+    pointer-events: none;
+    transition: all .5s ease;
+}
+
+.wrapper .form-container form .form-group i {
+    left: .5rem;
+}
+
+.wrapper .form-container form .form-group label {
+    left: 2.5rem;
+}
+
+.wrapper .form-container form .form-group input {
+    width: 100%;
+    height: 4rem;
+    padding: 0 1rem;
+    border-radius: .5rem;
+    border: none;
+    outline: none;
+    border: .1rem solid var(--labelColor);
+    font-size: 1.6rem;
+    color: var(--labelColor);
+    background: transparent;
+}
+
+form .form-group input:focus~label,
+form .form-group input:valid~label,
+form .form-group input:focus~i,
+form .form-group input:valid~i {
+    top: 0 !important;
+    font-size: 1.2rem !important;
+    background-color: var(--whiteColor);
+}
+
+.wrapper .form-container form .forgot-pass {
+    margin: -1.5rem 0 1.5rem;
+}
+
+.wrapper .form-container form .forgot-pass a {
+    color: var(--labelColor);
+    text-decoration: none;
+    font-size: 1.4rem;
+    text-transform: capitalize;
+    transform: all .5s ease;
+}
+
+.wrapper .form-container form .forgot-pass a:hover {
+    color: var(--mainColor);
+}
+
+.wrapper .form-container form .btn {
+    background: linear-gradient(to right, #da4453, var(--mainColor));
+    color: var(--whiteColor);
+    text-transform: capitalize;
+    width: 100%;
+    height: 4rem;
+    font-size: 1.6rem;
+    font-weight: 500;
+    outline: none;
+    border: none;
+    border-radius: .5rem;
+    cursor: pointer;
+    box-shadow: 0 .2rem 1rem rgba(0 0 0 / .4);
+}
+
+.wrapper .form-container form .link {
+    text-align: center;
+    font-size: 1.4rem;
+    color: var(--labelColor);
+    margin: 2.5rem 0;
+}
+
+.wrapper .form-container form .link a {
+    text-transform: capitalize;
+    color: var(--mainColor);
+    text-decoration: none;
+    font-weight: 600;
+    transition: all .5s ease;
+}
+
+.wrapper .form-container form .link a:hover {
+    color: #da4453;
+}
+
+.wrapper .sign-up {
+    transform: rotate(7deg);
+}
+
+.wrapper.animated-signin .form-container.sign-in {
+    animation: signin-flip 1s ease-in-out forwards;
+}
+
+@keyframes signin-flip {
+    0% {
+        transform: translateX(0);
+    }
+
+    50% {
+        transform: translateX(-50rem) scale(1.1);
+    }
+
+    100% {
+        transform: translateX(0) rotate(7deg) scale(1);
+    }
+}
+
+.wrapper.animated-signin .form-container.sign-up {
+    animation: rotatecard .7s ease-in-out forwards;
+}
+
+@keyframes rotatecard {
+    0% {
+        transform: rotate(7deg);
+    }
+
+    100% {
+        transform: rotate(0);
+        z-index: 1;
+    }
+}
+
+.wrapper.animated-signup .form-container.sign-up {
+    animation: signup-flip 1s ease-in-out forwards;
+}
+
+@keyframes signup-flip {
+    0% {
+        transform: translateX(0);
+        z-index: 1;
+    }
+
+    50% {
+        transform: translateX(50rem) scale(1.1);
+    }
+
+    100% {
+        transform: translateX(0) rotate(7deg) scale(1);
+    }
+}
+
+.wrapper.wrapper.animated-signup .form-container.sign-in {
+    transform: rotate(7deg);
+    animation: rotatecard .7s ease-in-out forwards;
+    animation-delay: .3s;
+}
+
+@keyframes rotatecard {
+    0% {
+        transform: rotate(7deg);
+    }
+
+    100% {
+        transform: rotate(0);
+        z-index: 1;
+    }
+}
+
+.images {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+.images.left {
+    left: 0;
+}
+
+.images.right {
+    right: 0;
+}
+
+.images img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+}
diff --git a/src/components/signup.js b/src/components/signup.js
index 8d5bda1..56f7f38 100644
--- a/src/components/signup.js
+++ b/src/components/signup.js
@@ -1,7 +1,100 @@
-import React from 'react'
+// src/components/SignUp.js
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUser, faAt, faLock } from '@fortawesome/free-solid-svg-icons';
+import './SignUp.css'; // Import your CSS file here
+
+const SignUp = () => {
+  const [isSignUp, setIsSignUp] = useState(true);
+
+  const toggleForm = () => {
+    setIsSignUp(!isSignUp);
+  };
 
-export const signup = () => {
   return (
-    <div>signup</div>
-  )
-}
+    <div className="container">
+      {/* Left floating images */}
+      {/* <div className="images left">
+        <img src="Pav Bhaji.avif" alt="Image 1" />
+        <img src="Pastry.avif" alt="Image 2" />
+        <img src="Kebab.avif" alt="Image 3" />
+      </div> */}
+
+      <div className={`wrapper ${isSignUp ? 'animated-signup' : 'animated-signin'}`}>
+        {/* Sign-Up Form */}
+        {isSignUp && (
+          <div className="form-container sign-up">
+            <form>
+              <h2>Sign Up</h2>
+              <div className="form-group">
+                <input type="text" required />
+                <FontAwesomeIcon icon={faUser} />
+                <label>Username</label>
+              </div>
+              <div className="form-group">
+                <input type="email" required />
+                <FontAwesomeIcon icon={faAt} />
+                <label>Email</label>
+              </div>
+              <div className="form-group">
+                <input type="password" required />
+                <FontAwesomeIcon icon={faLock} />
+                <label>Password</label>
+              </div>
+              <div className="form-group">
+                <input type="password" required />
+                <FontAwesomeIcon icon={faLock} />
+                <label>Confirm Password</label>
+              </div>
+              <button type="submit" className="btn">Sign Up</button>
+              <div className="link">
+                <p>
+                  You already have an account?
+                  <button type="button" onClick={toggleForm} className="signin-link"> Sign In</button>
+                </p>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* Sign-In Form */}
+        {!isSignUp && (
+          <div className="form-container sign-in">
+            <form>
+              <h2>Login</h2>
+              <div className="form-group">
+                <input type="text" required />
+                <FontAwesomeIcon icon={faUser} />
+                <label>Username</label>
+              </div>
+              <div className="form-group">
+                <input type="password" required />
+                <FontAwesomeIcon icon={faLock} />
+                <label>Password</label>
+              </div>
+              <div className="forgot-pass">
+                <a href="./">Forgot password?</a>
+              </div>
+              <button type="submit" className="btn">Login</button>
+              <div className="link">
+                <p>
+                  Don't have an account?
+                  <button type="button" onClick={toggleForm} className="signup-link"> Sign Up</button>
+                </p>
+              </div>
+            </form>
+          </div>
+        )}
+      </div>
+
+      {/* Right floating images */}
+      {/* <div className="images right">
+        <img src="Ice Cream.avif" alt="Image 4" />
+        <img src="Burger.avif" alt="Image 5" />
+        <img src="Dosa.avif" alt="Image 6" />
+      </div> */}
+    </div>
+  );
+};
+
+export default SignUp;