diff --git a/.env.demo b/.env.demo
index 5b99ff8..171c6ce 100644
--- a/.env.demo
+++ b/.env.demo
@@ -6,4 +6,4 @@ VITE_PUBLIC_KEY=
 
 # Environment Variables for NASA API call.
 
-VITE_API_KEY=
\ No newline at end of file
+VITE_API_KEY=DEMO_KEY  # use Demo Key only for development.
\ No newline at end of file
diff --git a/README.md b/README.md
index b490d8e..1c2369b 100644
--- a/README.md
+++ b/README.md
@@ -27,13 +27,16 @@
    npm install
    ```
 
-4. **Start the Server:** Start the server:
+4. **Add Environment Variables:** Create a `.env` file and add Environment Variables as mentioned in `.env.demo` file.
+
+
+5. **Start the Server:** Start the server:
 
    ```bash
    npm run dev
    ```
 
-5. **Local Host:** Access the project on your local host at:
+6. **Local Host:** Access the project on your local host at:
 
    ```bash
    http://localhost:5173/
diff --git a/src/App.css b/src/App.css
index a7580fd..d112885 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,6 +13,7 @@
   -webkit-text-fill-color: transparent;
   font-size: 4rem;
   font-weight: bold;
+  border-top: 20dvh solid transparent;
 }
 
 .ip {
@@ -28,7 +29,6 @@
   justify-content: center;
   outline:none;
   border: none;
-  /* background-color: red; */
 }
 
 .date_input {
@@ -113,7 +113,7 @@
   border-style: solid;
   border-width: 1px;
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
 }
 
@@ -466,3 +466,22 @@
   color: inherit;
   cursor: pointer;
 }
+
+#close-btn{
+  position: relative;
+  bottom: 250px;
+}
+#close-btn button{
+  padding: 5px 15px;
+  font-size: 1rem;
+  border-radius: 10px;
+  font-weight: bold;
+  color: #40019a;
+  border: none;
+}
+
+#close-btn button:hover{
+  color: white;
+  background: #40019a;
+  box-shadow: 0 0 10px white;
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 4954ce5..43ae695 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,9 +4,11 @@ import Navbar from './components/Navbar/Navbar.jsx'
 import Footer from './components/Footer/Footer.jsx'
 import Toast from "./components/Toast/Toast.jsx"
 import BackGround from './components/BackGround/BackGround.jsx'
+import ScrollToTop from './components/ScrollToTop/ScrollToTop.jsx'
 import PreLoader from './components/PreLoader/PreLoader.jsx'
 import { useState } from 'react'
 
