From 8ef00543b7695c80a5edd41138267660abba6cdc Mon Sep 17 00:00:00 2001
From: Aryan-01-star <aryanpandey35247@gmail.com>
Date: Thu, 31 Oct 2024 03:38:13 +0530
Subject: [PATCH] FeatureUpdated

---
 client/src/App.js                             |  10 +-
 client/src/Pages/AboutUs.jsx                  |   2 +-
 client/src/Pages/CancelReturns.jsx            |   2 +-
 client/src/Pages/Careers.jsx                  |   2 +-
 client/src/Pages/Cart.jsx                     |   2 +-
 client/src/Pages/Contact.jsx                  |   2 +-
 client/src/Pages/Contributors.jsx             |   2 +-
 client/src/Pages/CustomerProfile.jsx          |  12 +-
 client/src/Pages/Faq.jsx                      |   2 +-
 client/src/Pages/GiftCards.jsx                |   2 +-
 client/src/Pages/Home.jsx                     | 309 +++++++++--------
 client/src/Pages/Licensing.jsx                |   2 +-
 client/src/Pages/LoginPage.jsx                |   4 +-
 client/src/Pages/Newarrivals.js               | 138 +++-----
 client/src/Pages/Orders.jsx                   |   2 +-
 client/src/Pages/PrivacyPolicy.jsx            |   2 +-
 client/src/Pages/Shop.jsx                     |   2 +-
 client/src/Pages/SignUpPage.jsx               |   4 +-
 client/src/Pages/Terms.jsx                    |   2 +-
 client/src/Pages/Wishlist.jsx                 |   2 +-
 client/src/components/NavBar/NavBar.jsx       | 327 +++++-------------
 .../{SearchBar.js => SearchBar.jsx}           |   0
 client/src/index.js                           |   4 +-
 23 files changed, 322 insertions(+), 514 deletions(-)
 rename client/src/components/{SearchBar.js => SearchBar.jsx} (100%)

diff --git a/client/src/App.js b/client/src/App.js
index 53867b4c..2aa5c292 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
 import './Animations.css';
-import { Navbar, Footer } from './Components/index.js';
+import { Navbar, Footer } from './components/index.js';
 // import { ProfilePage, Product } from './Components/index.js';
-import { Product } from './Components/index.js';
+import { Product } from './components/index.js';
 import RomancePage from './Pages/RomancePage.jsx';
 import ActionPage from './Pages/ActionPage.jsx';
 import ThrillerPage from './Pages/ThrillerPage.jsx';
@@ -26,9 +26,9 @@ import FAQ from "./Pages/Faq.jsx";
 import AboutUs from "./Pages/AboutUs.jsx";
 import { OrderList } from "./Pages/Orders.jsx";
 import Contributors from "./Pages/Contributors.jsx";
-import Preloader from "./Components/Preloader.jsx";
+// import Preloader from "./Components/Preloader.jsx";
 import { Toast } from "./Toast/Toast.js";
-import GoToTop from "./Components/GoToTop.jsx";
+import GoToTop from "./components/GoToTop.jsx";
 import License from "./Pages/Licensing.jsx";
 import CustomerProfile from "./Pages/CustomerProfile.jsx";
 import GiftCards from "./Pages/GiftCards.jsx";