+
 function App() {
 
   const [isPreLoading, setIsPreLoading] = useState(true)
@@ -18,6 +20,7 @@ function App() {
       <Toast />
       <Navbar />
       <Outlet />
+      <ScrollToTop/>
       <Footer />
     </>
   );
diff --git a/src/components/BackGround/BackGround.jsx b/src/components/BackGround/BackGround.jsx
index cbc1918..bbdb673 100644
--- a/src/components/BackGround/BackGround.jsx
+++ b/src/components/BackGround/BackGround.jsx
@@ -39,7 +39,8 @@ function StarField({ numberOfStars = 100, setIsPreLoading }) {
 
   useEffect(addStars, []);
   return (
-    <group ref={starFieldRef} rotation={[0, 0, 0]}>
+
+    <group ref={starFieldRef} rotation={[0, 0, -1]}>
       {
         positions.map((position, index) => (
           <Star key={index} position={position} />
diff --git a/src/components/DisplayDetails/DisplayDetails.jsx b/src/components/DisplayDetails/DisplayDetails.jsx
index 98fbbc5..e08e10e 100644
--- a/src/components/DisplayDetails/DisplayDetails.jsx
+++ b/src/components/DisplayDetails/DisplayDetails.jsx
@@ -1,15 +1,13 @@
 import React from "react";
 import img from "../../assets/feel the fear and do it anyway.png";
-import '../../App.css'
-
-function DisplayDetails({ roverInfo }) {
+import "../../App.css";
 
+function DisplayDetails({ roverInfo, fun }) {
   return (
     <>
       <div className="rover_display">
         <div className="inner_container">
           <div className="image_div">
-
             <img
               id="roverImg"
               src={roverInfo.url ? roverInfo.url : img}
@@ -23,19 +21,25 @@ function DisplayDetails({ roverInfo }) {
               <div className="row">
                 <div className="card">
                   <h4>Earth Date</h4>
-                  <p className="date">{roverInfo.earthDate ? roverInfo.earthDate : "...."}</p>
+                  <p className="date">
+                    {roverInfo.earthDate ? roverInfo.earthDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Rover Name</h4>
-                  <p className="roverName">{roverInfo.roverName ? roverInfo.roverName : "...."}</p>
+                  <p className="roverName">
+                    {roverInfo.roverName ? roverInfo.roverName : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Camera</h4>
-                  <p className="camera">{roverInfo.cameraName ? roverInfo.cameraName : "...."}</p>
+                  <p className="camera">
+                    {roverInfo.cameraName ? roverInfo.cameraName : "...."}
+                  </p>
                 </div>
               </div>
             </div>
@@ -44,26 +48,34 @@ function DisplayDetails({ roverInfo }) {
               <div className="row">
                 <div className="card">
                   <h4>Launch Date</h4>
-                  <p className="launch">{roverInfo.launchDate ? roverInfo.launchDate : "...."}</p>
+                  <p className="launch">
+                    {roverInfo.launchDate ? roverInfo.launchDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Land Date</h4>
-                  <p className="land">{roverInfo.landingDate ? roverInfo.landingDate : "...."}</p>
+                  <p className="land">
+                    {roverInfo.landingDate ? roverInfo.landingDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Status</h4>
-                  <p className="status">{roverInfo.status ? roverInfo.status : "...."}</p>
+                  <p className="status">
+                    {roverInfo.status ? roverInfo.status : "...."}
+                  </p>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-
 
+          <div id="close-btn">
+            <button onClick={() => fun(false)}>X</button>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index cb9a40e..bc7de58 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -3,13 +3,14 @@ import img from '../../assets/logo_white.png';
 
 
 function Footer() {
+  const currentYear = new Date().getFullYear();
   return (
     <div className="container">
       <footer className="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
         <a href="/" className="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
           <img src={img} width="150" alt="Logo" />
         </a>
-        <p className="col-md-4 mb-0 text-light">© 2024 CosmoXplore India, Inc. All Rights Reserved</p>
+        <p className="col-md-4 mb-0 text-light">©️ {currentYear} CosmoXplore India, Inc. All Rights Reserved</p>
       </footer>
     </div>
   );
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index f6041cd..623fde4 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -48,7 +48,7 @@ function Navbar() {
             <ul>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#">Home</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#apod">APOD</a></li>
-              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#mars">MartianImagery</a></li>
+              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="/mars-rover">MartianImagery</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/nasa-projects">NASA's Projects</NavLink></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/about">About us</NavLink></li>
             </ul>
@@ -69,7 +69,7 @@ function Navbar() {
               <a className="nav-link text-light" href="#apod">APoD</a>
             </li>
             <li className="nav-item">
-              <a className="nav-link text-light" href="#mars">MartianImagery</a>
+              <NavLink className="nav-link text-light" to="/mars-rover">MartianImagery</NavLink>
             </li>
             <li className="nav-item">
               <NavLink className="nav-link text-light" to="/nasa-projects">NASA's Projects</NavLink>
diff --git a/src/components/ScrollToTop/ScrollToTop.jsx b/src/components/ScrollToTop/ScrollToTop.jsx
new file mode 100644
index 0000000..948a8a9
--- /dev/null
+++ b/src/components/ScrollToTop/ScrollToTop.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import Styles from './ScrollToTop.module.css'
+import { TbArrowBigUpLineFilled } from "react-icons/tb";
+
+function ScrollToTop() {
+
+    const [isHover,setIsHover]=useState(false);
+
+    function handleClick(e) {
+        window.scrollTo(
+            {
+                top: 0,
+                behavior: 'smooth',
+            }
+        )
+    }
+
+    return (
+        <div className={Styles['btn']} onMouseEnter={()=>setIsHover(true)} onMouseLeave={()=>setIsHover(false)}>
+            <button className={Styles['scroll-btn']} onClick={handleClick}><TbArrowBigUpLineFilled size={25} color={isHover?'white':'#8400ff'} /></button>
+        </div>
+    )
+}
+
+export default ScrollToTop
\ No newline at end of file
diff --git a/src/components/ScrollToTop/ScrollToTop.module.css b/src/components/ScrollToTop/ScrollToTop.module.css
new file mode 100644
index 0000000..cbea587
--- /dev/null
+++ b/src/components/ScrollToTop/ScrollToTop.module.css
@@ -0,0 +1,25 @@
+
+.btn{
+    position: fixed;
+    right: 20px;
+    bottom: 100px;
+    border-radius: 50%;
+}
+
+.scroll-btn{
+    background-color: white;
+    border:none;
+    outline: none;
+    border-radius: 50%;
+    padding: 10px;
+    transition: all 0.5s ease-in-out;
+}
+
+.scroll-btn:hover,.btn:hover{
+    background-color: #40019a;
+    color: white;
+    transform: scale(1.1);
+    box-shadow: 0 0 15px white;
+    cursor: pointer;
+    color: white;
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index d0baa28..c6030f9 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,7 @@ import App from './App.jsx'
 import Home from "./pages/Home/Home.jsx"
 import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx"
 import About from "./pages/About/About.jsx"
+import MarsRover from './pages/MarsRover/MarsRover.jsx'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -13,6 +14,7 @@ const router = createBrowserRouter(
       <Route index element={<Home />} />
       <Route path='nasa-projects' element={<NasaProjects />} />
       <Route path='about' element={<About />} />
+      <Route path='mars-rover' element={<MarsRover/>}/>
     </Route>
   )
 )
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index fb2541a..4769238 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Hero from '../../components/Hero/Hero.jsx'
 import Apod from '../../components/Apod/Apod.jsx'
-import MarsRover from '../../components/MarsRover/MarsRover.jsx'
+// import MarsRover from '../MarsRover/MarsRover.jsx'
 import ContactForm from '../../components/ContactForm/ContactForm.jsx'
 
 function Home() {
@@ -9,7 +9,7 @@ function Home() {
         <>
             <Hero />
             <Apod />
-            <MarsRover />
+            {/* <MarsRover /> */}
             <ContactForm />
         </>
     )
diff --git a/src/components/MarsRover/MarsRover.jsx b/src/pages/MarsRover/MarsRover.jsx
similarity index 88%
rename from src/components/MarsRover/MarsRover.jsx
rename to src/pages/MarsRover/MarsRover.jsx
index 3d8c2a3..c651b6c 100644
--- a/src/components/MarsRover/MarsRover.jsx
+++ b/src/pages/MarsRover/MarsRover.jsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
 import img from "../../assets/mars.png";
-import DisplayDetails from "../DisplayDetails/DisplayDetails.jsx";
-import { toastify } from "../Toast/Toast.jsx";
+import DisplayDetails from "../../components/DisplayDetails/DisplayDetails.jsx";
+import { toastify } from "../../components/Toast/Toast.jsx";
 import ReadableStreamDecoder from './../../utils/ReadableStreamDecoder';
 
 function MarsRover() {
 
-    const [showDefault, setShowDefault] = useState(true);
+    const [showImages, setShowImages] = useState(false);
     const [userDate, setUserDate] = useState("");
     const [roverInfo, setRoverInfo] = useState({
         url: "",
@@ -26,17 +26,13 @@ function MarsRover() {
     async function displayRover(e) {
         try {
 
+            e.preventDefault();
+
             if (userDate == "") {
                 toastify("Enter Date", false)
                 return
             }
 
-            e.preventDefault();
-
-            setShowDefault((prev) => {
-                return false;
-            })
-
             let url = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${userDate}&api_key=${import.meta.env.VITE_API_KEY}`;
 
             let response = await fetch(url);
@@ -45,7 +41,7 @@ function MarsRover() {
 
             if (response.photos.length === 0) {
                 toastify("No images for selected date", false)
-                setShowDefault(true)
+                setShowImages(false)
                 setRoverInfo({
                     url: "",
                     earthDate: "",
@@ -64,6 +60,8 @@ function MarsRover() {
                 return { ...prev, url: image_from_rover.img_src, earthDate: image_from_rover.earth_date, roverName: image_from_rover.rover.name, cameraName: image_from_rover.camera.full_name, launchDate: image_from_rover.rover.launch_date, landingDate: image_from_rover.rover.landing_date, status: image_from_rover.rover.status };
             })
 
+            setShowImages(true)
+
         } catch (error) {
             console.log(error.message);
         }
@@ -78,22 +76,11 @@ function MarsRover() {
             const data = await ReadableStreamDecoder(response.body);
 
             setMaxDate(data.latest_photos[0].rover.max_date);
+            setUserDate(data.latest_photos[0].rover.max_date);
 
         } catch (error) {
             console.log(error.message);
         }
-
-        const today_date = new Date();
-        const temp = new Date();
-
-        temp.setDate((today_date.getDate() - 124))
-
-        var dd = String(temp.getDate()).padStart(2, '0');
-        var mm = String(temp.getMonth() + 1).padStart(2, '0');
-        var yyyy = temp.getFullYear();
-
-        return `${yyyy}-${mm}-${dd}`;
-
     }
 
 
@@ -101,7 +88,6 @@ function MarsRover() {
         <>
             <h1 align="center" className="section_title section_title_mobile" id="mars">Mars Rover Imagery</h1>
             <br />
-            {showDefault ?
 
                 <div className="rover_container">
                     <div className="rover_section_img">
@@ -134,12 +120,6 @@ function MarsRover() {
                     </div>
                 </div>
 
-                :
-
-                <DisplayDetails roverInfo={roverInfo} />
-
-            }
-
             <div className="ip">
                 <div className="input-group mb-4 input_container">
                     <input
@@ -150,6 +130,7 @@ function MarsRover() {
                         aria-describedby="button-addon2"
                         min="2015-06-03"
                         max={maxDate}
+                        value={userDate}
                         onChange={(e) => setUserDate((prev) => e.target.value)}
                     />
                     <button
@@ -163,6 +144,8 @@ function MarsRover() {
                 </div>
             </div>
 
+            {showImages && (<DisplayDetails roverInfo={roverInfo} fun={setShowImages} />)}
+
         </>
     );
 }
diff --git a/src/pages/NasaProjects/NasaProjects.jsx b/src/pages/NasaProjects/NasaProjects.jsx
index 1e86c46..286838c 100644
--- a/src/pages/NasaProjects/NasaProjects.jsx
+++ b/src/pages/NasaProjects/NasaProjects.jsx
@@ -98,31 +98,51 @@ function TechNews() {
         }
     }
 
+    //breaking array into chunks
+    function chunkArray(array, size) {
+        const result = [];
+        for (let i = 0; i < array.length; i += size) {
+            result.push(array.slice(i, i + size));
+        }
+        return result;
+    }
 
     // fetches projects by the projects Id's.
     async function fetchProjects(projectsIds) {
         try {
-            const temp = []
-            for (const id of projectsIds) {
-                let response = await fetch(`https://inplace-ghib.onrender.com/inplace`, {
-                    method: "POST",
-                    body:
-                        JSON.stringify({
+            const chunkSize = 20; //It is the batch size 
+            const projectChunks = chunkArray(projectsIds, chunkSize);
+            const allProjects = [];
+    
+            for (const chunk of projectChunks) {
+                const projectPromises = chunk.map(async (id) => { //using map for concurrent execution of data
+                    let response = await fetch(`https://inplace-ghib.onrender.com/inplace`, {
+                        method: "POST",
+                        body: JSON.stringify({
                             url: `https://techport.nasa.gov/api/projects/${id}?api_key=${import.meta.env.VITE_API_KEY}`
                         }),
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                })
-                const data = await ReadableStreamDecoder(response.body);
-                const { projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription } = data.project;
-                temp.push({ projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription });
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                    });
+                    const data = await ReadableStreamDecoder(response.body);
+                    const { projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription } = data.project;
+                    return { projectId, title, acronym, description, startDateString, endDateString, lastUpdated, statusDescription };
+                });
+    
+                const projects = await Promise.all(projectPromises); //waits for all promise to resolve
+                allProjects.push(...projects);
+    
+                // Update state after processing each chunk
+                setPaginationProjects((prev) => [...prev, ...projects]);
+                setProjects((prev) => [...prev, ...projects]);
+                localStorage.setItem("projects", JSON.stringify(allProjects));
             }
-            setProjects((prev) => [...temp]);
-            setTimeout(() => setIsLoading(false), 2000)
-
+    
+            setTimeout(() => setIsLoading(false), 2000);
+    
         } catch (error) {
-            setTimeout(() => setIsLoading(false), 2000)
+            setTimeout(() => setIsLoading(false), 2000);
             console.log(error.message);
         }
     }
@@ -204,4 +224,4 @@ function TechNews() {
     )
 }
 
-export default TechNews
\ No newline at end of file
+export default TechNews