@@ -93,7 +93,7 @@ function App() {
         </Routes>
         <Toast position="bottom-right" />
         <Footer darkMode={darkMode} /> {/* Pass darkMode prop here */}
-        <Preloader /> {/* Ensure Preloader is correctly styled */}
+        {/*<Preloader />*/} {/* Ensure Preloader is correctly styled */}
         <GoToTop /> {/* Added GoToTop component */}
         <ChatBotEmbed />
 
diff --git a/client/src/Pages/AboutUs.jsx b/client/src/Pages/AboutUs.jsx
index a12abd81..31c37086 100644
--- a/client/src/Pages/AboutUs.jsx
+++ b/client/src/Pages/AboutUs.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 import { Link } from 'react-router-dom';
 
 const AboutUs = () => {
diff --git a/client/src/Pages/CancelReturns.jsx b/client/src/Pages/CancelReturns.jsx
index d367953d..a075682f 100644
--- a/client/src/Pages/CancelReturns.jsx
+++ b/client/src/Pages/CancelReturns.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const PrivacyPolicy = () => {
   useEffect(() => {
diff --git a/client/src/Pages/Careers.jsx b/client/src/Pages/Careers.jsx
index 7385a37d..c0d78339 100644
--- a/client/src/Pages/Careers.jsx
+++ b/client/src/Pages/Careers.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const Careers = () => {
     useEffect(() => {
diff --git a/client/src/Pages/Cart.jsx b/client/src/Pages/Cart.jsx
index 479ae3f3..1facc6d8 100644
--- a/client/src/Pages/Cart.jsx
+++ b/client/src/Pages/Cart.jsx
@@ -6,7 +6,7 @@ import {
   removeItemFromCart,
 } from "../api/api.js";
 import "./Cart.css";
-import Preloader from "../Components/Preloader";
+import Preloader from "../components/Preloader";
 import { useToast } from "../Context/ToastContext";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../Context/AuthContext";
diff --git a/client/src/Pages/Contact.jsx b/client/src/Pages/Contact.jsx
index 9f592653..32962a90 100644
--- a/client/src/Pages/Contact.jsx
+++ b/client/src/Pages/Contact.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Preloader from "../Components/Preloader";
+import Preloader from "../components/Preloader";
 import { FaLinkedin, FaGithub, FaEnvelope, FaPhoneAlt } from "react-icons/fa";
 // import "./Contact.css";
 function Contact() {
diff --git a/client/src/Pages/Contributors.jsx b/client/src/Pages/Contributors.jsx
index 170d3232..a944a932 100644
--- a/client/src/Pages/Contributors.jsx
+++ b/client/src/Pages/Contributors.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import './Contributors.css';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 function Contributors() {
   const [contributors, setContributors] = useState([]);
diff --git a/client/src/Pages/CustomerProfile.jsx b/client/src/Pages/CustomerProfile.jsx
index 141a7e55..77d59d81 100644
--- a/client/src/Pages/CustomerProfile.jsx
+++ b/client/src/Pages/CustomerProfile.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import Sidebar from "../Components/CustomerProfile/Sidebar";
-import Profile from "../Components/CustomerProfile/Profile";
-import Orders from "../Components/CustomerProfile/Orders";
-import Pancard from "../Components/CustomerProfile/Pancard";
-import DeliveryLocation from "../Components/CustomerProfile/DeliveryLocation";
-import Giftcard from "../Components/CustomerProfile/Giftcard";
+import Sidebar from "../components/CustomerProfile/Sidebar";
+import Profile from "../components/CustomerProfile/Profile";
+import Orders from "../components/CustomerProfile/Orders";
+import Pancard from "../components/CustomerProfile/Pancard";
+import DeliveryLocation from "../components/CustomerProfile/DeliveryLocation";
+import Giftcard from "../components/CustomerProfile/Giftcard";
 const CustomerProfile = () => {
   const [activeSection, setActiveSection] = useState("profile");
 
diff --git a/client/src/Pages/Faq.jsx b/client/src/Pages/Faq.jsx
index eb0619c5..a3f1c883 100644
--- a/client/src/Pages/Faq.jsx
+++ b/client/src/Pages/Faq.jsx
@@ -1,5 +1,5 @@
 import React, { useState,useEffect } from 'react';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const FAQ = () => {
   const faqs = [
diff --git a/client/src/Pages/GiftCards.jsx b/client/src/Pages/GiftCards.jsx
index e7507730..e0602c33 100644
--- a/client/src/Pages/GiftCards.jsx
+++ b/client/src/Pages/GiftCards.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const GiftCards = () => {
     useEffect(() => {
diff --git a/client/src/Pages/Home.jsx b/client/src/Pages/Home.jsx
index 12921475..ad821651 100644
--- a/client/src/Pages/Home.jsx
+++ b/client/src/Pages/Home.jsx
@@ -3,9 +3,9 @@ import { Link, useNavigate } from 'react-router-dom';
 import B1Child from '../assets/image/B1Child.jpeg';
 import AuthorImage from '../assets/image/author1.jpeg';
 import Spinner from './Spinner';
-import SearchBar from '../Components/SearchBar';
+import SearchBar from '../components/SearchBar';
 import { useTheme, useMediaQuery } from '@mui/material';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 import Newarrivals, { books as newbooks } from './Newarrivals';
 import Review from './Review';
 import crawdadsImage from '../assets/image/WhereTheCrawdadsSings.jpg';
@@ -144,148 +144,167 @@ const Home = () => {
             </header>
 
             <section className="container mx-auto my-8">
-              <h2 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white text-center">Book Categories</h2>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-
-                <Link to="/romance">
-                  <div className="bg-gradient-to-r from-pink-200 to-red-200 dark:from-purple-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-400 hover:to-red-400 dark:hover:from-purple-600 dark:hover:to-purple-900">
-                    <h3 className="text-xl font-bold mb-2 dark:text-white">Romance</h3>
-                    <p className="text-gray-700 dark:text-gray-300">Explore our collection of romantic novels.</p>
-                  </div>
-                </Link>
-
-                <Link to="/action">
-                  <div className="bg-gradient-to-r from-blue-200 to-indigo-200 dark:from-indigo-600 dark:to-blue-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-300 hover:to-indigo-300 dark:hover:from-indigo-500 dark:hover:to-blue-800">
-                    <h3 className="text-xl font-bold mb-2 text-center">Action</h3>
-                    <p className="text-gray-700 dark:text-gray-300 text-center">Dive into thrilling action-packed stories.</p>
-                  </div>
-                </Link>
-
-                <Link to="/thriller">
-                  <div className="bg-gradient-to-r from-gray-200 to-gray-400 dark:from-gray-800 dark:to-black text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-700 dark:hover:to-black">
-                    <h3 className="text-xl font-bold mb-2 text-center">Thriller</h3>
-                    <p className="text-gray-700 dark:text-gray-300 text-center">Get your adrenaline pumping with our thrillers.</p>
-                  </div>
-                </Link>
-
-                <Link to="/fiction">
-                  <div className="bg-gradient-to-r from-green-200 to-teal-200 dark:from-green-700 dark:to-teal-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-green-300 hover:to-teal-300 dark:hover:from-green-600 dark:hover:to-teal-800">
-                    <h3 className="text-xl font-bold mb-2 text-center">Fiction</h3>
-                    <p className="text-gray-700 dark:text-gray-300 text-center">Discover imaginative and captivating fiction.</p>
-                  </div>
-                </Link>
-
-                <Link to="/tech">
-                  <div className="bg-gradient-to-r from-yellow-200 to-orange-200 dark:from-yellow-700 dark:to-orange-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-300 dark:hover:from-yellow-600 dark:hover:to-orange-800">
-                    <h3 className="text-xl font-bold mb-2 text-center">Tech</h3>
-                    <p className="text-gray-700 dark:text-gray-300 text-center">Stay updated with the latest in technology.</p>
-                  </div>
-                </Link>
-
-                <Link to="/philosophy">
-                  <div className="bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-700 dark:to-pink-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-purple-300 hover:to-pink-300 dark:hover:from-purple-600 dark:hover:to-pink-800">
-                    <h3 className="text-xl font-bold mb-2 text-center">Philosophy</h3>
-                    <p className="text-gray-700 dark:text-gray-300 text-center">Dive deep into philosophical thoughts and ideas.</p>
-                  </div>
-                </Link>
-
-                <Link to="/manga">
-                  <div className="bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-300 hover:to-purple-300 dark:hover:from-pink-600 dark:hover:to-purple-800">
-                    <h3 className="text-xl font-bold mb-2 text-center">Manga</h3>
-                    <p className="text-gray-700 dark:text-gray-300 text-center">Explore our extensive collection of Manga.</p>
-                  </div>
-                </Link>
-
-              </div>
-            </section>
-
-
-
-
-            {/* New Arrivals Section */}
-            <section className="bg-gray-200 py-8 dark:bg-[rgb(40,40,40)]">
-              <div className="container mx-auto">
-                <Newarrivals
-                  onBookClick={(bookTitle) => {
-                    const book = newbooks.find(b => b.title === bookTitle);
-                    if (book) {
-                      setHighlightedBookId(book.id);  // Highlight the found book
-                      navigate(`/book/${bookTitle}`);
-                    }
-                  }}
-                  highlightedBookId={highlightedBookId}
-                  bookRefs={bookRefs}
-                  filteredBooks={filteredBooks} // Pass filteredBooks to display
-                />
-                {bookNotFound && <div className="text-center text-red-600">No books found matching your search.</div>}
-              </div>
-            </section>
-
-            {/* Top Trending Books Section */}
-
+  <h2 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white text-center">Book Categories</h2>
+  
+  {/* Top row of four cards */}
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+    {/* Romance Card */}
+    <Link to="/romance">
+      <div className="bg-gradient-to-r from-pink-200 to-red-200 dark:from-purple-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-400 hover:to-red-400 dark:hover:from-purple-600 dark:hover:to-purple-900">
+        <img src="https://static.vecteezy.com/system/resources/thumbnails/034/468/961/small/romantic-couple-lovers-in-park-under-trees-romantic-date-night-under-the-stars-valentines-day-photo.jpg" alt="Romance" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 dark:text-white">Romance</h3>
+        <p className="text-gray-700 dark:text-gray-300">Explore our collection of romantic novels.</p>
+      </div>
+    </Link>
+    
+    {/* Action Card */}
+    <Link to="/action">
+      <div className="bg-gradient-to-r from-blue-200 to-indigo-200 dark:from-indigo-600 dark:to-blue-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-300 hover:to-indigo-300 dark:hover:from-indigo-500 dark:hover:to-blue-800">
+        <img src="https://static.vecteezy.com/system/resources/previews/024/804/211/non_2x/super-agent-cartoon-vector.jpg" alt="Action" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 text-center">Action</h3>
+        <p className="text-gray-700 dark:text-gray-300 text-center">Dive into thrilling action-packed stories.</p>
+      </div>
+    </Link>
+
+    {/* Thriller Card */}
+    <Link to="/thriller">
+      <div className="bg-gradient-to-r from-gray-200 to-gray-400 dark:from-gray-800 dark:to-black text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-700 dark:hover:to-black">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYPGY_iKV-7JjnD42yFhj_NkZ_6MST58WCMA&s" alt="Thriller" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 text-center">Thriller</h3>
+        <p className="text-gray-700 dark:text-gray-300 text-center">Get your adrenaline pumping with our thrillers.</p>
+      </div>
+    </Link>
+
+    {/* Fiction Card */}
+    <Link to="/fiction">
+      <div className="bg-gradient-to-r from-green-200 to-teal-200 dark:from-green-700 dark:to-teal-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-green-300 hover:to-teal-300 dark:hover:from-green-600 dark:hover:to-teal-800">
+        <img src="https://www.theglobeandmail.com/resizer/v2/LSXVK3TZGBHGJD7JHTZI5ZMYHY.jpg?auth=61bbbc27fbf20bc53da412ad11166d2a34c179e8e47013fee80848d8920202f9&width=600&height=400&quality=80&smart=true" alt="Fiction" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 text-center">Fiction</h3>
+        <p className="text-gray-700 dark:text-gray-300 text-center">Discover imaginative and captivating fiction.</p>
+      </div>
+    </Link>
+  </div>
+
+  {/* Bottom row of three centered cards */}
+  <div className="flex justify-center gap-6 mt-8">
+    {/* Tech Card */}
+    <Link to="/tech">
+      <div className="bg-gradient-to-r from-yellow-200 to-orange-200 dark:from-yellow-700 dark:to-orange-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-300 dark:hover:from-yellow-600 dark:hover:to-orange-800">
+        <img src="https://img.freepik.com/free-vector/cute-astronaut-working-laptop-cartoon-vector-icon-illustration-science-technology-icon-isolated_138676-4634.jpg" alt="Tech" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 text-center">Tech</h3>
+        <p className="text-gray-700 dark:text-gray-300 text-center">Stay updated with the latest in technology.</p>
+      </div>
+    </Link>
+
+    {/* Philosophy Card */}
+    <Link to="/philosophy">
+      <div className="bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-700 dark:to-pink-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-purple-300 hover:to-pink-300 dark:hover:from-purple-600 dark:hover:to-pink-800">
+        <img src="https://c8.alamy.com/comp/HP4E35/a-happy-cartoon-greek-philosopher-with-a-stone-tablet-HP4E35.jpg" alt="Philosophy" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 text-center">Philosophy</h3>
+        <p className="text-gray-700 dark:text-gray-300 text-center">Dive deep into philosophical thoughts and ideas.</p>
+      </div>
+    </Link>
+
+    {/* Manga Card */}
+    <Link to="/manga">
+      <div className="bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-300 hover:to-purple-300 dark:hover:from-pink-600 dark:hover:to-purple-800">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRADdH75SMU5kyXzsDMp8XgyYZGqZ6fIiS77w&s" alt="Manga" className="w-full h-32 object-cover rounded-md mb-4" />
+        <h3 className="text-xl font-bold mb-2 text-center">Manga</h3>
+        <p className="text-gray-700 dark:text-gray-300 text-center">Explore our extensive collection of Manga.</p>
+      </div>
+    </Link>
+  </div>
+</section>
+
+{/* New Arrivals Section */}
+<section className="bg-gray-200 py-8 dark:bg-[rgb(40,40,40)]">
+  <h2 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white text-center">Newly Arrived</h2>
+  <div className="container mx-auto">
+    <Newarrivals
+      onBookClick={(bookTitle) => {
+        const book = newbooks.find(b => b.title === bookTitle);
+        if (book) {
+          setHighlightedBookId(book.id);  // Highlight the found book
+          navigate(`/book/${bookTitle}`);
+        }
+      }}
+      highlightedBookId={highlightedBookId}
+      bookRefs={bookRefs}
+      filteredBooks={filteredBooks} // Pass filteredBooks to display
+    />
+    {bookNotFound && <div className="text-center text-red-600">No books found matching your search.</div>}
+  </div>
+</section>
+
+
+
+{/* Top Trending Books Section */}
+<section className="container mx-auto my-8">
+  <h2 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white text-center">Top Trending Books</h2>
+  
+  <div className="overflow-x-auto">
+    <div className="flex space-x-6">
+      {/* Book Cards */}
+            
+      <Link to="/the-midnight-library">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-indigo-100 to-indigo-200 dark:from-indigo-900 dark:to-indigo-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={TheMidnightLibrary} alt="The Midnight Library" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">The Midnight Library</h3>
+          <p className="text-gray-600 dark:text-gray-300">A philosophical tale about choices, regrets, and the infinite possibilities of life.</p>
+        </div>
+      </Link>
+      
+      <Link to="/dune">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={Dune} alt="Dune" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">Dune</h3>
+          <p className="text-gray-600 dark:text-gray-300">A science fiction epic set on the desert planet of Arrakis, exploring themes of politics, religion, and ecology.</p>
+        </div>
+      </Link>
+
+      <Link to="/project-hail-mary">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-teal-100 to-teal-200 dark:from-teal-900 dark:to-teal-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={ProjectHailMary} alt="Project Hail Mary" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">Project Hail Mary</h3>
+          <p className="text-gray-600 dark:text-gray-300">A gripping tale of survival in space as an astronaut embarks on a mission to save humanity.</p>
+        </div>
+      </Link>
+
+      <Link to="/where-the-crawdads-sing">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={crawdadsImage} alt="Where the Crawdads Sing" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">Where the Crawdads Sing</h3>
+          <p className="text-gray-600 dark:text-gray-300">A coming-of-age tale blended with a murder mystery in the marshes of North Carolina.</p>
+        </div>
+      </Link>
+
+      <Link to="/the-vanishing-half">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={TheVanishingHalf} alt="The Vanishing Half" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">The Vanishing Half</h3>
+          <p className="text-gray-600 dark:text-gray-300">A multigenerational saga about twin sisters whose lives diverge when one decides to live as a white woman.</p>
+        </div>
+      </Link>
+
+      <Link to="/klara-and-the-sun">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={KlaraAndtheSun} alt="Klara and the Sun" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">Klara and the Sun</h3>
+          <p className="text-gray-600 dark:text-gray-300">A story told from the perspective of an artificial friend, exploring themes of love and what it means to be human.</p>
+        </div>
+      </Link>
+
+      <Link to="/malibu-rising">
+        <div className="bg-white rounded-lg shadow-lg p-6 flex-grow flex flex-col transition-transform transform hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r from-red-100 to-red-200 dark:from-red-900 dark:to-red-800 dark:bg-[rgb(30,30,30)] w-64">
+          <img src={MalibuRising} alt="Malibu Rising" className="h-52 w-full object-cover rounded-md mb-4" />
+          <h3 className="text-xl font-bold mb-2 dark:text-white">Malibu Rising</h3>
+          <p className="text-gray-600 dark:text-gray-300">A summer story of four siblings throwing a party that changes everything, set in Malibu's vibrant beach culture.</p>
+        </div>
+      </Link>
+    </div>
+  </div>
+</section>
 
-            <section className="container mx-auto my-8">
-              <h2 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white text-center">Top Trending Books</h2>
-              <div className="overflow-x-auto">
-                <div className="flex space-x-6">
-                  <Link to="/where-the-crawdads-sing">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-900 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={crawdadsImage} alt="Where the Crawdads Sing" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">Where the Crawdads Sing</h3>
-                      <p className="text-gray-600 dark:text-white">A coming-of-age story intertwined with a murder mystery set in the marshes of North Carolina.</p>
-                    </div>
-                  </Link>
-
-                  <Link to="/the-midnight-library">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-1000 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={TheMidnightLibrary} alt="The Midnight Library" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">The Midnight Library</h3>
-                      <p className="text-gray-600 dark:text-white">A philosophical tale about choices, regrets, and the infinite possibilities of life.</p>
-                    </div>
-                  </Link>
-
-                  <Link to="/the-vanishing-half">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-1100 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={TheVanishingHalf} alt="The Vanishing Half" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">The Vanishing Half</h3>
-                      <p className="text-gray-600 dark:text-white">A multigenerational saga about twin sisters whose lives diverge when one decides to live as a white woman.</p>
-                    </div>
-                  </Link>
-
-                  <Link to="/dune">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-1200 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={Dune} alt="Dune" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">Dune</h3>
-                      <p className="text-gray-600 dark:text-white">A science fiction epic set on the desert planet of Arrakis, exploring themes of politics, religion, and ecology.</p>
-                    </div>
-                  </Link>
-
-                  <Link to="/klara-and-the-sun">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-1300 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={KlaraAndtheSun} alt="Klara and the Sun" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">Klara and the Sun</h3>
-                      <p className="text-gray-600 dark:text-white">A story told from the perspective of an artificial friend, exploring themes of love and what it means to be human.</p>
-                    </div>
-                  </Link>
-
-                  <Link to="/project-hail-mary">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-1400 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={ProjectHailMary} alt="Project Hail Mary" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">Project Hail Mary</h3>
-                      <p className="text-gray-600 dark:text-white">A gripping tale of survival in space as an astronaut embarks on a mission to save humanity.</p>
-                    </div>
-                  </Link>
-
-                  <Link to="/malibu-rising">
-                    <div className="bg-white rounded-lg shadow-lg p-6 slide-in transition-opacity duration-500 delay-1500 dark:bg-[rgb(30,30,30)] w-64 flex flex-col hover:shadow-xl hover:scale-105 hover:bg-blue-100 dark:hover:bg-blue-800">
-                      <img src={MalibuRising} alt="Malibu Rising" className="mb-4 h-54 w-full object-cover rounded-md" />
-                      <h3 className="text-xl font-bold mb-2 dark:text-white">Malibu Rising</h3>
-                      <p className="text-gray-600 dark:text-white">A summer story of four siblings throwing a party that changes everything, set in Malibu's vibrant beach culture.</p>
-                    </div>
-                  </Link>
-                </div>
-              </div>
-            </section>
             {/* Featured Author Section */}
             <section className="container mx-auto my-8 ">
               <h2 className="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Featured Author</h2>
@@ -312,6 +331,4 @@ const Home = () => {
   );
 };
 
-export default Home;
-
-
+export default Home;
\ No newline at end of file
diff --git a/client/src/Pages/Licensing.jsx b/client/src/Pages/Licensing.jsx
index 5a87390a..b1bce31b 100644
--- a/client/src/Pages/Licensing.jsx
+++ b/client/src/Pages/Licensing.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const License = () => {
   useEffect(() => {
diff --git a/client/src/Pages/LoginPage.jsx b/client/src/Pages/LoginPage.jsx
index 6d51530a..407afebb 100644
--- a/client/src/Pages/LoginPage.jsx
+++ b/client/src/Pages/LoginPage.jsx
@@ -12,8 +12,8 @@ import toast, { Toaster } from "react-hot-toast";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../Context/AuthContext";
 import { useToast } from "../Context/ToastContext";
-import Preloader from "../Components/Preloader";
-import GoogleLogin from "../Components/GoogleLogin";
+import Preloader from "../components/Preloader";
+import GoogleLogin from "../components/GoogleLogin";
 import { loginValidation } from "../validations/validation";
 
 const LoginPage = () => {
diff --git a/client/src/Pages/Newarrivals.js b/client/src/Pages/Newarrivals.js
index 3d497ac5..e976af39 100644
--- a/client/src/Pages/Newarrivals.js
+++ b/client/src/Pages/Newarrivals.js
@@ -1,132 +1,74 @@
-
 import { Link } from 'react-router-dom';
-// import BannerCard from '../Pages/BannerCard.js';
-
-import React, { useState, useEffect, useRef } from 'react'; 
-import BannerCard from '../Pages/BannerCard.js';
-
-// import { set } from 'mongoose';
-
+import React from 'react';
 
 export const books = [
   {
-    _id:"1",
+    _id: "1",
     bookTitle: "Fourth Wing",
     authorName: "Rebecca Yarros",
     imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1701980900i/61431922.jpg",
     category: "Romantasy",
   },
   {
-    _id:"2",
+    _id: "2",
     bookTitle: "The Maid",
     authorName: "Nita Prose",
     imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1643228739i/55196813.jpg",
     category: "Fiction",
   },
   {
-    _id:"3",
+    _id: "3",
     bookTitle: "Check & Mate",
     authorName: "Ali Hazelwood",
     imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1678378842i/60683957.jpg",
     category: "YOUNG ADULT FANTASY & SCIENCE FICTION",
   },
   {
-    _id:"4",
+    _id: "4",
     bookTitle: "Holly",
     authorName: "Stephen King",
     imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1674418461i/65916344.jpg",
     category: "Horror",
   },
   {
-    _id:"5",
-      bookTitle: "Tomorrow and Tomorrow",
-      authorName: "Gabrielle Zevin ",
-      imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1636978687i/58784475.jpg",
-      category: "Fiction",
-    },
-    {
-      _id:"6",
-      bookTitle: "Hidden Pictures",
-      authorName: "Jason Rekulak",
-      imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1635260162i/58724923.jpg",
-      category: "Horror",
-    },
-  
-    {
-      _id:"7",
-      bookTitle: "Holly",
-      authorName: "Stephen King",
-      imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1674418461i/65916344.jpg",
-      category: "Horror",
-    },
-  
+    _id: "5",
+    bookTitle: "Tomorrow and Tomorrow",
+    authorName: "Gabrielle Zevin",
+    imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1636978687i/58784475.jpg",
+    category: "Fiction",
+  },
+  {
+    _id: "6",
+    bookTitle: "Hidden Pictures",
+    authorName: "Jason Rekulak",
+    imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1635260162i/58724923.jpg",
+    category: "Horror",
+  },
+  {
+    _id: "7",
+    bookTitle: "Holly",
+    authorName: "Stephen King",
+    imageURL: "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1674418461i/65916344.jpg",
+    category: "Horror",
+  },
 ];
 
 function Newarrivals({ onBookClick, highlightedBookId }) {
-  // const bookRefs = useRef({}); 
-
-
-  //   const fetchRandomBooks = async () => {
-  //     setIsLoading(true);
-  //     try {
-  //       const randomStartIndex = Math.floor(Math.random() * 100);
-  //       const response = await fetch(`https://www.googleapis.com/books/v1/volumes?q=subject:fiction&maxResults=7&startIndex=${randomStartIndex}`);
-
-  //       if (!response.ok) {
-  //         throw new Error('HTTP Error! Status: ' + response.status);
-  //       }
-
-  //       const data = await response.json();
-  //       console.log(data);
-        
-
-  //       if (data.items) {
-          
-  //         const formattedBooks = data.items.map(item => ({
-  //           id: item.id,
-  //           bookTitle: item.volumeInfo.title,
-  //           authorName: item.volumeInfo.authors ? item.volumeInfo.authors[0] : 'Unknown Author',
-  //           imageURL: item.volumeInfo.imageLinks ? item.volumeInfo.imageLinks.thumbnail : 'https://via.placeholder.com/128x193.png',
-  //           category: item.volumeInfo.categories ? item.volumeInfo.categories[0] : 'Fiction'
-  //         }));
-  //         setBooks(formattedBooks);
-  //       }
-  //       else {
-  //         setError('No books found');
-  //       }
-  //     }
-  //     catch (error) {
-  //       console.error('Error fetching books: ', error);
-  //       setError('Falied to fetch books');
-  //     }
-  //     finally {
-  //       setIsLoading(false);
-  //     }
-  //   };
-
-  //   if (isLoading) {
-  //     return <div>Loading...</div>;
-  //   }
-  //   if (error) {
-  //     return <div>Error: {error}</div>;
-  //   }
-
-    return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
-          {books.map((book, index) => (
-            <Link to={`/book/${book.id}`}>
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden">
-                  <img src={book.imageURL} alt={book.bookTitle} className="w-full h-48 object-cover" />
-                  <div className="p-4 dark:bg-[rgb(30,30,30)] dark:text-white">
-                      <h3 className="font-bold text-lg mb-2 truncate dark:text-white">{book.bookTitle}</h3>
-                      <p className="text-sm text-gray-600 mb-2 dark:text-gray-400">{book.authorName}</p>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">{book.category}</p>
-                  </div>
-              </div>
-            </Link>
-          ))}
-
-      </div>
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+      {books.map((book, index) => (
+        <Link to={`/book/${book._id}`} key={index}>
+          <div className="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 transform hover:scale-105 hover:shadow-2xl hover:opacity-90">
+            <img src={book.imageURL} alt={book.bookTitle} className="w-full h-48 object-cover" />
+            <div className="p-4 dark:bg-[rgb(30,30,30)] dark:text-white">
+              <h3 className="font-bold text-lg mb-2 truncate dark:text-white">{book.bookTitle}</h3>
+              <p className="text-sm text-gray-600 mb-2 dark:text-gray-400">{book.authorName}</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">{book.category}</p>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
   );
 }
 
diff --git a/client/src/Pages/Orders.jsx b/client/src/Pages/Orders.jsx
index 5fc5866d..5e86a0c6 100644
--- a/client/src/Pages/Orders.jsx
+++ b/client/src/Pages/Orders.jsx
@@ -24,7 +24,7 @@ import {
 import SearchIcon from "@mui/icons-material/Search";
 import SortIcon from "@mui/icons-material/Sort";
 import RefreshIcon from "@mui/icons-material/Refresh";
-import Preloader from "../Components/Preloader";
+import Preloader from "../components/Preloader";
 import { useAuth } from "../Context/AuthContext";
 import { useToast } from "../Context/ToastContext";
 import { useNavigate } from "react-router-dom";
diff --git a/client/src/Pages/PrivacyPolicy.jsx b/client/src/Pages/PrivacyPolicy.jsx
index fa545b8b..9f191a6a 100644
--- a/client/src/Pages/PrivacyPolicy.jsx
+++ b/client/src/Pages/PrivacyPolicy.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 // import styled from 'styled-components';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const PrivacyPolicy = () => {
   useEffect(() => {
diff --git a/client/src/Pages/Shop.jsx b/client/src/Pages/Shop.jsx
index 1c6a7bf6..6c977a08 100644
--- a/client/src/Pages/Shop.jsx
+++ b/client/src/Pages/Shop.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Productitem from './ProductItem'
-import Preloader from '../Components/Preloader'
+import Preloader from '../components/Preloader'
 
 const Shop = () => {
   return (
diff --git a/client/src/Pages/SignUpPage.jsx b/client/src/Pages/SignUpPage.jsx
index 47737409..ac7b1fe8 100644
--- a/client/src/Pages/SignUpPage.jsx
+++ b/client/src/Pages/SignUpPage.jsx
@@ -10,8 +10,8 @@ import loginAnimation from "../Lottie-animation/loginAnimation.json";
 import axios from "axios";
 import toast, { Toaster } from "react-hot-toast";
 import { Link, useNavigate } from "react-router-dom";
-import Preloader from "../Components/Preloader";
-import GoogleLogin from "../Components/GoogleLogin";
+import Preloader from "../components/Preloader";
+import GoogleLogin from "../components/GoogleLogin";
 import { registerValidation } from "../validations/validation";
 
 const SignUpPage = () => {
diff --git a/client/src/Pages/Terms.jsx b/client/src/Pages/Terms.jsx
index 64b72adf..9375328b 100644
--- a/client/src/Pages/Terms.jsx
+++ b/client/src/Pages/Terms.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 // import styled from 'styled-components';
-import Preloader from '../Components/Preloader';
+import Preloader from '../components/Preloader';
 
 const TermsAndConditions = () => {
     useEffect(() => {
diff --git a/client/src/Pages/Wishlist.jsx b/client/src/Pages/Wishlist.jsx
index 7f46c299..1f57bf59 100644
--- a/client/src/Pages/Wishlist.jsx
+++ b/client/src/Pages/Wishlist.jsx
@@ -6,7 +6,7 @@ import {
   FaTable, 
 } from "react-icons/fa";
 import "./Wishlist.css"; // Import CSS file for wishlist component styling
-import Preloader from "../Components/Preloader";
+import Preloader from "../components/Preloader";
 import { useAuth } from "../Context/AuthContext";
 import { useToast } from "../Context/ToastContext";
 import { useNavigate } from "react-router-dom";
diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index b1fcc4d4..6600e2e6 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import {
   AppBar,
   Toolbar,
@@ -7,14 +7,17 @@ import {
   useMediaQuery,
   useTheme,
   styled,
+  Tooltip,
 } from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import StoreIcon from "@mui/icons-material/Store";
-import FavoriteIcon from "@mui/icons-material/Favorite";
-import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
-import ShoppingBagIcon from "@mui/icons-material/ShoppingBag";
-import HomeIcon from "@mui/icons-material/Home";
+import {
+  Menu as MenuIcon,
+  AccountCircle as AccountCircleIcon,
+  Store as StoreIcon,
+  Favorite as FavoriteIcon,
+  ShoppingCart as ShoppingCartIcon,
+  ShoppingBag as ShoppingBagIcon,
+  Home as HomeIcon,
+} from "@mui/icons-material";
 import { Link, useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../../Context/AuthContext";
 import { useToast } from "../../Context/ToastContext";
@@ -22,14 +25,10 @@ import sunIcon from "../../assets/sun.png"; // Adjust the path as necessary
 import moonIcon from "../../assets/moon.png"; // Adjust the path as necessary
 import logo from "../../assets/Logo.png"; // Adjust the path as necessary
 import SearchBar from "../SearchBar";
-
-import { Tooltip } from '@mui/material';
-import { pink } from '@mui/material/colors';
-import ScrollProgressBar from './ScrollProgressBar';
-
+import ScrollProgressBar from "./ScrollProgressBar";
 
 const StyledAppBar = styled(AppBar)(({ darkMode }) => ({
-  backgroundColor: darkMode ? "black" : "#002147", // Change color based on darkMode
+  backgroundColor: darkMode ? "black" : "#002147",
 }));
 
 const Logo = styled("img")({
@@ -38,15 +37,13 @@ const Logo = styled("img")({
   marginRight: "auto",
 });
 
-const StyledButton = styled(Button)(({ isActive }) => ({
-
+const NavButton = styled(Button)(({ isActive }) => ({
   fontSize: "1rem",
-  color: isActive ? "#FFD700" : "#FFF", // Highlight active page color
-  textDecoration: isActive ? "underline" : "none", // Add underline for active page
+  color: isActive ? "#FFD700" : "#FFF",
+  textDecoration: isActive ? "underline" : "none",
   "&:hover": {
     color: "#FFD700",
     textDecoration: "underline",
-
   },
 }));
 
@@ -57,270 +54,122 @@ const MenuContainer = styled("div")({
   marginLeft: "auto",
 });
 
-const MobileMenu = styled("div")(({ open }) => ({
-  display: "flex",
+const MobileMenuContainer = styled("div")(({ open }) => ({
+  display: open ? "flex" : "none",
   flexDirection: "column",
-  gap: "10px", // Added 'px' for proper gap
   position: "fixed",
-  top: "0", // Align to the top of the screen
-  right: "0",
-  backgroundColor: "#002147",
+  top: 0,
+  right: 0,
   width: "100%",
-  height: "100vh", // Full height
-  padding: "20px", // Padding for better spacing
+  height: "100vh",
+  backgroundColor: "#002147",
+  padding: "20px",
   boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.2)",
   zIndex: 1000,
-  overflowY: "auto", // Enable scrolling if needed
-  transform: open ? "translateX(0)" : "translateX(100%)", // Slide from right
-  transition: "transform 0.4s ease-in-out", // Smooth transition effect
+  overflowY: "auto",
 }));
 
-const MobileMenuButton = styled(IconButton)({
-  fill: "#fff",
-});
+const DarkModeToggle = ({ darkMode, toggleDarkMode }) => (
+  <Tooltip title={darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}>
+    <IconButton onClick={toggleDarkMode}>
+      <img
+        src={darkMode ? sunIcon : moonIcon}
+        alt="Toggle Dark Mode"
+        style={{ width: "20px", height: "20px" }}
+      />
+    </IconButton>
+  </Tooltip>
+);
 
 function Navbar({ darkMode, toggleDarkMode }) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
   const [openMenu, setOpenMenu] = useState(false);
   const { userLoggedIn, setUserLoggedIn } = useAuth();
-  let navigate = useNavigate();
+  const navigate = useNavigate();
   const { showToast } = useToast();
   const location = useLocation();
 
-  const handleMenuClick = () => {
-    setOpenMenu(!openMenu);
-  };
+  const isActive = (path) => location.pathname === path;
 
-  const handleLogout = () => {
-    try {
-      const token = sessionStorage.getItem("token");
-      if (token) {
-        sessionStorage.removeItem("token");
-      }
-    } catch (error) {
-      console.error("Error removing token from sessionStorage:", error);
-    }
+  const handleMenuClick = () => setOpenMenu((prev) => !prev);
 
+  const handleLogout = () => {
+    sessionStorage.removeItem("token");
     setUserLoggedIn(false);
     localStorage.removeItem("token");
     navigate("/", { replace: true });
     showToast("success", "", "Logged out successfully");
   };
 
-  const handleSearch = (query) => {
-    console.log("Search query:", query);
-    // Implement search logic here
-  };
-
-  const isActive = (path) => location.pathname === path;
+  const navLinks = useMemo(
+    () => [
+      { label: "Home", to: "/", icon: <HomeIcon /> },
+      { label: "Shop", to: "/shop", icon: <StoreIcon /> },
+      { label: "Wishlist", to: "/wishlist", icon: <FavoriteIcon /> },
+      { label: "Cart", to: "/cart", icon: <ShoppingCartIcon /> },
+      ...(userLoggedIn
+        ? [
+            { label: "Profile", to: "/profile", icon: <AccountCircleIcon /> },
+            { label: "Orders", to: "/orders", icon: <ShoppingBagIcon /> },
+            { label: "Logout", to: "#", onClick: handleLogout, icon: <AccountCircleIcon /> },
+          ]
+        : [{ label: "Login", to: "/login", icon: <AccountCircleIcon /> }]),
+    ],
+    [userLoggedIn]
+  );
 
   return (
-
     <StyledAppBar position="sticky" darkMode={darkMode}>
-      <Toolbar
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
+      <Toolbar style={{ justifyContent: "space-between" }}>
         <IconButton component={Link} to="/">
           <Logo src={logo} alt="Logo" />
         </IconButton>
-
         {isMobile ? (
           <>
-          <Toolbar style={{display: "flex", justifyContent: 'flex-end', alignItems: "center"}}>
-            <Tooltip title={darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}>
-            <IconButton onClick={toggleDarkMode} style={{ marginRight: '10px' }}>
-              <img src={darkMode ? sunIcon : moonIcon} alt="Toggle Dark Mode" style={{ width: '20px', height: '20px' }} />
+            <IconButton onClick={toggleDarkMode}>
+              <DarkModeToggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
             </IconButton>
-            </Tooltip>
-            
-            <MobileMenuButton onClick={handleMenuClick}>
+            <IconButton onClick={handleMenuClick}>
               <MenuIcon sx={{ fontSize: "2rem" }} />
-            </MobileMenuButton>
-            </Toolbar>
-
-            <MobileMenu open={openMenu}>
-              <IconButton
-                onClick={handleMenuClick}
-                style={{ marginBottom: "20px", color: "#fff" }}
-              >
-
- 
-                Close
-              </IconButton>
-              <StyledButton
-                color="inherit"
-                component={Link}
-                to="/"
-                isActive={isActive("/")}
-                startIcon={<HomeIcon sx={{ fontSize: "1.5rem" }} />}
-                fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
-              >
-                Home
-              </StyledButton>
-              {userLoggedIn && (
-                <StyledButton color="inherit" component={Link} to="/profile" startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />} fullWidth>
-                  Profile
-                </StyledButton>
-              )}
-              <StyledButton
-                color="inherit"
-                component={Link}
-                to="/shop"
-                isActive={isActive("/shop")}
-                startIcon={<StoreIcon sx={{ fontSize: "1.5rem" }} />}
-                fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
-              >
-                Shop
-              </StyledButton>
-              <StyledButton
-                color="inherit"
-                component={Link}
-                to="/wishlist"
-                isActive={isActive("/wishlist")}
-                startIcon={<FavoriteIcon sx={{ fontSize: "1.5rem" }} />}
-                fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
-              >
-                Wishlist
-              </StyledButton>
-              <StyledButton
-                color="inherit"
-                component={Link}
-                to="/cart"
-                isActive={isActive("/cart")}
-                startIcon={<ShoppingCartIcon sx={{ fontSize: "1.5rem" }} />}
-                fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
-              >
-                Cart
-              </StyledButton>
-
-              {userLoggedIn ? (
-                <StyledButton
-                  color="inherit"
+            </IconButton>
+            <MobileMenuContainer open={openMenu}>
+              {navLinks.map((link) => (
+                <NavButton
+                  key={link.label}
                   component={Link}
-                  to="/orders"
-                  isActive={isActive("/orders")}
-                  startIcon={<ShoppingBagIcon sx={{ fontSize: "1.5rem" }} />}
+                  to={link.to}
+                  onClick={link.onClick || handleMenuClick}
+                  startIcon={link.icon}
+                  isActive={isActive(link.to)}
                   fullWidth
-                  style={{ marginBottom: "15px" }} // Add margin for spacing
                 >
-                  Orders
-                </StyledButton>
-              ) : null}
-
-               <StyledButton
-                color="inherit"
-                component={Link}
-                to={userLoggedIn ? "#" : "/login"}
-                isActive={isActive("/login")}
-                onClick={userLoggedIn ? handleLogout : null}
-                startIcon={<AccountCircleIcon sx={{ fontSize: "1.5rem" }} />}
-                fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
-              >
-                {userLoggedIn ? "Logout" : "Login"}
-              </StyledButton> 
-            </MobileMenu>
+                  {link.label}
+                </NavButton>
+              ))}
+            </MobileMenuContainer>
           </>
         ) : (
           <MenuContainer>
             <SearchBar />
-            <StyledButton
-              color="inherit"
-              component={Link}
-              to="/"
-              isActive={isActive("/")}
-              startIcon={<HomeIcon sx={{ fontSize: "1.5rem" }} />}
-            >
-                Home
-   </StyledButton>
-              
-         
-            <StyledButton
-              color="inherit"
-              component={Link}
-              to="/shop"
-              isActive={isActive("/shop")}
-              startIcon={<StoreIcon sx={{ fontSize: "1.5rem" }} />}
-            ></StyledButton>
-            <StyledButton color="inherit" component={Link} to="/" isActive={isActive('/')} startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />}>
-              Home
-            </StyledButton>
-            {userLoggedIn && (
-              <StyledButton color="inherit" component={Link} to="/profile" startIcon={<AccountCircleIcon sx={{ fontSize: '1.5rem' }} />}>
-                Profile
-              </StyledButton>
-            )}
-            <StyledButton color="inherit" component={Link} to="/shop" isActive={isActive('/shop')} startIcon={<StoreIcon sx={{ fontSize: '1.5rem' }} />}>
-              Shop
-            </StyledButton>
-            <StyledButton
-              color="inherit"
-              component={Link}
-              to="/wishlist"
-              isActive={isActive("/wishlist")}
-              startIcon={<FavoriteIcon sx={{ fontSize: "1.5rem" }} />}
-            >
-              Wishlist
-            </StyledButton>
-            <StyledButton
-              color="inherit"
-              component={Link}
-              to="/cart"
-              isActive={isActive("/cart")}
-              startIcon={<ShoppingCartIcon sx={{ fontSize: "1.5rem" }} />}
-            >
-              Cart
-            </StyledButton>
-            {userLoggedIn ? (
-              <StyledButton
-                color="inherit"
+            {navLinks.map((link) => (
+              <NavButton
+                key={link.label}
                 component={Link}
-                to="/orders"
-                isActive={isActive("/orders")}
-                startIcon={<ShoppingBagIcon sx={{ fontSize: "1.5rem" }} />}
-              >
-                Orders
-              </StyledButton>
-            ) : null}
-
-            <StyledButton
-              color="inherit"
-              component={Link}
-              to={userLoggedIn ? "#" : "/login"}
-              isActive={isActive("/login")}
-              onClick={userLoggedIn ? handleLogout : null}
-              startIcon={<AccountCircleIcon sx={{ fontSize: "1.5rem" }} />}
-            >
-              {userLoggedIn ? "Logout" : "Login"}
-            </StyledButton>
-            <Tooltip
-              title={darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
-            >
-              <IconButton
-                onClick={toggleDarkMode}
-                style={{ marginLeft: "auto", marginRight: "10px" }}
+                to={link.to}
+                onClick={link.onClick}
+                startIcon={link.icon}
+                isActive={isActive(link.to)}
               >
-                <img
-                  src={darkMode ? sunIcon : moonIcon}
-                  alt="Toggle Dark Mode"
-                  style={{ width: "20px", height: "20px" }}
-                />
-              </IconButton>
-            </Tooltip>
+                {link.label}
+              </NavButton>
+            ))}
+            <DarkModeToggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
           </MenuContainer>
-          )}
-        </Toolbar>
-      </StyledAppBar>
-    );
+        )}
+      </Toolbar>
+    </StyledAppBar>
+  );
 }
 
 export default Navbar;
diff --git a/client/src/components/SearchBar.js b/client/src/components/SearchBar.jsx
similarity index 100%
rename from client/src/components/SearchBar.js
rename to client/src/components/SearchBar.jsx
diff --git a/client/src/index.js b/client/src/index.js
index 09e5b983..05fcf680 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './App.js';
 import { AuthContextProvider } from './Context/AuthContext.js';
 import { ToastContextProvider } from './Context/ToastContext.js';
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from './reportWebVitals.js';